woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

✨ Add a “onConfirm” prop to DataStoreControl

Browse source
This commit is contained in:
Philipp Stracker 2025-02-12 15:57:03 +01:00
parent ff81617b22
commit 0fc0c11653
No known key found for this signature in database
1 changed files with 17 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

18
modules/ppcp-settings/resources/js/Components/ReusableComponents/DataStoreControl.js
View file

@ -18,6 +18,7 @@ const DataStoreControl = React.forwardRef(
control: ControlComponent,
value: externalValue,
onChange,
onConfirm = null,
delay = 300,
...props
},
@ -25,7 +26,9 @@ const DataStoreControl = React.forwardRef(
) => {
const [ internalValue, setInternalValue ] = useState( externalValue );
const onChangeRef = useRef( onChange );
const onConfirmRef = useRef( onConfirm );
onChangeRef.current = onChange;
onConfirmRef.current = onConfirm;
const debouncedUpdate = useRef(
debounce( ( value ) => {
@ -36,7 +39,7 @@ const DataStoreControl = React.forwardRef(
useEffect( () => {
setInternalValue( externalValue );
debouncedUpdate?.cancel();
}, [ externalValue ] );
}, [ debouncedUpdate, externalValue ] );
useEffect( () => {
return () => debouncedUpdate?.cancel();
@ -50,12 +53,25 @@ const DataStoreControl = React.forwardRef(
[ debouncedUpdate ]
);
const handleKeyDown = useCallback(
( event ) => {
if ( onConfirmRef.current && event.key === 'Enter' ) {
event.preventDefault();
debouncedUpdate.flush();
onConfirmRef.current();
return false;
}
},
[ debouncedUpdate ]
);
return (
<ControlComponent
ref={ ref }
{ ...props }
value={ internalValue }
onChange={ handleChange }
onKeyDown={ handleKeyDown }
/>
);
}