@jannie-shao/components-antd4/es/drawer/index.js

基于 Antd 4 的组件封装

import "antd/es/drawer/style";
import _Drawer from "antd/es/drawer";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["container", "children", "placement", "title", "beforePop", "afterClose", "zIndex", "getContainer"];
import React, { useState, useImperativeHandle, forwardRef } from 'react';
import PropTypes from 'prop-types';
import { LeftOutlined } from '@ant-design/icons';
import { callFun, cloneElement } from "../utils";
import { rootPrefix } from "../style/config";
var prefix = rootPrefix + "-drawer";
var DrawerOver = /*#__PURE__*/forwardRef(function (_ref, ref) {
  var container = _ref.container,
    children = _ref.children,
    placement = _ref.placement,
    title = _ref.title,
    beforePop = _ref.beforePop,
    afterClose = _ref.afterClose,
    zIndex = _ref.zIndex,
    getContainer = _ref.getContainer,
    moreProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _useState = useState(false),
    visible = _useState[0],
    setVisible = _useState[1];
  var _useState2 = useState(false),
    showContainer = _useState2[0],
    setShowContainer = _useState2[1];
  var handleShow = function handleShow() {
    setShowContainer(true);
    callFun(function () {
      return beforePop();
    }, function () {
      return setVisible(true);
    });
  };
  var handleClose = function handleClose() {
    setVisible(false);
    afterClose();
  };
  useImperativeHandle(ref, function () {
    return {
      handleShow: handleShow,
      handleClose: handleClose,
      handleShowContainer: function handleShowContainer() {
        return setShowContainer(true);
      }
    };
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, cloneElement(children, {
    onClick: handleShow
  }), /*#__PURE__*/React.createElement(_Drawer, _extends({}, moreProps, {
    className: prefix + " " + (moreProps.className || ''),
    getContainer: getContainer,
    width: "100%",
    zIndex: zIndex,
    push: false,
    closable: false,
    placement: placement,
    open: visible,
    title: /*#__PURE__*/React.createElement("div", {
      className: prefix + "-top-bar"
    }, /*#__PURE__*/React.createElement("a", {
      onClick: handleClose
    }, /*#__PURE__*/React.createElement(LeftOutlined, null), "Return"), title)
  }), showContainer && cloneElement(container)));
});
DrawerOver.propTypes = {
  container: PropTypes.node,
  children: PropTypes.node,
  placement: PropTypes.string,
  title: PropTypes.string,
  beforePop: PropTypes.func,
  afterClose: PropTypes.func,
  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  getContainer: PropTypes.any
};
DrawerOver.defaultProps = {
  container: /*#__PURE__*/React.createElement(React.Fragment, null),
  children: /*#__PURE__*/React.createElement(React.Fragment, null),
  placement: 'right',
  title: '',
  beforePop: function beforePop() {},
  afterClose: function afterClose() {},
  zIndex: 9,
  getContainer: false
};
export default DrawerOver;