vtils/_cjs/react/useControllableValue.js

一个面向业务的 JavaScript/TypeScript 实用程序库。

"use strict";

exports.__esModule = true;
exports.useControllableValue = useControllableValue;
var _react = require("react");
var _reactUse = require("react-use");
/**
 * 受控值。
 *
 * @param props 组件的属性
 * @param options 选项
 */
function useControllableValue(props, options) {
  var latestProps = (0, _reactUse.useLatest)(props);
  var latestOptions = (0, _reactUse.useLatest)(options);
  var getInitialValue = (0, _react.useCallback)(function () {
    if (latestOptions.current.valuePropName in latestProps.current) {
      return latestProps.current[latestOptions.current.valuePropName];
    }
    if (latestOptions.current.defaultValuePropName in latestProps.current) {
      return latestProps.current[latestOptions.current.defaultValuePropName];
    }
    return latestOptions.current.defaultValue;
  }, []);
  var _useState = (0, _react.useState)(getInitialValue),
    value = _useState[0],
    setValue = _useState[1];
  (0, _reactUse.useUpdateEffect)(function () {
    if (options.valuePropName in props) {
      setValue(props[options.valuePropName]);
    }
  }, [props[options.valuePropName]]);
  var handleSetValue = (0, _react.useCallback)(function (nextValue) {
    if (!(latestOptions.current.valuePropName in latestProps.current) || latestOptions.current.alwaysUpdateValue) {
      setValue(nextValue);
    }
    if (typeof latestProps.current[latestOptions.current.callbackPropName] === 'function') {
      ;
      latestProps.current[latestOptions.current.callbackPropName](nextValue);
    }
  }, []);
  var handleResetValue = (0, _react.useCallback)(function () {
    handleSetValue(getInitialValue());
  }, []);
  return [value, handleSetValue, handleResetValue];
}