acud 0.0.64 → 0.0.65

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/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 {
@@ -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/lib/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/lib/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "acud",
-    "version": "0.0.64",
+    "version": "0.0.65",
     "description": "acg react 组件库",
     "main": "lib/index.js",
     "module": "es/index.js",