refactor(usecontrolledstate): refactor usecontrolledstate (#1369)

src/utils/demos/useControlled/useControl.mdx

@@ -17,8 +17,8 @@ import {
 ### 使用了 useControll 的组件 Counter
 
 ```javascript
-export const Counter = ({ value, onChange, defaultValue }) => {
-  const [state, setState] = useControlledState(value, onChange, defaultValue);
+export const Counter = ({ value, onChange, defaultValue }: IProps) => {
+  const [state, setState] = useControlledState(value, defaultValue, onChange);
   return (
     <>
       <button type="button" onClick={() => setState(state - 1)}>

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import useControlledState from '../../hooks/useControlled';
+import useControlledState from '../../hooks/useControlledState';
 import Docs from './useControl.mdx';
 
 interface IProps {
@@ -9,7 +9,7 @@ interface IProps {
 }
 
 export const Counter = ({ value, onChange, defaultValue }: IProps) => {
-  const [state, setState] = useControlledState(value, onChange, defaultValue);
+  const [state, setState] = useControlledState(value, defaultValue, onChange);
   return (
     <>
       <button type="button" onClick={() => setState(state - 1)}>

src/utils/hooks/useControlledState.ts

@@ -1,24 +1,36 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, Dispatch, SetStateAction, useDebugValue } from 'react';
+import { isUndefined } from 'lodash';
+
+function format<T>([innerState, outterState]: [T, T]) {
+  const isControlled = isUndefined(outterState) ? 'uncontrolled' : 'controlled';
+  const value = isUndefined(outterState) ? innerState : outterState;
+  return `State is ${isControlled} | Value is ${value}`;
+}
 
 const useControlledState = <T>(
-  controlledState: T | (() => T) | undefined,
-  empty: T
-): [T, (_state: T | (() => T), force?: boolean) => void] => {
-  const [_controlledState, setControlledState] = useState<T>(controlledState === undefined ? empty : controlledState);
-
-  const setState = useRef((_state: T | (() => T), force = false) => {
-    if (controlledState === undefined || force) {
-      setControlledState(_state);
+  outterState?: T | (() => T),
+  defaultOutterState?: T,
+  callback?: (state: T | (() => T)) => void
+): [T | undefined, (state: T | Dispatch<SetStateAction<T>>, force?: boolean) => void] => {
+  const [innerState, setInnerState] = useState<T>(isUndefined(outterState) ? defaultOutterState : outterState);
+
+  const setState = useRef((state: T | (() => T), force = false) => {
+    if (isUndefined(outterState) || force) {
+      setInnerState(state);
     }
+
+    callback?.(state);
   }).current;
 
+  useDebugValue([innerState, outterState], format);
+
   useEffect(() => {
-    if (controlledState !== undefined) {
-      setControlledState(controlledState);
+    if (!isUndefined(outterState)) {
+      setInnerState(outterState);
     }
-  }, [controlledState]);
+  }, [outterState]);
 
-  return [_controlledState, setState];
+  return [innerState, setState];
 };
 
 export default useControlledState;