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

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React from "react";
import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import "./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 = useState(props.visible),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_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);
    }
  };

  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.createElement("div", {
    className: "xDrawerWrap",
    style: {
      position: getContainer === false ? 'absolute' : 'fixed',
      width: visible ? '100%' : '0',
      zIndex: zIndex
    }
  }, !!mask && /*#__PURE__*/React.createElement("div", {
    className: "xDrawerMask",
    onClick: maskClosable ? handleClose : null
  }), /*#__PURE__*/React.createElement("div", {
    className: "xDrawerContent",
    style: _objectSpread(_defineProperty({
      width: width
    }, placement, visible ? 0 : '-100%'), drawerStyle)
  }, isDesChild ? null : children, !!closable && /*#__PURE__*/React.createElement("span", {
    className: "xCloseBtn",
    onClick: handleClose
  }, "X")));
  return getContainer === false ? childDom : /*#__PURE__*/ReactDOM.createPortal(childDom, getContainer);
}

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