zarm/es/modal/Modal.js

基于 React 的移动端UI库

import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { createBEM } from '@zarm-design/bem';
import { Close as CloseIcon } from '@zarm-design/icons';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import Popup from '../popup';
import { noop } from '../utils';
import ModalAction from './ModalAction';
var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var className = props.className,
      title = props.title,
      shape = props.shape,
      closable = props.closable,
      onClose = props.onClose,
      children = props.children,
      footer = props.footer,
      maskClosable = props.maskClosable,
      actions = props.actions,
      onAction = props.onAction,
      rest = _objectWithoutProperties(props, ["className", "title", "shape", "closable", "onClose", "children", "footer", "maskClosable", "actions", "onAction"]);

  var _React$useContext = React.useContext(ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = createBEM('modal', {
    prefixCls: prefixCls
  });
  var cls = bem([_defineProperty({}, "".concat(shape), !!shape), className]);
  var showHeader = title || closable;
  var hasActions = actions && actions.length > 0;
  var showFooter = !!footer || hasActions;
  var actionsRender = actions.map(function (action, i) {
    var currentAction = Array.isArray(action) ? action : [action];
    return /*#__PURE__*/React.createElement("div", {
      key: +i,
      className: bem('action')
    }, currentAction.map(function (child, j) {
      return /*#__PURE__*/React.createElement(ModalAction, _extends({}, child, {
        key: +j,
        onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
          var _child$onClick;

          return _regeneratorRuntime.wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  _context.next = 2;
                  return (_child$onClick = child.onClick) === null || _child$onClick === void 0 ? void 0 : _child$onClick.call(child);

                case 2:
                  _context.next = 4;
                  return onAction === null || onAction === void 0 ? void 0 : onAction(child);

                case 4:
                case "end":
                  return _context.stop();
              }
            }
          }, _callee);
        }))
      }));
    }));
  });
  return /*#__PURE__*/React.createElement(Popup, _extends({}, rest, {
    ref: ref,
    className: cls,
    direction: "center",
    onMaskClick: maskClosable ? onClose : noop
  }), /*#__PURE__*/React.createElement("div", {
    className: bem('dialog')
  }, /*#__PURE__*/React.createElement("div", {
    className: bem('body')
  }, showHeader && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: bem('title')
  }, title), closable && /*#__PURE__*/React.createElement(CloseIcon, {
    size: "sm",
    className: bem('close'),
    onClick: onClose
  })), children), showFooter && /*#__PURE__*/React.createElement("div", {
    className: bem('footer')
  }, hasActions ? actionsRender : footer)));
});
Modal.defaultProps = {
  visible: false,
  animationType: 'fade',
  width: '70%',
  mask: true,
  shape: 'radius',
  closable: false,
  maskClosable: false,
  destroy: true,
  actions: []
};
export default Modal;