@rainbow-oh/yee-c 0.8.2 → 0.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/dist/cjs/Form/form-store.js +3 -0
  2. package/dist/cjs/Input/style/index.less +1 -0
  3. package/dist/cjs/Select/interface.d.ts +1 -1
  4. package/dist/cjs/Selector/style/index.less +1 -0
  5. package/dist/cjs/Table/icon/arrow-icon.js +1 -1
  6. package/dist/cjs/Table/theader/cell.js +6 -3
  7. package/dist/cjs/TextArea/style/index.less +1 -0
  8. package/dist/cjs/VerificationCode/style/index.less +1 -0
  9. package/dist/cjs/hooks/useCountdown.d.ts +2 -1
  10. package/dist/cjs/hooks/useCountdown.js +46 -23
  11. package/dist/cjs/locale/interface.d.ts +3 -0
  12. package/dist/cjs/locale/lang/en_US.js +4 -1
  13. package/dist/cjs/locale/lang/ja_JP.js +4 -1
  14. package/dist/cjs/locale/lang/zh_CN.js +4 -1
  15. package/dist/cjs/locale/lang/zh_TW.js +4 -1
  16. package/dist/cjs/message/demo/base.js +1 -1
  17. package/dist/cjs/message/index.d.ts +1 -1
  18. package/dist/cjs/message/interface.d.ts +16 -7
  19. package/dist/cjs/message/message-provider.d.ts +2 -1
  20. package/dist/cjs/message/message-provider.js +1 -1
  21. package/dist/cjs/message/message.js +14 -9
  22. package/dist/cjs/message/style/index.less +3 -1
  23. package/dist/cjs/message/use-message.d.ts +3 -12
  24. package/dist/cjs/message/use-message.js +103 -45
  25. package/dist/cjs/message/wrapper.d.ts +21 -27
  26. package/dist/cjs/message/wrapper.js +49 -19
  27. package/dist/cjs/notice/index.d.ts +1 -1
  28. package/dist/cjs/notice/interface.d.ts +17 -7
  29. package/dist/cjs/notice/notice-list.d.ts +3 -3
  30. package/dist/cjs/notice/notice-provider.d.ts +2 -1
  31. package/dist/cjs/notice/notice-provider.js +1 -1
  32. package/dist/cjs/notice/notice.js +63 -20
  33. package/dist/cjs/notice/style/index.less +13 -1
  34. package/dist/cjs/notice/use-notice.d.ts +2 -11
  35. package/dist/cjs/notice/use-notice.js +156 -71
  36. package/dist/cjs/notice/wrapper.d.ts +19 -15
  37. package/dist/cjs/notice/wrapper.js +122 -52
  38. package/dist/cjs/style/size.css +3 -3
  39. package/dist/cjs/style/themes.css +1 -1
  40. package/dist/cjs/style/variables.css +4 -4
  41. package/dist/cjs/version.d.ts +1 -1
  42. package/dist/cjs/version.js +1 -1
  43. package/dist/esm/Form/form-store.js +25 -17
  44. package/dist/esm/Input/style/index.less +1 -0
  45. package/dist/esm/Select/interface.d.ts +1 -1
  46. package/dist/esm/Selector/style/index.less +1 -0
  47. package/dist/esm/Table/icon/arrow-icon.js +1 -1
  48. package/dist/esm/Table/theader/cell.js +7 -3
  49. package/dist/esm/TextArea/style/index.less +1 -0
  50. package/dist/esm/VerificationCode/style/index.less +1 -0
  51. package/dist/esm/hooks/useCountdown.d.ts +2 -1
  52. package/dist/esm/hooks/useCountdown.js +44 -14
  53. package/dist/esm/locale/interface.d.ts +3 -0
  54. package/dist/esm/locale/lang/en_US.js +4 -1
  55. package/dist/esm/locale/lang/ja_JP.js +4 -1
  56. package/dist/esm/locale/lang/zh_CN.js +4 -1
  57. package/dist/esm/locale/lang/zh_TW.js +4 -1
  58. package/dist/esm/message/demo/base.js +4 -1
  59. package/dist/esm/message/index.d.ts +1 -1
  60. package/dist/esm/message/interface.d.ts +16 -7
  61. package/dist/esm/message/message-provider.d.ts +2 -1
  62. package/dist/esm/message/message-provider.js +1 -1
  63. package/dist/esm/message/message.js +22 -9
  64. package/dist/esm/message/style/index.less +3 -1
  65. package/dist/esm/message/use-message.d.ts +3 -12
  66. package/dist/esm/message/use-message.js +129 -79
  67. package/dist/esm/message/wrapper.d.ts +21 -27
  68. package/dist/esm/message/wrapper.js +60 -18
  69. package/dist/esm/notice/index.d.ts +1 -1
  70. package/dist/esm/notice/interface.d.ts +17 -7
  71. package/dist/esm/notice/notice-list.d.ts +3 -3
  72. package/dist/esm/notice/notice-provider.d.ts +2 -1
  73. package/dist/esm/notice/notice-provider.js +1 -1
  74. package/dist/esm/notice/notice.js +73 -21
  75. package/dist/esm/notice/style/index.less +13 -1
  76. package/dist/esm/notice/use-notice.d.ts +2 -11
  77. package/dist/esm/notice/use-notice.js +180 -100
  78. package/dist/esm/notice/wrapper.d.ts +19 -15
  79. package/dist/esm/notice/wrapper.js +144 -62
  80. package/dist/esm/style/size.css +3 -3
  81. package/dist/esm/style/themes.css +1 -1
  82. package/dist/esm/style/variables.css +4 -4
  83. package/dist/esm/version.d.ts +1 -1
  84. package/dist/esm/version.js +1 -1
  85. package/dist/umd/yee-c.min.css +2 -2
  86. package/dist/umd/yee-c.min.js +1 -1
  87. package/package.json +1 -1
  88. package/src/Form/form-store.ts +5 -0
  89. package/src/Input/style/index.less +1 -0
  90. package/src/Select/interface.ts +1 -1
  91. package/src/Selector/style/index.less +1 -0
  92. package/src/Table/icon/arrow-icon.tsx +1 -1
  93. package/src/Table/theader/cell.tsx +6 -3
  94. package/src/TextArea/style/index.less +1 -0
  95. package/src/VerificationCode/style/index.less +1 -0
  96. package/src/hooks/useCountdown.ts +52 -21
  97. package/src/locale/interface.ts +3 -0
  98. package/src/locale/lang/en_US.ts +3 -0
  99. package/src/locale/lang/ja_JP.ts +3 -0
  100. package/src/locale/lang/zh_CN.ts +3 -0
  101. package/src/locale/lang/zh_TW.ts +3 -0
  102. package/src/message/demo/base.tsx +1 -1
  103. package/src/message/index.ts +1 -1
  104. package/src/message/interface.ts +22 -7
  105. package/src/message/message-provider.tsx +3 -2
  106. package/src/message/message.test.tsx +283 -0
  107. package/src/message/message.tsx +14 -9
  108. package/src/message/style/index.less +3 -1
  109. package/src/message/use-message.tsx +144 -67
  110. package/src/message/wrapper.tsx +62 -20
  111. package/src/notice/index.en-US.md +76 -75
  112. package/src/notice/index.ts +6 -1
  113. package/src/notice/index.zh-CN.md +3 -2
  114. package/src/notice/interface.ts +31 -14
  115. package/src/notice/notice-list.tsx +3 -9
  116. package/src/notice/notice-provider.tsx +3 -2
  117. package/src/notice/notice.test.tsx +450 -0
  118. package/src/notice/notice.tsx +69 -21
  119. package/src/notice/style/index.less +13 -1
  120. package/src/notice/use-notice.tsx +210 -94
  121. package/src/notice/wrapper.tsx +159 -71
  122. package/src/style/size.css +3 -3
  123. package/src/version.ts +1 -1
@@ -238,19 +238,27 @@ export var FormStore = /*#__PURE__*/function () {
238
238
  return false;
239
239
  });
240
240
  }
241
+ // If no rules match the current trigger, skip validation entirely
242
+ // to avoid clearing existing errors from a previous validation pass.
243
+ if (!(trigger && mergedRules.length === 0)) {
244
+ _context.next = 10;
245
+ break;
246
+ }
247
+ return _context.abrupt("return", []);
248
+ case 10:
241
249
  value = _this.getFieldValue(name);
242
250
  _iterator3 = _createForOfIteratorHelper(mergedRules);
243
- _context.prev = 10;
251
+ _context.prev = 12;
244
252
  _iterator3.s();
245
- case 12:
253
+ case 14:
246
254
  if ((_step3 = _iterator3.n()).done) {
247
- _context.next = 20;
255
+ _context.next = 22;
248
256
  break;
249
257
  }
250
258
  rule = _step3.value;
251
- _context.next = 16;
259
+ _context.next = 18;
252
260
  return validate(rule, value);
253
- case 16:
261
+ case 18:
254
262
  result = _context.sent;
255
263
  if (name && !result.passed) {
256
264
  err.push(_objectSpread(_objectSpread({}, rule), {}, {
@@ -260,21 +268,21 @@ export var FormStore = /*#__PURE__*/function () {
260
268
  message: (_result$message = result.message) !== null && _result$message !== void 0 ? _result$message : rule.message
261
269
  }));
262
270
  }
263
- case 18:
264
- _context.next = 12;
265
- break;
266
271
  case 20:
267
- _context.next = 25;
272
+ _context.next = 14;
268
273
  break;
269
274
  case 22:
270
- _context.prev = 22;
271
- _context.t0 = _context["catch"](10);
275
+ _context.next = 27;
276
+ break;
277
+ case 24:
278
+ _context.prev = 24;
279
+ _context.t0 = _context["catch"](12);
272
280
  _iterator3.e(_context.t0);
273
- case 25:
274
- _context.prev = 25;
281
+ case 27:
282
+ _context.prev = 27;
275
283
  _iterator3.f();
276
- return _context.finish(25);
277
- case 28:
284
+ return _context.finish(27);
285
+ case 30:
278
286
  if (err.length > 0) {
279
287
  _this.validateMessages.set(name, err);
280
288
  } else if (_this.validateMessages.has(name)) {
@@ -283,11 +291,11 @@ export var FormStore = /*#__PURE__*/function () {
283
291
  // Notify the field to re-render so async validation results surface in the UI.
284
292
  entity === null || entity === void 0 || entity.onStoreChange();
285
293
  return _context.abrupt("return", err);
286
- case 31:
294
+ case 33:
287
295
  case "end":
288
296
  return _context.stop();
289
297
  }
290
- }, _callee, null, [[10, 22, 25, 28]]);
298
+ }, _callee, null, [[12, 24, 27, 30]]);
291
299
  }));
292
300
  return function (_x, _x2) {
293
301
  return _ref4.apply(this, arguments);
@@ -9,6 +9,7 @@
9
9
  padding: var(--yee-input-padding, 2px 8px);
10
10
  font-size: var(--yee-input-font-size);
11
11
  line-height: var(--yee-input-line-height);
12
+ background-color: var(--yee-input-content-bg-color);
12
13
  border: var(--yee-input-border-width) solid var(--yee-input-border-color);
13
14
  border-radius: var(--yee-input-border-radius, 4px);
14
15
  font-family: var(--yee-font-family);
@@ -73,7 +73,7 @@ export interface SelectProps extends DataAttributeProps, Pick<SelectorProps, 'si
73
73
  /**
74
74
  * Dropdown options
75
75
  */
76
- options: Array<Option>;
76
+ options?: Array<Option>;
77
77
  /**
78
78
  * Selection mode
79
79
  */
@@ -5,6 +5,7 @@
5
5
  box-sizing: border-box;
6
6
  width: 100%;
7
7
  padding: var(--yee-selector-padding);
8
+ background-color: var(--yee-input-content-bg-color);
8
9
  border: var(--yee-selector-border-width) solid var(--yee-input-border-color);
9
10
  border-radius: var(--yee-selector-border-radius);
10
11
 
@@ -9,7 +9,7 @@ var TriangleArrow = function TriangleArrow(_ref) {
9
9
  direction = _ref$direction === void 0 ? 'down' : _ref$direction,
10
10
  className = _ref.className,
11
11
  _ref$size = _ref.size,
12
- size = _ref$size === void 0 ? 10 : _ref$size,
12
+ size = _ref$size === void 0 ? 8 : _ref$size,
13
13
  props = _objectWithoutProperties(_ref, _excluded);
14
14
  var rotation = {
15
15
  right: 0,
@@ -10,6 +10,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
10
10
  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; }
11
11
  import clsx from 'clsx';
12
12
  import React, { useContext } from 'react';
13
+ import { useLocale } from "../../locale";
13
14
  import Tooltip from "../../Tooltip";
14
15
  import ArrowIcon from "../icon/arrow-icon";
15
16
  import Filter from "./filter";
@@ -42,6 +43,9 @@ var HeadCell = function HeadCell(props) {
42
43
  rest = _objectWithoutProperties(props, _excluded);
43
44
  var _useContext = useContext(TableCtx),
44
45
  prefixCls = _useContext.prefixCls;
46
+ var _useLocale = useLocale(),
47
+ locale = _useLocale.locale;
48
+ var tableLocale = locale.table;
45
49
  var showFilter = !!filter;
46
50
 
47
51
  // Get current sort order for this column (0 = none, 1 = ascend, -1 = descend)
@@ -80,11 +84,11 @@ var HeadCell = function HeadCell(props) {
80
84
  if (showSorterTooltip && sorter) {
81
85
  var _title = '';
82
86
  if (displaySortOrder === 0) {
83
- _title = 'Click to sort ascending';
87
+ _title = tableLocale.sortAscending || 'Click to sort ascending';
84
88
  } else if (displaySortOrder === 1) {
85
- _title = 'Click to sort descending';
89
+ _title = tableLocale.sortDescending || 'Click to sort descending';
86
90
  } else if (displaySortOrder === 2) {
87
- _title = 'Click to cancel sorting';
91
+ _title = tableLocale.sortCancel || 'Click to cancel sorting';
88
92
  }
89
93
  return /*#__PURE__*/React.createElement(Tooltip, {
90
94
  title: _title
@@ -66,6 +66,7 @@
66
66
  padding: 4px 8px;
67
67
  font-size: var(--yee-textarea-font-size);
68
68
  line-height: var(--yee-textarea-line-height);
69
+ background-color: var(--yee-input-content-bg-color);
69
70
  border-radius: var(--yee-textarea-border-radius, 4px);
70
71
  font-family: var(--yee-font-family);
71
72
  width: 100%;
@@ -9,6 +9,7 @@
9
9
  width: var(--yee-verification-code-item-width);
10
10
  height: var(--yee-verification-code-item-height);
11
11
  text-align: center;
12
+ background-color: var(--yee-input-content-bg-color);
12
13
  border: var(--yee-verification-code-item-border-width) solid
13
14
  var(--yee-input-border-color);
14
15
  border-radius: var(--yee-verification-code-item-border-radius);
@@ -2,8 +2,9 @@ export type CountdownOptions = {
2
2
  duration: number;
3
3
  interval?: number;
4
4
  onComplete?: () => void;
5
+ resetKey?: string | number;
5
6
  };
6
- export default function useCountdown({ duration, interval, onComplete, }: CountdownOptions): {
7
+ export default function useCountdown({ duration, interval, onComplete, resetKey, }: CountdownOptions): {
7
8
  remaining: number;
8
9
  isPaused: boolean;
9
10
  onPause: () => void;
@@ -9,8 +9,10 @@ export default function useCountdown(_ref) {
9
9
  var duration = _ref.duration,
10
10
  _ref$interval = _ref.interval,
11
11
  interval = _ref$interval === void 0 ? 100 : _ref$interval,
12
- onComplete = _ref.onComplete;
13
- var _useState = useState(duration),
12
+ onComplete = _ref.onComplete,
13
+ resetKey = _ref.resetKey;
14
+ var initialRemaining = Math.max(0, duration);
15
+ var _useState = useState(initialRemaining),
14
16
  _useState2 = _slicedToArray(_useState, 2),
15
17
  remaining = _useState2[0],
16
18
  setRemaining = _useState2[1];
@@ -19,16 +21,32 @@ export default function useCountdown(_ref) {
19
21
  isPaused = _useState4[0],
20
22
  setIsPaused = _useState4[1];
21
23
  var timerRef = useRef(null);
22
- var remainingRef = useRef(duration);
24
+ var remainingRef = useRef(initialRemaining);
25
+ var isPausedRef = useRef(false);
23
26
  var onCompleteRef = useRef(onComplete);
27
+ var identityRef = useRef({
28
+ duration: duration,
29
+ resetKey: resetKey
30
+ });
31
+ var epochRef = useRef(0);
24
32
  onCompleteRef.current = onComplete;
33
+ if (identityRef.current.duration !== duration || identityRef.current.resetKey !== resetKey) {
34
+ identityRef.current = {
35
+ duration: duration,
36
+ resetKey: resetKey
37
+ };
38
+ epochRef.current += 1;
39
+ }
25
40
  var clear = useCallback(function () {
26
41
  if (timerRef.current !== null) {
27
42
  clearTimeout(timerRef.current);
28
43
  timerRef.current = null;
29
44
  }
30
45
  }, []);
31
- var tick = useCallback(function () {
46
+ var tick = useCallback(function (epoch) {
47
+ if (epoch !== epochRef.current) {
48
+ return;
49
+ }
32
50
  var next = Math.max(0, remainingRef.current - interval);
33
51
  remainingRef.current = next;
34
52
  setRemaining(next);
@@ -36,29 +54,41 @@ export default function useCountdown(_ref) {
36
54
  var _onCompleteRef$curren;
37
55
  (_onCompleteRef$curren = onCompleteRef.current) === null || _onCompleteRef$curren === void 0 || _onCompleteRef$curren.call(onCompleteRef);
38
56
  } else {
39
- timerRef.current = setTimeout(tick, interval);
57
+ timerRef.current = setTimeout(function () {
58
+ return tick(epoch);
59
+ }, interval);
40
60
  }
41
61
  }, [interval]);
42
62
  var start = useCallback(function () {
43
63
  clear();
44
- timerRef.current = setTimeout(tick, interval);
64
+ if (remainingRef.current > 0 && !isPausedRef.current) {
65
+ var epoch = epochRef.current;
66
+ timerRef.current = setTimeout(function () {
67
+ return tick(epoch);
68
+ }, interval);
69
+ }
45
70
  }, [clear, interval, tick]);
46
71
  useEffect(function () {
47
- remainingRef.current = duration;
48
- setRemaining(duration);
49
- setIsPaused(false);
50
- start();
72
+ clear();
73
+ var nextRemaining = Math.max(0, duration);
74
+ remainingRef.current = nextRemaining;
75
+ setRemaining(nextRemaining);
76
+ if (nextRemaining > 0 && !isPausedRef.current) {
77
+ start();
78
+ }
51
79
  return clear;
52
- // eslint-disable-next-line react-hooks/exhaustive-deps
53
- }, [duration]);
80
+ }, [clear, duration, resetKey, start]);
54
81
  var onPause = useCallback(function () {
82
+ isPausedRef.current = true;
55
83
  clear();
56
84
  setIsPaused(true);
57
85
  }, [clear]);
58
86
  var onResume = useCallback(function () {
59
- if (remainingRef.current <= 0) return;
87
+ isPausedRef.current = false;
60
88
  setIsPaused(false);
61
- start();
89
+ if (remainingRef.current > 0) {
90
+ start();
91
+ }
62
92
  }, [start]);
63
93
  return {
64
94
  remaining: remaining,
@@ -52,6 +52,9 @@ export interface LocaleTable {
52
52
  selectionAll?: string;
53
53
  selectionInvert?: string;
54
54
  selectionNone?: string;
55
+ sortAscending?: string;
56
+ sortDescending?: string;
57
+ sortCancel?: string;
55
58
  }
56
59
  export interface LocalePagination {
57
60
  total?: string;
@@ -53,7 +53,10 @@ var locale = {
53
53
  selectNone: 'Clear Selection',
54
54
  selectionAll: 'Select All on Page',
55
55
  selectionInvert: 'Invert Selection on Page',
56
- selectionNone: 'Clear Selection on Page'
56
+ selectionNone: 'Clear Selection on Page',
57
+ sortAscending: 'Click to sort ascending',
58
+ sortDescending: 'Click to sort descending',
59
+ sortCancel: 'Click to cancel sorting'
57
60
  },
58
61
  pagination: {
59
62
  total: 'Total {total} items',
@@ -53,7 +53,10 @@ var locale = {
53
53
  selectNone: '選択をクリア',
54
54
  selectionAll: 'ページ内すべて選択',
55
55
  selectionInvert: 'ページ内選択を反転',
56
- selectionNone: 'ページ内選択をクリア'
56
+ selectionNone: 'ページ内選択をクリア',
57
+ sortAscending: 'クリックで昇順に並べ替え',
58
+ sortDescending: 'クリックで降順に並べ替え',
59
+ sortCancel: 'クリックで並べ替えを解除'
57
60
  },
58
61
  pagination: {
59
62
  total: '合計 {total} 件',
@@ -53,7 +53,10 @@ var locale = {
53
53
  selectNone: '清空选择',
54
54
  selectionAll: '全选当页',
55
55
  selectionInvert: '反选当页',
56
- selectionNone: '清空当页选择'
56
+ selectionNone: '清空当页选择',
57
+ sortAscending: '点击升序排列',
58
+ sortDescending: '点击降序排列',
59
+ sortCancel: '点击取消排序'
57
60
  },
58
61
  pagination: {
59
62
  total: '共 {total} 条',
@@ -53,7 +53,10 @@ var locale = {
53
53
  selectNone: '清空選擇',
54
54
  selectionAll: '全選當頁',
55
55
  selectionInvert: '反選當頁',
56
- selectionNone: '清空當頁選擇'
56
+ selectionNone: '清空當頁選擇',
57
+ sortAscending: '點擊升序排列',
58
+ sortDescending: '點擊降序排列',
59
+ sortCancel: '點擊取消排序'
57
60
  },
58
61
  pagination: {
59
62
  total: '共 {total} 條',
@@ -7,7 +7,10 @@ var BaseDemo = function BaseDemo() {
7
7
  var showMessage = function showMessage(type) {
8
8
  switch (type) {
9
9
  case 'info':
10
- messageApi.open('This is an info message');
10
+ messageApi.open({
11
+ content: 'This is an info message',
12
+ duration: 0
13
+ });
11
14
  break;
12
15
  case 'success':
13
16
  message.success('This is a success message');
@@ -1,4 +1,4 @@
1
1
  import { message } from './wrapper';
2
- export type { MessageConfig } from './interface';
2
+ export type { MessageApi, MessageClose, MessageConfig } from './interface';
3
3
  export * from './message-provider';
4
4
  export default message;
@@ -1,9 +1,6 @@
1
1
  /// <reference types="react" />
2
2
  export type MessageConfig = {
3
- /**
4
- * test identifier
5
- */
6
- 'data-testid'?: string;
3
+ [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
7
4
  /**
8
5
  * Custom prefix class name
9
6
  */
@@ -21,8 +18,8 @@ export type MessageConfig = {
21
18
  */
22
19
  content: React.ReactNode;
23
20
  /**
24
- * Auto close time (ms), 0 means no auto close
25
- * @default 3000
21
+ * Auto close time (seconds), 0 means no auto close
22
+ * @default 3
26
23
  */
27
24
  duration?: number;
28
25
  /**
@@ -42,15 +39,27 @@ export type MessageConfig = {
42
39
  */
43
40
  onClose?: () => void;
44
41
  };
42
+ export type MessageClose = () => void;
43
+ export interface MessageApi {
44
+ open: (config: string | MessageConfig) => MessageClose;
45
+ info: (config: string | MessageConfig) => MessageClose;
46
+ success: (config: string | MessageConfig) => MessageClose;
47
+ warning: (config: string | MessageConfig) => MessageClose;
48
+ error: (config: string | MessageConfig) => MessageClose;
49
+ loading: (config: string | MessageConfig) => MessageClose;
50
+ destroy: (key: string | number) => void;
51
+ clear: () => void;
52
+ }
45
53
  export type WrapperedMessageConfig = MessageConfig & {
46
54
  status?: 'info' | 'success' | 'warning' | 'error' | 'loading';
47
55
  };
48
56
  export type MessageType = WrapperedMessageConfig & {
49
57
  key: string | number;
58
+ timerGeneration: number;
50
59
  };
51
60
  export interface MessageProps extends MessageType {
52
61
  /**
53
62
  * Destroy component callback
54
63
  */
55
- onDestroy?: (key: string | number) => void;
64
+ onDestroy?: (key: string | number, timerGeneration?: number) => void;
56
65
  }
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
+ import type { MessageApi } from './interface';
2
3
  export declare function MessageProvider({ children }: {
3
4
  children: React.ReactNode;
4
5
  }): React.JSX.Element;
5
- export declare function useGlobalMessage(): any;
6
+ export declare function useGlobalMessage(): MessageApi;
@@ -1,6 +1,6 @@
1
1
  import React, { createContext, useContext } from 'react';
2
2
  import useMessage from "./use-message";
3
- var MessageContext = /*#__PURE__*/createContext({});
3
+ var MessageContext = /*#__PURE__*/createContext(undefined);
4
4
  export function MessageProvider(_ref) {
5
5
  var children = _ref.children;
6
6
  var _useMessage = useMessage(),
@@ -1,4 +1,4 @@
1
- var _excluded = ["prefixCls", "id", "status", "content", "style", "className", "icon", "duration", "onClick", "onClose", "onDestroy", "data-testid"];
1
+ var _excluded = ["prefixCls", "id", "timerGeneration", "status", "content", "style", "className", "icon", "duration", "onClick", "onClose", "onDestroy", "data-testid"];
2
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
3
3
  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; }
4
4
  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; }
@@ -8,19 +8,27 @@ import React, { useEffect } from 'react';
8
8
  import Spin from "../Spin";
9
9
  var icons = {
10
10
  info: /*#__PURE__*/React.createElement(Info, {
11
- size: 16,
11
+ size: 22,
12
+ fill: "currentColor",
13
+ stroke: "#FFF",
12
14
  strokeWidth: 2
13
15
  }),
14
16
  success: /*#__PURE__*/React.createElement(CircleCheck, {
15
- size: 16,
17
+ size: 22,
18
+ fill: "currentColor",
19
+ stroke: "#FFF",
16
20
  strokeWidth: 2
17
21
  }),
18
22
  warning: /*#__PURE__*/React.createElement(CircleAlert, {
19
- size: 16,
23
+ size: 22,
24
+ fill: "currentColor",
25
+ stroke: "#FFF",
20
26
  strokeWidth: 2
21
27
  }),
22
28
  error: /*#__PURE__*/React.createElement(CircleX, {
23
- size: 16,
29
+ size: 22,
30
+ fill: "currentColor",
31
+ stroke: "#FFF",
24
32
  strokeWidth: 2
25
33
  }),
26
34
  loading: /*#__PURE__*/React.createElement(Spin, {
@@ -34,6 +42,7 @@ var Message = function Message(props) {
34
42
  var _props$prefixCls = props.prefixCls,
35
43
  prefixCls = _props$prefixCls === void 0 ? 'yee-message' : _props$prefixCls,
36
44
  key = props.id,
45
+ timerGeneration = props.timerGeneration,
37
46
  status = props.status,
38
47
  content = props.content,
39
48
  style = props.style,
@@ -49,28 +58,32 @@ var Message = function Message(props) {
49
58
  useEffect(function () {
50
59
  if (duration && duration > 0) {
51
60
  var timer = setTimeout(function () {
52
- onDestroy === null || onDestroy === void 0 || onDestroy(key);
53
- onClose === null || onClose === void 0 || onClose();
61
+ onDestroy === null || onDestroy === void 0 || onDestroy(key, timerGeneration);
54
62
  }, duration * 1000);
55
63
  return function () {
56
64
  clearTimeout(timer);
57
65
  };
58
66
  }
59
- }, [duration, key, onDestroy, onClose]);
67
+ }, [duration, key, onDestroy, onClose, timerGeneration]);
60
68
  var renderIcon = function renderIcon() {
61
69
  if (!icon && !status) {
62
70
  return null;
63
71
  }
64
72
  return /*#__PURE__*/React.createElement("span", {
73
+ "aria-hidden": "true",
65
74
  className: "".concat(prefixCls, "-icon")
66
75
  }, icon ? icon : status ? icons[status] : null);
67
76
  };
77
+ var isAssertive = status === 'error' || status === 'warning';
68
78
  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
79
+ "aria-atomic": "true",
80
+ "aria-live": isAssertive ? 'assertive' : 'polite',
81
+ role: isAssertive ? 'alert' : 'status',
69
82
  "data-testid": dataTestId,
70
83
  className: clsx(prefixCls, ["".concat(prefixCls, "-").concat(status)], className),
71
84
  style: style,
72
85
  onClick: onClick
73
- }), renderIcon(), /*#__PURE__*/React.createElement("p", {
86
+ }), renderIcon(), /*#__PURE__*/React.createElement("div", {
74
87
  className: "".concat(prefixCls, "-content")
75
88
  }, content));
76
89
  };
@@ -6,6 +6,7 @@
6
6
  align-items: center;
7
7
  width: fit-content;
8
8
  padding: var(--yee-message-padding);
9
+ pointer-events: auto;
9
10
  background-color: var(--yee-message-bg-color);
10
11
  border-radius: var(--yee-message-border-radius);
11
12
  box-shadow: var(--yee-message-box-shadow);
@@ -30,12 +31,13 @@
30
31
  align-items: center;
31
32
  justify-content: center;
32
33
  width: 100vw;
34
+ pointer-events: none;
33
35
  }
34
36
 
35
37
  // status
36
38
  &-success {
37
39
  @{pls}-icon {
38
- color: var(--yee-primary-color);
40
+ color: var(--yee-success-color);
39
41
  }
40
42
  }
41
43
 
@@ -1,16 +1,7 @@
1
1
  import React from 'react';
2
- import { MessageConfig } from './interface';
2
+ import { MessageApi } from './interface';
3
3
  declare const useMessage: () => {
4
- messageApi: {
5
- open: (props: string | MessageConfig) => () => void;
6
- info: (props: string | MessageConfig) => () => void;
7
- success: (props: string | MessageConfig) => () => void;
8
- error: (props: string | MessageConfig) => () => void;
9
- warning: (props: string | MessageConfig) => () => void;
10
- loading: (props: string | MessageConfig) => () => void;
11
- destroy: (key: string | number) => void;
12
- clear: () => void;
13
- };
14
- messageHolder: React.ReactPortal;
4
+ messageApi: MessageApi;
5
+ messageHolder: React.ReactPortal | null;
15
6
  };
16
7
  export default useMessage;