Added popover to market symbol icons

msamprz · Jun 12, 2019 · 9e5349c · 9e5349c
1 parent d654eaf
commit 9e5349c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/src/javascript/app/App/Components/Elements/Popover/popover.jsx b/src/javascript/app/App/Components/Elements/Popover/popover.jsx
@@ -26,7 +26,7 @@ class Popover extends React.PureComponent {
             is_open         : !this.state.is_open && Boolean(this.props.message),
             target_rectangle: this.target_reference.current.getBoundingClientRect(),
         });
-    }
+    };
 
     render() {
         const {
@@ -35,6 +35,7 @@ class Popover extends React.PureComponent {
             classNameBubble,
             classNameTarget,
             classNameTargetIcon,
+            disable_target_icon,
             has_error,
             icon,
             margin,
@@ -49,11 +50,13 @@ class Popover extends React.PureComponent {
                 onMouseLeave={this.toggleIsOpen}
             >
                 <div className={classNames(classNameTarget, 'popover__target')} ref={this.target_reference}>
-                    <i className={message ? 'popover__target__icon' : 'popover__target__icon--disabled'}>
-                        {(icon === 'info')     && <Icon icon='IconInfoOutline' className={icon_class_name} /> }
-                        {(icon === 'question') && <Icon icon='IconQuestion'    className={icon_class_name} />}
-                        {(icon === 'dot')      && <Icon icon='IconRedDot'      className={icon_class_name} />}
-                    </i>
+                    { !disable_target_icon &&
+                        <i className={message ? 'popover__target__icon' : 'popover__target__icon--disabled'}>
+                            {(icon === 'info')     && <Icon icon='IconInfoOutline' className={icon_class_name} /> }
+                            {(icon === 'question') && <Icon icon='IconQuestion'    className={icon_class_name} />}
+                            {(icon === 'dot')      && <Icon icon='IconRedDot'      className={icon_class_name} />}
+                        </i>
+                    }
 
                     { children }
                 </div>
@@ -79,6 +82,7 @@ Popover.propTypes = {
     classNameBubble    : PropTypes.string,
     classNameTarget    : PropTypes.string,
     classNameTargetIcon: PropTypes.string,
+    disable_target_icon: PropTypes.bool,
     has_error          : PropTypes.bool,
     icon               : PropTypes.string,
     margin             : PropTypes.number,

diff --git a/src/javascript/app/Constants/contract.js b/src/javascript/app/Constants/contract.js
@@ -127,5 +127,5 @@ const getContractConfig = is_high_low => ({
     ...getUnsupportedContracts(),
 });
 
-export const getContractTypeDisplay = (type, is_high_low = false) => (getContractConfig(is_high_low)[type] ? getContractConfig(is_high_low)[type].name : '');
-export const getContractTypePosition = (type, is_high_low = false) => (getContractConfig(is_high_low)[type] ? getContractConfig(is_high_low)[type].position : 'top');
+export const getContractTypeDisplay = (type, is_high_low = false) => (getContractConfig(is_high_low)[type.toUpperCase()] ? getContractConfig(is_high_low)[type.toUpperCase()].name : '');
+export const getContractTypePosition = (type, is_high_low = false) => (getContractConfig(is_high_low)[type.toUpperCase()] ? getContractConfig(is_high_low)[type.toUpperCase()].position : 'top');
diff --git a/src/javascript/app/Modules/Reports/Components/market-symbol-icon-row.jsx b/src/javascript/app/Modules/Reports/Components/market-symbol-icon-row.jsx
@@ -1,8 +1,10 @@
-import PropTypes                from 'prop-types';
-import React                    from 'react';
-import { UnderlyingIcon }       from 'App/Components/Elements/underlying-icon.jsx';
-import Icon                     from 'Assets/icon.jsx';
-import { getMarketInformation } from '../Helpers/market-underyling';
+import PropTypes                  from 'prop-types';
+import React                      from 'react';
+import { UnderlyingIcon }         from 'App/Components/Elements/underlying-icon.jsx';
+import { Popover }                from 'App/Components/Elements/Popover';
+import Icon                       from 'Assets/icon.jsx';
+import { getContractTypeDisplay } from 'Constants';
+import { getMarketInformation }   from '../Helpers/market-underyling';
 
 const MarketSymbolIconRow = ({ payload, show_description }) => {
     const should_show_category_icon = typeof payload.shortcode === 'string';
@@ -12,12 +14,26 @@ const MarketSymbolIconRow = ({ payload, show_description }) => {
         return (
             <div className='market-symbol-icon'>
                 <div className='market-symbol-icon-name'>
-                    <UnderlyingIcon market={market_information.underlying} />
+                    <Popover
+                        classNameBubble='market-symbol-icon__tooltip'
+                        alignment='top'
+                        message={market_information.underlying}
+                        disable_target_icon
+                    >
+                        <UnderlyingIcon market={market_information.underlying} />
+                    </Popover>
                     {show_description && payload.display_name}
                 </div>
 
                 <div className='market-symbol-icon-category'>
-                    <Icon icon='IconTradeType' type={market_information.category} />
+                    <Popover
+                        classNameBubble='market-symbol-icon__tooltip'
+                        alignment='top'
+                        message={getContractTypeDisplay(market_information.category)}
+                        disable_target_icon
+                    >
+                        <Icon icon='IconTradeType' type={market_information.category} />
+                    </Popover>
                     {show_description && market_information.category}
                 </div>
             </div>