Merge branch 'dev' into add-design-elements-to-reports

# Conflicts: # src/javascript/app/Modules/Reports/Components/market-symbol-icon-row.jsx
binary-com · Jul 3, 2019 · ab10694 · ab10694
2 parents cbb3efa + 0fed562
commit ab10694
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 29 deletions.
diff --git a/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx b/src/javascript/app/App/Components/Elements/ContractDrawer/contract-drawer.jsx
@@ -91,7 +91,7 @@ class ContractDrawer extends Component {
                             <div className='contract-card__type'>
                                 <ContractTypeCell
                                     type={contract_info.contract_type}
-                                    is_high_low={Shortcode.isHighLow(contract_info.shortcode)}
+                                    is_high_low={Shortcode.isHighLow({ shortcode: contract_info.shortcode })}
                                 />
                             </div>
                         </div>

diff --git a/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx b/src/javascript/app/App/Components/Elements/PositionsDrawer/positions-drawer-card.jsx
@@ -61,7 +61,7 @@ const PositionsDrawerCard = ({
                 <div className='positions-drawer-card__type'>
                     <ContractTypeCell
                         type={type}
-                        is_high_low={Shortcode.isHighLow(contract_info.shortcode)}
+                        is_high_low={Shortcode.isHighLow({ shortcode: contract_info.shortcode })}
                     />
                 </div>
             </div>

diff --git a/src/javascript/app/Assets/Trading/Categories/trade-categories-gif.jsx b/src/javascript/app/Assets/Trading/Categories/trade-categories-gif.jsx
@@ -15,48 +15,48 @@ import ImageTouchDark        from 'Images/app/trade_explanations/img-touch-no-to
 import ImageTouchLight       from 'Images/app/trade_explanations/img-touch-no-touch-light.svg';
 
 // TODO: Replace static image svgs with themed GIFs or animated SVGs
-const TradeCategoriesGIF = ({ category, className, is_dark }) => {
+const TradeCategoriesGIF = ({ category, className, is_dark_theme }) => {
     let TradeTypeGIF;
     const themed_classes = classNames(className,
         {
-            [`${className}--dark`] : is_dark,
-            [`${className}--light`]: !is_dark,
+            [`${className}--dark`] : is_dark_theme,
+            [`${className}--light`]: !is_dark_theme,
         }
     );
     if (category) {
         switch (category) {
             case ('rise_fall' || 'rise_fall_equal'):
-                TradeTypeGIF = is_dark ?
+                TradeTypeGIF = is_dark_theme ?
                     (<ImageRiseFallDark className={themed_classes} />)
                     :
                     (<ImageRiseFallLight className={themed_classes} />);
                 break;
             case 'high_low':
-                TradeTypeGIF = is_dark ?
+                TradeTypeGIF = is_dark_theme ?
                     (<ImageHigherLowerDark className={themed_classes} />)
                     :
                     (<ImageHigherLowerLight className={themed_classes} />);
                 break;
             case 'match_diff':
-                TradeTypeGIF = is_dark ?
+                TradeTypeGIF = is_dark_theme ?
                     (<ImageMatchesDark className={themed_classes} />)
                     :
                     (<ImageMatchesLight className={themed_classes} />);
                 break;
             case 'even_odd':
-                TradeTypeGIF = is_dark ?
+                TradeTypeGIF = is_dark_theme ?
                     (<ImageEvenOddDark className={themed_classes} />)
                     :
                     (<ImageEvenOddLight className={themed_classes} />);
                 break;
             case 'over_under':
-                TradeTypeGIF = is_dark ?
+                TradeTypeGIF = is_dark_theme ?
                     (<ImageOverUnderDark className={themed_classes} />)
                     :
                     (<ImageOverUnderLight className={themed_classes} />);
                 break;
             case 'touch':
-                TradeTypeGIF = is_dark ?
+                TradeTypeGIF = is_dark_theme ?
                     (<ImageTouchDark className={themed_classes} />)
                     :
                     (<ImageTouchLight className={themed_classes} />);
@@ -74,9 +74,9 @@ const TradeCategoriesGIF = ({ category, className, is_dark }) => {
 };
 
 TradeCategoriesGIF.propTypes = {
-    category : PropTypes.string,
-    className: PropTypes.string,
-    is_dark  : PropTypes.bool,
+    category     : PropTypes.string,
+    className    : PropTypes.string,
+    is_dark_theme: PropTypes.bool,
 };
 
 export default TradeCategoriesGIF;
diff --git a/src/javascript/app/Assets/icon.jsx b/src/javascript/app/Assets/icon.jsx
@@ -98,6 +98,7 @@ class Icon extends React.PureComponent {
             className    : this.props.className,
             classNamePath: this.props.classNamePath,
             classNameRect: this.props.classNameRect,
+            is_dark_theme: this.props.is_dark_theme,
             is_disabled  : this.props.is_disabled,
             onClick      : this.props.onClick,
             onMouseEnter : this.props.onMouseEnter,
@@ -122,6 +123,7 @@ Icon.propTypes = {
     classNamePath: PropTypes.string,
     classNameRect: PropTypes.string,
     icon         : PropTypes.string,
+    is_dark_theme: PropTypes.bool,
     is_disabled  : PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
     onClick      : PropTypes.func,
     type         : PropTypes.string,

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
@@ -38,7 +38,7 @@ const MarketSymbolIconRow = ({ payload, show_description }) => {
                     >
                         <Icon
                             icon='IconTradeType'
-                            type={(Shortcode.isHighLow())
+                            type={(Shortcode.isHighLow({ shortcode_info: info_from_shortcode }))
                                 ? `${info_from_shortcode.category.toLowerCase()}_barrier`
                                 : info_from_shortcode.category.toLowerCase()}
                         />

diff --git a/src/javascript/app/Modules/Reports/Helpers/shortcode.js b/src/javascript/app/Modules/Reports/Helpers/shortcode.js
@@ -1,27 +1,28 @@
 const Shortcode = (() => {
-    let info_from_shortcode = {};
-
     const extractInfoFromShortcode = (shortcode) => {
-        const pattern = new RegExp('^([A-Z]+)_((OTC_[A-Z0-9]+)|R_[\\d]{2,3}|[A-Z]+)_([\\d.\\d]+)_(\\d+\\w)_(\\d+\\w)_(S[\\d.\\d]+P|(?:\\d+))_(\\d+)'); // Used to get market name from shortcode
+        const info_from_shortcode = {
+            category  : '',
+            underlying: '',
+            barrier_1 : '',
+        };
+
+        const pattern = new RegExp('^([A-Z]+)_((OTC_[A-Z0-9]+)|R_[\\d]{2,3}|[A-Z]+)'); // Used to get market name from shortcode
         const extracted = pattern.exec(shortcode);
         if (extracted !== null) {
             info_from_shortcode.category   = extracted[1].toLowerCase();
             info_from_shortcode.underlying = extracted[2];
-            info_from_shortcode.atm        = extracted[7];
+
+            if (/^(CALL|PUT)$/i.test(info_from_shortcode.category)) {
+                info_from_shortcode.barrier_1 = shortcode.split('_').slice(-2)[0];
+            }
         }
 
         return info_from_shortcode;
     };
 
-    const isHighLow = (shortcode) => {
-        if (shortcode) {
-            info_from_shortcode = extractInfoFromShortcode(shortcode);
-        }
-        if (/CALL|PUT/i.test(info_from_shortcode.category)) {
-            return !/^S0P$/.test(info_from_shortcode.atm);
-        }
-
-        return false;
+    const isHighLow = ({ shortcode = '', shortcode_info = '' }) => {
+        const info_from_shortcode = shortcode ? extractInfoFromShortcode(shortcode) : shortcode_info;
+        return (info_from_shortcode && info_from_shortcode.barrier_1) ? !/^S0P$/.test(info_from_shortcode.barrier_1) : false;
     };
 
     return {

diff --git a/src/javascript/app/Modules/Trading/Components/Form/TradeTypeInfo/trade-type-info-item.jsx b/src/javascript/app/Modules/Trading/Components/Form/TradeTypeInfo/trade-type-info-item.jsx
@@ -41,7 +41,7 @@ const TradeTypeInfoItem = ({
                                     icon='TradeCategoriesGIF'
                                     category={type.value}
                                     className='trade-type-info-dialog__gif-image'
-                                    is_dark={is_dark_theme}
+                                    is_dark_theme={is_dark_theme}
                                 />
                             </div>
                             <div className='trade-type-info-dialog__content'>