henry/92021/fix: make trade types clickable in responsive for digits …

…contracts (binary-com#8046) * fix: make trade types clickable in responsive for digits contracts * fix: keep trade params collapsed initially * fix: merge issues * fix: merge issue solved * fix: Empty-Commit --------- Co-authored-by: Henry Hein <henryhein@Henry-Heins-MacBook-Pro-T90XTJ00Q4.local>
henry-deriv · Apr 5, 2023 · c1453e4 · c1453e4
1 parent 90ea903
commit c1453e4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 deletions.
diff --git a/packages/components/src/components/swipeable-wrapper/swipeable-wrapper.scss b/packages/components/src/components/swipeable-wrapper/swipeable-wrapper.scss
@@ -29,5 +29,9 @@
         display: flex;
         padding: 1.6rem 0.8rem;
         justify-content: space-between;
+
+        &--is-expanded {
+            bottom: 9.8rem;
+        }
     }
 }
diff --git a/packages/components/src/components/swipeable-wrapper/swipeable-wrapper.tsx b/packages/components/src/components/swipeable-wrapper/swipeable-wrapper.tsx
@@ -1,15 +1,22 @@
-import classNames from 'classnames';
 import React from 'react';
 import { SwipeableProps, useSwipeable } from 'react-swipeable';
 import Icon from '../icon';
+import classNames from 'classnames';
 
 type TSwipeableWrapper = {
     className?: string;
     onChange?: (prop?: number) => void;
     is_disabled?: boolean;
+    is_trade_params_expanded?: boolean;
 } & SwipeableProps;
 
-const SwipeableWrapper = ({ children, className, onChange, ...props }: React.PropsWithChildren<TSwipeableWrapper>) => {
+const SwipeableWrapper = ({
+    children,
+    className,
+    onChange,
+    is_trade_params_expanded = false,
+    ...props
+}: React.PropsWithChildren<TSwipeableWrapper>) => {
     const [active_index, setActiveIndex] = React.useState(0);
 
     React.useEffect(() => {
@@ -44,7 +51,6 @@ const SwipeableWrapper = ({ children, className, onChange, ...props }: React.Pro
         onSwipedRight: swipedRight,
         ...props,
     });
-
     return (
         <div className='dc-swipeable'>
             <div
@@ -58,7 +64,11 @@ const SwipeableWrapper = ({ children, className, onChange, ...props }: React.Pro
                 {childrenWithWrapperDiv}
             </div>
             {!props.is_disabled && (
-                <nav className='dc-swipeable__nav'>
+                <nav
+                    className={classNames('dc-swipeable__nav', {
+                        'dc-swipeable__nav--is-expanded': is_trade_params_expanded,
+                    })}
+                >
                     <Icon
                         className='dc-swipeable__nav__item'
                         icon='IcChevronDoubleLeft'

diff --git a/packages/trader/src/Modules/Trading/Containers/trade.jsx b/packages/trader/src/Modules/Trading/Containers/trade.jsx
@@ -56,6 +56,7 @@ const Trade = ({
     symbol,
     is_synthetics_available,
     is_synthetics_trading_market_available,
+    is_trade_params_expanded,
     is_vanilla,
 }) => {
     const [digits, setDigits] = React.useState([]);
@@ -199,6 +200,7 @@ const Trade = ({
                                 should_show_active_symbols_loading
                             }
                             className={classNames({ 'vanilla-trade-chart': is_vanilla })}
+                            is_trade_params_expanded={is_trade_params_expanded}
                         >
                             {show_digits_stats && <DigitsWidget digits={digits} tick={tick} />}
                             <ChartTrade
@@ -253,6 +255,7 @@ export default connect(({ client, common, modules, ui }) => ({
     should_show_active_symbols_loading: modules.trade.should_show_active_symbols_loading,
     is_chart_loading: modules.trade.is_chart_loading,
     is_market_closed: modules.trade.is_market_closed,
+    is_trade_params_expanded: modules.trade.is_trade_params_expanded,
     show_digits_stats: modules.trade.show_digits_stats,
     is_trade_enabled: modules.trade.is_trade_enabled,
     prepareTradeStore: modules.trade.prepareTradeStore,

diff --git a/packages/trader/src/Stores/Modules/Trading/trade-store.js b/packages/trader/src/Stores/Modules/Trading/trade-store.js
@@ -905,6 +905,7 @@ export default class TradeStore extends BaseStore {
         obj_old_values = {},
         should_forget_first = true
     ) {
+        if (this.is_trade_params_expanded === true) this.setIsTradeParamsExpanded(false);
         // To switch to rise_fall_equal contract type when allow equal is checked on first page refresh or
         // when switch back to Rise/Fall from another contract type i.e.
         if (obj_new_values.contract_type && obj_new_values.contract_type === 'rise_fall' && !!this.is_equal) {