qt-public-ui/es/Modal/static.js

新设计规范下业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
var _excluded = ["type", "title", "content", "icon", "okButtonProps", "cancelButtonProps", "okText", "okType", "cancelText"];
import React, { useState } from 'react';
import { IconSlim as Icon } from '..';
import { Button } from 'antd';
import classnames from 'classnames';
import { render } from 'react-dom';
import Modal from './modal';
var ICONCLASSNAME = 'umui-modal-icon ';
var ICONS = {
  success: {
    type: 'umicon-success',
    className: 'umui-modal-icon-success'
  },
  error: {
    type: 'umicon-fail',
    className: 'umui-modal-icon-error'
  },
  warning: {
    type: 'umicon-warning',
    className: 'umui-modal-icon-warning'
  },
  confirm: {
    type: 'umicon-comfirm',
    className: 'umui-modal-icon-confirm'
  },
  info: {
    type: 'umicon-info',
    className: 'umui-modal-icon-info'
  }
};
var StaticModal = function StaticModal(props) {
  var type = props.type,
    title = props.title,
    content = props.content,
    icon = props.icon,
    okButtonProps = props.okButtonProps,
    cancelButtonProps = props.cancelButtonProps,
    _props$okText = props.okText,
    okText = _props$okText === void 0 ? '确定' : _props$okText,
    _props$okType = props.okType,
    okType = _props$okType === void 0 ? 'primary' : _props$okType,
    _props$cancelText = props.cancelText,
    cancelText = _props$cancelText === void 0 ? '取消' : _props$cancelText,
    modalProps = _objectWithoutPropertiesLoose(props, _excluded);
  var _useState = useState(true),
    visible = _useState[0],
    setVisible = _useState[1];
  var presetIcon = ICONS[type];
  var onModalCancel = function onModalCancel() {
    var onCancel = props.onCancel;
    setTimeout(function () {
      onCancel && onCancel();
    }, 0);
    setVisible(false);
  };
  var onModalConfirm = function onModalConfirm() {
    var onOk = props.onOk;
    setTimeout(function () {
      onOk && onOk();
    }, 0);
    setVisible(false);
  };
  return /*#__PURE__*/React.createElement(Modal, _extends({
    maskClosable: false,
    width: 416
  }, modalProps, {
    visible: visible,
    footer: null,
    closable: false,
    className: "umui-modal-static ant-modal-confirm"
  }), /*#__PURE__*/React.createElement("div", {
    className: classnames('umui-static-modal', 'ant-modal-confirm-body-wrapper', {
      'umui-static-modal-without-title': !title
    })
  }, /*#__PURE__*/React.createElement("div", {
    className: "ant-modal-confirm-body"
  }, icon || /*#__PURE__*/React.createElement(Icon, {
    type: presetIcon.type,
    className: ICONCLASSNAME + presetIcon.className
  }), /*#__PURE__*/React.createElement("div", {
    className: "umui-static-modal-body"
  }, /*#__PURE__*/React.createElement("span", {
    className: "ant-modal-confirm-title"
  }, title), /*#__PURE__*/React.createElement("div", {
    className: "ant-modal-confirm-content"
  }, content))), /*#__PURE__*/React.createElement("div", {
    className: "ant-modal-confirm-btns"
  }, type !== 'confirm' ? /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    onClick: onModalCancel
  }, okText) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({}, cancelButtonProps, {
    onClick: onModalCancel
  }), cancelText), /*#__PURE__*/React.createElement(Button, _extends({
    type: okType || 'primary'
  }, okButtonProps, {
    onClick: onModalConfirm
  }), okText)))));
};
StaticModal.call = function (type, props) {
  var div = document.createElement('div');
  div.style.position = 'absolute';
  div.style.top = '0px';
  div.style.left = '0px';
  document.body.appendChild(div);
  var onCancel = function onCancel() {
    document.body.removeChild(div);
    props.onCancel && props.onCancel();
  };
  var onOk = function onOk() {
    document.body.removeChild(div);
    props.onOk && props.onOk();
  };
  var modal = /*#__PURE__*/React.createElement(StaticModal, _extends({}, props, {
    type: type,
    onCancel: onCancel,
    onOk: onOk,
    getContainer: function getContainer() {
      return div;
    }
  }));
  render(modal, div);
};
export default {
  success: StaticModal.call.bind(null, 'success'),
  error: StaticModal.call.bind(null, 'error'),
  warning: StaticModal.call.bind(null, 'warning'),
  confirm: StaticModal.call.bind(null, 'confirm'),
  info: StaticModal.call.bind(null, 'info')
};