use-controllable-value

1import { isFunction } from 'es-toolkit/predicate'
2import { useMemo, useRef } from 'react'
3import { useMemoizedFn } from '@/registry/hooks/use-memoized-fn'
4import { useUpdate } from '@/registry/hooks/use-update'
5import type { SetStateAction } from 'react'
6 
7export interface Options<T> {
8  defaultValue?: T
9  defaultValuePropName?: string
10  valuePropName?: string
11  trigger?: string
12}
13 
14export type Props = Record<string, any>
15 
16export interface StandardProps<T> {
17  value: T
18  defaultValue?: T
19  onChange: (val: T) => void
20}
21 
22function useControllableValue<T = any>(
23  props: StandardProps<T>,
24): [T, (v: SetStateAction<T>) => void]
25function useControllableValue<T = any>(
26  props?: Props,
27  options?: Options<T>,
28): [T, (v: SetStateAction<T>, ...args: any[]) => void]
29function useControllableValue<T = any>(
30  defaultProps?: Props,
31  options: Options<T> = {},
32) {
33  const props = defaultProps ?? {}
34 
35  const {
36    defaultValue,
37    defaultValuePropName = 'defaultValue',
38    valuePropName = 'value',
39    trigger = 'onChange',
40  } = options
41 
42  const value = props[valuePropName] as T
43  const isControlled = Object.prototype.hasOwnProperty.call(
44    props,
45    valuePropName,
46  )
47 
48  const initialValue = useMemo(() => {
49    if (isControlled) {
50      return value
51    }
52    if (Object.prototype.hasOwnProperty.call(props, defaultValuePropName)) {
53      return props[defaultValuePropName]
54    }
55    return defaultValue
56  }, [])
57 
58  const stateRef = useRef(initialValue)
59  if (isControlled) {
60    stateRef.current = value
61  }
62 
63  const update = useUpdate()
64 
65  const setState = (v: SetStateAction<T>, ...args: any[]) => {
66    const r = isFunction(v) ? v(stateRef.current) : v
67 
68    if (!isControlled) {
69      stateRef.current = r
70      update()
71    }
72    if (props[trigger]) {
73      props[trigger](r, ...args)
74    }
75  }
76 
77  return [stateRef.current, useMemoizedFn(setState)] as const
78}
79 
80export { useControllableValue }