@qsxy/element-plus-react 1.0.2 → 1.0.3

package/dist/Menu/Menu.js

@@ -150,6 +150,29 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
     onOpen === null || onOpen === void 0 || onOpen(index, indexPath, item);
   }, [addItem, collapse, mode, onOpen, removeItem, uniqueOpened]);
 
+  /** 激活菜单项 */
+  var activeMenu = useCallback(function (index) {
+    var menu = menuItemsRef.current.find(function (item) {
+      return item.index === index;
+    });
+    if (menu && menu.indexPath.length > 1) {
+      setActive(menu.indexPath);
+      menu.indexPath.reduce(function (prev, item) {
+        handleOpenMenu(item, [].concat(_toConsumableArray(prev), [item]), {
+          index: item,
+          indexPath: [].concat(_toConsumableArray(prev), [item])
+        });
+        return [].concat(_toConsumableArray(prev), [item]);
+      }, []);
+    } else {
+      setActive([]);
+      subMenuRef.current.forEach(function (item) {
+        item.closeMenu(item.index, item.indexPath);
+        removeItem(item);
+      });
+    }
+  }, [handleOpenMenu, removeItem, setActive]);
+
   /** 激活菜单项 */
   var activeMenus = useCallback(function () {
     if (defaultActive) {
@@ -237,7 +260,8 @@ var Menu = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return {
       open: open,
-      close: close
+      close: close,
+      activeMenu: activeMenu
     };
   });
   return (

package/dist/Menu/MenuItem.js

@@ -47,11 +47,13 @@ var MenuItem = function MenuItem(props) {
     });
     onOpen === null || onOpen === void 0 || onOpen(index, indexPath, {
       index: index,
-      indexPath: indexPath
+      indexPath: indexPath,
+      route: route
     });
     onSelect === null || onSelect === void 0 || onSelect(index, indexPath, {
       index: index,
-      indexPath: indexPath
+      indexPath: indexPath,
+      route: route
     });
     if (router) {
       navigate === null || navigate === void 0 || navigate(route !== null && route !== void 0 ? route : index);

package/dist/Menu/SubMenu.js

@@ -248,7 +248,7 @@ var SubMenu = function SubMenu(props) {
     name: "el-menu-collapse",
     nodeRef: ulRef,
     disabled: disabled,
-    duration: 300,
+    duration: 10,
     visible: expand,
     beforeEnter: beforeEnter,
     onEnter: onEnter,
@@ -258,7 +258,7 @@ var SubMenu = function SubMenu(props) {
     afterLeave: afterLeave
   }, /*#__PURE__*/React.createElement("ul", {
     ref: ulRef,
-    className: classNames(mb(), mm(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["inline"])))),
+    className: classNames(mb(), mm(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["inline"]))), 'collapse-transition'),
     style: {
       '--el-menu-level': level
     }

package/dist/Menu/SubMenuCollapseTransition.js

@@ -4,7 +4,7 @@ export var beforeEnter = function beforeEnter(el) {
   el.style.opacity = '0';
 };
 export var onEnter = function onEnter(el) {
-  addClass(el, 'collapse-transition');
+  // addClass(el, 'collapse-transition');
   el.dataset.oldOverflow = el.style.overflow;
   if (el.scrollHeight !== 0) {
     el.style.height = "".concat(el.scrollHeight, "px");
@@ -16,12 +16,14 @@ export var onEnter = function onEnter(el) {
   addClass(closest(el, 'li'), 'open');
 };
 export var afterEnter = function afterEnter(el) {
-  removeClass(el, 'collapse-transition');
-  el.style.height = '';
-  el.style.overflow = el.dataset.oldOverflow;
+  // removeClass(el, 'collapse-transition');
+  setTimeout(function () {
+    el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+  }, 300);
 };
 export var beforeLeave = function beforeLeave(el) {
-  addClass(el, 'collapse-transition');
+  // addClass(el, 'collapse-transition');
   if (!el.dataset) {
     el.dataset = {};
   }
@@ -35,10 +37,13 @@ export var onLeave = function onLeave(el) {
   el.style.height = 0;
 };
 export var afterLeave = function afterLeave(el) {
-  el.style.height = '';
-  el.style.overflow = el.dataset.oldOverflow;
-  el.style.display = '';
-  removeClass(closest(el, 'li'), 'open');
+  el.style.display = 'block';
+  setTimeout(function () {
+    el.style.height = '';
+    el.style.overflow = el.dataset.oldOverflow;
+    el.style.display = '';
+    removeClass(closest(el, 'li'), 'open');
+  }, 300);
 };
 var closest = function closest(el, selector) {
   var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

package/dist/Menu/typings.d.ts

@@ -4,6 +4,7 @@ import { BaseProps, NativeProps } from '../types/common';
 export interface MenuRef {
     open: MenuOpenEvent;
     close: MenuCloseEvent;
+    activeMenu: (index: string) => void;
 }
 export interface MenuProps extends BaseProps, NativeProps<'--el-menu-active-color' | '--el-menu-text-color' | '--el-menu-hover-text-color' | '--el-menu-bg-color' | '--el-menu-hover-bg-color' | '--el-menu-item-height' | '--el-menu-sub-item-height' | '--el-menu-horizontal-height' | '--el-menu-horizontal-sub-item-height' | '--el-menu-item-font-size' | '--el-menu-item-hover-fill' | '--el-menu-border-color' | '--el-menu-base-level-padding' | '--el-menu-level-padding' | '--el-menu-icon-width'> {
     /** 菜单展示模式 */
@@ -24,7 +25,7 @@ export interface MenuProps extends BaseProps, NativeProps<'--el-menu-active-colo
     uniqueOpened?: boolean;
     /** 子菜单打开的触发方式，只在 mode 为 horizontal 时有效 */
     menuTrigger?: 'hover' | 'click';
-    /** 是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 defaultActive 来设置加载时的激活项。 */
+    /** 是否启用 react-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 defaultActive 来设置加载时的激活项。 */
     router?: boolean;
     /** 是否开启折叠动画 */
     collapseTransition?: boolean;

package/dist/Message/Message.js

@@ -20,9 +20,10 @@ import classNames from 'classnames';
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import Badge from "../Badge/Badge";
+import { Icon } from "../Icon";
 import Transition from "../Transition/Transition";
 import { PopupManager, mergeDefaultProps } from "../Util";
-import { EVENT_CODE, TypeMap } from "../config/Constants";
+import { EVENT_CODE, TypeComponentsMap } from "../config/Constants";
 import { useClassNames } from "../hooks";
 // import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 
@@ -31,16 +32,18 @@ var Message = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   props = mergeDefaultProps({
     duration: 3000,
     message: '',
-    showClose: true,
+    showClose: false,
     type: 'info',
-    offset: 20
+    offset: 20,
+    placement: 'top'
   }, props);
   var _props = props,
     _props$classPrefix = _props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'message' : _props$classPrefix,
-    center = _props.center,
+    plain = _props.plain,
+    placement = _props.placement,
     iconClass = _props.iconClass,
-    closable = _props.showClose,
+    showClose = _props.showClose,
     type = _props.type,
     onClose = _props.onClose,
     duration = _props.duration,
@@ -52,6 +55,7 @@ var Message = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
     b = _useClassNames.b,
     e = _useClassNames.e,
     m = _useClassNames.m,
+    bm = _useClassNames.bm,
     is = _useClassNames.is;
   // const { message: messageConfig } = useContext(ConfigProvider);
 
@@ -147,19 +151,41 @@ var Message = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
-  /** 前缀图标 */
-  var typeClass = useMemo(function () {
-    var _type = !iconClass && type;
-    return _type && TypeMap[_type] ? b("icon-".concat(TypeMap[_type]), false) : '';
-  }, [b, iconClass, type]);
+  // const lastOffset = useMemo(() => getLastOffset(id, placement), [id, placement]);
+  // const offsetValue = useMemo(() => getOffsetOrSpace(id, offset, placement) + lastOffset, [id, offset, placement]);
+  // const bottom = useMemo(() => height + offsetValue, [height, offsetValue]);
+
+  var badgeType = useMemo(function () {
+    return type === 'error' ? 'danger' : type;
+  }, [type]);
+  var horizontalClass = useMemo(function () {
+    if (placement.includes('left')) {
+      return is('left');
+    }
+    if (placement.includes('right')) {
+      return is('right');
+    }
+    return is('center');
+  }, [is, placement]);
+  var verticalProperty = useMemo(function () {
+    return placement.startsWith('top') ? 'top' : 'bottom';
+  }, [placement]);
+  var customStyle = useMemo(function () {
+    return {
+      //   [verticalProperty]: `${offsetValue}px`,
+      zIndex: PopupManager.nextZIndex()
+    };
+  }, []);
 
   /** 关闭图标 */
   var closeIcon = useMemo(function () {
-    return closable && /*#__PURE__*/React.createElement("div", {
-      className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["closeBtn"]))), b('icon-close', false)),
+    return showClose && /*#__PURE__*/React.createElement(Icon, {
+      name: "xmark",
+      prefix: "fal",
+      className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["closeBtn"])))),
       onClick: handleClose
     });
-  }, [closable, e, b, handleClose]);
+  }, [showClose, e, handleClose]);
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Transition, {
     nodeRef: messageRef,
     name: b('message-fade', false),
@@ -170,24 +196,26 @@ var Message = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
     afterLeave: afterLeave
   }, /*#__PURE__*/React.createElement("div", {
     ref: messageRef,
-    className: classNames(b(), _defineProperty({}, m(type), type && !iconClass), is({
-      center: center,
-      closable: closable
-    }), props.className),
+    className: classNames(b(), _defineProperty({}, m(type), type && !iconClass), is('center', {
+      closable: showClose,
+      plain: plain,
+      bottom: verticalProperty === 'bottom'
+    }), horizontalClass, props.className),
     style: _objectSpread(_objectSpread({}, (_props2 = props) === null || _props2 === void 0 ? void 0 : _props2.style), {}, {
-      top: offset,
-      zIndex: PopupManager.nextZIndex()
-    })
+      top: offset
+    }, customStyle)
     // 鼠标悬浮停止自动关闭
     ,
     onMouseEnter: clearTimer,
     onMouseLeave: startTimer
   }, repeatNum > 1 && /*#__PURE__*/React.createElement(Badge, {
     value: repeatNum,
-    type: type || 'info',
+    type: badgeType,
     className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["badge"])))
-  }), (type || iconClass) && /*#__PURE__*/React.createElement("i", {
-    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["icon"]))), typeClass, iconClass)
+  }), (type || iconClass) && /*#__PURE__*/React.createElement(Icon, {
+    name: TypeComponentsMap[type],
+    prefix: "fas",
+    className: classNames(e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["icon"]))), _defineProperty({}, bm('icon', type), type && TypeComponentsMap[type]), iconClass)
   }), /*#__PURE__*/React.createElement("p", {
     className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["content"])))
   }, message), closeIcon)), document.body);

package/dist/Message/index.js

@@ -5,24 +5,22 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { isValidElement } from 'react';
-import { isEmpty, mergeDefaultProps } from "../Util";
+import { isEmpty } from "../Util";
 import Main from "./Main";
 export var instances = [];
 var seed = 1;
 export var Message = function Message() {
   var _opts, _ref$current, _ref$current2;
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var ll = localStorage.getItem('__el__message__config__provider__');
-  var configProvider = ll ? JSON.parse(ll) : {};
   if (typeof opts === 'string' || /*#__PURE__*/isValidElement(opts)) {
-    opts = _objectSpread(_objectSpread({}, configProvider), {}, {
+    opts = {
       message: opts
-    });
+    };
   }
   if (isEmpty(opts)) {
-    opts = _objectSpread(_objectSpread({}, configProvider), {}, {
+    opts = {
       message: ''
-    });
+    };
   }
   var options = opts;
   var verticalOffset = typeof opts !== 'string' && ! /*#__PURE__*/isValidElement(opts) ? ((_opts = opts) === null || _opts === void 0 ? void 0 : _opts.offset) || 20 : 20;
@@ -38,13 +36,13 @@ export var Message = function Message() {
     userOnClose = null;
     options.userOnClose = options.onClose;
   }
-  options = mergeDefaultProps(configProvider, _objectSpread(_objectSpread({}, options), {}, {
+  options = _objectSpread(_objectSpread({}, options), {}, {
     onClose: function onClose() {
       close(id, userOnClose);
     },
     offset: verticalOffset,
     id: id
-  }));
+  });
   if (options.grouping && instances.length) {
     var instance = instances.find(function (inst) {
       return inst.current.message === options.message;
@@ -99,7 +97,7 @@ export function closeAll() {
     instance.close();
   }
 }
-['success', 'warning', 'info', 'error'].forEach(function (type) {
+['primary', 'success', 'warning', 'info', 'error'].forEach(function (type) {
   Message[type] = function (options) {
     if (typeof options === 'string' || /*#__PURE__*/isValidElement(options)) {
       options = {

package/dist/Message/typings.d.ts

@@ -1,13 +1,13 @@
 import React, { RefObject } from 'react';
-import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
+import { AnimationEventProps, BaseProps, NativeProps, TypeAttributes } from '../types/common';
 export interface MessageHandle {
     close: () => void;
     el: RefObject<HTMLElement>;
 }
 export interface MessageProps extends BaseProps, NativeProps, AnimationEventProps {
     id?: string;
-    /** 文字是否居中 */
-    center?: boolean;
+    /** 是否纯色 */
+    plain?: boolean;
     /** 显示时间，单位为毫秒。 设为 0 则不会自动关闭 */
     duration?: number;
     /** 自定义图标 */
@@ -21,19 +21,22 @@ export interface MessageProps extends BaseProps, NativeProps, AnimationEventProp
     /** 是否显示关闭按钮 */
     showClose?: boolean;
     /** 消息类型 */
-    type?: 'success' | 'warning' | 'info' | 'error' | '';
+    type?: TypeAttributes.Appearance;
     /** 是否立即执行onClose方法 */
     immediate?: boolean;
     /** 合并内容相同的消息，不支持 VNode 类型的消息 */
     grouping?: boolean;
+    /** 消息放置位置 */
+    placement?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right';
     userOnClose?: (el?: RefObject<HTMLElement>) => void;
 }
-export type MessageType = 'success' | 'warning' | 'info' | 'error' | '';
+export type MessageType = 'primary' | 'success' | 'warning' | 'info' | 'error' | '';
 export type MessageDispatcher = (options?: MessageProps | string | React.ReactElement) => MessageHandle;
 export type MessageParams = MessageProps | string | React.ReactElement;
 export type TypedMessageParams = Omit<MessageProps, 'type'> | string | React.ReactElement;
 export interface MessageMethod {
     (options?: MessageParams): MessageHandle;
+    primary: (options?: TypedMessageParams) => MessageHandle;
     success: (options?: TypedMessageParams) => MessageHandle;
     warning: (options?: TypedMessageParams) => MessageHandle;
     info: (options?: TypedMessageParams) => MessageHandle;

package/dist/MessageBox/MessageBox.js

@@ -1,6 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var _excluded = ["title", "message", "type", "icon", "width", "callback", "showClose", "beforeClose", "showCancelButton", "showConfirmButton", "cancelButtonText", "cancelButtonClass", "confirmButtonClass", "buttonSize", "buttonPosition", "draggable", "overflow", "showInput", "inputType", "inputPlaceholder", "inputPattern", "inputErrorMessage", "inputValidator", "distinguishCancelAndClose", "classPrefix", "className", "style", "padding", "roundButton"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _excluded = ["title", "message", "type", "icon", "width", "callback", "showClose", "beforeClose", "showCancelButton", "showConfirmButton", "cancelButtonText", "cancelButtonClass", "confirmButtonClass", "buttonSize", "buttonPosition", "draggable", "overflow", "showInput", "inputType", "inputPlaceholder", "inputPattern", "inputErrorMessage", "inputValidator", "distinguishCancelAndClose", "classPrefix", "className", "style", "padding", "roundButton", "dangerouslyUseHTMLString"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,44 +21,58 @@ import isString from 'lodash/isString';
 import React, { cloneElement, forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Button from "../Button/Button";
-import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import Dialog from "../Dialog/Dialog";
 import { partitionAnimationProps, useClassNames, useControlled } from "../hooks";
 import { namespace } from "../hooks/prefix";
 import Icon from "../Icon/Icon";
 import Input from "../Input/Input";
-import { addUnit, isNotEmpty } from "../Util";
+import { addUnit, isNotEmpty, mergeDefaultProps } from "../Util";
 var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useConfigProvider = useConfigProvider(),
-    locale = _useConfigProvider.locale;
+  var _props2;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var boxType = props.boxType,
-    onAction = props.onAction,
-    options = props.options;
+  var locale = useMemo(function () {
+    var _props;
+    return ((_props = props) === null || _props === void 0 || (_props = _props.options) === null || _props === void 0 ? void 0 : _props.locale) || 'en';
+  }, [(_props2 = props) === null || _props2 === void 0 || (_props2 = _props2.options) === null || _props2 === void 0 ? void 0 : _props2.locale]);
+  props = mergeDefaultProps({
+    options: {}
+  }, props);
+  props.options = mergeDefaultProps({
+    width: 420,
+    showClose: true,
+    showCancelButton: true,
+    showConfirmButton: true,
+    cancelButtonText: t('el.messagebox.cancel', {
+      lng: locale
+    }),
+    confirmButtonText: t('el.messagebox.confirm', {
+      lng: locale
+    }),
+    distinguishCancelAndClose: false,
+    draggable: false,
+    buttonPosition: 'right',
+    showInput: false
+  }, props.options);
+  var _props3 = props,
+    boxType = _props3.boxType,
+    onAction = _props3.onAction,
+    options = _props3.options;
   var title = options.title,
     message = options.message,
     type = options.type,
     icon = options.icon,
-    _options$width = options.width,
-    width = _options$width === void 0 ? 420 : _options$width,
+    width = options.width,
     callback = options.callback,
-    _options$showClose = options.showClose,
-    showClose = _options$showClose === void 0 ? true : _options$showClose,
+    showClose = options.showClose,
     beforeClose = options.beforeClose,
-    _options$showCancelBu = options.showCancelButton,
-    showCancelButton = _options$showCancelBu === void 0 ? true : _options$showCancelBu,
-    _options$showConfirmB = options.showConfirmButton,
-    showConfirmButton = _options$showConfirmB === void 0 ? true : _options$showConfirmB,
-    _options$cancelButton = options.cancelButtonText,
-    cancelButtonText = _options$cancelButton === void 0 ? t('el.messagebox.cancel', {
-      lng: locale
-    }) : _options$cancelButton,
+    showCancelButton = options.showCancelButton,
+    showConfirmButton = options.showConfirmButton,
+    cancelButtonText = options.cancelButtonText,
     cancelButtonClass = options.cancelButtonClass,
     confirmButtonClass = options.confirmButtonClass,
     buttonSize = options.buttonSize,
-    _options$buttonPositi = options.buttonPosition,
-    buttonPosition = _options$buttonPositi === void 0 ? 'right' : _options$buttonPositi,
+    buttonPosition = options.buttonPosition,
     draggable = options.draggable,
     overflow = options.overflow,
     showInput = options.showInput,
@@ -74,6 +88,7 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     style = options.style,
     padding = options.padding,
     roundButton = options.roundButton,
+    dangerouslyUseHTMLString = options.dangerouslyUseHTMLString,
     rest = _objectWithoutProperties(options, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     e = _useClassNames.e,
@@ -86,9 +101,7 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     _useState4 = _slicedToArray(_useState3, 2),
     confirmButtonLoading = _useState4[0],
     setConfirmButtonLoading = _useState4[1];
-  var _useState5 = useState(options.confirmButtonText || t('el.messagebox.confirm', {
-      lng: locale
-    })),
+  var _useState5 = useState(options.confirmButtonText),
     _useState6 = _slicedToArray(_useState5, 2),
     confirmButtonText = _useState6[0],
     setConfirmButtonText = _useState6[1];
@@ -240,15 +253,24 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
     beforeClose: function beforeClose() {
       return handleAction('close');
     }
-  }, transitionProps), /*#__PURE__*/React.createElement(Dialog.body, {
+  }, transitionProps), dangerouslyUseHTMLString ? /*#__PURE__*/React.createElement(Dialog.body, {
     classPrefix: classPrefix,
     padding: padding
   }, /*#__PURE__*/React.createElement("div", {
     className: e(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["container"])))
   }, iconContent, /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["message"])))
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  }))) : /*#__PURE__*/React.createElement(Dialog.body, {
+    classPrefix: classPrefix,
+    padding: padding
+  }, /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["container"])))
+  }, iconContent, /*#__PURE__*/React.createElement("div", {
+    className: e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["message"])))
   }, messageContainer)), boxType === 'prompt' && showInput && /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["input"])))
+    className: e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["input"])))
   }, /*#__PURE__*/React.createElement(Input, {
     value: inputValue,
     type: inputType,
@@ -259,7 +281,7 @@ var MessageBox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
       validate(value);
     }
   }), validateError && /*#__PURE__*/React.createElement("div", {
-    className: e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["errormsg"])))
+    className: e(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["errormsg"])))
   }, editorErrorMessage))), (showCancelButton || showConfirmButton) && /*#__PURE__*/React.createElement(Dialog.footer, {
     classPrefix: classPrefix,
     position: buttonPosition

package/dist/MessageBox/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Action, MessageBoxInputData, MessageBoxProps } from './typings';
+import { Action, MessageBoxData, MessageBoxInputData, MessageBoxProps, MessageState } from './typings';
+export declare const instanceFactory: <T extends MessageBoxData>(boxType: MessageState['boxType'], locale?: 'en' | 'zh-CN') => (message: string | React.ReactElement, title?: string | React.ReactElement | MessageBoxProps, options?: MessageBoxProps) => Promise<T>;
 export declare const MessageBox: {
     (options?: MessageBoxProps): Promise<Action>;
     /**

package/dist/MessageBox/index.js

@@ -8,7 +8,8 @@ import { isObject, isUndefined } from "../Util";
 import Main from "./Main";
 var MESSAGE_BOX_DEFAULT_OPTS = {
   alert: {
-    closeOnClickModal: false
+    closeOnClickModal: false,
+    showCancelButton: false
   },
   confirm: {
     showCancelButton: true
@@ -18,7 +19,7 @@ var MESSAGE_BOX_DEFAULT_OPTS = {
     showInput: true
   }
 };
-var instanceFactory = function instanceFactory(boxType) {
+export var instanceFactory = function instanceFactory(boxType, locale) {
   return function (message, title, options) {
     var _options;
     var titleOrOpts = '';
@@ -36,6 +37,7 @@ var instanceFactory = function instanceFactory(boxType) {
       new Main({
         boxType: boxType,
         options: _objectSpread(_objectSpread({
+          locale: locale,
           message: message,
           title: titleOrOpts
         }, MESSAGE_BOX_DEFAULT_OPTS[boxType]), options),

package/dist/MessageBox/typings.d.ts

@@ -8,6 +8,7 @@ export interface MessageBoxProps extends BaseProps, NativeProps, AnimationEventP
     /** 消息正文内容 */
     message?: string | React.ReactElement;
     /** 是否将 message 属性作为 HTML 片段处理 */
+    dangerouslyUseHTMLString?: boolean;
     /** 消息类型，用于显示图标 */
     type?: 'success' | 'info' | 'warning' | 'error';
     /** 消息自定义图标，该属性会覆盖 type 的图标 */
@@ -68,6 +69,8 @@ export interface MessageBoxProps extends BaseProps, NativeProps, AnimationEventP
     overflow?: boolean;
     /** 是否使用圆角按钮 */
     roundButton?: boolean;
+    /** 国际化 */
+    locale?: 'en' | 'zh-CN';
 }
 export type MessageState = {
     boxType: '' | 'prompt' | 'alert' | 'confirm';