rc-hooks/es/useControllableValue/index.js

React Hooks Library.

import { __read } from "tslib";
import { useCallback, useState } from 'react';
import useUpdateEffect from '../useUpdateEffect';
/**
 * 组件状态即可以自己内部管理，也可以由外部控制。
 *
 * @param {Object} props 组件的 `props`。
 * @param {Object} [options] 配置项。
 * @param {*} [options.defaultValue] 默认值，会被 `props.defaultValue` 和 `props.value` 覆盖。
 * @param {string} [options.defaultValuePropName='defaultValue'] 默认值的属性名。默认 `defaultValue`。
 * @param {string} [options.valuePropName='value'] 值的属性名。默认 `value`。
 * @param {string} [options.trigger='onChange'] 修改值时，触发的函数名。默认 `onChange`。
 * @returns {Array}
 * @example
 * const [state, setState] = useControllableValue(props, {
 *   defaultValue: ''
 * });
 */
function useControllableValue(props, options) {
    if (props === void 0) { props = {}; }
    if (options === void 0) { options = {}; }
    var defaultValue = options.defaultValue, _a = options.defaultValuePropName, defaultValuePropName = _a === void 0 ? 'defaultValue' : _a, _b = options.valuePropName, valuePropName = _b === void 0 ? 'value' : _b, _c = options.trigger, trigger = _c === void 0 ? 'onChange' : _c;
    var hasValueProp = valuePropName in props;
    var value = props[valuePropName];
    var _d = __read(useState(function () {
        if (hasValueProp) {
            return value;
        }
        if (defaultValuePropName in props) {
            return props[defaultValuePropName];
        }
        return defaultValue;
    }), 2), state = _d[0], setState = _d[1];
    useUpdateEffect(function () {
        if (hasValueProp) {
            setState(value);
        }
    }, [value, hasValueProp]);
    var handleSetState = useCallback(function (v) {
        var args = [];
        for (var _i = 1; _i < arguments.length; _i++) {
            args[_i - 1] = arguments[_i];
        }
        if (!hasValueProp) {
            setState(v);
        }
        if (props[trigger]) {
            props[trigger].apply(props, [v].concat(args));
        }
    }, [hasValueProp, props, trigger]);
    return [hasValueProp ? value : state, handleSetState];
}
export default useControllableValue;