rc-hooks/lib/useControllableValue/index.js

React Hooks Library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var useUpdateEffect_1 = tslib_1.__importDefault(require("../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 = tslib_1.__read((0, react_1.useState)(function () {
        if (hasValueProp) {
            return value;
        }
        if (defaultValuePropName in props) {
            return props[defaultValuePropName];
        }
        return defaultValue;
    }), 2), state = _d[0], setState = _d[1];
    (0, useUpdateEffect_1.default)(function () {
        if (hasValueProp) {
            setState(value);
        }
    }, [value, hasValueProp]);
    var handleSetState = (0, react_1.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];
}
exports.default = useControllableValue;