@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/modal/ModalContent.js

@@ -0,0 +1,337 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/modal/constants");
+
+var _context4 = _interopRequireDefault(require("../configProvider/context"));
+
+var _iconButton = _interopRequireDefault(require("../iconButton"));
+
+var _typography = _interopRequireDefault(require("../typography"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _modalContentFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/modal/modalContentFoundation"));
+
+var _lodashEs = require("lodash-es");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable eqeqeq */
+
+
+let uuid = 0;
+
+class ModalContent extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.onKeyDown = e => {
+      this.foundation.handleKeyDown(e);
+    }; // Record when clicking the modal box
+
+
+    this.onDialogMouseDown = () => {
+      this.foundation.handleDialogMouseDown();
+    }; // Cancel recording when clicking the modal box at the end
+
+
+    this.onMaskMouseUp = () => {
+      this.foundation.handleMaskMouseUp();
+    }; // onMaskClick will judge dialogMouseDown before onMaskMouseUp updates dialogMouseDown
+
+
+    this.onMaskClick = e => {
+      this.foundation.handleMaskClick(e);
+    };
+
+    this.close = e => {
+      this.foundation.close(e);
+    };
+
+    this.getMaskElement = () => {
+      const props = __rest(this.props, []);
+
+      const {
+        mask,
+        maskClassName
+      } = props;
+
+      if (mask) {
+        const className = (0, _classnames.default)("".concat(_constants.cssClasses.DIALOG, "-mask"), {// [`${cssClasses.DIALOG}-mask-hidden`]: !props.visible,
+        });
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: "mask",
+          className: (0, _classnames.default)(className, maskClassName),
+          style: props.maskStyle
+        });
+      }
+
+      return null;
+    };
+
+    this.renderCloseBtn = () => {
+      const {
+        closable,
+        closeIcon
+      } = this.props;
+      let closer;
+
+      if (closable) {
+        const iconType = closeIcon || /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null);
+
+        closer = /*#__PURE__*/_react.default.createElement(_iconButton.default, {
+          className: "".concat(_constants.cssClasses.DIALOG, "-close"),
+          key: "close-btn",
+          onClick: this.close,
+          type: "tertiary",
+          icon: iconType,
+          theme: "borderless",
+          size: "small"
+        });
+      }
+
+      return closer;
+    };
+
+    this.renderIcon = () => {
+      const {
+        icon
+      } = this.props;
+      return icon ? /*#__PURE__*/_react.default.createElement("span", {
+        className: "".concat(_constants.cssClasses.DIALOG, "-icon-wrapper")
+      }, icon) : null;
+    };
+
+    this.renderHeader = () => {
+      if ('header' in this.props) {
+        return this.props.header;
+      }
+
+      const {
+        title
+      } = this.props;
+      const closer = this.renderCloseBtn();
+      const icon = this.renderIcon();
+      return title === null || title === undefined ? null : /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_constants.cssClasses.DIALOG, "-header")
+      }, icon, /*#__PURE__*/_react.default.createElement(_typography.default.Title, {
+        heading: 5,
+        className: "".concat(_constants.cssClasses.DIALOG, "-title")
+      }, title), closer);
+    };
+
+    this.renderBody = () => {
+      const {
+        bodyStyle,
+        children,
+        title
+      } = this.props;
+      const bodyCls = (0, _classnames.default)("".concat(_constants.cssClasses.DIALOG, "-body"), {
+        ["".concat(_constants.cssClasses.DIALOG, "-withIcon")]: this.props.icon
+      });
+      const closer = this.renderCloseBtn();
+      const icon = this.renderIcon();
+      const hasHeader = title !== null && title !== undefined || 'header' in this.props;
+      return hasHeader ? /*#__PURE__*/_react.default.createElement("div", {
+        className: bodyCls,
+        style: bodyStyle
+      }, children) : /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_constants.cssClasses.DIALOG, "-body-wrapper")
+      }, icon, /*#__PURE__*/_react.default.createElement("div", {
+        className: bodyCls,
+        style: bodyStyle
+      }, children), closer);
+    };
+
+    this.getDialogElement = () => {
+      var _context;
+
+      const props = __rest(this.props, []);
+
+      const style = {};
+      const digCls = (0, _classnames.default)("".concat(_constants.cssClasses.DIALOG), {
+        ["".concat(_constants.cssClasses.DIALOG, "-centered")]: props.centered,
+        [(0, _concat.default)(_context = "".concat(_constants.cssClasses.DIALOG, "-")).call(_context, props.size)]: props.size
+      });
+
+      if (props.width) {
+        style.width = props.width;
+      }
+
+      if (props.height) {
+        style.height = props.height;
+      }
+
+      if (props.isFullScreen) {
+        style.width = '100%';
+        style.height = '100%';
+        style.margin = 'unset';
+      }
+
+      const body = this.renderBody();
+      const header = this.renderHeader();
+      const footer = props.footer ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(_constants.cssClasses.DIALOG, "-footer")
+      }, props.footer) : null;
+
+      const dialogElement = /*#__PURE__*/_react.default.createElement("div", {
+        key: "dialog-element",
+        className: digCls,
+        onMouseDown: this.onDialogMouseDown,
+        style: (0, _assign.default)((0, _assign.default)({}, props.style), style),
+        id: this.dialogId
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        onAnimationEnd: props.onAnimationEnd,
+        className: (0, _classnames.default)(["".concat(_constants.cssClasses.DIALOG, "-content"), props.contentClassName, {
+          ["".concat(_constants.cssClasses.DIALOG, "-content-fullScreen")]: props.isFullScreen
+        }])
+      }, header, body, footer)); // return props.visible ? dialogElement : null;
+
+
+      return dialogElement;
+    };
+
+    this.state = {
+      dialogMouseDown: false
+    };
+    this.foundation = new _modalContentFoundation.default(this.adapter);
+    this.dialogId = "dialog-".concat(uuid++);
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      notifyClose: e => {
+        this.props.onClose(e);
+      },
+      notifyDialogMouseDown: () => {
+        this.setState({
+          dialogMouseDown: true
+        });
+      },
+      notifyDialogMouseUp: () => {
+        if (this.state.dialogMouseDown) {
+          // Not setting setTimeout triggers close when modal external mouseUp
+          this.timeoutId = (0, _setTimeout2.default)(() => {
+            this.setState({
+              dialogMouseDown: false
+            });
+          }, 0);
+        }
+      },
+      addKeyDownEventListener: () => {
+        if (this.props.closeOnEsc) {
+          var _context2;
+
+          document.addEventListener('keydown', (0, _bind.default)(_context2 = this.foundation.handleKeyDown).call(_context2, this.foundation));
+        }
+      },
+      removeKeyDownEventListener: () => {
+        if (this.props.closeOnEsc) {
+          var _context3;
+
+          document.removeEventListener('keydown', (0, _bind.default)(_context3 = this.foundation.handleKeyDown).call(_context3, this.foundation));
+        }
+      },
+      getMouseState: () => this.state.dialogMouseDown
+    });
+  }
+
+  componentDidMount() {
+    this.foundation.handleKeyDownEventListenerMount();
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeoutId);
+    this.foundation.destroy();
+  }
+
+  render() {
+    const {
+      maskClosable,
+      className,
+      getPopupContainer,
+      maskFixed,
+      getContainerContext
+    } = this.props;
+    const {
+      direction
+    } = this.context;
+    const classList = (0, _classnames.default)(className, {
+      ["".concat(_constants.cssClasses.DIALOG, "-popup")]: getPopupContainer && !maskFixed,
+      ["".concat(_constants.cssClasses.DIALOG, "-fixed")]: maskFixed,
+      ["".concat(_constants.cssClasses.DIALOG, "-rtl")]: direction === 'rtl'
+    });
+    const containerContext = getContainerContext();
+
+    const elem = /*#__PURE__*/_react.default.createElement("div", {
+      className: classList
+    }, this.getMaskElement(), /*#__PURE__*/_react.default.createElement("div", {
+      role: "modal",
+      tabIndex: -1,
+      className: "".concat(_constants.cssClasses.DIALOG, "-wrap"),
+      onClick: maskClosable ? this.onMaskClick : null,
+      onMouseUp: maskClosable ? this.onMaskMouseUp : null
+    }, this.getDialogElement())); // @ts-ignore Unreachable branch
+    // eslint-disable-next-line max-len
+
+
+    return containerContext && containerContext.Provider ? /*#__PURE__*/_react.default.createElement(containerContext.Provider, {
+      value: containerContext.value
+    }, elem) : elem;
+  }
+
+}
+
+exports.default = ModalContent;
+ModalContent.contextType = _context4.default;
+ModalContent.propTypes = {
+  close: _propTypes.default.func,
+  getContainerContext: _propTypes.default.func,
+  contentClassName: _propTypes.default.string,
+  maskClassName: _propTypes.default.string,
+  onAnimationEnd: _propTypes.default.func
+};
+ModalContent.defaultProps = {
+  close: _lodashEs.noop,
+  getContainerContext: _lodashEs.noop,
+  contentClassName: '',
+  maskClassName: ''
+};

package/lib/cjs/modal/confirm.d.ts

@@ -0,0 +1,215 @@
+import React from 'react';
+import { ModalReactProps } from './Modal';
+import '@douyinfe/semi-foundation/lib/cjs/modal/modal.css';
+export interface ConfirmProps extends ModalReactProps {
+    type: 'success' | 'info' | 'warning' | 'error' | 'confirm';
+}
+export default function confirm(props: ConfirmProps): {
+    destroy: () => void;
+    update: (newConfig: ConfirmProps) => void;
+};
+export declare function withInfo(props: ModalReactProps): {
+    cancelButtonProps?: import("../button").BaseButtonProps;
+    okButtonProps?: import("../button").BaseButtonProps;
+    bodyStyle?: React.CSSProperties;
+    maskStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
+    icon: React.ReactNode | JSX.Element;
+    closeIcon?: React.ReactNode;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    onOk?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    afterClose?: () => void;
+    cancelText?: string;
+    centered?: boolean;
+    className?: string;
+    closable?: boolean;
+    confirmLoading?: boolean;
+    cancelLoading?: boolean;
+    hasCancel?: boolean;
+    height?: number;
+    mask?: boolean;
+    maskClosable?: boolean;
+    maskFixed?: boolean;
+    motion?: import("@douyinfe/semi-foundation/lib/cjs/utils/type").Motion<any>;
+    okText?: string;
+    okType?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").OKType;
+    visible?: boolean;
+    width?: number;
+    zIndex?: number;
+    getPopupContainer?: () => HTMLElement;
+    closeOnEsc?: boolean;
+    size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
+    lazyRender?: boolean;
+    keepDOM?: boolean;
+    direction?: any;
+    fullScreen?: boolean;
+    type: "info";
+};
+export declare function withSuccess(props: ModalReactProps): {
+    cancelButtonProps?: import("../button").BaseButtonProps;
+    okButtonProps?: import("../button").BaseButtonProps;
+    bodyStyle?: React.CSSProperties;
+    maskStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
+    icon: React.ReactNode | JSX.Element;
+    closeIcon?: React.ReactNode;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    onOk?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    afterClose?: () => void;
+    cancelText?: string;
+    centered?: boolean;
+    className?: string;
+    closable?: boolean;
+    confirmLoading?: boolean;
+    cancelLoading?: boolean;
+    hasCancel?: boolean;
+    height?: number;
+    mask?: boolean;
+    maskClosable?: boolean;
+    maskFixed?: boolean;
+    motion?: import("@douyinfe/semi-foundation/lib/cjs/utils/type").Motion<any>;
+    okText?: string;
+    okType?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").OKType;
+    visible?: boolean;
+    width?: number;
+    zIndex?: number;
+    getPopupContainer?: () => HTMLElement;
+    closeOnEsc?: boolean;
+    size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
+    lazyRender?: boolean;
+    keepDOM?: boolean;
+    direction?: any;
+    fullScreen?: boolean;
+    type: "success";
+};
+export declare function withWarning(props: ModalReactProps): {
+    cancelButtonProps?: import("../button").BaseButtonProps;
+    okButtonProps?: import("../button").BaseButtonProps;
+    bodyStyle?: React.CSSProperties;
+    maskStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
+    icon: React.ReactNode | JSX.Element;
+    closeIcon?: React.ReactNode;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    onOk?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    afterClose?: () => void;
+    cancelText?: string;
+    centered?: boolean;
+    className?: string;
+    closable?: boolean;
+    confirmLoading?: boolean;
+    cancelLoading?: boolean;
+    hasCancel?: boolean;
+    height?: number;
+    mask?: boolean;
+    maskClosable?: boolean;
+    maskFixed?: boolean;
+    motion?: import("@douyinfe/semi-foundation/lib/cjs/utils/type").Motion<any>;
+    okText?: string;
+    okType?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").OKType;
+    visible?: boolean;
+    width?: number;
+    zIndex?: number;
+    getPopupContainer?: () => HTMLElement;
+    closeOnEsc?: boolean;
+    size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
+    lazyRender?: boolean;
+    keepDOM?: boolean;
+    direction?: any;
+    fullScreen?: boolean;
+    type: "warning";
+};
+export declare function withError(props: ModalReactProps): {
+    cancelButtonProps?: import("../button").BaseButtonProps;
+    okButtonProps?: import("../button").BaseButtonProps;
+    bodyStyle?: React.CSSProperties;
+    maskStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
+    icon: React.ReactNode | JSX.Element;
+    closeIcon?: React.ReactNode;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    onOk?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    afterClose?: () => void;
+    cancelText?: string;
+    centered?: boolean;
+    className?: string;
+    closable?: boolean;
+    confirmLoading?: boolean;
+    cancelLoading?: boolean;
+    hasCancel?: boolean;
+    height?: number;
+    mask?: boolean;
+    maskClosable?: boolean;
+    maskFixed?: boolean;
+    motion?: import("@douyinfe/semi-foundation/lib/cjs/utils/type").Motion<any>;
+    okText?: string;
+    okType?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").OKType;
+    visible?: boolean;
+    width?: number;
+    zIndex?: number;
+    getPopupContainer?: () => HTMLElement;
+    closeOnEsc?: boolean;
+    size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
+    lazyRender?: boolean;
+    keepDOM?: boolean;
+    direction?: any;
+    fullScreen?: boolean;
+    type: "error";
+};
+export declare function withConfirm(props: ModalReactProps): {
+    cancelButtonProps?: import("../button").BaseButtonProps;
+    okButtonProps?: import("../button").BaseButtonProps;
+    bodyStyle?: React.CSSProperties;
+    maskStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
+    icon: React.ReactNode | JSX.Element;
+    closeIcon?: React.ReactNode;
+    title?: React.ReactNode;
+    content?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    onCancel?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    onOk?: (e: React.MouseEvent<Element, MouseEvent>) => void | Promise<any>;
+    afterClose?: () => void;
+    cancelText?: string;
+    centered?: boolean;
+    className?: string;
+    closable?: boolean;
+    confirmLoading?: boolean;
+    cancelLoading?: boolean;
+    hasCancel?: boolean;
+    height?: number;
+    mask?: boolean;
+    maskClosable?: boolean;
+    maskFixed?: boolean;
+    motion?: import("@douyinfe/semi-foundation/lib/cjs/utils/type").Motion<any>;
+    okText?: string;
+    okType?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").OKType;
+    visible?: boolean;
+    width?: number;
+    zIndex?: number;
+    getPopupContainer?: () => HTMLElement;
+    closeOnEsc?: boolean;
+    size?: import("@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation").Size;
+    lazyRender?: boolean;
+    keepDOM?: boolean;
+    direction?: any;
+    fullScreen?: boolean;
+    type: "confirm";
+};

package/lib/cjs/modal/confirm.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = confirm;
+exports.withConfirm = withConfirm;
+exports.withError = withError;
+exports.withInfo = withInfo;
+exports.withSuccess = withSuccess;
+exports.withWarning = withWarning;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _Modal = require("./Modal");
+
+var _ConfirmModal = _interopRequireDefault(require("./ConfirmModal"));
+
+require("@douyinfe/semi-foundation/lib/cjs/modal/modal.css");
+
+var _lodashEs = require("lodash-es");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+function confirm(props) {
+  // create a dom in adapter?
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  let currentConfig = (0, _assign.default)({}, props);
+
+  const destroy = () => {
+    const unmountResult = _reactDom.default.unmountComponentAtNode(div);
+
+    if (unmountResult && div.parentNode) {
+      div.parentNode.removeChild(div);
+    }
+
+    for (let i = 0; i < _Modal.destroyFns.length; i++) {
+      const fn = _Modal.destroyFns[i]; // eslint-disable-next-line @typescript-eslint/no-use-before-define
+
+      if (fn === close) {
+        (0, _splice.default)(_Modal.destroyFns).call(_Modal.destroyFns, i, 1);
+        break;
+      }
+    }
+  };
+
+  const mergedMotion = typeof props.motion === 'undefined' || props.motion ? (0, _assign.default)((0, _assign.default)({}, props.motion), {
+    didLeave: function () {
+      const didLeave = (0, _lodashEs.get)(props.motion, 'didLeave');
+
+      if (typeof didLeave === 'function') {
+        didLeave(...arguments);
+      }
+
+      destroy();
+    }
+  }) : false;
+
+  function render(renderProps) {
+    _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_ConfirmModal.default, (0, _assign.default)({}, renderProps, {
+      motion: mergedMotion
+    })), div);
+  }
+
+  function close() {
+    currentConfig = (0, _assign.default)((0, _assign.default)({}, currentConfig), {
+      visible: false
+    });
+    render(currentConfig);
+  }
+
+  function update(newConfig) {
+    currentConfig = (0, _assign.default)((0, _assign.default)({}, currentConfig), newConfig);
+    render(currentConfig);
+  }
+
+  render(currentConfig);
+
+  _Modal.destroyFns.push(close);
+
+  return {
+    destroy: close,
+    update
+  };
+}
+
+function withInfo(props) {
+  return (0, _assign.default)({
+    type: 'info',
+    icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconInfoCircle, null)
+  }, props);
+}
+
+function withSuccess(props) {
+  return (0, _assign.default)({
+    type: 'success',
+    icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconTickCircle, null)
+  }, props);
+}
+
+function withWarning(props) {
+  return (0, _assign.default)({
+    type: 'warning',
+    icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertTriangle, null)
+  }, props);
+}
+
+function withError(props) {
+  return (0, _assign.default)({
+    type: 'error',
+    icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertCircle, null)
+  }, props);
+}
+
+function withConfirm(props) {
+  return (0, _assign.default)({
+    type: 'confirm',
+    icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconHelpCircle, null)
+  }, props);
+}

package/lib/cjs/modal/index.d.ts

@@ -0,0 +1,8 @@
+import '@douyinfe/semi-foundation/lib/cjs/modal/modal.css';
+import { ModalState } from '@douyinfe/semi-foundation/lib/cjs/modal/modalFoundation';
+import Modal from './Modal';
+import { ModalReactProps } from './Modal';
+export { ConfirmProps } from './confirm';
+export declare type Directions = 'ltr' | 'rtl';
+export { ModalReactProps, ModalState };
+export default Modal;