@aloudata/aloudata-design 2.8.7 → 2.9.0

package/dist/notification/index.js

@@ -1,8 +1,9 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["icon", "closeIcon", "description", "footer"],
-  _excluded2 = ["icon", "closeIcon", "description", "footer"],
-  _excluded3 = ["icon", "closeIcon", "description", "footer"],
-  _excluded4 = ["icon", "closeIcon", "description", "footer"];
+var _excluded = ["message", "description", "placement", "className", "duration"],
+  _excluded2 = ["message", "description", "placement", "className", "duration"],
+  _excluded3 = ["message", "description", "placement", "className", "duration"],
+  _excluded4 = ["message", "description", "placement", "className", "duration"],
+  _excluded5 = ["message", "description", "placement", "className", "duration"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -10,144 +11,195 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { notification as AntdNotification } from 'antd';
-import classnames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
-import { AttentionTriangleLightLine, CheckCircleLightLine, CloseCircleLightLine, CloseLLine, InformationCircleLightLine } from "../Icon";
-import theme from "../style/themes/default/themeColor.module.less";
+import { Slide, toast } from 'react-toastify';
+import { AttentionTriangleFill, CheckCircleFill, CloseLLine, DangerFill, InformationCircleFill } from "../Icon";
+var closeX = /*#__PURE__*/React.createElement(CloseLLine, {
+  size: 20,
+  color: "#6B7280"
+});
+var defaultOptions = {
+  closeButton: closeX,
+  pauseOnHover: true,
+  transition: Slide,
+  position: 'top-center',
+  autoClose: 3000,
+  hideProgressBar: true,
+  closeOnClick: true,
+  draggable: false,
+  progress: undefined,
+  theme: 'light',
+  containerId: 'notification-container'
+};
 var iconMap = {
   info: /*#__PURE__*/React.createElement("div", {
-    className: "ald-notification-notice-icon-success"
-  }, /*#__PURE__*/React.createElement(InformationCircleLightLine, {
-    color: "#22C55E",
+    className: "ald-notification-notice-icon"
+  }, /*#__PURE__*/React.createElement(InformationCircleFill, {
+    color: "var(--alias-colors-icon-information ,#2986F4)",
     size: 24
   })),
   success: /*#__PURE__*/React.createElement("div", {
-    className: "ald-notification-notice-icon-success"
-  }, /*#__PURE__*/React.createElement(CheckCircleLightLine, {
-    color: 'var(--global-colors-green-600)',
+    className: "ald-notification-notice-icon"
+  }, /*#__PURE__*/React.createElement(CheckCircleFill, {
+    color: "var(--alias-colors-icon-success ,#22C55E)",
     size: 24
   })),
   error: /*#__PURE__*/React.createElement("div", {
-    className: "ald-notification-notice-icon-error"
-  }, /*#__PURE__*/React.createElement(CloseCircleLightLine, {
-    color: "#EF4444",
+    className: "ald-notification-notice-icon"
+  }, /*#__PURE__*/React.createElement(DangerFill, {
+    color: "var(--alias-colors-icon-error ,#EF4444)",
     size: 24
   })),
   warning: /*#__PURE__*/React.createElement("div", {
-    className: "ald-notification-notice-icon-warning"
-  }, /*#__PURE__*/React.createElement(AttentionTriangleLightLine, {
-    color: "#FFB01F",
+    className: "ald-notification-notice-icon"
+  }, /*#__PURE__*/React.createElement(AttentionTriangleFill, {
+    color: "var(--alias-colors-icon-warning ,#EAB308)",
     size: 24
   }))
 };
-var closeX = /*#__PURE__*/React.createElement(CloseLLine, {
-  size: 20,
-  color: "#171717"
-});
-var getSDefaultStyle = function getSDefaultStyle() {
-  return {
-    padding: '24px',
-    border: '1px solid #D1D5DB',
-    borderRadius: '2px',
-    boxShadow: theme.SHADOW_LG,
-    background: '#FFF'
-  };
-};
+function getPosition(placement) {
+  switch (placement) {
+    case 'topLeft':
+      return 'top-left';
+    case 'topCenter':
+      return 'top-center';
+    case 'topRight':
+      return 'top-right';
+    case 'bottomCenter':
+      return 'bottom-center';
+    case 'bottomLeft':
+      return 'bottom-left';
+    case 'bottomRight':
+      return 'bottom-right';
+    default:
+      return placement;
+  }
+}
 var notification = {
   open: function open(config) {
-    return AntdNotification.open(config);
+    var message = config.message,
+      description = config.description,
+      _config$placement = config.placement,
+      placement = _config$placement === void 0 ? 'topRight' : _config$placement,
+      className = config.className,
+      duration = config.duration,
+      restConfig = _objectWithoutProperties(config, _excluded);
+    return toast( /*#__PURE__*/React.createElement("div", {
+      className: "ald-notification-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ald-notification-message"
+    }, message), description && /*#__PURE__*/React.createElement("div", {
+      className: 'ald-notification-desc'
+    }, description)), _objectSpread(_objectSpread({
+      icon: false
+    }, defaultOptions), {}, {
+      autoClose: duration ? duration * 1000 : 3000,
+      position: getPosition(placement),
+      className: classNames('ald-notification', className)
+    }, restConfig));
   },
   success: function success(config) {
-    var _config$icon = config.icon,
-      icon = _config$icon === void 0 ? iconMap.success : _config$icon,
-      _config$closeIcon = config.closeIcon,
-      closeIcon = _config$closeIcon === void 0 ? closeX : _config$closeIcon,
+    var message = config.message,
       description = config.description,
-      footer = config.footer,
-      rest = _objectWithoutProperties(config, _excluded);
-    return AntdNotification.success(_objectSpread(_objectSpread({}, rest), {}, {
-      style: Object.assign({}, getSDefaultStyle(), config.style),
-      className: classnames('ald-notification-notice', config.className),
-      icon: icon,
-      closeIcon: closeIcon,
-      description: /*#__PURE__*/React.createElement("div", {
-        className: "ald-notification-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'ald-notification-desc'
-      }, description), footer && /*#__PURE__*/React.createElement("div", {
-        className: 'ald-notification-footer'
-      }, footer))
-    }));
+      _config$placement2 = config.placement,
+      placement = _config$placement2 === void 0 ? 'topRight' : _config$placement2,
+      className = config.className,
+      duration = config.duration,
+      restConfig = _objectWithoutProperties(config, _excluded2);
+    return toast.success( /*#__PURE__*/React.createElement("div", {
+      className: "ald-notification-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ald-notification-message"
+    }, message), description && /*#__PURE__*/React.createElement("div", {
+      className: 'ald-notification-desc'
+    }, description)), _objectSpread(_objectSpread({
+      icon: function icon() {
+        return iconMap.success;
+      }
+    }, defaultOptions), {}, {
+      autoClose: duration ? duration * 1000 : 3000,
+      position: getPosition(placement),
+      className: classNames('ald-notification', className)
+    }, restConfig));
   },
   error: function error(config) {
-    var _config$icon2 = config.icon,
-      icon = _config$icon2 === void 0 ? iconMap.error : _config$icon2,
-      _config$closeIcon2 = config.closeIcon,
-      closeIcon = _config$closeIcon2 === void 0 ? closeX : _config$closeIcon2,
+    var message = config.message,
       description = config.description,
-      footer = config.footer,
-      rest = _objectWithoutProperties(config, _excluded2);
-    return AntdNotification.error(_objectSpread(_objectSpread({}, rest), {}, {
-      className: classnames('ald-notification-notice', config.className),
-      style: Object.assign(getSDefaultStyle(), config.style),
-      icon: icon,
-      closeIcon: closeIcon,
-      description: /*#__PURE__*/React.createElement("div", {
-        className: "ald-notification-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'ald-notification-desc'
-      }, description), footer && /*#__PURE__*/React.createElement("div", {
-        className: 'ald-notification-footer'
-      }, footer))
-    }));
+      _config$placement3 = config.placement,
+      placement = _config$placement3 === void 0 ? 'topRight' : _config$placement3,
+      className = config.className,
+      duration = config.duration,
+      restConfig = _objectWithoutProperties(config, _excluded3);
+    return toast.error( /*#__PURE__*/React.createElement("div", {
+      className: "ald-notification-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ald-notification-message"
+    }, message), description && /*#__PURE__*/React.createElement("div", {
+      className: 'ald-notification-desc'
+    }, description)), _objectSpread(_objectSpread({
+      icon: function icon() {
+        return iconMap.error;
+      }
+    }, defaultOptions), {}, {
+      autoClose: duration ? duration * 1000 : 3000,
+      position: getPosition(placement),
+      className: classNames('ald-notification', className)
+    }, restConfig));
   },
-  warning: function warning(config) {
-    var _config$icon3 = config.icon,
-      icon = _config$icon3 === void 0 ? iconMap.warning : _config$icon3,
-      _config$closeIcon3 = config.closeIcon,
-      closeIcon = _config$closeIcon3 === void 0 ? closeX : _config$closeIcon3,
+  info: function info(config) {
+    var message = config.message,
       description = config.description,
-      footer = config.footer,
-      rest = _objectWithoutProperties(config, _excluded3);
-    return AntdNotification.warning(_objectSpread(_objectSpread({}, rest), {}, {
-      className: classnames('ald-notification-notice', config.className),
-      style: Object.assign(getSDefaultStyle(), config.style),
-      icon: icon,
-      closeIcon: closeIcon,
-      description: /*#__PURE__*/React.createElement("div", {
-        className: "ald-notification-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'ald-notification-desc'
-      }, description), footer && /*#__PURE__*/React.createElement("div", {
-        className: 'ald-notification-footer'
-      }, footer))
-    }));
+      _config$placement4 = config.placement,
+      placement = _config$placement4 === void 0 ? 'topRight' : _config$placement4,
+      className = config.className,
+      duration = config.duration,
+      restConfig = _objectWithoutProperties(config, _excluded4);
+    return toast.info( /*#__PURE__*/React.createElement("div", {
+      className: "ald-notification-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ald-notification-message"
+    }, message), description && /*#__PURE__*/React.createElement("div", {
+      className: 'ald-notification-desc'
+    }, description)), _objectSpread(_objectSpread({
+      icon: function icon() {
+        return iconMap.info;
+      }
+    }, defaultOptions), {}, {
+      autoClose: duration ? duration * 1000 : 3000,
+      position: getPosition(placement),
+      className: classNames('ald-notification', className)
+    }, restConfig));
   },
-  info: function info(config) {
-    var _config$icon4 = config.icon,
-      icon = _config$icon4 === void 0 ? iconMap.info : _config$icon4,
-      _config$closeIcon4 = config.closeIcon,
-      closeIcon = _config$closeIcon4 === void 0 ? closeX : _config$closeIcon4,
+  warning: function warning(config) {
+    var message = config.message,
       description = config.description,
-      footer = config.footer,
-      rest = _objectWithoutProperties(config, _excluded4);
-    return AntdNotification.info(_objectSpread(_objectSpread({}, rest), {}, {
-      className: classnames('ald-notification-notice', config.className),
-      style: Object.assign(getSDefaultStyle(), config.style),
-      icon: icon,
-      closeIcon: closeIcon,
-      description: /*#__PURE__*/React.createElement("div", {
-        className: "ald-notification-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: 'ald-notification-desc'
-      }, description), footer && /*#__PURE__*/React.createElement("div", {
-        className: 'ald-notification-footer'
-      }, footer))
-    }));
+      _config$placement5 = config.placement,
+      placement = _config$placement5 === void 0 ? 'topRight' : _config$placement5,
+      className = config.className,
+      duration = config.duration,
+      restConfig = _objectWithoutProperties(config, _excluded5);
+    return toast.warn( /*#__PURE__*/React.createElement("div", {
+      className: "ald-notification-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ald-notification-message"
+    }, message), description && /*#__PURE__*/React.createElement("div", {
+      className: 'ald-notification-desc'
+    }, description)), _objectSpread(_objectSpread({
+      icon: function icon() {
+        return iconMap.warning;
+      }
+    }, defaultOptions), {}, {
+      autoClose: duration ? duration * 1000 : 3000,
+      position: getPosition(placement),
+      className: classNames('ald-notification', className)
+    }, restConfig));
+  },
+  close: function close(id) {
+    toast.dismiss(id);
   },
-  destroy: function destroy(key) {
-    return AntdNotification.destroy(key);
+  closeAll: function closeAll() {
+    toast.dismiss();
   }
 };
 export default notification;

package/dist/notification/style/index.less

@@ -1,73 +1,54 @@
-@import '../../style/index.less';
-
-.ald-notification-notice.ant-notification-notice {
-  .ant-notification-notice-icon {
-    top: 24px;
-  }
-
-  .ant-notification-notice-message {
-    margin-inline-start: 28px;
-    padding-inline-end: 28px;
-    margin-bottom: 8px !important;
-    margin-left: 56px !important;
-    color: var(--alias-colors-text-strong, #111827);
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 28px; /* 155.556% */
+@import '../../style/components/toastify.less';
+@import '../../style/themes/default/themeColor.module.less';
+/* stylelint-disable selector-class-pattern, keyframes-name-pattern */
+.ald-notification {
+  width: 360px;
+  padding: 16px;
+  background: var(--alias-colors-bg-skeleton-subtler, #fff);
+  border-radius: var(--alias-radius-75, 6px);
+  border: 1px solid var(--alias-colors-border-strong, #d1d5db);
+
+  /* shadow/shadow-xl */
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05),
+    0 8px 10px -6px rgba(0, 0, 0, 0.05);
+
+  & > svg {
+    flex-shrink: 0;
   }
 
-  .ant-notification-notice-description {
-    margin-inline-start: 28px;
-    padding-inline-end: 28px;
-    margin-bottom: 8px !important;
-    margin-left: 56px !important;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  .Toastify__toast-body {
+    .Toastify__toast-icon {
+      align-self: flex-start;
+      margin-right: 12px;
 
-    .ald-notification-desc {
-      color: var(--alias-colors-text-subtle, #4b5563);
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 20px; /* 142.857% */
+      .ald-notification-notice-icon {
+        display: flex;
+        height: 28px;
+        align-items: center;
+      }
     }
-  }
 
-  .ant-notification-notice-close {
-    top: 24px;
-    right: 24px;
-    width: fit-content;
-    height: fit-content;
-
-    &:hover {
-      background: none;
+    .ald-notification-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      .ald-notification-message {
+        color: var(--alias-colors-text-default, #1f2937);
+        text-align: justify;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 28px;
+      }
+
+      .ald-notification-description {
+        color: var(--alias-colors-text-subtle, #4b5563);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
+      }
     }
   }
 }
-
-.ald-notification-notice-icon-success,
-.ald-notification-notice-icon-error,
-.ald-notification-notice-icon-warning,
-.ald-notification-notice-icon-info {
-  display: grid;
-  place-items: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-}
-
-.ald-notification-notice-icon-success {
-  background: var(--alias-colors-bg-accent-green-subtle-default, #dcfce7);
-}
-
-.ald-notification-notice-icon-error {
-  background: var(--alias-colors-bg-accent-red-subtle-default, #fee2e2);
-}
-
-.ald-notification-notice-icon-warning {
-  background: var(--alias-colors-bg-accent-yellow-subtle-default, #fef9c3);
-}
-
-.ald-notification-notice-icon-info {
-  background: var(--alias-colors-bg-accent-blue-subtle-default, #d4e7fd);
-}