@orca-fe/hooks/lib/useControllableProps.js

React Hooks Collections

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useControllableProps;
exports.validateProps = exports.upperFirstKey = exports.getPropsListenerName = exports.getPropListenerName = exports.getChangedState = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _lodashEs = require("lodash-es");
var _useMemorizedFn = _interopRequireDefault(require("./useMemorizedFn"));
var upperFirstKey = exports.upperFirstKey = function upperFirstKey() {
  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  if (str.length > 0) {
    return str[0].toUpperCase() + str.substr(1);
  }
  return '';
};
var getPropListenerName = exports.getPropListenerName = function getPropListenerName(key) {
  return "on".concat(key === 'value' ? '' : upperFirstKey(key), "Change");
};
var getPropsListenerName = exports.getPropsListenerName = function getPropsListenerName() {
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  return Object.keys(props).map(getPropListenerName);
};
var validateProps = exports.validateProps = function validateProps(initProps) {
  var newProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var res = {};
  Object.keys(newProps).forEach(function (key) {
    if (Object.hasOwnProperty.call(initProps, key)) {
      res[key] = newProps[key];
    }
  });
  return res;
};

/**
 * 对比变化的属性，提取出需要变化的state（属性值为undefined）
 *
 * @param newProps
 * @private
 */
var getChangedState = exports.getChangedState = function getChangedState(props) {
  var newProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var res;
  Object.keys(newProps).forEach(function (key) {
    if (props[key] === undefined) {
      if (!res) res = {};
      res[key] = newProps[key];
    }
  });
  return res;
};
function useControllableProps(props) {
  var initProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  var _config$omitListener = config.omitListener,
    omitListener = _config$omitListener === void 0 ? true : _config$omitListener,
    _config$autoOnChange = config.autoOnChange,
    autoOnChange = _config$autoOnChange === void 0 ? true : _config$autoOnChange,
    _config$combineListen = config.combineListener,
    combineListener = _config$combineListen === void 0 ? true : _config$combineListen;
  var _useState = (0, _react.useState)(function () {
      return Object.keys(initProps);
    }),
    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
    initPropsKeys = _useState2[0];

  // inner state
  var _useState3 = (0, _react.useState)(initProps),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    state = _useState4[0],
    setState = _useState4[1];
  var finalProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), (0, _lodashEs.omitBy)(props, _lodashEs.isUndefined));

  // final state
  var mergedState = (0, _lodashEs.pick)(finalProps, initPropsKeys);
  var changeProps = (0, _useMemorizedFn.default)(function () {
    var newProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    var onPropsChange = props.onPropsChange;
    // delete attrs which not in `initProps`
    var validProps = validateProps(initProps, newProps);
    var nextState = getChangedState(props, validProps);
    if (nextState) {
      setState((0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedState), nextState));
    }
    var result = {};
    if (autoOnChange) {
      Object.keys(validProps).forEach(function (key) {
        var listenerName = getPropListenerName(key);
        var onChangeFunc = props[listenerName];
        if (typeof onChangeFunc === 'function') {
          result[key] = onChangeFunc(validProps[key], newProps);
        }
      });
    }
    if (combineListener && typeof onPropsChange === 'function') {
      result.default = onPropsChange((0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedState), newProps));
    }
    return result;
  });
  if (omitListener) {
    // get the listener prop name according `initProps`
    var omitProps = [].concat(combineListener ? ['onPropsChange'] : []).concat(autoOnChange ? getPropsListenerName(initProps) : []);

    // remove all listener
    finalProps = (0, _lodashEs.omit)(finalProps, omitProps);
  }
  return [finalProps, changeProps];
}