acud 0.0.64 → 0.0.65

package/es/dropdown/dropdown-button.js

@@ -35,8 +35,7 @@ var DropdownButton = function DropdownButton(props) {
       trigger = props.trigger,
       visible = props.visible,
       onVisibleChange = props.onVisibleChange,
-      onClick = props.onClick,
-      restProps = __rest(props, ["children", "overlay", "disabled", "trigger", "visible", "onVisibleChange", "onClick"]); // 菜单可见，需要将ICON旋转
+      restProps = __rest(props, ["children", "overlay", "disabled", "trigger", "visible", "onVisibleChange"]); // 菜单可见，需要将ICON旋转
 
 
   var _useState = useState(!!visible),
@@ -53,8 +52,7 @@ var DropdownButton = function DropdownButton(props) {
   }, []);
   var arrowCls = classNames((_classNames = {}, _defineProperty(_classNames, 'acud-btn-group-expand', popupVisible), _defineProperty(_classNames, 'acud-btn-group-border-left', restProps.type === 'primary'), _classNames));
   return /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, _extends({
-    disabled: disabled,
-    onClick: onClick
+    disabled: disabled
   }, restProps), children), /*#__PURE__*/React.createElement(Dropdown, {
     disabled: disabled,
     placement: "bottomRight",

package/es/modal/DialogBox.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+export interface ModalFuncProps {
+    /** 对话框标题 */
+    title?: string;
+    /** 对话框内容 */
+    content?: React.ReactNode;
+    /** 点击确定回调 */
+    onOk?: (e: React.MouseEvent<HTMLElement>) => (void | Promise<any>);
+    /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调 */
+    onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
+    afterClose?: () => void;
+    /** 弹框宽度 */
+    width?: number;
+    /** 弹框高度 */
+    height?: number;
+    /** 确认按钮文字 */
+    okText?: string;
+    /** 取消按钮文字 */
+    cancelText?: string;
+    /** 点击蒙层是否允许关闭 */
+    maskClosable?: boolean;
+    /** 是否强制渲染 DialogBox */
+    forceRender?: boolean;
+    /** 关闭时是否销毁 DialogBox 里的子元素 */
+    destroyOnClose?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    /** 指定DialogBox挂载的html节点 */
+    getContainer?: string | HTMLElement | (() => HTMLElement) | false | null;
+    /** 设置 DialogBox 的 z-index */
+    zIndex?: number;
+    /** 是否支持键盘 esc 关闭 */
+    keyboard?: boolean;
+    /** 自定义关闭图标 */
+    closeIcon?: React.ReactNode;
+}
+export interface DialogBoxProps extends ModalFuncProps {
+    /** 是否有取消按钮 */
+    cancelBtn?: boolean;
+    onClose?: (...args: any[]) => void;
+    visible?: boolean;
+    type: 'confirm' | 'success' | 'info' | 'error' | 'warning';
+    confirmLoading?: boolean;
+}
+declare const DialogBox: React.FC<DialogBoxProps>;
+export default DialogBox;

package/es/modal/DialogBox.js

@@ -0,0 +1,152 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import * as React from 'react';
+import FilledError from "acud-icon/es/icons/FilledError";
+import OutlinedClose from "acud-icon/es/icons/OutlinedClose";
+import FilledSuccess from "acud-icon/es/icons/FilledSuccess";
+import FilledWarn from "acud-icon/es/icons/FilledWarn";
+import FilledInfo from "acud-icon/es/icons/FilledInfo";
+import classNames from 'classnames';
+import { ConfigContext } from '../config-provider';
+import Button from '../button';
+import Modal from './Modal';
+var DialogType = {
+  success: {
+    className: 'sucess',
+    icon: /*#__PURE__*/React.createElement(FilledSuccess, {
+      color: "@S6"
+    })
+  },
+  warning: {
+    className: 'warning',
+    icon: /*#__PURE__*/React.createElement(FilledWarn, {
+      color: "@W6"
+    })
+  },
+  confirm: {
+    className: 'confirm',
+    icon: /*#__PURE__*/React.createElement(FilledWarn, {
+      color: "@W6"
+    })
+  },
+  info: {
+    className: 'info',
+    icon: /*#__PURE__*/React.createElement(FilledInfo, {
+      color: "@B6"
+    })
+  },
+  error: {
+    className: 'error',
+    icon: /*#__PURE__*/React.createElement(FilledError, {
+      color: "@E6"
+    })
+  }
+};
+
+var DialogBox = function DialogBox(props) {
+  var _React$useContext = React.useContext(ConfigContext),
+      getPopupContainer = _React$useContext.getPopupContainer,
+      getPrefixCls = _React$useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls('modal-dialogbox');
+  var closeIconToRender = /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-close-x")
+  }, /*#__PURE__*/React.createElement(OutlinedClose, {
+    className: "".concat(prefixCls, "-close-icon")
+  }));
+
+  var visible = props.visible,
+      className = props.className,
+      title = props.title,
+      content = props.content,
+      type = props.type,
+      cancelBtn = props.cancelBtn,
+      okText = props.okText,
+      confirmLoading = props.confirmLoading,
+      onOk = props.onOk,
+      onClose = props.onClose,
+      restProps = __rest(props, ["visible", "className", "title", "content", "type", "cancelBtn", "okText", "confirmLoading", "onOk", "onClose"]);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      loading = _React$useState2[0],
+      toggleLoading = _React$useState2[1];
+
+  var okBtnLoading = React.useMemo(function () {
+    if (typeof confirmLoading === 'boolean') {
+      return confirmLoading;
+    }
+
+    return loading;
+  }, [confirmLoading, loading]);
+  var handleOk = React.useCallback(function (e) {
+    var okResult = onOk === null || onOk === void 0 ? void 0 : onOk(e);
+
+    if (okResult && typeof okResult.then === 'function') {
+      toggleLoading(true);
+      okResult.then(function () {
+        console.log('then: close');
+        toggleLoading(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose.apply(void 0, arguments);
+      }, function (e) {
+        console.error(e);
+        toggleLoading(false);
+      });
+    } else {
+      onClose === null || onClose === void 0 ? void 0 : onClose(e);
+    }
+  }, [onOk, onClose]);
+  var handleCancel = React.useCallback(function () {
+    onClose === null || onClose === void 0 ? void 0 : onClose({
+      triggerCancel: true
+    });
+  }, [onClose]);
+  var titleNode = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-icon")
+  }, DialogType[type].icon), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-title")
+  }, title));
+  var footer = React.useMemo(function () {
+    if (!cancelBtn) {
+      return /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        loading: okBtnLoading,
+        onClick: handleOk
+      }, okText);
+    }
+  }, [okText, cancelBtn, okBtnLoading, handleOk]);
+  return /*#__PURE__*/React.createElement(Modal, _extends({}, restProps, {
+    confirmLoading: okBtnLoading,
+    footer: footer,
+    title: titleNode,
+    className: classNames(className, "".concat(prefixCls), "".concat(prefixCls, "-").concat(type)),
+    getContainer: getPopupContainer,
+    visible: visible,
+    closeIcon: closeIconToRender,
+    onCancel: handleCancel,
+    onOk: handleOk,
+    okText: okText
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, content));
+};
+
+DialogBox.defaultProps = {
+  visible: true,
+  type: 'info'
+};
+export default DialogBox;

package/es/modal/dialog.d.ts

@@ -0,0 +1,17 @@
+import { ModalFuncProps } from './DialogBox';
+export declare function destroyAll(): void;
+export declare function confirm(config: ModalFuncProps): {
+    destroy: (...args: any[]) => void;
+};
+export declare function success(config: ModalFuncProps): {
+    destroy: (...args: any[]) => void;
+};
+export declare function info(config: ModalFuncProps): {
+    destroy: (...args: any[]) => void;
+};
+export declare function warning(config: ModalFuncProps): {
+    destroy: (...args: any[]) => void;
+};
+export declare function error(config: ModalFuncProps): {
+    destroy: (...args: any[]) => void;
+};

package/es/modal/dialog.js

@@ -0,0 +1,123 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import { render as reactRender, unmountComponentAtNode } from 'react-dom';
+import DialogBox from './DialogBox';
+var destroyFns = [];
+
+function renderDialogBox(config) {
+  var currentConfig = _extends(_extends({}, config), {
+    visible: true,
+    onClose: close
+  });
+
+  var container = document.createDocumentFragment();
+
+  function render(dialogConfig) {
+    setTimeout(function () {
+      reactRender( /*#__PURE__*/React.createElement(DialogBox, dialogConfig), container);
+    });
+  }
+
+  function destroy() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var triggerCancel = args.some(function (param) {
+      return param && param.triggerCancel;
+    });
+
+    if (config.onCancel && triggerCancel) {
+      // @ts-ignore
+      config.onCancel.apply(config, args);
+    }
+
+    for (var i = 0; i < destroyFns.length; i++) {
+      var fn = destroyFns[i];
+
+      if (fn === close) {
+        destroyFns.splice(i, 1);
+        break;
+      }
+    }
+
+    unmountComponentAtNode(container);
+  }
+
+  function close() {
+    var _this = this;
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    render(_extends(_extends({}, currentConfig), {
+      visible: false,
+      afterClose: function afterClose() {
+        if (typeof config.afterClose === 'function') {
+          config.afterClose();
+        }
+
+        destroy.apply(_this, args);
+      }
+    }));
+  }
+
+  render(currentConfig);
+  destroyFns.push(close);
+  return {
+    destroy: close
+  };
+}
+
+export function destroyAll() {
+  while (destroyFns.length) {
+    var close = destroyFns.pop();
+
+    if (close) {
+      close();
+    }
+  }
+}
+export function confirm(config) {
+  return renderDialogBox(_extends(_extends({}, config), {
+    type: 'confirm',
+    cancelBtn: true
+  }));
+}
+export function success(config) {
+  var _a;
+
+  return renderDialogBox(_extends(_extends({}, config), {
+    type: 'success',
+    cancelBtn: false,
+    okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '关闭'
+  }));
+}
+export function info(config) {
+  var _a;
+
+  return renderDialogBox(_extends(_extends({}, config), {
+    type: 'info',
+    cancelBtn: false,
+    okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '确定'
+  }));
+}
+export function warning(config) {
+  var _a;
+
+  return renderDialogBox(_extends(_extends({}, config), {
+    type: 'warning',
+    cancelBtn: false,
+    okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '关闭'
+  }));
+}
+export function error(config) {
+  var _a;
+
+  return renderDialogBox(_extends(_extends({}, config), {
+    type: 'error',
+    cancelBtn: false,
+    okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '重试'
+  }));
+}

package/es/modal/index.d.ts

@@ -1,2 +1,11 @@
-import Modal from './Modal';
-export default Modal;
+/// <reference types="react" />
+import { confirm, success, info, error, warning, destroyAll } from './dialog';
+declare const _default: import("react").FC<import("./Modal").ModalProps> & {
+    confirm: typeof confirm;
+    success: typeof success;
+    info: typeof info;
+    error: typeof error;
+    warning: typeof warning;
+    destroyAll: typeof destroyAll;
+};
+export default _default;

package/es/modal/index.js

@@ -1,2 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import Modal from './Modal';
-export default Modal;
+import { confirm, success, info, error, warning, destroyAll } from './dialog';
+export default _extends(Modal, {
+  confirm: confirm,
+  success: success,
+  info: info,
+  error: error,
+  warning: warning,
+  destroyAll: destroyAll
+});

package/es/modal/style/index.css

@@ -19,7 +19,6 @@
   transform: translate(-50%, -50%);
   width: auto;
   max-width: calc(100vw - 32px);
-  padding-bottom: 24px;
 }
 .acud-modal.zoom-enter,
 .acud-modal.zoom-appear {
@@ -111,7 +110,7 @@
 }
 .acud-modal-close-x {
   display: block;
-  margin-top: 28px;
+  margin-top: 27px;
   font-size: 16px;
   text-align: center;
   text-transform: none;
@@ -125,8 +124,8 @@
   font-weight: 900;
 }
 .acud-modal-title {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 14px;
+  line-height: 22px;
   word-wrap: break-word;
 }
 .acud-modal-body {
@@ -143,6 +142,9 @@
   background: #FFFFFF;
   text-align: right;
   flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }
 .acud-modal-footer .acud-btn {
   margin: 0;
@@ -150,3 +152,37 @@
 .acud-modal-footer .acud-btn + .acud-btn {
   margin-left: 16px;
 }
+.acud-modal-dialogbox {
+  width: 400px;
+  height: auto;
+  min-height: 184px;
+}
+.acud-modal-dialogbox-icon {
+  height: 100%;
+  margin-right: 12px;
+  float: left;
+  display: flex;
+  align-items: center;
+  padding-top: 2px;
+}
+.acud-modal-dialogbox .acud-modal-title .acudicon {
+  font-size: 20px;
+}
+.acud-modal-dialogbox-content {
+  padding-left: 32px;
+}
+.acud-modal-dialogbox-warning .acud-modal-dialogbox-icon {
+  color: #FF9326;
+}
+.acud-modal-dialogbox-info .acud-modal-dialogbox-icon {
+  color: #2468F2;
+}
+.acud-modal-dialogbox-success .acud-modal-dialogbox-icon {
+  color: #30BF13;
+}
+.acud-modal-dialogbox-error .acud-modal-dialogbox-icon {
+  color: #F33E3E;
+}
+.acud-modal-dialogbox-confirm .acud-modal-dialogbox-icon {
+  color: #FF9326;
+}

package/es/modal/style/index.less

@@ -3,6 +3,7 @@
 @import './mixin';
 
 @modal-prefix-cls: ~'@{acud-prefix}-modal';
+@dialogbox-prefix: ~'@{modal-prefix-cls}-dialogbox';
 
 .@{modal-prefix-cls} {
     .reset-component();
@@ -16,7 +17,6 @@
     transform: translate(-50%, -50%);
     width: auto;
     max-width: calc(100vw - 32px);
-    padding-bottom: 24px;
 
     &-sm {
         .modal-size-config(sm);
@@ -114,6 +114,10 @@
         background: @modal-footer-bg-color;
         text-align: right;
         flex: none;
+        // TODO: 暂时解决 confirmLoading 时按钮对齐问题
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
     
         .@{acud-prefix}-btn {
             margin: 0;
@@ -123,3 +127,58 @@
         }
       }
 }
+
+.@{dialogbox-prefix} {
+    width: @P * 100;
+    height: auto;
+    min-height: @P * 46;
+
+    &-icon {
+        height: 100%;
+        margin-right: @P * 3;
+        float: left;
+        // TODO: 没找到更好的居中办法
+        display: flex;
+        align-items: center;
+        padding-top: 2px;
+    }
+
+    .@{modal-prefix-cls}-title {
+        .acudicon {
+            font-size: @T6;
+        }
+    }
+
+    &-content {
+        padding-left: @P * 3 + @T6;
+    }
+}
+
+.@{dialogbox-prefix}-warning {
+    .@{dialogbox-prefix}-icon {
+        color: @W6;
+    }
+}
+
+.@{dialogbox-prefix}-info {
+    .@{dialogbox-prefix}-icon {
+        color: @B6;
+    }
+}
+
+.@{dialogbox-prefix}-success {
+    .@{dialogbox-prefix}-icon {
+        color: @S6;
+    }
+}
+.@{dialogbox-prefix}-error {
+    .@{dialogbox-prefix}-icon {
+        color: @E6;
+    }
+}
+
+.@{dialogbox-prefix}-confirm {
+    .@{dialogbox-prefix}-icon {
+        color: @W6;
+    }
+}

package/es/style/themes/default/components/modal.less

@@ -29,10 +29,10 @@
 @modal-content-bg-color: @G11;
 
 // Header
-@modal-heading-height: 6*@P;
+@modal-heading-height: 22px;
 @modal-heading-bg-color: @G10;
 @modal-heading-padding: 6*@P 6*@P 0;
-@modal-heading-font-size: @T4;
+@modal-heading-font-size: @T3;
 @modal-heading-font-weight: 500;
 @modal-heading-color: @G2;
 

package/lib/dropdown/dropdown-button.js

@@ -57,8 +57,7 @@ var DropdownButton = function DropdownButton(props) {
       trigger = props.trigger,
       visible = props.visible,
       onVisibleChange = props.onVisibleChange,
-      onClick = props.onClick,
-      restProps = __rest(props, ["children", "overlay", "disabled", "trigger", "visible", "onVisibleChange", "onClick"]); // 菜单可见，需要将ICON旋转
+      restProps = __rest(props, ["children", "overlay", "disabled", "trigger", "visible", "onVisibleChange"]); // 菜单可见，需要将ICON旋转
 
 
   var _useState = (0, _react.useState)(!!visible),
@@ -75,8 +74,7 @@ var DropdownButton = function DropdownButton(props) {
   }, []);
   var arrowCls = (0, _classnames["default"])((_classNames = {}, (0, _defineProperty2["default"])(_classNames, 'acud-btn-group-expand', popupVisible), (0, _defineProperty2["default"])(_classNames, 'acud-btn-group-border-left', restProps.type === 'primary'), _classNames));
   return /*#__PURE__*/_react["default"].createElement(ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _extends2["default"])({
-    disabled: disabled,
-    onClick: onClick
+    disabled: disabled
   }, restProps), children), /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
     disabled: disabled,
     placement: "bottomRight",

package/lib/modal/DialogBox.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+export interface ModalFuncProps {
+    /** 对话框标题 */
+    title?: string;
+    /** 对话框内容 */
+    content?: React.ReactNode;
+    /** 点击确定回调 */
+    onOk?: (e: React.MouseEvent<HTMLElement>) => (void | Promise<any>);
+    /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调 */
+    onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
+    afterClose?: () => void;
+    /** 弹框宽度 */
+    width?: number;
+    /** 弹框高度 */
+    height?: number;
+    /** 确认按钮文字 */
+    okText?: string;
+    /** 取消按钮文字 */
+    cancelText?: string;
+    /** 点击蒙层是否允许关闭 */
+    maskClosable?: boolean;
+    /** 是否强制渲染 DialogBox */
+    forceRender?: boolean;
+    /** 关闭时是否销毁 DialogBox 里的子元素 */
+    destroyOnClose?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    /** 指定DialogBox挂载的html节点 */
+    getContainer?: string | HTMLElement | (() => HTMLElement) | false | null;
+    /** 设置 DialogBox 的 z-index */
+    zIndex?: number;
+    /** 是否支持键盘 esc 关闭 */
+    keyboard?: boolean;
+    /** 自定义关闭图标 */
+    closeIcon?: React.ReactNode;
+}
+export interface DialogBoxProps extends ModalFuncProps {
+    /** 是否有取消按钮 */
+    cancelBtn?: boolean;
+    onClose?: (...args: any[]) => void;
+    visible?: boolean;
+    type: 'confirm' | 'success' | 'info' | 'error' | 'warning';
+    confirmLoading?: boolean;
+}
+declare const DialogBox: React.FC<DialogBoxProps>;
+export default DialogBox;