acud 0.0.64 → 0.0.67

package/lib/dropdown/dropdown-button.js

@@ -57,8 +57,10 @@ 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旋转
+      overlayClassName = props.overlayClassName,
+      overlayStyle = props.overlayStyle,
+      getPopupContainer = props.getPopupContainer,
+      restProps = __rest(props, ["children", "overlay", "disabled", "trigger", "visible", "onVisibleChange", "overlayClassName", "overlayStyle", "getPopupContainer"]); // 菜单可见，需要将ICON旋转
 
 
   var _useState = (0, _react.useState)(!!visible),
@@ -75,13 +77,15 @@ 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",
     trigger: trigger,
     overlay: overlay,
+    overlayClassName: overlayClassName,
+    overlayStyle: overlayStyle,
+    getPopupContainer: getPopupContainer,
     visible: popupVisible,
     onVisibleChange: handleVisibleChange
   }, /*#__PURE__*/_react["default"].createElement(_button["default"], (0, _extends2["default"])({

package/lib/dropdown/style/index.css

@@ -93,9 +93,10 @@
   margin-top: -8px;
   font-size: 12px;
   line-height: 16px;
+  transition: transform 0.48s;
 }
 .acud-dropdown-trigger-arrow-expand {
-  transform: rotate(-180deg);
+  transform: rotate(180deg);
 }
 .acud-dropdown-trigger-arrow > svg {
   width: 16px;

package/lib/dropdown/style/index.less

@@ -72,9 +72,10 @@
             margin-top: -2 * @P;
             font-size: @T2;
             line-height: 4 * @P;
+            transition: transform .48s;
 
             &-expand {
-                transform: rotate(-180deg);
+                transform: rotate(180deg);
             }
 
             & > svg {

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;

package/lib/modal/DialogBox.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _FilledError = _interopRequireDefault(require("acud-icon/lib/icons/FilledError"));
+
+var _OutlinedClose = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedClose"));
+
+var _FilledSuccess = _interopRequireDefault(require("acud-icon/lib/icons/FilledSuccess"));
+
+var _FilledWarn = _interopRequireDefault(require("acud-icon/lib/icons/FilledWarn"));
+
+var _FilledInfo = _interopRequireDefault(require("acud-icon/lib/icons/FilledInfo"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _configProvider = require("../config-provider");
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _Modal = _interopRequireDefault(require("./Modal"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__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;
+};
+
+var DialogType = {
+  success: {
+    className: 'sucess',
+    icon: /*#__PURE__*/React.createElement(_FilledSuccess["default"], {
+      color: "@S6"
+    })
+  },
+  warning: {
+    className: 'warning',
+    icon: /*#__PURE__*/React.createElement(_FilledWarn["default"], {
+      color: "@W6"
+    })
+  },
+  confirm: {
+    className: 'confirm',
+    icon: /*#__PURE__*/React.createElement(_FilledWarn["default"], {
+      color: "@W6"
+    })
+  },
+  info: {
+    className: 'info',
+    icon: /*#__PURE__*/React.createElement(_FilledInfo["default"], {
+      color: "@B6"
+    })
+  },
+  error: {
+    className: 'error',
+    icon: /*#__PURE__*/React.createElement(_FilledError["default"], {
+      color: "@E6"
+    })
+  }
+};
+
+var DialogBox = function DialogBox(props) {
+  var _React$useContext = React.useContext(_configProvider.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["default"], {
+    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 = (0, _slicedToArray2["default"])(_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["default"], {
+        type: "primary",
+        loading: okBtnLoading,
+        onClick: handleOk
+      }, okText);
+    }
+  }, [okText, cancelBtn, okBtnLoading, handleOk]);
+  return /*#__PURE__*/React.createElement(_Modal["default"], (0, _extends2["default"])({}, restProps, {
+    confirmLoading: okBtnLoading,
+    footer: footer,
+    title: titleNode,
+    className: (0, _classnames["default"])(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'
+};
+var _default = DialogBox;
+exports["default"] = _default;

package/lib/modal/Modal.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ButtonProps } from '../button';
 declare enum SizeType {
     'small' = "sm",
     'normal' = "md",
@@ -14,15 +15,17 @@ export interface ModalProps {
     confirmLoading?: boolean;
     /** 弹框标题 */
     title?: React.ReactNode;
+    /** 确认按钮 props */
+    okButtonProps?: ButtonProps;
     /** 点击确定回调 */
     onOk?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** 取消按钮 props */
+    cancelButtonProps?: ButtonProps;
     /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调 */
     onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
     afterClose?: () => void;
     /** 弹框宽度 */
     width?: number;
-    /** 弹框高度 */
-    height?: number;
     /** 底部内容 */
     footer?: React.ReactNode;
     /** 确认按钮文字 */

package/lib/modal/Modal.js

@@ -87,15 +87,17 @@ var Modal = function Modal(props) {
   var renderFooter = function renderFooter() {
     var okText = props.okText,
         cancelText = props.cancelText,
-        confirmLoading = props.confirmLoading;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_button["default"], {
+        confirmLoading = props.confirmLoading,
+        okButtonProps = props.okButtonProps,
+        cancelButtonProps = props.cancelButtonProps;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_button["default"], (0, _extends2["default"])({
       onClick: handleCancel,
       type: "default"
-    }, cancelText || '取消'), /*#__PURE__*/React.createElement(_button["default"], {
+    }, cancelButtonProps), cancelText || '取消'), /*#__PURE__*/React.createElement(_button["default"], (0, _extends2["default"])({
       onClick: handleOk,
       loading: confirmLoading,
       type: "primary"
-    }, okText || '确定'));
+    }, okButtonProps), okText || '确定'));
   };
 
   var visible = props.visible,

package/lib/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/lib/modal/dialog.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.confirm = confirm;
+exports.destroyAll = destroyAll;
+exports.error = error;
+exports.info = info;
+exports.success = success;
+exports.warning = warning;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = require("react-dom");
+
+var _DialogBox = _interopRequireDefault(require("./DialogBox"));
+
+var destroyFns = [];
+
+function renderDialogBox(config) {
+  var currentConfig = (0, _extends2["default"])((0, _extends2["default"])({}, config), {
+    visible: true,
+    onClose: close
+  });
+  var container = document.createDocumentFragment();
+
+  function render(dialogConfig) {
+    setTimeout(function () {
+      (0, _reactDom.render)( /*#__PURE__*/_react["default"].createElement(_DialogBox["default"], 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;
+      }
+    }
+
+    (0, _reactDom.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((0, _extends2["default"])((0, _extends2["default"])({}, 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
+  };
+}
+
+function destroyAll() {
+  while (destroyFns.length) {
+    var close = destroyFns.pop();
+
+    if (close) {
+      close();
+    }
+  }
+}
+
+function confirm(config) {
+  return renderDialogBox((0, _extends2["default"])((0, _extends2["default"])({}, config), {
+    type: 'confirm',
+    cancelBtn: true
+  }));
+}
+
+function success(config) {
+  var _a;
+
+  return renderDialogBox((0, _extends2["default"])((0, _extends2["default"])({}, config), {
+    type: 'success',
+    cancelBtn: false,
+    okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '关闭'
+  }));
+}
+
+function info(config) {
+  var _a;
+
+  return renderDialogBox((0, _extends2["default"])((0, _extends2["default"])({}, config), {
+    type: 'info',
+    cancelBtn: false,
+    okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '确定'
+  }));
+}
+
+function warning(config) {
+  var _a;
+
+  return renderDialogBox((0, _extends2["default"])((0, _extends2["default"])({}, config), {
+    type: 'warning',
+    cancelBtn: false,
+    okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '关闭'
+  }));
+}
+
+function error(config) {
+  var _a;
+
+  return renderDialogBox((0, _extends2["default"])((0, _extends2["default"])({}, config), {
+    type: 'error',
+    cancelBtn: false,
+    okText: (_a = config.okText) !== null && _a !== void 0 ? _a : '重试'
+  }));
+}

package/lib/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/lib/modal/index.js

@@ -7,7 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _Modal = _interopRequireDefault(require("./Modal"));
 
-var _default = _Modal["default"];
+var _dialog = require("./dialog");
+
+var _default = (0, _extends2["default"])(_Modal["default"], {
+  confirm: _dialog.confirm,
+  success: _dialog.success,
+  info: _dialog.info,
+  error: _dialog.error,
+  warning: _dialog.warning,
+  destroyAll: _dialog.destroyAll
+});
+
 exports["default"] = _default;

package/lib/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 {
@@ -58,23 +57,43 @@
 }
 .acud-modal-sm {
   width: 520px;
-  height: 240px;
-  max-height: 240px;
+  min-height: 240px;
+  max-height: 560px;
+}
+.acud-modal-sm > .acud-modal-content {
+  width: 100%;
+  min-height: 240px;
+  max-height: 560px;
 }
 .acud-modal-md {
   width: 800px;
-  height: 400px;
-  max-height: 400px;
+  min-height: 400px;
+  max-height: 560px;
+}
+.acud-modal-md > .acud-modal-content {
+  width: 100%;
+  min-height: 400px;
+  max-height: 560px;
 }
 .acud-modal-lg {
   width: 1120px;
-  height: 480px;
-  max-height: 480px;
+  min-height: 480px;
+  max-height: 560px;
+}
+.acud-modal-lg > .acud-modal-content {
+  width: 100%;
+  min-height: 480px;
+  max-height: 560px;
 }
 .acud-modal-xl {
   width: 1200px;
-  height: 480px;
-  max-height: 480px;
+  min-height: 480px;
+  max-height: 560px;
+}
+.acud-modal-xl > .acud-modal-content {
+  width: 100%;
+  min-height: 480px;
+  max-height: 560px;
 }
 .acud-modal-content {
   position: relative;
@@ -111,7 +130,7 @@
 }
 .acud-modal-close-x {
   display: block;
-  margin-top: 28px;
+  margin-top: 27px;
   font-size: 16px;
   text-align: center;
   text-transform: none;
@@ -125,24 +144,29 @@
   font-weight: 900;
 }
 .acud-modal-title {
-  font-size: 16px;
-  line-height: 24px;
+  font-size: 14px;
+  line-height: 22px;
+  padding-right: 12px;
   word-wrap: break-word;
 }
 .acud-modal-body {
-  padding: 16px 24px 24px;
+  margin: 16px 24px 24px;
   font-size: 12px;
   font-weight: 400;
   line-height: 20px;
   word-wrap: break-word;
   color: #151B26;
   flex: 1;
+  overflow-y: auto;
 }
 .acud-modal-footer {
   padding: 0 24px 24px;
   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 +174,45 @@
 .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-title {
+  overflow: hidden;
+  padding-right: 12px;
+}
+.acud-modal-dialogbox-content {
+  width: 100%;
+  padding-left: 32px;
+}
+.acud-modal-dialogbox .acud-modal-title .acudicon {
+  font-size: 20px;
+}
+.acud-modal-dialogbox > .acud-modal-content {
+  min-height: 184px;
+}
+.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;
+}