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

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["visible", "defaultVisible", "children", "onVisibleChange"];

/* eslint-disable react/prop-types */
import * as React from 'react';
import { usePersistFn } from 'ahooks';

/**
 * @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 = _objectWithoutPropertiesLoose(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 = 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, _extends({}, restProps, {
      visible: visible,
      setVisible: setVisible
    })));
  };
};

export default withControllableLayer;