ps-frame-father/lib/components/Drawer/index.js

An enterprise-class UI design language and React components implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

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

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _propTypes = _interopRequireDefault(require("prop-types"));

require("./index.css");

/**
 * Drawer 抽屉组件
 * @param {visible} bool 抽屉是否可见
 * @param {closable} bool 是否显示右上角的关闭按钮
 * @param {destroyOnClose} bool 关闭时销毁里面的子元素
 * @param {getContainer} HTMLElement 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom
 * @param {maskClosable} bool 点击蒙层是否允许关闭抽屉
 * @param {mask} bool 是否展示遮罩
 * @param {drawerStyle} object 用来设置抽屉弹出层样式
 * @param {width} number|string 弹出层宽度
 * @param {zIndex} number 弹出层层级
 * @param {placement} string 抽屉方向
 * @param {onClose} string 点击关闭时的回调
 */
function Drawer(props) {
  var _props$closable = props.closable,
      closable = _props$closable === void 0 ? true : _props$closable,
      destroyOnClose = props.destroyOnClose,
      _props$getContainer = props.getContainer,
      getContainer = _props$getContainer === void 0 ? document.body : _props$getContainer,
      _props$maskClosable = props.maskClosable,
      maskClosable = _props$maskClosable === void 0 ? true : _props$maskClosable,
      _props$mask = props.mask,
      mask = _props$mask === void 0 ? true : _props$mask,
      drawerStyle = props.drawerStyle,
      _props$width = props.width,
      width = _props$width === void 0 ? '300px' : _props$width,
      _props$zIndex = props.zIndex,
      zIndex = _props$zIndex === void 0 ? 10 : _props$zIndex,
      _props$placement = props.placement,
      placement = _props$placement === void 0 ? 'right' : _props$placement,
      onClose = props.onClose,
      children = props.children;

  var _useState = (0, _react.useState)(props.visible),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      isDesChild = _useState4[0],
      setIsDesChild = _useState4[1];

  var handleClose = function handleClose() {
    onClose && onClose();
    setVisible(function (prev) {
      if (getContainer !== false && prev) {
        getContainer.style.overflow = 'auto';
      }

      return false;
    });

    if (destroyOnClose) {
      setIsDesChild(true);
    }
  };

  (0, _react.useEffect)(function () {
    setVisible(function () {
      if (getContainer !== false && props.visible) {
        getContainer.style.overflow = 'hidden';
      }

      return props.visible;
    });
    setIsDesChild(false);
  }, [props.visible, getContainer]);

  var childDom = /*#__PURE__*/_react.default.createElement("div", {
    className: "xDrawerWrap",
    style: {
      position: getContainer === false ? 'absolute' : 'fixed',
      width: visible ? '100%' : '0',
      zIndex: zIndex
    }
  }, !!mask && /*#__PURE__*/_react.default.createElement("div", {
    className: "xDrawerMask",
    onClick: maskClosable ? handleClose : null
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "xDrawerContent",
    style: (0, _objectSpread3.default)((0, _defineProperty2.default)({
      width: width
    }, placement, visible ? 0 : '-100%'), drawerStyle)
  }, isDesChild ? null : children, !!closable && /*#__PURE__*/_react.default.createElement("span", {
    className: "xCloseBtn",
    onClick: handleClose
  }, "X")));

  return getContainer === false ? childDom : /*#__PURE__*/_reactDom.default.createPortal(childDom, getContainer);
}

Drawer.propTypes = {
  visible: _propTypes.default.bool,
  closable: _propTypes.default.bool,
  destroyOnClose: _propTypes.default.bool,
  getContainer: _propTypes.default.element,
  maskClosable: _propTypes.default.bool,
  mask: _propTypes.default.bool,
  drawerStyle: _propTypes.default.object,
  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  zIndex: _propTypes.default.number,
  placement: _propTypes.default.string,
  onClose: _propTypes.default.func
};
var _default = Drawer;
exports.default = _default;