feat(hooks): add useControlled State (#1355)

Co-authored-by: ZhaoChen <ittisennsinn@gmail.com>

src/utils/demos/useControlled/useControl.mdx

@@ -0,0 +1,102 @@
+import { Subtitle, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import {
+  Counter,
+  UnControlledDemo,
+  ControlledDemo,
+  WatchUnControlled,
+  IgnoreControlledChange,
+} from './useControl.stories';
+
+<Meta title="MDX/useControlledState" />
+
+# useControl
+
+## 基础用法
+
+### 使用了 useControll 的组件 Counter
+
+```javascript
+export const Counter = ({ value, onChange, defaultValue }) => {
+  const [state, setState] = useControlledState(value, onChange, defaultValue);
+  return (
+    <>
+      <button type="button" onClick={() => setState(state - 1)}>
+        -
+      </button>
+      <span>{state}</span>
+      <button type="button" onClick={() => setState(state + 1)}>
+        +
+      </button>
+    </>
+  );
+};
+```
+
+<Canvas>
+  <Counter />
+</Canvas>
+
+### 非受控模式，只有 defaultValue
+
+```javascript
+const UnControlledDemo = () => <Counter defaultValue={0} />;
+```
+
+<Canvas>
+  <UnControlledDemo />
+</Canvas>
+
+### 受控模式，参数有 value 和 onChange
+
+```javascript
+const ControlledDemo = () => {
+  const [value, setValue] = useState(0);
+  return (
+    <div>
+      <input type="number" onChange={(e) => setValue(parseInt(e.target.value, 10))} value={value} />
+      <Counter value={value} onChange={setValue} />
+    </div>
+  );
+};
+```
+
+<Canvas>
+  <ControlledDemo />
+</Canvas>
+
+### 非受控模式，订阅 defaultValue 的值变化
+
+```javascript
+const WatchUnControlled = () => {
+  const [value, setValue] = useState(0);
+  return (
+    <div>
+      <input type="number" onChange={(e) => setValue(parseInt(e.target.value, 10))} value={value} />
+      <Counter defaultValue={0} onChange={setValue} />
+    </div>
+  );
+};
+```
+
+<Canvas>
+  <WatchUnControlled />
+</Canvas>
+
+### 受控模式，不提供 onChange，只回显展示
+
+```javascript
+const IgnoreControlledChange = () => {
+  const [value, setValue] = useState(0);
+  return (
+    <div>
+      <input type="number" onChange={(e) => setValue(parseInt(e.target.value, 10))} value={value} />
+      <Counter value={value} />
+    </div>
+  );
+};
+```
+
+<Canvas>
+  <IgnoreControlledChange />
+</Canvas>

src/utils/demos/useControlled/useControl.stories.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import useControlledState from '../../hooks/useControlled';
+import Docs from './useControl.mdx';
+
+interface IProps {
+  value?: number;
+  onChange?: (value: number) => void;
+  defaultValue?: number;
+}
+
+export const Counter = ({ value, onChange, defaultValue }: IProps) => {
+  const [state, setState] = useControlledState(value, onChange, defaultValue);
+  return (
+    <>
+      <button type="button" onClick={() => setState(state - 1)}>
+        -
+      </button>
+      <span>{state}</span>
+      <button type="button" onClick={() => setState(state + 1)}>
+        +
+      </button>
+    </>
+  );
+};
+
+export const UnControlledDemo = () => <Counter defaultValue={0} />;
+
+export const ControlledDemo = () => {
+  const [value, setValue] = useState(0);
+  return (
+    <div>
+      <input type="number" onChange={(e) => setValue(parseInt(e.target.value, 10))} value={value} />
+      <Counter value={value} onChange={setValue} />
+    </div>
+  );
+};
+
+export const WatchUnControlled = () => {
+  const [value, setValue] = useState(0);
+  return (
+    <div>
+      <input type="number" onChange={(e) => setValue(parseInt(e.target.value, 10))} value={value} />
+      <Counter defaultValue={0} onChange={setValue} />
+    </div>
+  );
+};
+
+export const IgnoreControlledChange = () => {
+  const [value, setValue] = useState(0);
+  return (
+    <div>
+      <input type="number" onChange={(e) => setValue(parseInt(e.target.value, 10))} value={value} />
+      <Counter value={value} />
+    </div>
+  );
+};
+
+export default {
+  title: 'Hooks/useContrlledState',
+  component: Counter,
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+};

src/utils/hooks/useControlled.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect, useDebugValue, Dispatch, SetStateAction } from 'react';
+import { isUndefined } from 'lodash';
+
+function format<T>([localValue, inputValue]: [T, T]) {
+  const isControlled = isUndefined(inputValue) ? 'uncontrolled' : 'controlled';
+  const value = isUndefined(inputValue) ? localValue : inputValue;
+  return `State is ${isControlled} | Value is ${value}`;
+}
+
+const useControlledState = <T>(
+  value?: T,
+  onChange?: (value?: T) => void,
+  defaultValue?: T
+): [T | undefined, Dispatch<SetStateAction<T>>] => {
+  const [localValue, setLocalValue] = useState(() => (isUndefined(value) ? defaultValue : value));
+
+  useDebugValue([localValue, value], format);
+
+  useEffect(() => {
+    if (typeof onChange === 'function') {
+      onChange(localValue);
+    }
+  }, [localValue, onChange]);
+
+  return [isUndefined(value) ? localValue : value, setLocalValue];
+};
+
+export default useControlledState;