Kate / DTRA-321 / TS migration of trade-params and trade-params-mobile (

#6) * refactor: migrate trade params and started mobile version * refactor: ts migration of trade params mobile * chore: add nessasary prop * refactor: apply suggestions * chore: change todo text * refactor: add import
kate-deriv · Jul 31, 2023 · 7e10d2f · 7e10d2f
1 parent 50d5a86
commit 7e10d2f
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 79 deletions.
diff --git a/packages/components/src/components/div100vh-container/div100vh-container.tsx b/packages/components/src/components/div100vh-container/div100vh-container.tsx
@@ -16,7 +16,7 @@ import Div100vh from 'react-div-100vh';
 
 type TDiv100vhContainer = {
     id?: string;
-    height_offset: string;
+    height_offset?: string;
     is_bypassed?: boolean;
     is_disabled?: boolean;
     max_height_offset?: string;
@@ -30,7 +30,7 @@ const Div100vhContainer = ({
     is_bypassed = false,
     is_disabled = false,
     id,
-    height_offset,
+    height_offset = '',
     max_autoheight_offset,
 }: React.PropsWithChildren<TDiv100vhContainer>) => {
     const height_rule = height_offset ? `calc(100rvh - ${height_offset})` : 'calc(100rvh)';

diff --git a/packages/components/src/components/numpad/numpad.tsx b/packages/components/src/components/numpad/numpad.tsx
@@ -22,7 +22,7 @@ type TNumpad = {
     v?: string;
     render?: (props: { value: string; className: string }) => React.ReactNode;
     submit_label: string;
-    value: string;
+    value: string | number;
     format?: (v: string) => number | string;
     onValueChange: (val: number | string) => void;
     onValidate: (default_value: number | string) => boolean | 'error';
@@ -71,7 +71,7 @@ const Numpad = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [default_value, value]);
 
-    const updateValue = (val: string) => {
+    const updateValue = (val: string | number) => {
         setValue(val);
         if (onValueChange) onValueChange(val);
     };

diff --git a/packages/components/src/components/tabs/tab.tsx b/packages/components/src/components/tabs/tab.tsx
@@ -4,15 +4,15 @@ import Counter from '../counter';
 import Icon from '../icon';
 
 type TTabProps = {
-    active_icon_color: string;
+    active_icon_color?: string;
     active_tab_ref?: React.RefObject<HTMLLIElement> | null;
     bottom?: boolean;
     className?: string;
     count: number;
     header_content: React.ReactElement;
     header_fit_content?: boolean;
-    icon_color: string;
-    icon_size: number;
+    icon_color?: string;
+    icon_size?: number;
     icon: string;
     id?: string;
     is_active: boolean;
@@ -25,17 +25,17 @@ type TTabProps = {
 };
 
 const Tab = ({
-    active_icon_color,
+    active_icon_color = '',
     active_tab_ref,
-    bottom,
-    className,
+    bottom = false,
+    className = '',
     count,
     header_content,
-    header_fit_content,
-    icon_color,
-    icon_size,
+    header_fit_content = false,
+    icon_color = '',
+    icon_size = 0,
     icon,
-    id,
+    id = '',
     is_active,
     is_label_hidden,
     is_scrollable,

diff --git a/packages/components/src/components/tabs/tabs.tsx b/packages/components/src/components/tabs/tabs.tsx
@@ -14,20 +14,20 @@ declare module 'react' {
 }
 
 type TTabsProps = RouteComponentProps & {
-    active_icon_color: string;
+    active_icon_color?: string;
     active_index?: number;
-    background_color: string;
+    background_color?: string;
     bottom?: boolean;
-    center: boolean;
-    children: React.ReactElement[];
+    center?: boolean;
+    children: (React.ReactElement | null)[];
     className?: string;
-    fit_content: boolean;
+    fit_content?: boolean;
     has_active_line?: boolean;
     has_bottom_line?: boolean;
     header_fit_content?: boolean;
     history: History;
-    icon_color: string;
-    icon_size: number;
+    icon_color?: string;
+    icon_size?: number;
     is_100vw?: boolean;
     is_full_width?: boolean;
     is_overflow_hidden?: boolean;
@@ -39,27 +39,27 @@ type TTabsProps = RouteComponentProps & {
 };
 
 const Tabs = ({
-    active_icon_color,
+    active_icon_color = '',
     active_index = 0,
-    background_color,
-    bottom,
-    center,
+    background_color = '',
+    bottom = false,
+    center = false,
     children,
-    className,
-    fit_content,
+    className = '',
+    fit_content = false,
     has_active_line = true,
     has_bottom_line = true,
-    header_fit_content,
+    header_fit_content = false,
     history,
-    icon_color,
-    icon_size,
-    is_100vw,
-    is_full_width,
-    is_overflow_hidden,
-    is_scrollable,
+    icon_color = '',
+    icon_size = 0,
+    is_100vw = false,
+    is_full_width = false,
+    is_overflow_hidden = false,
+    is_scrollable = false,
     onTabItemClick,
-    should_update_hash,
-    single_tab_has_no_label,
+    should_update_hash = false,
+    single_tab_has_no_label = false,
     top,
 }: TTabsProps) => {
     const [active_line_style, updateActiveLineStyle] = React.useState({});
@@ -99,7 +99,7 @@ const Tabs = ({
                 initial_index_to_show = hash_index;
             } else {
                 // if no hash is in url but component has passed hash prop, set hash of the tab shown
-                const child_props = children[initial_index_to_show].props;
+                const child_props = children[initial_index_to_show]?.props;
                 const current_id = child_props && child_props.hash;
                 if (current_id) {
                     pushHash(current_id);
@@ -128,7 +128,7 @@ const Tabs = ({
 
     const onClickTabItem = (index: number) => {
         if (should_update_hash) {
-            const hash = children[index].props['data-hash'];
+            const hash = children[index]?.props['data-hash'];
             pushHash(hash);
         }
         setActiveTabIndex(index);

diff --git a/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.jsx b/packages/trader/src/Modules/Trading/Components/Elements/mobile-widget.jsx
@@ -3,7 +3,7 @@ import { Money } from '@deriv/components';
 import { localize, Localize } from '@deriv/translations';
 import { getExpiryType, getDurationMinMaxValues, getLocalizedBasis } from '@deriv/shared';
 import { MultiplierAmountWidget } from 'Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx';
-import TradeParamsModal from '../../Containers/trade-params-mobile.jsx';
+import TradeParamsModal from '../../Containers/trade-params-mobile';
 import { observer, useStore } from '@deriv/stores';
 import { useTraderStore } from 'Stores/useTraderStores';
 

diff --git a/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount-mobile.tsx b/packages/trader/src/Modules/Trading/Components/Form/TradeParams/amount-mobile.tsx
@@ -13,7 +13,7 @@ type TBasis = {
     duration_value: number;
     toggleModal: () => void;
     has_duration_error: boolean;
-    selected_basis: string;
+    selected_basis: string | number;
     setSelectedAmount: (basis: string, num: string | number) => void;
     setAmountError: (has_error: boolean) => void;
 };
@@ -145,10 +145,10 @@ const Basis = observer(
 );
 
 type TAmountMobile = React.ComponentProps<typeof Basis> & {
-    amount_tab_idx: number;
+    amount_tab_idx?: number;
     setAmountTabIdx: React.ComponentProps<typeof Tabs>['onTabItemClick'];
-    stake_value: string;
-    payout_value: string;
+    stake_value: string | number;
+    payout_value: string | number;
 };
 
 const Amount = observer(

diff --git a/packages/trader/src/Modules/Trading/Components/Form/screen-large.jsx b/packages/trader/src/Modules/Trading/Components/Form/screen-large.jsx
@@ -5,7 +5,7 @@ import { TradeParamsLoader } from 'App/Components/Elements/ContentLoader';
 import Fieldset from 'App/Components/Form/fieldset.jsx';
 import ContractType from '../../Containers/contract-type.jsx';
 import Purchase from '../../Containers/purchase.jsx';
-import TradeParams from '../../Containers/trade-params.jsx';
+import TradeParams from '../../Containers/trade-params';
 
 const ScreenLarge = ({ is_market_closed, is_trade_enabled }) => (
     <div

diff --git a/packages/trader/src/Modules/Trading/Components/Form/screen-small.jsx b/packages/trader/src/Modules/Trading/Components/Form/screen-small.jsx
@@ -14,7 +14,7 @@ import {
 } from 'Modules/Trading/Components/Form/TradeParams/Multiplier/widgets.jsx';
 import AccumulatorsAmountMobile from 'Modules/Trading/Components/Form/TradeParams/Accumulator/accumulators-amount-mobile.jsx';
 import AccumulatorsInfoDisplay from 'Modules/Trading/Components/Form/TradeParams/Accumulator/accumulators-info-display.jsx';
-import { BarrierMobile, LastDigitMobile } from 'Modules/Trading/Containers/trade-params-mobile.jsx';
+import { BarrierMobile, LastDigitMobile } from 'Modules/Trading/Containers/trade-params-mobile';
 import ContractType from 'Modules/Trading/Containers/contract-type.jsx';
 import MobileWidget from 'Modules/Trading/Components/Elements/mobile-widget.jsx';
 import Purchase from 'Modules/Trading/Containers/purchase.jsx';