@hi-ui/alert - npm Package Compare versions

Comparing version 4.0.0-alpha.15 to 4.0.0-alpha.17

lib/cjs/Alert.js

@@ -26,4 +26,10 @@ /** @LICENSE
 
-var icons = require('@hi-ui/icons');
+var useLatest = require('@hi-ui/use-latest');
 
+var useTimeout = require('@hi-ui/use-timeout');
+
+var iconButton = require('@hi-ui/icon-button');
+
+var icons = require('./icons.js');
+
 function _interopDefaultLegacy(e) {
@@ -37,23 +43,18 @@ return e && _typeof(e) === 'object' && 'default' in e ? e : {
 
-var _role = 'alert';
-
-var _prefix = classname.getPrefixCls(_role);
-
-var alertIconMap = {
-  success: /*#__PURE__*/React__default['default'].createElement(icons.CheckCircleFilled, null),
-  danger: /*#__PURE__*/React__default['default'].createElement(icons.CloseCircleFilled, null),
-  warning: /*#__PURE__*/React__default['default'].createElement(icons.ExclamationCircleFilled, null),
-  primary: /*#__PURE__*/React__default['default'].createElement(icons.InfoCircleFilled, null)
-};
+var _prefix = classname.getPrefixCls('alert');
 /**
- * What is Alert
+ * 警告提示
+ *
+ * 作用于页面的内容区域的提示，非触发类信息
+ *
+ * TODO:
+ *  1. 添加关闭动效
  */
 
+
 var Alert = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _cx;
-
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
       _a$role = _a.role,
-      role = _a$role === void 0 ? _role : _a$role,
+      role = _a$role === void 0 ? 'alert' : _a$role,
       className = _a.className,
@@ -65,7 +66,11 @@ title = _a.title,
       _a$closeable = _a.closeable,
-      closeable = _a$closeable === void 0 ? false : _a$closeable,
+      closeable = _a$closeable === void 0 ? true : _a$closeable,
+      _a$showIcon = _a.showIcon,
+      showIcon = _a$showIcon === void 0 ? true : _a$showIcon,
+      _a$closeIcon = _a.closeIcon,
+      closeIcon = _a$closeIcon === void 0 ? icons.defaultCloseIcon : _a$closeIcon,
       _a$duration = _a.duration,
       duration = _a$duration === void 0 ? -1 : _a$duration,
       onClose = _a.onClose,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "title", "content", "type", "closeable", "duration", "onClose"]);
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "title", "content", "type", "closeable", "showIcon", "closeIcon", "duration", "onClose"]);
 
@@ -76,21 +81,22 @@ var _useState = React.useState(true),
 
-  var handleClose = React.useCallback(function () {
+  var handleClose = useLatest.useLatestCallback(function () {
     setInternalVisible(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose]);
-  var prevUpdaterRef = React.useRef(0);
+  });
+
+  var _useTimeout = useTimeout.useTimeout(function () {
+    handleClose();
+  }, duration),
+      startCloseTimer = _useTimeout.start,
+      clearCloseTimer = _useTimeout.clear;
+
   React.useEffect(function () {
-    // TODO: 1. 抽离为 useTimeout 逻辑（props变化需要取消定时器以及页面卸载时取消定时器这一套逻辑） 2. 处理 window 支持 SSR
-    if (typeof duration === 'number' && duration > 0) {
-      window.clearTimeout(prevUpdaterRef.current);
-      prevUpdaterRef.current = window.setTimeout(function () {
-        handleClose();
-      }, duration);
-    }
-
+    clearCloseTimer();
+    startCloseTimer();
     return function () {
-      window.clearTimeout(prevUpdaterRef.current);
+      clearCloseTimer();
     };
-  }, [duration, handleClose]);
-  var cls = classname.cx(prefixCls, className, prefixCls + "--" + type, (_cx = {}, _cx[prefixCls + "--with-content"] = content, _cx));
+  }, [clearCloseTimer, startCloseTimer]);
+  var suffixIcon = icons.alertIconMap[type] || null;
+  var cls = classname.cx(prefixCls, className, suffixIcon && prefixCls + "--type-" + type, content && prefixCls + "--with-content");
   return internalVisible ? /*#__PURE__*/React__default['default'].createElement("div", Object.assign({
@@ -100,12 +106,15 @@ ref: ref,
     className: cls
-  }, rest), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, rest), showIcon && suffixIcon ? /*#__PURE__*/React__default['default'].createElement("span", {
+    className: prefixCls + "__icon"
+  }, suffixIcon) : null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: prefixCls + "__message"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: prefixCls + "__title"
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
-    className: prefixCls + "__icon"
-  }, alertIconMap[type]), title), content && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, title), content ? /*#__PURE__*/React__default['default'].createElement("div", {
     className: prefixCls + "__content"
-  }, content), closeable && /*#__PURE__*/React__default['default'].createElement(icons.CloseOutlined, {
+  }, content) : null), closeable && closeIcon ? /*#__PURE__*/React__default['default'].createElement(iconButton.IconButton, {
+    className: prefixCls + "__close",
     onClick: handleClose,
-    className: prefixCls + "__close"
-  })) : null;
+    icon: closeIcon
+  }) : null) : null;
 });
@@ -112,0 +121,0 @@

lib/cjs/styles/index.scss.js

@@ -15,3 +15,3 @@ /** @LICENSE
 });
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-alert {\n  position: relative;\n  padding: 12px 20px;\n  padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px);\n  border-radius: 6px;\n  border-radius: var(--hi-v4-border-radius-lg, 6px);\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  min-width: 280px;\n  display: block;\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n  color: #5f6a7a;\n  color: var(--hi-v4-color-gray-600, #5f6a7a); }\n.hi-v4-alert.hi-v4-alert--with-content {\n    padding: 20px;\n    padding: var(--hi-v4-spacing-10, 20px); }\n.hi-v4-alert.hi-v4-alert--with-content .hi-v4-alert__title {\n      font-size: 1rem;\n      font-size: var(--hi-v4-text-size-lg, 1rem);\n      font-weight: 500;\n      font-weight: var(--hi-v4-text-weight-medium, 500);\n      margin-bottom: 8px;\n      margin-bottom: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-alert.hi-v4-alert--with-content .hi-v4-alert__icon {\n      font-size: 1.5rem;\n      font-size: var(--hi-v4-text-size-xxl, 1.5rem);\n      margin-right: 12px;\n      margin-right: var(--hi-v4-spacing-6, 12px); }\n.hi-v4-alert__title {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    font-size: 0.875rem;\n    font-size: var(--hi-v4-text-size-normal, 0.875rem);\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    color: #1f2733;\n    color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-alert__title .hi-v4-alert__icon {\n      font-size: 1rem;\n      font-size: var(--hi-v4-text-size-lg, 1rem);\n      margin-right: 8px;\n      margin-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-alert__content {\n    margin-left: 32px;\n    margin-left: var(--hi-v4-spacing-16, 32px);\n    line-height: 1.375rem;\n    line-height: var(--hi-v4-text-lineheight-normal, 1.375rem);\n    color: #5f6a7a;\n    color: var(--hi-v4-color-gray-600, #5f6a7a); }\n.hi-v4-alert__close {\n    position: absolute;\n    color: #5f6a7a;\n    color: var(--hi-v4-color-gray-600, #5f6a7a);\n    cursor: pointer;\n    font-size: 0.875rem;\n    font-size: var(--hi-v4-text-size-normal, 0.875rem);\n    right: 20px;\n    right: var(--hi-v4-spacing-10, 20px);\n    top: 16px;\n    top: var(--hi-v4-spacing-8, 16px); }\n.hi-v4-alert--primary {\n    background-color: #e2f3fe;\n    background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-alert--primary .hi-v4-alert__icon {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-alert--warning {\n    background-color: #fefae0;\n    background-color: var(--hi-v4-color-yellow-50, #fefae0); }\n.hi-v4-alert--warning .hi-v4-alert__icon {\n      color: #fab007;\n      color: var(--hi-v4-color-yellow-500, #fab007); }\n.hi-v4-alert--success {\n    background-color: #e5feeb;\n    background-color: var(--hi-v4-color-green-50, #e5feeb); }\n.hi-v4-alert--success .hi-v4-alert__icon {\n      color: #14ca64;\n      color: var(--hi-v4-color-green-500, #14ca64); }\n.hi-v4-alert--danger {\n    background-color: #fee9e5;\n    background-color: var(--hi-v4-color-red-50, #fee9e5); }\n.hi-v4-alert--danger .hi-v4-alert__icon {\n      color: #ff5959;\n      color: var(--hi-v4-color-red-500, #ff5959); }\n";
+var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-alert {\n  position: relative;\n  padding: 12px 20px;\n  padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px);\n  border-radius: 6px;\n  border-radius: var(--hi-v4-border-radius-lg, 6px);\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  color: #5f6a7a;\n  color: var(--hi-v4-color-gray-600, #5f6a7a);\n  line-height: 1.25rem;\n  line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n  min-width: 280px; }\n.hi-v4-alert.hi-v4-alert--with-content {\n    padding: 20px;\n    padding: var(--hi-v4-spacing-10, 20px); }\n.hi-v4-alert.hi-v4-alert--with-content .hi-v4-alert__title {\n      font-size: 1rem;\n      font-size: var(--hi-v4-text-size-lg, 1rem);\n      font-weight: 500;\n      font-weight: var(--hi-v4-text-weight-medium, 500);\n      margin-bottom: 8px;\n      margin-bottom: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-alert.hi-v4-alert--with-content .hi-v4-alert__icon {\n      font-size: 20px;\n      -webkit-margin-end: 12px;\n              margin-inline-end: 12px;\n      -webkit-margin-end: var(--hi-v4-spacing-6, 12px);\n              margin-inline-end: var(--hi-v4-spacing-6, 12px); }\n.hi-v4-alert__icon {\n    font-size: 1rem;\n    font-size: var(--hi-v4-text-size-lg, 1rem);\n    -webkit-margin-end: 8px;\n            margin-inline-end: 8px;\n    -webkit-margin-end: var(--hi-v4-spacing-4, 8px);\n            margin-inline-end: var(--hi-v4-spacing-4, 8px);\n    -ms-flex-negative: 0;\n        flex-shrink: 0; }\n.hi-v4-alert__message {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1;\n            flex: 1 1;\n    width: 100%; }\n.hi-v4-alert__title {\n    font-size: 0.875rem;\n    font-size: var(--hi-v4-text-size-normal, 0.875rem);\n    color: #1f2733;\n    color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-alert .hi-v4-alert__close {\n    line-height: inherit;\n    height: 1.25rem;\n    height: var(--hi-v4-text-lineheight-sm, 1.25rem);\n    -webkit-margin-start: 8px;\n            margin-inline-start: 8px;\n    -webkit-margin-start: var(--hi-v4-spacing-4, 8px);\n            margin-inline-start: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-alert--type-primary {\n    background-color: #e2f3fe;\n    background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-alert--type-primary .hi-v4-alert__icon {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-alert--type-warning {\n    background-color: #fefae0;\n    background-color: var(--hi-v4-color-yellow-50, #fefae0); }\n.hi-v4-alert--type-warning .hi-v4-alert__icon {\n      color: #fab007;\n      color: var(--hi-v4-color-yellow-500, #fab007); }\n.hi-v4-alert--type-success {\n    background-color: #e5feeb;\n    background-color: var(--hi-v4-color-green-50, #e5feeb); }\n.hi-v4-alert--type-success .hi-v4-alert__icon {\n      color: #14ca64;\n      color: var(--hi-v4-color-green-500, #14ca64); }\n.hi-v4-alert--type-danger {\n    background-color: #fee9e5;\n    background-color: var(--hi-v4-color-red-50, #fee9e5); }\n.hi-v4-alert--type-danger .hi-v4-alert__icon {\n      color: #ff5959;\n      color: var(--hi-v4-color-red-500, #ff5959); }\n";
 
@@ -18,0 +18,0 @@ var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];

lib/esm/Alert.js

@@ -11,27 +11,26 @@ /** @LICENSE
 import { __rest } from 'tslib';
-import React, { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
+import React, { forwardRef, useState, useEffect } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
-import { CloseOutlined, CheckCircleFilled, CloseCircleFilled, ExclamationCircleFilled, InfoCircleFilled } from '@hi-ui/icons';
-var _role = 'alert';
+import { useLatestCallback } from '@hi-ui/use-latest';
+import { useTimeout } from '@hi-ui/use-timeout';
+import { IconButton } from '@hi-ui/icon-button';
+import { defaultCloseIcon, alertIconMap } from './icons.js';
 
-var _prefix = getPrefixCls(_role);
-
-var alertIconMap = {
-  success: /*#__PURE__*/React.createElement(CheckCircleFilled, null),
-  danger: /*#__PURE__*/React.createElement(CloseCircleFilled, null),
-  warning: /*#__PURE__*/React.createElement(ExclamationCircleFilled, null),
-  primary: /*#__PURE__*/React.createElement(InfoCircleFilled, null)
-};
+var _prefix = getPrefixCls('alert');
 /**
- * What is Alert
+ * 警告提示
+ *
+ * 作用于页面的内容区域的提示，非触发类信息
+ *
+ * TODO:
+ *  1. 添加关闭动效
  */
 
+
 var Alert = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _cx;
-
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
       _a$role = _a.role,
-      role = _a$role === void 0 ? _role : _a$role,
+      role = _a$role === void 0 ? 'alert' : _a$role,
       className = _a.className,
@@ -43,7 +42,11 @@ title = _a.title,
       _a$closeable = _a.closeable,
-      closeable = _a$closeable === void 0 ? false : _a$closeable,
+      closeable = _a$closeable === void 0 ? true : _a$closeable,
+      _a$showIcon = _a.showIcon,
+      showIcon = _a$showIcon === void 0 ? true : _a$showIcon,
+      _a$closeIcon = _a.closeIcon,
+      closeIcon = _a$closeIcon === void 0 ? defaultCloseIcon : _a$closeIcon,
       _a$duration = _a.duration,
       duration = _a$duration === void 0 ? -1 : _a$duration,
       onClose = _a.onClose,
-      rest = __rest(_a, ["prefixCls", "role", "className", "children", "title", "content", "type", "closeable", "duration", "onClose"]);
+      rest = __rest(_a, ["prefixCls", "role", "className", "children", "title", "content", "type", "closeable", "showIcon", "closeIcon", "duration", "onClose"]);
 
@@ -54,21 +57,22 @@ var _useState = useState(true),
 
-  var handleClose = useCallback(function () {
+  var handleClose = useLatestCallback(function () {
     setInternalVisible(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose]);
-  var prevUpdaterRef = useRef(0);
+  });
+
+  var _useTimeout = useTimeout(function () {
+    handleClose();
+  }, duration),
+      startCloseTimer = _useTimeout.start,
+      clearCloseTimer = _useTimeout.clear;
+
   useEffect(function () {
-    // TODO: 1. 抽离为 useTimeout 逻辑（props变化需要取消定时器以及页面卸载时取消定时器这一套逻辑） 2. 处理 window 支持 SSR
-    if (typeof duration === 'number' && duration > 0) {
-      window.clearTimeout(prevUpdaterRef.current);
-      prevUpdaterRef.current = window.setTimeout(function () {
-        handleClose();
-      }, duration);
-    }
-
+    clearCloseTimer();
+    startCloseTimer();
     return function () {
-      window.clearTimeout(prevUpdaterRef.current);
+      clearCloseTimer();
     };
-  }, [duration, handleClose]);
-  var cls = cx(prefixCls, className, prefixCls + "--" + type, (_cx = {}, _cx[prefixCls + "--with-content"] = content, _cx));
+  }, [clearCloseTimer, startCloseTimer]);
+  var suffixIcon = alertIconMap[type] || null;
+  var cls = cx(prefixCls, className, suffixIcon && prefixCls + "--type-" + type, content && prefixCls + "--with-content");
   return internalVisible ? /*#__PURE__*/React.createElement("div", Object.assign({
@@ -78,12 +82,15 @@ ref: ref,
     className: cls
-  }, rest), /*#__PURE__*/React.createElement("div", {
+  }, rest), showIcon && suffixIcon ? /*#__PURE__*/React.createElement("span", {
+    className: prefixCls + "__icon"
+  }, suffixIcon) : null, /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "__message"
+  }, /*#__PURE__*/React.createElement("div", {
     className: prefixCls + "__title"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: prefixCls + "__icon"
-  }, alertIconMap[type]), title), content && /*#__PURE__*/React.createElement("div", {
+  }, title), content ? /*#__PURE__*/React.createElement("div", {
     className: prefixCls + "__content"
-  }, content), closeable && /*#__PURE__*/React.createElement(CloseOutlined, {
+  }, content) : null), closeable && closeIcon ? /*#__PURE__*/React.createElement(IconButton, {
+    className: prefixCls + "__close",
     onClick: handleClose,
-    className: prefixCls + "__close"
-  })) : null;
+    icon: closeIcon
+  }) : null) : null;
 });
@@ -90,0 +97,0 @@

lib/esm/styles/index.scss.js

@@ -10,3 +10,3 @@ /** @LICENSE
  */
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-alert {\n  position: relative;\n  padding: 12px 20px;\n  padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px);\n  border-radius: 6px;\n  border-radius: var(--hi-v4-border-radius-lg, 6px);\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  min-width: 280px;\n  display: block;\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n  color: #5f6a7a;\n  color: var(--hi-v4-color-gray-600, #5f6a7a); }\n.hi-v4-alert.hi-v4-alert--with-content {\n    padding: 20px;\n    padding: var(--hi-v4-spacing-10, 20px); }\n.hi-v4-alert.hi-v4-alert--with-content .hi-v4-alert__title {\n      font-size: 1rem;\n      font-size: var(--hi-v4-text-size-lg, 1rem);\n      font-weight: 500;\n      font-weight: var(--hi-v4-text-weight-medium, 500);\n      margin-bottom: 8px;\n      margin-bottom: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-alert.hi-v4-alert--with-content .hi-v4-alert__icon {\n      font-size: 1.5rem;\n      font-size: var(--hi-v4-text-size-xxl, 1.5rem);\n      margin-right: 12px;\n      margin-right: var(--hi-v4-spacing-6, 12px); }\n.hi-v4-alert__title {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    font-size: 0.875rem;\n    font-size: var(--hi-v4-text-size-normal, 0.875rem);\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    color: #1f2733;\n    color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-alert__title .hi-v4-alert__icon {\n      font-size: 1rem;\n      font-size: var(--hi-v4-text-size-lg, 1rem);\n      margin-right: 8px;\n      margin-right: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-alert__content {\n    margin-left: 32px;\n    margin-left: var(--hi-v4-spacing-16, 32px);\n    line-height: 1.375rem;\n    line-height: var(--hi-v4-text-lineheight-normal, 1.375rem);\n    color: #5f6a7a;\n    color: var(--hi-v4-color-gray-600, #5f6a7a); }\n.hi-v4-alert__close {\n    position: absolute;\n    color: #5f6a7a;\n    color: var(--hi-v4-color-gray-600, #5f6a7a);\n    cursor: pointer;\n    font-size: 0.875rem;\n    font-size: var(--hi-v4-text-size-normal, 0.875rem);\n    right: 20px;\n    right: var(--hi-v4-spacing-10, 20px);\n    top: 16px;\n    top: var(--hi-v4-spacing-8, 16px); }\n.hi-v4-alert--primary {\n    background-color: #e2f3fe;\n    background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-alert--primary .hi-v4-alert__icon {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-alert--warning {\n    background-color: #fefae0;\n    background-color: var(--hi-v4-color-yellow-50, #fefae0); }\n.hi-v4-alert--warning .hi-v4-alert__icon {\n      color: #fab007;\n      color: var(--hi-v4-color-yellow-500, #fab007); }\n.hi-v4-alert--success {\n    background-color: #e5feeb;\n    background-color: var(--hi-v4-color-green-50, #e5feeb); }\n.hi-v4-alert--success .hi-v4-alert__icon {\n      color: #14ca64;\n      color: var(--hi-v4-color-green-500, #14ca64); }\n.hi-v4-alert--danger {\n    background-color: #fee9e5;\n    background-color: var(--hi-v4-color-red-50, #fee9e5); }\n.hi-v4-alert--danger .hi-v4-alert__icon {\n      color: #ff5959;\n      color: var(--hi-v4-color-red-500, #ff5959); }\n";
+var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-alert {\n  position: relative;\n  padding: 12px 20px;\n  padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-10, 20px);\n  border-radius: 6px;\n  border-radius: var(--hi-v4-border-radius-lg, 6px);\n  font-size: 0.875rem;\n  font-size: var(--hi-v4-text-size-normal, 0.875rem);\n  color: #5f6a7a;\n  color: var(--hi-v4-color-gray-600, #5f6a7a);\n  line-height: 1.25rem;\n  line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: start;\n      -ms-flex-align: start;\n          align-items: flex-start;\n  min-width: 280px; }\n.hi-v4-alert.hi-v4-alert--with-content {\n    padding: 20px;\n    padding: var(--hi-v4-spacing-10, 20px); }\n.hi-v4-alert.hi-v4-alert--with-content .hi-v4-alert__title {\n      font-size: 1rem;\n      font-size: var(--hi-v4-text-size-lg, 1rem);\n      font-weight: 500;\n      font-weight: var(--hi-v4-text-weight-medium, 500);\n      margin-bottom: 8px;\n      margin-bottom: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-alert.hi-v4-alert--with-content .hi-v4-alert__icon {\n      font-size: 20px;\n      -webkit-margin-end: 12px;\n              margin-inline-end: 12px;\n      -webkit-margin-end: var(--hi-v4-spacing-6, 12px);\n              margin-inline-end: var(--hi-v4-spacing-6, 12px); }\n.hi-v4-alert__icon {\n    font-size: 1rem;\n    font-size: var(--hi-v4-text-size-lg, 1rem);\n    -webkit-margin-end: 8px;\n            margin-inline-end: 8px;\n    -webkit-margin-end: var(--hi-v4-spacing-4, 8px);\n            margin-inline-end: var(--hi-v4-spacing-4, 8px);\n    -ms-flex-negative: 0;\n        flex-shrink: 0; }\n.hi-v4-alert__message {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1;\n            flex: 1 1;\n    width: 100%; }\n.hi-v4-alert__title {\n    font-size: 0.875rem;\n    font-size: var(--hi-v4-text-size-normal, 0.875rem);\n    color: #1f2733;\n    color: var(--hi-v4-color-gray-700, #1f2733); }\n.hi-v4-alert .hi-v4-alert__close {\n    line-height: inherit;\n    height: 1.25rem;\n    height: var(--hi-v4-text-lineheight-sm, 1.25rem);\n    -webkit-margin-start: 8px;\n            margin-inline-start: 8px;\n    -webkit-margin-start: var(--hi-v4-spacing-4, 8px);\n            margin-inline-start: var(--hi-v4-spacing-4, 8px); }\n.hi-v4-alert--type-primary {\n    background-color: #e2f3fe;\n    background-color: var(--hi-v4-color-brandblue-50, #e2f3fe); }\n.hi-v4-alert--type-primary .hi-v4-alert__icon {\n      color: #237ffa;\n      color: var(--hi-v4-color-brandblue-500, #237ffa); }\n.hi-v4-alert--type-warning {\n    background-color: #fefae0;\n    background-color: var(--hi-v4-color-yellow-50, #fefae0); }\n.hi-v4-alert--type-warning .hi-v4-alert__icon {\n      color: #fab007;\n      color: var(--hi-v4-color-yellow-500, #fab007); }\n.hi-v4-alert--type-success {\n    background-color: #e5feeb;\n    background-color: var(--hi-v4-color-green-50, #e5feeb); }\n.hi-v4-alert--type-success .hi-v4-alert__icon {\n      color: #14ca64;\n      color: var(--hi-v4-color-green-500, #14ca64); }\n.hi-v4-alert--type-danger {\n    background-color: #fee9e5;\n    background-color: var(--hi-v4-color-red-50, #fee9e5); }\n.hi-v4-alert--type-danger .hi-v4-alert__icon {\n      color: #ff5959;\n      color: var(--hi-v4-color-red-500, #ff5959); }\n";
 
@@ -13,0 +13,0 @@ var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];

lib/types/Alert.d.ts

 import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import { AlertTypeEnum } from './types';
 /**
- * What is Alert
+ * 警告提示
+ *
+ * 作用于页面的内容区域的提示，非触发类信息
+ *
+ * TODO:
+ *  1. 添加关闭动效
  */
 export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface AlertProps {
+export interface AlertProps extends HiBaseHTMLProps<'div'> {
     /**
-     * 组件默认的选择器类
+     * 	警告提示类型
      */
-    prefixCls?: string;
+    type?: AlertTypeEnum;
     /**
-     * 组件的语义化 Role 属性
+     * 	警告提示标题
      */
-    role?: string;
+    title: React.ReactNode;
     /**
-     * 组件的注入选择器类
+     * 	警告提示内容
      */
-    className?: string;
+    content?: React.ReactNode;
     /**
-     * 组件的注入样式
+     * 	是否可关闭
      */
-    style?: React.CSSProperties;
-    type?: 'primary' | 'success' | 'danger' | 'warning';
+    closeable?: boolean;
+    /**
+     * 	自动关闭时间，单位为毫秒
+     */
     duration?: number;
-    closeable?: boolean;
-    title?: React.ReactNode;
-    content?: React.ReactNode;
+    /**
+     * 关闭事件触发时的回调
+     */
     onClose?: () => void;
+    /**
+     * 自定义关闭 Icon
+     * @version 4.0.0
+     */
+    closeIcon?: React.ReactNode;
+    /**
+     * 是否显示提示图标
+     * @version 4.0.0
+     */
+    showIcon?: boolean;
 }

package.json

 {
   "name": "@hi-ui/alert",
-  "version": "4.0.0-alpha.15",
+  "version": "4.0.0-alpha.17",
   "description": "A sub-package for @hi-ui/hiui.",
@@ -47,5 +47,9 @@ "keywords": [],
     "@hi-ui/classname": "^4.0.0-alpha.3",
+    "@hi-ui/core": "^4.0.0-alpha.14",
     "@hi-ui/core-css": "^4.0.0-alpha.10",
     "@hi-ui/env": "^4.0.0-alpha.5",
-    "@hi-ui/icons": "^4.0.0-alpha.18"
+    "@hi-ui/icon-button": "^4.0.0-alpha.10",
+    "@hi-ui/icons": "^4.0.0-alpha.20",
+    "@hi-ui/use-latest": "^4.0.0-alpha.4",
+    "@hi-ui/use-timeout": "^4.0.0-alpha.4"
   },
@@ -61,3 +65,3 @@ "peerDependencies": {
   },
-  "gitHead": "4fe4855aa7b3180a4e30ffa0972ac39a04947b4b"
+  "gitHead": "dbe7ec19bc067527f0cfcf8c71100619fc98cc72"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34668

increased by21.67%

Number of package files

27

increased by58.82%

Lines of code

440

increased by44.26%

Worsened metrics

Dependency count

10

increased by66.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@hi-ui/core@^4.0.0-alpha.14

• + Added@hi-ui/icon-button@^4.0.0-alpha.10

• + Added@hi-ui/use-latest@^4.0.0-alpha.4

• + Added@hi-ui/use-timeout@^4.0.0-alpha.4

• + Added@hi-ui/icon-button@4.0.9(transitive)

• + Added@hi-ui/use-latest@4.0.4(transitive)

• + Added@hi-ui/use-timeout@4.0.4(transitive)

• Updated@hi-ui/icons@^4.0.0-alpha.20