feat: add useControlledState hook (#1276)

gravity-ui · Feb 6, 2024 · 9493062 · 9493062
1 parent 133c6a3
commit 9493062
Show file tree

Hide file tree

Showing 11 changed files with 432 additions and 80 deletions.
diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useForkRef, useUniqId} from '../../../hooks';
+import {useControlledState, useForkRef, useUniqId} from '../../../hooks';
 import {blockNew} from '../../utils/cn';
 import {ClearButton, mapTextInputSizeToButtonSize} from '../common';
 import {OuterAdditionalContent} from '../common/OuterAdditionalContent/OuterAdditionalContent';
@@ -69,15 +69,13 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
         validationState: validationStateProp,
     });
 
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '');
+    const [inputValue, setInputValue] = useControlledState(value, defaultValue ?? '', onUpdate);
     const innerControlRef = React.useRef<HTMLTextAreaElement | HTMLInputElement>(null);
     const [hasVerticalScrollbar, setHasVerticalScrollbar] = React.useState(false);
     const state = getInputControlState(validationState);
     const handleRef = useForkRef(props.controlRef, innerControlRef);
     const innerId = useUniqId();
 
-    const isControlled = value !== undefined;
-    const inputValue = isControlled ? value : uncontrolledValue;
     const isErrorMsgVisible = validationState === 'invalid' && Boolean(errorMessage);
     const isClearControlVisible = Boolean(hasClear && !disabled && inputValue);
     const id = originalId || innerId;
@@ -97,16 +95,10 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
         tabIndex,
         name,
         onChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-            const newValue = event.target.value;
-            if (!isControlled) {
-                setUncontrolledValue(newValue);
-            }
+            setInputValue(event.target.value);
             if (onChange) {
                 onChange(event);
             }
-            if (onUpdate) {
-                onUpdate(newValue);
-            }
         },
         autoComplete: prepareAutoComplete(autoComplete),
         controlProps: {
@@ -131,15 +123,9 @@ export const TextArea = React.forwardRef<HTMLSpanElement, TextAreaProps>(functio
             if (onChange) {
                 onChange(syntheticEvent);
             }
-
-            if (onUpdate) {
-                onUpdate('');
-            }
         }
 
-        if (!isControlled) {
-            setUncontrolledValue('');
-        }
+        setInputValue('');
     };
 
     React.useEffect(() => {

diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {TriangleExclamation} from '@gravity-ui/icons';
 
-import {useForkRef, useUniqId} from '../../../hooks';
+import {useControlledState, useForkRef, useUniqId} from '../../../hooks';
 import {useElementSize} from '../../../hooks/private';
 import {Icon} from '../../Icon';
 import {Popover} from '../../Popover';
@@ -97,15 +97,13 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
         validationState: validationStateProp,
     });
 
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '');
+    const [inputValue, setInputValue] = useControlledState(value, defaultValue ?? '', onUpdate);
     const innerControlRef = React.useRef<HTMLTextAreaElement | HTMLInputElement>(null);
     const handleRef = useForkRef(props.controlRef, innerControlRef);
     const labelRef = React.useRef<HTMLLabelElement>(null);
     const startContentRef = React.useRef<HTMLDivElement>(null);
     const state = getInputControlState(validationState);
 
-    const isControlled = value !== undefined;
-    const inputValue = isControlled ? value : uncontrolledValue;
     const isLabelVisible = Boolean(label);
     const isErrorMsgVisible =
         validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'outside';
@@ -149,24 +147,20 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
         tabIndex,
         name,
         onChange(event: React.ChangeEvent<HTMLInputElement>) {
-            const newValue = event.target.value;
-            if (!isControlled) {
-                setUncontrolledValue(newValue);
-            }
+            setInputValue(event.target.value);
+
             if (onChange) {
                 onChange(event);
             }
-            if (onUpdate) {
-                onUpdate(newValue);
-            }
         },
         autoComplete: isAutoCompleteOff ? 'off' : prepareAutoComplete(autoComplete),
         controlProps,
     };
 
     const handleClear = (event: React.MouseEvent<HTMLSpanElement>) => {
-        const control = innerControlRef.current;
+        setInputValue('');
 
+        const control = innerControlRef.current;
         if (control) {
             control.focus();
 
@@ -179,14 +173,6 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(funct
             if (onChange) {
                 onChange(syntheticEvent);
             }
-
-            if (onUpdate) {
-                onUpdate('');
-            }
-        }
-
-        if (!isControlled) {
-            setUncontrolledValue('');
         }
     };
 

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,6 +1,7 @@
 export * from './useActionHandlers';
 export * from './useAsyncActionHandler';
 export * from './useBodyScrollLock';
+export * from './useControlledState';
 export * from './useFileInput';
 export * from './useFocusWithin';
 export * from './useForkRef';

diff --git a/src/hooks/private/useCheckbox/useCheckbox.ts b/src/hooks/private/useCheckbox/useCheckbox.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useForkRef} from '../..';
+import {useControlledState, useForkRef} from '../..';
 import type {ControlProps} from '../../../components/types';
 import {eventBroker} from '../../../components/utils/event-broker';
 
@@ -27,9 +27,12 @@ export function useCheckbox({
     disabled,
 }: UseCheckboxProps): UseCheckboxResult {
     const innerControlRef = React.useRef<HTMLInputElement>(null);
-    const [checkedState, setCheckedState] = React.useState(defaultChecked ?? false);
-    const isControlled = typeof checked === 'boolean';
-    const isChecked = isControlled ? checked : checkedState;
+    const [isChecked, setCheckedState] = useControlledState(
+        checked,
+        defaultChecked ?? false,
+        onUpdate,
+    );
+
     const inputChecked = indeterminate ? false : checked;
     const inputAriaChecked = indeterminate ? 'mixed' : isChecked;
 
@@ -42,17 +45,11 @@ export function useCheckbox({
     }, [indeterminate]);
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (!isControlled) {
-            setCheckedState(event.target.checked);
-        }
+        setCheckedState(event.target.checked);
 
         if (onChange) {
             onChange(event);
         }
-
-        if (onUpdate) {
-            onUpdate(event.target.checked);
-        }
     };
 
     const handleClickCapture = React.useCallback(

diff --git a/src/hooks/useControlledState/README.md b/src/hooks/useControlledState/README.md
@@ -0,0 +1,26 @@
+<!--GITHUB_BLOCK-->
+
+# useControlledState
+
+<!--/GITHUB_BLOCK-->
+
+```tsx
+import {useControlledState} from '@gravity-ui/uikit';
+```
+
+The `useControlledState` hook that simplify work with controlled/uncontrolled state.
+
+## Properties
+
+| Name         | Description                               |       Type        | Default |
+| :----------- | :---------------------------------------- | :---------------: | :-----: |
+| value        | if `undefined` then value is uncontrolled | `T  \| undefined` |         |
+| defaultValue | Initial value if value is uncontrolled    | `T  \| undefined` |         |
+| onUpdate     | Callback on value change                  | `(v: T) => void`  |         |
+
+## Result
+
+`useControlledState` returns an array with exactly two values:
+
+1. The current state.
+2. The set function that lets you update the state to a different value.
diff --git a/src/hooks/useControlledState/index.ts b/src/hooks/useControlledState/index.ts
@@ -0,0 +1 @@
+export * from './useControlledState';