Skip to content

Commit dd5d2e4

Browse files
kate-derivkate-deriv
authored
DTRA-2055 +1 / Kate / [DTrader-V2] Trade page scrolling issue (deriv-com#17230)
* feat: wrap with cb hook and add new prop for blur * chore: empty commit
1 parent d00d49b commit dd5d2e4

File tree

10 files changed

+97
-39
lines changed

10 files changed

+97
-39
lines changed

‎packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,19 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => {
1919
const [initialBarrierValue, setInitialBarrierValue] = React.useState('');
2020
const isDays = duration_unit == 'd';
2121

22-
const onClose = (is_saved = false) => {
23-
if (is_open) {
24-
if (!is_saved) {
25-
onChange({ target: { name: 'barrier_1', value: initialBarrierValue } });
22+
const onClose = React.useCallback(
23+
(is_saved = false) => {
24+
if (is_open) {
25+
if (!is_saved) {
26+
onChange({ target: { name: 'barrier_1', value: initialBarrierValue } });
27+
}
28+
setV2ParamsInitialValues({ value: '', name: 'barrier_1' });
29+
setIsOpen(false);
2630
}
27-
setV2ParamsInitialValues({ value: '', name: 'barrier_1' });
28-
setIsOpen(false);
29-
}
30-
};
31+
},
32+
// eslint-disable-next-line react-hooks/exhaustive-deps
33+
[initialBarrierValue, is_open]
34+
);
3135

3236
const barrier_carousel_pages = [
3337
{
@@ -52,7 +56,13 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => {
5256
onClick={() => setIsOpen(true)}
5357
className={clsx('trade-params__option', is_minimized && 'trade-params__option--minimized')}
5458
/>
55-
<ActionSheet.Root isOpen={is_open} onClose={() => onClose(false)} position='left' expandable={false}>
59+
<ActionSheet.Root
60+
isOpen={is_open}
61+
onClose={onClose}
62+
position='left'
63+
expandable={false}
64+
shouldBlurOnClose={is_open}
65+
>
5666
<ActionSheet.Portal shouldCloseOnDrag>
5767
<Carousel
5868
header={CarouselHeader}

‎packages/trader/src/AppV2/Components/TradeParameters/Duration/duration.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,8 @@ const Duration = observer(({ is_minimized }: TDurationProps) => {
9999
return () => clearTimeout(start_duration);
100100
}, [symbol, contract_type, duration_min_max, duration_units_list]);
101101

102+
const onClose = React.useCallback(() => setOpen(false), []);
103+
102104
const getInputValues = () => {
103105
const formatted_date = end_date.toLocaleDateString('en-GB', {
104106
day: 'numeric',
@@ -175,11 +177,10 @@ const Duration = observer(({ is_minimized }: TDurationProps) => {
175177
/>
176178
<ActionSheet.Root
177179
isOpen={is_open}
178-
onClose={() => {
179-
setOpen(false);
180-
}}
180+
onClose={onClose}
181181
position='left'
182182
expandable={false}
183+
shouldBlurOnClose={is_open}
183184
>
184185
<ActionSheet.Portal shouldCloseOnDrag>
185186
<DurationActionSheetContainer

‎packages/trader/src/AppV2/Components/TradeParameters/GrowthRate/growth-rate.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,7 @@ const GrowthRate = observer(({ is_minimized }: TGrowthRateProps) => {
4141
const handleGrowthRateChange = (rate: number) => {
4242
onChange({ target: { name: 'growth_rate', value: rate } });
4343
};
44-
const onActionSheetClose = () => {
45-
setIsOpen(false);
46-
};
44+
const onActionSheetClose = React.useCallback(() => setIsOpen(false), []);
4745

4846
const action_sheet_content = [
4947
{
@@ -103,7 +101,13 @@ const GrowthRate = observer(({ is_minimized }: TGrowthRateProps) => {
103101
value={`${getGrowthRatePercentage(growth_rate)}%`}
104102
variant='fill'
105103
/>
106-
<ActionSheet.Root isOpen={is_open} onClose={onActionSheetClose} position='left' expandable={false}>
104+
<ActionSheet.Root
105+
isOpen={is_open}
106+
onClose={onActionSheetClose}
107+
position='left'
108+
expandable={false}
109+
shouldBlurOnClose={is_open}
110+
>
107111
<ActionSheet.Portal shouldCloseOnDrag>
108112
<Carousel
109113
classname={clsx('growth-rate__carousel', is_small_screen && 'growth-rate__carousel--small')}

‎packages/trader/src/AppV2/Components/TradeParameters/LastDigitPrediction/last-digit-prediction.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ const LastDigitPrediction = observer(({ is_minimized }: TLastDigitSelectorProps)
2727
const onSaveButtonClick = () => {
2828
if (last_digit !== selected_digit) handleLastDigitChange(selected_digit);
2929
};
30-
const onActionSheetClose = () => {
30+
const onActionSheetClose = React.useCallback(() => {
3131
setIsOpen(false);
3232
setSelectedDigit(last_digit);
33-
};
33+
}, [last_digit]);
3434

3535
if (is_minimized)
3636
return (
@@ -48,7 +48,13 @@ const LastDigitPrediction = observer(({ is_minimized }: TLastDigitSelectorProps)
4848
className={clsx('trade-params__option', 'trade-params__option--minimized')}
4949
onClick={() => setIsOpen(true)}
5050
/>
51-
<ActionSheet.Root isOpen={is_open} onClose={onActionSheetClose} position='left' expandable={false}>
51+
<ActionSheet.Root
52+
isOpen={is_open}
53+
onClose={onActionSheetClose}
54+
position='left'
55+
expandable={false}
56+
shouldBlurOnClose={is_open}
57+
>
5258
<ActionSheet.Portal shouldCloseOnDrag>
5359
<ActionSheet.Header title={<Localize i18n_default_text='Last digit prediction' />} />
5460
<ActionSheet.Content>

‎packages/trader/src/AppV2/Components/TradeParameters/Multiplier/multiplier.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ const Multiplier = observer(({ is_minimized }: TMultiplierProps) => {
2525
onChange({ target: { name: 'multiplier', value: multiplier } });
2626
};
2727

28+
const onClose = React.useCallback(() => setIsOpen(false), []);
29+
2830
const action_sheet_content = [
2931
{
3032
id: 1,
@@ -73,9 +75,8 @@ const Multiplier = observer(({ is_minimized }: TMultiplierProps) => {
7375
expandable={false}
7476
isOpen={isOpen}
7577
position='left'
76-
onClose={() => {
77-
setIsOpen(false);
78-
}}
78+
onClose={onClose}
79+
shouldBlurOnClose={isOpen}
7980
>
8081
<ActionSheet.Portal shouldCloseOnDrag>
8182
<Carousel

‎packages/trader/src/AppV2/Components/TradeParameters/PayoutPerPoint/payout-per-point.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,8 @@ const PayoutPerPoint = observer(({ is_minimized }: TPayoutPerPointProps) => {
6565
];
6666
const classname = clsx('trade-params__option', is_minimized && 'trade-params__option--minimized');
6767

68+
const onClose = React.useCallback(() => setIsOpen(false), []);
69+
6870
React.useEffect(() => {
6971
const initial_payout_per_point = v2_params_initial_values?.payout_per_point;
7072
if (initial_payout_per_point && payout_per_point !== initial_payout_per_point) {
@@ -95,7 +97,13 @@ const PayoutPerPoint = observer(({ is_minimized }: TPayoutPerPointProps) => {
9597
variant='fill'
9698
value={`${v2_params_initial_values?.payout_per_point ?? payout_per_point} ${currency_display_code}`}
9799
/>
98-
<ActionSheet.Root isOpen={is_open} onClose={() => setIsOpen(false)} position='left' expandable={false}>
100+
<ActionSheet.Root
101+
isOpen={is_open}
102+
onClose={onClose}
103+
position='left'
104+
expandable={false}
105+
shouldBlurOnClose={is_open}
106+
>
99107
<ActionSheet.Portal shouldCloseOnDrag>
100108
<Carousel
101109
classname={clsx(

‎packages/trader/src/AppV2/Components/TradeParameters/RiskManagement/risk-management.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const RiskManagement = observer(({ is_minimized }: TRiskManagementProps) => {
2929
stop_loss,
3030
} = useTraderStore();
3131

32-
const closeActionSheet = () => setIsOpen(false);
32+
const closeActionSheet = React.useCallback(() => setIsOpen(false), []);
3333
const getRiskManagementText = () => {
3434
if (has_cancellation) return `DC: ${addUnit({ value: cancellation_duration, unit: localize('minutes') })}`;
3535
if (has_take_profit && has_stop_loss)
@@ -84,7 +84,13 @@ const RiskManagement = observer(({ is_minimized }: TRiskManagementProps) => {
8484
value={getRiskManagementText()}
8585
variant='fill'
8686
/>
87-
<ActionSheet.Root isOpen={is_open} onClose={closeActionSheet} position='left' expandable={false}>
87+
<ActionSheet.Root
88+
isOpen={is_open}
89+
onClose={closeActionSheet}
90+
position='left'
91+
expandable={false}
92+
shouldBlurOnClose={is_open}
93+
>
8894
<ActionSheet.Portal shouldCloseOnDrag>
8995
<Carousel
9096
classname={clsx(

‎packages/trader/src/AppV2/Components/TradeParameters/Stake/stake.tsx

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -214,17 +214,20 @@ const Stake = observer(({ is_minimized }: TStakeProps) => {
214214
onChange({ target: { name: 'amount', value: e.target.value } });
215215
};
216216

217-
const onClose = (is_saved = false) => {
218-
if (is_open) {
219-
if (!is_saved) {
220-
onChange({ target: { name: 'amount', value: v2_params_initial_values.stake } });
221-
}
222-
if (v2_params_initial_values.stake !== amount) {
223-
setV2ParamsInitialValues({ value: amount, name: 'stake' });
217+
const onClose = React.useCallback(
218+
(is_saved = false) => {
219+
if (is_open) {
220+
if (!is_saved) {
221+
onChange({ target: { name: 'amount', value: v2_params_initial_values.stake } });
222+
}
223+
if (v2_params_initial_values.stake !== amount) {
224+
setV2ParamsInitialValues({ value: amount, name: 'stake' });
225+
}
226+
setIsOpen(false);
224227
}
225-
setIsOpen(false);
226-
}
227-
};
228+
},
229+
[v2_params_initial_values, is_open]
230+
);
228231

229232
return (
230233
<>
@@ -239,7 +242,13 @@ const Stake = observer(({ is_minimized }: TStakeProps) => {
239242
status={stake_error && !is_open ? 'error' : undefined}
240243
disabled={has_open_accu_contract}
241244
/>
242-
<ActionSheet.Root isOpen={is_open} onClose={() => onClose(false)} position='left' expandable={false}>
245+
<ActionSheet.Root
246+
isOpen={is_open}
247+
onClose={onClose}
248+
position='left'
249+
expandable={false}
250+
shouldBlurOnClose={is_open}
251+
>
243252
<ActionSheet.Portal shouldCloseOnDrag>
244253
<ActionSheet.Header title={<Localize i18n_default_text='Stake' />} />
245254
<ActionSheet.Content className='stake-content'>

‎packages/trader/src/AppV2/Components/TradeParameters/Strike/strike.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ const Strike = observer(({ is_minimized }: TStrikeProps) => {
3737

3838
const handleStrikeChange = (new_value: number | string) =>
3939
onChange({ target: { name: 'barrier_1', value: new_value } });
40+
const onClose = React.useCallback(() => setIsOpen(false), []);
4041

4142
const action_sheet_content = [
4243
{
@@ -102,7 +103,13 @@ const Strike = observer(({ is_minimized }: TStrikeProps) => {
102103
variant='fill'
103104
value={barrier_1}
104105
/>
105-
<ActionSheet.Root isOpen={is_open} onClose={() => setIsOpen(false)} position='left' expandable={false}>
106+
<ActionSheet.Root
107+
isOpen={is_open}
108+
onClose={onClose}
109+
position='left'
110+
expandable={false}
111+
shouldBlurOnClose={is_open}
112+
>
106113
<ActionSheet.Portal shouldCloseOnDrag>
107114
<Carousel
108115
classname={clsx('strike__carousel', is_small_screen && 'strike__carousel--small')}

‎packages/trader/src/AppV2/Components/TradeParameters/TakeProfit/take-profit.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const TakeProfit = observer(({ is_minimized }: TTakeProfitProps) => {
1919

2020
const [is_open, setIsOpen] = React.useState(false);
2121

22-
const onActionSheetClose = () => setIsOpen(false);
22+
const onActionSheetClose = React.useCallback(() => setIsOpen(false), []);
2323

2424
const action_sheet_content = [
2525
{
@@ -51,7 +51,13 @@ const TakeProfit = observer(({ is_minimized }: TTakeProfitProps) => {
5151
variant='fill'
5252
value={has_take_profit && take_profit ? `${take_profit} ${getCurrencyDisplayCode(currency)}` : '-'}
5353
/>
54-
<ActionSheet.Root isOpen={is_open} onClose={onActionSheetClose} position='left' expandable={false}>
54+
<ActionSheet.Root
55+
isOpen={is_open}
56+
onClose={onActionSheetClose}
57+
position='left'
58+
expandable={false}
59+
shouldBlurOnClose={is_open}
60+
>
5561
<ActionSheet.Portal shouldCloseOnDrag>
5662
<Carousel
5763
header={CarouselHeader}

0 commit comments

Comments
 (0)