acud 0.0.64 → 0.0.67

package/es/breadcrumb/BreadcrumbItem.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { BaseDropdownProps } from '../dropdown/dropdown';
 export interface BreadcrumbItemProps {
     prefixCls?: string;

package/es/breadcrumb/BreadcrumbItem.js

@@ -1,4 +1,5 @@
 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 = {};
@@ -13,8 +14,8 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import * as React from 'react';
-import { OutlinedDown } from 'acud-icon';
+import React, { useCallback, useState } from 'react';
+import { OutlinedDown, OutlinedUp } from 'acud-icon';
 import DropDown from '../dropdown/dropdown';
 import { ConfigContext } from '../config-provider';
 
@@ -27,21 +28,32 @@ var BreadcrumbItem = function BreadcrumbItem(_a) {
       dropdownProps = _a.dropdownProps,
       restProps = __rest(_a, ["prefixCls", "separator", "children", "overlay", "dropdownProps"]);
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
   var _React$useContext = React.useContext(ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls;
 
   var prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
+  var handleVisibleChange = useCallback(function (visible) {
+    setVisible(visible);
+  }, []);
   /** If overlay is have Wrap a DropDown */
 
   var renderBreadcrumbNode = function renderBreadcrumbNode(breadcrumbItem) {
     if (overlay) {
       return /*#__PURE__*/React.createElement(DropDown, _extends({
         overlay: overlay,
+        visible: visible,
         placement: "bottomCenter",
         overlayClassName: "".concat(prefixCls, "-dropdown")
-      }, dropdownProps), /*#__PURE__*/React.createElement("span", {
+      }, dropdownProps, {
+        onVisibleChange: handleVisibleChange
+      }), /*#__PURE__*/React.createElement("span", {
         className: "".concat(prefixCls, "-overlay-link")
-      }, breadcrumbItem, /*#__PURE__*/React.createElement(OutlinedDown, null)));
+      }, breadcrumbItem, visible ? /*#__PURE__*/React.createElement(OutlinedUp, null) : /*#__PURE__*/React.createElement(OutlinedDown, null)));
     }
 
     return breadcrumbItem;

package/es/dialog-box/style/index.css

@@ -58,19 +58,19 @@
 }
 .acud-dialogbox-sm {
   width: 520px;
-  max-height: 240px;
+  max-height: 560px;
 }
 .acud-dialogbox-md {
   width: 800px;
-  max-height: 400px;
+  max-height: 560px;
 }
 .acud-dialogbox-lg {
   width: 1120px;
-  max-height: 480px;
+  max-height: 560px;
 }
 .acud-dialogbox-xl {
   width: 1200px;
-  max-height: 480px;
+  max-height: 560px;
 }
 .acud-dialogbox-content {
   position: relative;

package/es/dropdown/dropdown-button.js

@@ -35,8 +35,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 = useState(!!visible),
@@ -53,13 +55,15 @@ 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",
     trigger: trigger,
     overlay: overlay,
+    overlayClassName: overlayClassName,
+    overlayStyle: overlayStyle,
+    getPopupContainer: getPopupContainer,
     visible: popupVisible,
     onVisibleChange: handleVisibleChange
   }, /*#__PURE__*/React.createElement(Button, _extends({

package/es/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/es/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/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/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/es/modal/Modal.js

@@ -63,15 +63,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, {
+        confirmLoading = props.confirmLoading,
+        okButtonProps = props.okButtonProps,
+        cancelButtonProps = props.cancelButtonProps;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
       onClick: handleCancel,
       type: "default"
-    }, cancelText || '取消'), /*#__PURE__*/React.createElement(Button, {
+    }, cancelButtonProps), cancelText || '取消'), /*#__PURE__*/React.createElement(Button, _extends({
       onClick: handleOk,
       loading: confirmLoading,
       type: "primary"
-    }, okText || '确定'));
+    }, okButtonProps), okText || '确定'));
   };
 
   var visible = props.visible,

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
+});