You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.6 KiB
54 lines
1.6 KiB
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
import * as React from 'react';
|
|
export default function useControlledState(defaultStateValue, option) {
|
|
var _ref = option || {},
|
|
defaultValue = _ref.defaultValue,
|
|
value = _ref.value,
|
|
onChange = _ref.onChange,
|
|
postState = _ref.postState;
|
|
|
|
var _React$useState = React.useState(function () {
|
|
if (value !== undefined) {
|
|
return value;
|
|
}
|
|
|
|
if (defaultValue !== undefined) {
|
|
return typeof defaultValue === 'function' ? defaultValue() : defaultValue;
|
|
}
|
|
|
|
return typeof defaultStateValue === 'function' ? defaultStateValue() : defaultStateValue;
|
|
}),
|
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
innerValue = _React$useState2[0],
|
|
setInnerValue = _React$useState2[1];
|
|
|
|
var mergedValue = value !== undefined ? value : innerValue;
|
|
|
|
if (postState) {
|
|
mergedValue = postState(mergedValue);
|
|
} // setState
|
|
|
|
|
|
var onChangeRef = React.useRef(onChange);
|
|
onChangeRef.current = onChange;
|
|
var triggerChange = React.useCallback(function (newValue) {
|
|
setInnerValue(newValue);
|
|
|
|
if (mergedValue !== newValue && onChangeRef.current) {
|
|
onChangeRef.current(newValue, mergedValue);
|
|
}
|
|
}, [mergedValue, onChangeRef]); // Effect of reset value to `undefined`
|
|
|
|
var firstRenderRef = React.useRef(true);
|
|
React.useEffect(function () {
|
|
if (firstRenderRef.current) {
|
|
firstRenderRef.current = false;
|
|
return;
|
|
}
|
|
|
|
if (value === undefined) {
|
|
setInnerValue(value);
|
|
}
|
|
}, [value]);
|
|
return [mergedValue, triggerChange];
|
|
} |