From 6b12ac00fdca39c868ffdd9006e37b8222e2dd91 Mon Sep 17 00:00:00 2001 From: kate-deriv Date: Thu, 17 Oct 2024 09:47:13 +0300 Subject: [PATCH 1/2] feat: wrap with cb hook and add new prop for blur --- package-lock.json | 10 +++--- packages/account/package.json | 2 +- packages/core/package.json | 2 +- packages/trader/package.json | 2 +- .../TradeParameters/Barrier/barrier.tsx | 28 +++++++++++------ .../TradeParameters/Duration/duration.tsx | 7 +++-- .../GrowthRate/growth-rate.tsx | 12 ++++--- .../last-digit-prediction.tsx | 12 +++++-- .../TradeParameters/Multiplier/multiplier.tsx | 7 +++-- .../PayoutPerPoint/payout-per-point.tsx | 10 +++++- .../RiskManagement/risk-management.tsx | 10 ++++-- .../TradeParameters/Stake/stake.tsx | 31 ++++++++++++------- .../TradeParameters/Strike/strike.tsx | 9 +++++- .../TakeProfit/take-profit.tsx | 10 ++++-- 14 files changed, 105 insertions(+), 47 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2bcb1018e3f2..77473be3f6ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "@deriv-com/analytics": "1.14.0", "@deriv-com/auth-client": "1.0.29", "@deriv-com/quill-tokens": "2.0.4", - "@deriv-com/quill-ui": "1.16.20", + "@deriv-com/quill-ui": "1.17.0", "@deriv-com/translations": "1.3.9", "@deriv-com/ui": "1.36.4", "@deriv-com/utils": "^0.0.36", @@ -3003,11 +3003,11 @@ } }, "node_modules/@deriv-com/quill-ui": { - "version": "1.16.20", - "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.16.20.tgz", - "integrity": "sha512-QQ89adtZIZN+xILX7tZJOb7M9yR6CRmn0NM08/Y2hCveB3JNMMJM7X95O81BSvTKryZ9ZK9R3Kz+DVIHF0bFfw==", + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.17.0.tgz", + "integrity": "sha512-jd4U59IC5YADM49XVflpi6VuWgHZnWwCZKh5y3z5HS53/W2OwUOLWcSfhOmvjo23OjqdK/OYsHM5O6iPiPvP9w==", "dependencies": { - "@deriv-com/quill-tokens": "^2.0.12", + "@deriv-com/quill-tokens": "^2.0.13", "@deriv/quill-icons": "^1.22.10", "@headlessui/react": "1.7.18", "dayjs": "^1.11.11", diff --git a/packages/account/package.json b/packages/account/package.json index 9d8dc185a21a..fb8c38f74155 100644 --- a/packages/account/package.json +++ b/packages/account/package.json @@ -35,7 +35,7 @@ "@deriv-com/utils": "^0.0.36", "@deriv-com/ui": "1.36.4", "@deriv/api": "^1.0.0", - "@deriv-com/quill-ui": "1.16.20", + "@deriv-com/quill-ui": "1.17.0", "@deriv/components": "^1.0.0", "@deriv/hooks": "^1.0.0", "@deriv/quill-icons": "1.23.3", diff --git a/packages/core/package.json b/packages/core/package.json index 82653d897e77..e650aefa7278 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -98,7 +98,7 @@ "@datadog/browser-rum": "^5.11.0", "@deriv-com/analytics": "1.14.0", "@deriv-com/quill-tokens": "2.0.4", - "@deriv-com/quill-ui": "1.16.20", + "@deriv-com/quill-ui": "1.17.0", "@deriv-com/translations": "1.3.9", "@deriv-com/ui": "1.36.4", "@deriv-com/utils": "^0.0.36", diff --git a/packages/trader/package.json b/packages/trader/package.json index 182d69638cbd..28462d6b40cf 100644 --- a/packages/trader/package.json +++ b/packages/trader/package.json @@ -90,7 +90,7 @@ "dependencies": { "@deriv-com/analytics": "1.14.0", "@deriv-com/quill-tokens": "2.0.4", - "@deriv-com/quill-ui": "1.16.20", + "@deriv-com/quill-ui": "1.17.0", "@deriv-com/utils": "^0.0.36", "@deriv-com/ui": "1.36.4", "@deriv/api-types": "1.0.172", diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx index 4661616f8c86..ce63adcd2ad3 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx @@ -19,15 +19,19 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => { const [initialBarrierValue, setInitialBarrierValue] = React.useState(''); const isDays = duration_unit == 'd'; - const onClose = (is_saved = false) => { - if (is_open) { - if (!is_saved) { - onChange({ target: { name: 'barrier_1', value: initialBarrierValue } }); + const onClose = React.useCallback( + (is_saved = false) => { + if (is_open) { + if (!is_saved) { + onChange({ target: { name: 'barrier_1', value: initialBarrierValue } }); + } + setV2ParamsInitialValues({ value: '', name: 'barrier_1' }); + setIsOpen(false); } - setV2ParamsInitialValues({ value: '', name: 'barrier_1' }); - setIsOpen(false); - } - }; + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [initialBarrierValue, is_open] + ); const barrier_carousel_pages = [ { @@ -52,7 +56,13 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => { onClick={() => setIsOpen(true)} className={clsx('trade-params__option', is_minimized && 'trade-params__option--minimized')} /> - onClose(false)} position='left' expandable={false}> + { return () => clearTimeout(start_duration); }, [symbol, contract_type, duration_min_max, duration_units_list]); + const onClose = React.useCallback(() => setOpen(false), []); + const getInputValues = () => { const formatted_date = end_date.toLocaleDateString('en-GB', { day: 'numeric', @@ -175,11 +177,10 @@ const Duration = observer(({ is_minimized }: TDurationProps) => { /> { - setOpen(false); - }} + onClose={onClose} position='left' expandable={false} + shouldBlurOnClose={is_open} > { const handleGrowthRateChange = (rate: number) => { onChange({ target: { name: 'growth_rate', value: rate } }); }; - const onActionSheetClose = () => { - setIsOpen(false); - }; + const onActionSheetClose = React.useCallback(() => setIsOpen(false), []); const action_sheet_content = [ { @@ -103,7 +101,13 @@ const GrowthRate = observer(({ is_minimized }: TGrowthRateProps) => { value={`${getGrowthRatePercentage(growth_rate)}%`} variant='fill' /> - + { if (last_digit !== selected_digit) handleLastDigitChange(selected_digit); }; - const onActionSheetClose = () => { + const onActionSheetClose = React.useCallback(() => { setIsOpen(false); setSelectedDigit(last_digit); - }; + }, [last_digit]); if (is_minimized) return ( @@ -48,7 +48,13 @@ const LastDigitPrediction = observer(({ is_minimized }: TLastDigitSelectorProps) className={clsx('trade-params__option', 'trade-params__option--minimized')} onClick={() => setIsOpen(true)} /> - + } /> diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Multiplier/multiplier.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Multiplier/multiplier.tsx index a93fc9cfe078..3e1a732368dc 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Multiplier/multiplier.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Multiplier/multiplier.tsx @@ -25,6 +25,8 @@ const Multiplier = observer(({ is_minimized }: TMultiplierProps) => { onChange({ target: { name: 'multiplier', value: multiplier } }); }; + const onClose = React.useCallback(() => setIsOpen(false), []); + const action_sheet_content = [ { id: 1, @@ -73,9 +75,8 @@ const Multiplier = observer(({ is_minimized }: TMultiplierProps) => { expandable={false} isOpen={isOpen} position='left' - onClose={() => { - setIsOpen(false); - }} + onClose={onClose} + shouldBlurOnClose={isOpen} > { ]; const classname = clsx('trade-params__option', is_minimized && 'trade-params__option--minimized'); + const onClose = React.useCallback(() => setIsOpen(false), []); + React.useEffect(() => { const initial_payout_per_point = v2_params_initial_values?.payout_per_point; if (initial_payout_per_point && payout_per_point !== initial_payout_per_point) { @@ -95,7 +97,13 @@ const PayoutPerPoint = observer(({ is_minimized }: TPayoutPerPointProps) => { variant='fill' value={`${v2_params_initial_values?.payout_per_point ?? payout_per_point} ${currency_display_code}`} /> - setIsOpen(false)} position='left' expandable={false}> + { stop_loss, } = useTraderStore(); - const closeActionSheet = () => setIsOpen(false); + const closeActionSheet = React.useCallback(() => setIsOpen(false), []); const getRiskManagementText = () => { if (has_cancellation) return `DC: ${addUnit({ value: cancellation_duration, unit: localize('minutes') })}`; if (has_take_profit && has_stop_loss) @@ -84,7 +84,13 @@ const RiskManagement = observer(({ is_minimized }: TRiskManagementProps) => { value={getRiskManagementText()} variant='fill' /> - + { onChange({ target: { name: 'amount', value: e.target.value } }); }; - const onClose = (is_saved = false) => { - if (is_open) { - if (!is_saved) { - onChange({ target: { name: 'amount', value: v2_params_initial_values.stake } }); - } - if (v2_params_initial_values.stake !== amount) { - setV2ParamsInitialValues({ value: amount, name: 'stake' }); + const onClose = React.useCallback( + (is_saved = false) => { + if (is_open) { + if (!is_saved) { + onChange({ target: { name: 'amount', value: v2_params_initial_values.stake } }); + } + if (v2_params_initial_values.stake !== amount) { + setV2ParamsInitialValues({ value: amount, name: 'stake' }); + } + setIsOpen(false); } - setIsOpen(false); - } - }; + }, + [v2_params_initial_values, is_open] + ); return ( <> @@ -208,7 +211,13 @@ const Stake = observer(({ is_minimized }: TStakeProps) => { className={clsx('trade-params__option', is_minimized && 'trade-params__option--minimized')} status={stake_error && !is_open ? 'error' : undefined} /> - onClose(false)} position='left' expandable={false}> + } /> diff --git a/packages/trader/src/AppV2/Components/TradeParameters/Strike/strike.tsx b/packages/trader/src/AppV2/Components/TradeParameters/Strike/strike.tsx index 98f6c01aa3cb..6c842af8ea7c 100644 --- a/packages/trader/src/AppV2/Components/TradeParameters/Strike/strike.tsx +++ b/packages/trader/src/AppV2/Components/TradeParameters/Strike/strike.tsx @@ -37,6 +37,7 @@ const Strike = observer(({ is_minimized }: TStrikeProps) => { const handleStrikeChange = (new_value: number | string) => onChange({ target: { name: 'barrier_1', value: new_value } }); + const onClose = React.useCallback(() => setIsOpen(false), []); const action_sheet_content = [ { @@ -102,7 +103,13 @@ const Strike = observer(({ is_minimized }: TStrikeProps) => { variant='fill' value={barrier_1} /> - setIsOpen(false)} position='left' expandable={false}> + { const [is_open, setIsOpen] = React.useState(false); - const onActionSheetClose = () => setIsOpen(false); + const onActionSheetClose = React.useCallback(() => setIsOpen(false), []); const action_sheet_content = [ { @@ -51,7 +51,13 @@ const TakeProfit = observer(({ is_minimized }: TTakeProfitProps) => { variant='fill' value={has_take_profit && take_profit ? `${take_profit} ${getCurrencyDisplayCode(currency)}` : '-'} /> - + Date: Thu, 17 Oct 2024 10:38:40 +0300 Subject: [PATCH 2/2] chore: empty commit