Skip to content

Commit

Permalink
fix: fixes batch 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@akmal-deriv
akmal-deriv committed Oct 17, 2024
1 parent 9dbbbdb commit 0eb5c3c
Show file tree
Hide file tree
Showing 3 changed files with 41 additions and 17 deletions.
4 changes: 2 additions & 2 deletions packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-description.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const BarrierDescription = ({ isDays }: { isDays: boolean }) => {
{isDays ? (
<div className='content-section'>
<Text bold>
<Localize i18n_default_text='Fixed price:' />
<Localize i18n_default_text='Fixed barrier:' />
</Text>
<Text>
<Localize i18n_default_text='Barrier set at specific price.' />
Expand All @@ -34,7 +34,7 @@ const BarrierDescription = ({ isDays }: { isDays: boolean }) => {
</div>
<div className='content-section'>
<Text bold>
<Localize i18n_default_text='Fixed price:' />
<Localize i18n_default_text='Fixed barrier:' />
</Text>
<Text>
<Localize i18n_default_text='Barrier set at specific price.' />
Expand Down
50 changes: 36 additions & 14 deletions packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const chips_options = [
name: <Localize i18n_default_text='Below spot' />,
},
{
name: <Localize i18n_default_text='Fixed price' />,
name: <Localize i18n_default_text='Fixed barrier' />,
},
];
const BarrierInput = observer(
Expand All @@ -28,7 +28,13 @@ const BarrierInput = observer(
}) => {
const { barrier_1, onChange, validation_errors, tick_data, setV2ParamsInitialValues } = useTraderStore();
const [option, setOption] = React.useState(0);
const [should_show_error, setShouldShowError] = React.useState(false);
const [is_focused, setIsFocused] = React.useState(false);
const { pip_size } = tick_data ?? {};
const barrier_ref = React.useRef<HTMLInputElement | null>(null);
const show_hidden_error =
validation_errors?.barrier_1.length > 0 &&
((barrier_1 && !['+', '-'].includes(barrier_1)) || should_show_error);

React.useEffect(() => {
setInitialBarrierValue(barrier_1);
Expand All @@ -43,6 +49,26 @@ const BarrierInput = observer(
onChange({ target: { name: 'barrier_1', value: barrier_1 } });
}, []);

React.useEffect(() => {
const barrier_element = barrier_ref.current;
const checkFocus = () => {
setIsFocused(!!(barrier_element && barrier_element.contains(document.activeElement)));
};
document.addEventListener('focusin', checkFocus);
document.addEventListener('focusout', checkFocus);

return () => {
document.removeEventListener('focusin', checkFocus);
document.removeEventListener('focusout', checkFocus);
};
});

React.useEffect(() => {
if (is_focused) {
setShouldShowError(false);
}
}, [is_focused]);

const handleChipSelect = (index: number) => {
setOption(index);
let newValue = barrier_1.replace(/^[+-]/, '');
Expand Down Expand Up @@ -94,11 +120,7 @@ const BarrierInput = observer(
customType='commaRemoval'
name='barrier_1'
noStatusIcon
status={
validation_errors?.barrier_1.length > 0 && barrier_1 !== ''
? 'error'
: 'neutral'
}
status={show_hidden_error ? 'error' : 'neutral'}
value={barrier_1}
allowDecimals
decimals={pip_size}
Expand All @@ -109,7 +131,8 @@ const BarrierInput = observer(
onChange={handleOnChange}
placeholder={localize('Price')}
variant='fill'
message={barrier_1 !== '' ? validation_errors?.barrier_1[0] : ''}
message={show_hidden_error ? validation_errors?.barrier_1[0] : ''}
ref={barrier_ref}
/>
) : (
<TextFieldAddon
Expand All @@ -123,19 +146,16 @@ const BarrierInput = observer(
allowDecimals
inputMode='decimal'
allowSign={false}
status={
validation_errors?.barrier_1.length > 0 && barrier_1 !== ''
? 'error'
: 'neutral'
}
status={show_hidden_error ? 'error' : 'neutral'}
onChange={handleOnChange}
placeholder={localize('Distance to spot')}
regex={/[^0-9.,]/g}
variant='fill'
message={barrier_1 !== '' ? validation_errors?.barrier_1[0] : ''}
message={show_hidden_error ? validation_errors?.barrier_1[0] : ''}
ref={barrier_ref}
/>
)}
{(validation_errors?.barrier_1.length == 0 || barrier_1 === '') && (
{(validation_errors?.barrier_1.length == 0 || !show_hidden_error) && (
<div className='barrier-params__error-area' />
)}
</div>
Expand All @@ -155,6 +175,8 @@ const BarrierInput = observer(
onAction: () => {
if (validation_errors.barrier_1.length === 0) {
onClose(true);
} else {
setShouldShowError(true);
}
},
}}
Expand Down
4 changes: 3 additions & 1 deletion packages/trader/src/AppV2/Components/TradeParameters/Barrier/barrier.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ const Barrier = observer(({ is_minimized }: TDurationProps) => {
const [is_open, setIsOpen] = React.useState(false);
const [initialBarrierValue, setInitialBarrierValue] = React.useState('');
const isDays = duration_unit == 'd';
const has_error = validation_errors.barrier_1.length > 0 || proposal_info?.[trade_type_tab]?.has_error;
const has_error =
validation_errors.barrier_1.length > 0 ||
(proposal_info?.[trade_type_tab]?.has_error && proposal_info?.[trade_type_tab]?.error_field === 'barrier');
const { addSnackbar } = useSnackbar();
const [barrier_error_shown, setBarrierErrorShown] = React.useState(false);

Expand Down

0 comments on commit 0eb5c3c

Please sign in to comment.