@aliretail/react-materials-components/lib/withControllableLayer/index.js

B 端物料组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var React = _interopRequireWildcard(require("react"));

var _ahooks = require("ahooks");

var _excluded = ["visible", "defaultVisible", "children", "onVisibleChange"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * @description
 * 高阶组件，用于创建一个拥有以下功能的弹出层组件（Dialog、Drawer）
 * 1. 可通过外部 visible 进行控制打开与否
 * 2. 可通过children 传trigger快捷打开
 * @returns 高阶后的组件
 */
var withControllableLayer = function withControllableLayer(WrappedComponent) {
  return function (props) {
    var visibleFromProps = props.visible,
        defaultVisible = props.defaultVisible,
        children = props.children,
        onVisibleChange = props.onVisibleChange,
        restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded); // 中间层visible

    var _React$useState = React.useState(function () {
      if ('visible' in props) {
        return visibleFromProps;
      }

      if ('defaultVisible' in props) {
        return defaultVisible;
      }

      return false;
    }),
        originVisible = _React$useState[0],
        setOriginVisible = _React$useState[1];
    /** 真实的 setVisible */


    var setVisible = (0, _ahooks.usePersistFn)(function (v) {
      // 没有受控属性，调用自身set
      if (!('visible' in props)) {
        setOriginVisible(v);
      } // 有受控属性，则调用上层的受控trigger


      if (onVisibleChange) {
        onVisibleChange(v);
      }
    });
    /** 真实的visible */

    var visible = function () {
      if ('visible' in props) {
        return visibleFromProps;
      }

      return originVisible;
    }();

    var trigger = function () {
      // 非受控模式、有children 情况下
      if (children && !('visible' in props)) {
        return React.Children.only(children);
      }

      return null;
    }();

    var handleClick = function handleClick() {
      setVisible(true);
    };

    return /*#__PURE__*/React.createElement(React.Fragment, null, trigger && /*#__PURE__*/React.cloneElement(trigger, {
      onClick: handleClick
    }), /*#__PURE__*/React.createElement(WrappedComponent, (0, _extends2["default"])({}, restProps, {
      visible: visible,
      setVisible: setVisible
    })));
  };
};

var _default = withControllableLayer;
exports["default"] = _default;