@rainbow-oh/yee-c 0.8.1 → 0.8.3
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.
- package/dist/cjs/Cascader/cascader.js +38 -30
- package/dist/cjs/Cascader/column.js +17 -9
- package/dist/cjs/Cascader/search-list.js +30 -22
- package/dist/cjs/Cascader/utils/index.js +1 -5
- package/dist/cjs/Checkbox/checkbox-group.js +23 -14
- package/dist/cjs/Dialog/dialog.js +1 -1
- package/dist/cjs/Dialog/interface.d.ts +1 -1
- package/dist/cjs/Dialog/style/index.less +2 -1
- package/dist/cjs/Drawer/drawer.js +9 -1
- package/dist/cjs/Form/Group.js +1 -1
- package/dist/cjs/Form/demo/tooltip.js +1 -3
- package/dist/cjs/Input/style/index.less +1 -0
- package/dist/cjs/List/hooks/useListKeyboard.js +3 -1
- package/dist/cjs/Menu/menu.js +18 -2
- package/dist/cjs/Pagination/items.js +54 -26
- package/dist/cjs/Pagination/pagination.js +25 -9
- package/dist/cjs/PickerPanel/panels/DateTimePanel/index.d.ts +1 -1
- package/dist/cjs/PickerPanel/panels/MonthPanel/MonthHeader.js +7 -1
- package/dist/cjs/Rate/star.js +27 -3
- package/dist/cjs/Segmented/demo/variant.js +15 -1
- package/dist/cjs/Segmented/index.d.ts +1 -1
- package/dist/cjs/Segmented/segmented.js +12 -15
- package/dist/cjs/Select/option.js +8 -1
- package/dist/cjs/Select/options.js +9 -1
- package/dist/cjs/Select/select.js +3 -1
- package/dist/cjs/Selector/style/index.less +1 -0
- package/dist/cjs/Steps/step.js +14 -2
- package/dist/cjs/Steps/steps.js +11 -1
- package/dist/cjs/Table/demo/components-override.js +31 -2
- package/dist/cjs/Table/demo/grouping.js +7 -1
- package/dist/cjs/Table/hooks/useColumns.d.ts +3 -3
- package/dist/cjs/Table/hooks/useColumns.js +11 -14
- package/dist/cjs/Table/icon/arrow-icon.js +1 -1
- package/dist/cjs/Table/index.d.ts +1 -1
- package/dist/cjs/Table/style/index.less +2 -4
- package/dist/cjs/Table/tbody/row.js +1 -4
- package/dist/cjs/Table/theader/cell.js +6 -3
- package/dist/cjs/Table/theader/index.js +12 -4
- package/dist/cjs/TextArea/style/index.less +1 -0
- package/dist/cjs/Tour/index.d.ts +1 -1
- package/dist/cjs/Tree/style/index.less +1 -5
- package/dist/cjs/Tree/tree.js +38 -35
- package/dist/cjs/VerificationCode/style/index.less +1 -0
- package/dist/cjs/hooks/useCountdown.d.ts +2 -1
- package/dist/cjs/hooks/useCountdown.js +46 -23
- package/dist/cjs/hooks/useEvent.js +1 -4
- package/dist/cjs/locale/interface.d.ts +3 -0
- package/dist/cjs/locale/lang/en_US.js +4 -1
- package/dist/cjs/locale/lang/ja_JP.js +4 -1
- package/dist/cjs/locale/lang/zh_CN.js +4 -1
- package/dist/cjs/locale/lang/zh_TW.js +4 -1
- package/dist/cjs/message/demo/base.js +1 -1
- package/dist/cjs/message/index.d.ts +1 -1
- package/dist/cjs/message/interface.d.ts +16 -7
- package/dist/cjs/message/message-provider.d.ts +2 -1
- package/dist/cjs/message/message-provider.js +1 -1
- package/dist/cjs/message/message.js +14 -9
- package/dist/cjs/message/style/index.less +3 -1
- package/dist/cjs/message/use-message.d.ts +3 -12
- package/dist/cjs/message/use-message.js +103 -45
- package/dist/cjs/message/wrapper.d.ts +21 -27
- package/dist/cjs/message/wrapper.js +49 -19
- package/dist/cjs/notice/index.d.ts +1 -1
- package/dist/cjs/notice/interface.d.ts +17 -7
- package/dist/cjs/notice/notice-list.d.ts +3 -3
- package/dist/cjs/notice/notice-provider.d.ts +2 -1
- package/dist/cjs/notice/notice-provider.js +1 -1
- package/dist/cjs/notice/notice.js +63 -20
- package/dist/cjs/notice/style/index.less +13 -1
- package/dist/cjs/notice/use-notice.d.ts +2 -11
- package/dist/cjs/notice/use-notice.js +156 -71
- package/dist/cjs/notice/wrapper.d.ts +19 -15
- package/dist/cjs/notice/wrapper.js +122 -52
- package/dist/cjs/style/size.css +5 -3
- package/dist/cjs/style/themes.css +1 -1
- package/dist/cjs/style/variables.css +6 -4
- package/dist/cjs/version.d.ts +1 -1
- package/dist/cjs/version.js +1 -1
- package/dist/esm/Dialog/dialog.js +2 -2
- package/dist/esm/Dialog/interface.d.ts +1 -1
- package/dist/esm/Dialog/style/index.less +2 -1
- package/dist/esm/Form/Group.js +1 -1
- package/dist/esm/Input/style/index.less +1 -0
- package/dist/esm/PickerPanel/panels/DateTimePanel/index.d.ts +1 -1
- package/dist/esm/Segmented/index.d.ts +1 -1
- package/dist/esm/Segmented/segmented.js +1 -1
- package/dist/esm/Selector/style/index.less +1 -0
- package/dist/esm/Table/demo/components-override.js +1 -0
- package/dist/esm/Table/hooks/useColumns.d.ts +3 -3
- package/dist/esm/Table/hooks/useColumns.js +13 -16
- package/dist/esm/Table/icon/arrow-icon.js +1 -1
- package/dist/esm/Table/index.d.ts +1 -1
- package/dist/esm/Table/style/index.less +2 -4
- package/dist/esm/Table/theader/cell.js +7 -3
- package/dist/esm/TextArea/style/index.less +1 -0
- package/dist/esm/Tour/index.d.ts +1 -1
- package/dist/esm/Tree/style/index.less +1 -5
- package/dist/esm/Tree/tree.js +1 -1
- package/dist/esm/VerificationCode/style/index.less +1 -0
- package/dist/esm/hooks/useCountdown.d.ts +2 -1
- package/dist/esm/hooks/useCountdown.js +44 -14
- package/dist/esm/locale/interface.d.ts +3 -0
- package/dist/esm/locale/lang/en_US.js +4 -1
- package/dist/esm/locale/lang/ja_JP.js +4 -1
- package/dist/esm/locale/lang/zh_CN.js +4 -1
- package/dist/esm/locale/lang/zh_TW.js +4 -1
- package/dist/esm/message/demo/base.js +4 -1
- package/dist/esm/message/index.d.ts +1 -1
- package/dist/esm/message/interface.d.ts +16 -7
- package/dist/esm/message/message-provider.d.ts +2 -1
- package/dist/esm/message/message-provider.js +1 -1
- package/dist/esm/message/message.js +22 -9
- package/dist/esm/message/style/index.less +3 -1
- package/dist/esm/message/use-message.d.ts +3 -12
- package/dist/esm/message/use-message.js +129 -79
- package/dist/esm/message/wrapper.d.ts +21 -27
- package/dist/esm/message/wrapper.js +60 -18
- package/dist/esm/notice/index.d.ts +1 -1
- package/dist/esm/notice/interface.d.ts +17 -7
- package/dist/esm/notice/notice-list.d.ts +3 -3
- package/dist/esm/notice/notice-provider.d.ts +2 -1
- package/dist/esm/notice/notice-provider.js +1 -1
- package/dist/esm/notice/notice.js +73 -21
- package/dist/esm/notice/style/index.less +13 -1
- package/dist/esm/notice/use-notice.d.ts +2 -11
- package/dist/esm/notice/use-notice.js +180 -100
- package/dist/esm/notice/wrapper.d.ts +19 -15
- package/dist/esm/notice/wrapper.js +144 -62
- package/dist/esm/style/size.css +5 -3
- package/dist/esm/style/themes.css +1 -1
- package/dist/esm/style/variables.css +6 -4
- package/dist/esm/version.d.ts +1 -1
- package/dist/esm/version.js +1 -1
- package/dist/umd/yee-c.min.css +2 -2
- package/dist/umd/yee-c.min.js +1 -1
- package/package.json +1 -1
- package/src/Anchor/anchor.tsx +2 -2
- package/src/Carousel/carousel.tsx +1 -2
- package/src/Cascader/cascader.tsx +5 -1
- package/src/Cascader/column.tsx +5 -1
- package/src/Cascader/search-list.tsx +10 -3
- package/src/Cascader/utils/index.ts +3 -6
- package/src/Checkbox/checkbox-group.tsx +6 -1
- package/src/Dialog/dialog.tsx +7 -3
- package/src/Dialog/interface.ts +1 -1
- package/src/Dialog/style/index.less +2 -1
- package/src/Drawer/drawer.tsx +7 -1
- package/src/Form/Group.tsx +2 -4
- package/src/Form/demo/tooltip.tsx +2 -11
- package/src/Form/utils/validate.ts +1 -4
- package/src/Input/style/index.less +1 -0
- package/src/List/hooks/useListKeyboard.ts +3 -3
- package/src/List/list.tsx +2 -1
- package/src/Menu/menu.tsx +14 -3
- package/src/Pagination/items.tsx +16 -4
- package/src/Pagination/pagination.tsx +18 -4
- package/src/PickerPanel/panels/DatePanel/DateBody.tsx +1 -1
- package/src/PickerPanel/panels/DateTimePanel/index.tsx +1 -1
- package/src/PickerPanel/panels/MonthPanel/MonthHeader.tsx +7 -2
- package/src/PickerPanel/panels/PanelBody.tsx +1 -1
- package/src/PickerPanel/panels/QuarterPanel/QuarterHeader.tsx +1 -1
- package/src/PickerPanel/panels/RangePanel/index.tsx +1 -1
- package/src/PickerPanel/panels/TimePanel/TimeBody.tsx +1 -1
- package/src/PickerPanel/panels/YearPanel/YearHeader.tsx +1 -1
- package/src/PickerPanel/utils/pickerUtils.ts +2 -1
- package/src/RangePicker/range-picker-mobile.tsx +1 -3
- package/src/Rate/star.tsx +16 -4
- package/src/Segmented/demo/variant.tsx +10 -2
- package/src/Segmented/index.ts +2 -2
- package/src/Segmented/segmented.tsx +4 -11
- package/src/Select/interface.ts +0 -1
- package/src/Select/option.tsx +8 -2
- package/src/Select/options.tsx +11 -4
- package/src/Select/select.tsx +4 -4
- package/src/Selector/style/index.less +1 -0
- package/src/Steps/step.tsx +11 -3
- package/src/Steps/steps.tsx +8 -1
- package/src/Table/demo/components-override.tsx +34 -7
- package/src/Table/demo/grouping.tsx +8 -4
- package/src/Table/hooks/useColumns.ts +14 -18
- package/src/Table/icon/arrow-icon.tsx +1 -1
- package/src/Table/index.ts +3 -3
- package/src/Table/style/index.less +2 -4
- package/src/Table/table.tsx +2 -4
- package/src/Table/tbody/row.tsx +1 -3
- package/src/Table/theader/cell.tsx +6 -3
- package/src/Table/theader/index.tsx +9 -10
- package/src/TextArea/style/index.less +1 -0
- package/src/Tour/demo/placement.tsx +2 -1
- package/src/Tour/index.ts +1 -1
- package/src/Tree/style/index.less +1 -5
- package/src/Tree/tree.tsx +16 -11
- package/src/Tree/utils/tree-tools.ts +4 -1
- package/src/VerificationCode/style/index.less +1 -0
- package/src/hooks/useCountdown.ts +52 -21
- package/src/hooks/useEvent.ts +1 -3
- package/src/locale/context.tsx +5 -1
- package/src/locale/interface.ts +6 -1
- package/src/locale/lang/en_US.ts +3 -0
- package/src/locale/lang/ja_JP.ts +3 -0
- package/src/locale/lang/zh_CN.ts +3 -0
- package/src/locale/lang/zh_TW.ts +3 -0
- package/src/message/demo/base.tsx +1 -1
- package/src/message/index.ts +1 -1
- package/src/message/interface.ts +22 -7
- package/src/message/message-provider.tsx +3 -2
- package/src/message/message.test.tsx +283 -0
- package/src/message/message.tsx +14 -9
- package/src/message/style/index.less +3 -1
- package/src/message/use-message.tsx +144 -67
- package/src/message/wrapper.tsx +62 -20
- package/src/notice/index.en-US.md +76 -75
- package/src/notice/index.ts +6 -1
- package/src/notice/index.zh-CN.md +3 -2
- package/src/notice/interface.ts +31 -14
- package/src/notice/notice-list.tsx +3 -9
- package/src/notice/notice-provider.tsx +3 -2
- package/src/notice/notice.test.tsx +450 -0
- package/src/notice/notice.tsx +69 -21
- package/src/notice/style/index.less +13 -1
- package/src/notice/use-notice.tsx +210 -94
- package/src/notice/wrapper.tsx +159 -71
- package/src/style/size.css +5 -3
- package/src/utils/debounce.ts +1 -3
- package/src/version.ts +1 -1
|
@@ -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;
|
|
@@ -26,51 +26,74 @@ var import_react = require("react");
|
|
|
26
26
|
function useCountdown({
|
|
27
27
|
duration,
|
|
28
28
|
interval = 100,
|
|
29
|
-
onComplete
|
|
29
|
+
onComplete,
|
|
30
|
+
resetKey
|
|
30
31
|
}) {
|
|
31
|
-
const
|
|
32
|
+
const initialRemaining = Math.max(0, duration);
|
|
33
|
+
const [remaining, setRemaining] = (0, import_react.useState)(initialRemaining);
|
|
32
34
|
const [isPaused, setIsPaused] = (0, import_react.useState)(false);
|
|
33
35
|
const timerRef = (0, import_react.useRef)(null);
|
|
34
|
-
const remainingRef = (0, import_react.useRef)(
|
|
36
|
+
const remainingRef = (0, import_react.useRef)(initialRemaining);
|
|
37
|
+
const isPausedRef = (0, import_react.useRef)(false);
|
|
35
38
|
const onCompleteRef = (0, import_react.useRef)(onComplete);
|
|
39
|
+
const identityRef = (0, import_react.useRef)({ duration, resetKey });
|
|
40
|
+
const epochRef = (0, import_react.useRef)(0);
|
|
36
41
|
onCompleteRef.current = onComplete;
|
|
42
|
+
if (identityRef.current.duration !== duration || identityRef.current.resetKey !== resetKey) {
|
|
43
|
+
identityRef.current = { duration, resetKey };
|
|
44
|
+
epochRef.current += 1;
|
|
45
|
+
}
|
|
37
46
|
const clear = (0, import_react.useCallback)(() => {
|
|
38
47
|
if (timerRef.current !== null) {
|
|
39
48
|
clearTimeout(timerRef.current);
|
|
40
49
|
timerRef.current = null;
|
|
41
50
|
}
|
|
42
51
|
}, []);
|
|
43
|
-
const tick = (0, import_react.useCallback)(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
const tick = (0, import_react.useCallback)(
|
|
53
|
+
(epoch) => {
|
|
54
|
+
var _a;
|
|
55
|
+
if (epoch !== epochRef.current) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
const next = Math.max(0, remainingRef.current - interval);
|
|
59
|
+
remainingRef.current = next;
|
|
60
|
+
setRemaining(next);
|
|
61
|
+
if (next <= 0) {
|
|
62
|
+
(_a = onCompleteRef.current) == null ? void 0 : _a.call(onCompleteRef);
|
|
63
|
+
} else {
|
|
64
|
+
timerRef.current = setTimeout(() => tick(epoch), interval);
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
[interval]
|
|
68
|
+
);
|
|
54
69
|
const start = (0, import_react.useCallback)(() => {
|
|
55
70
|
clear();
|
|
56
|
-
|
|
71
|
+
if (remainingRef.current > 0 && !isPausedRef.current) {
|
|
72
|
+
const epoch = epochRef.current;
|
|
73
|
+
timerRef.current = setTimeout(() => tick(epoch), interval);
|
|
74
|
+
}
|
|
57
75
|
}, [clear, interval, tick]);
|
|
58
76
|
(0, import_react.useEffect)(() => {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
77
|
+
clear();
|
|
78
|
+
const nextRemaining = Math.max(0, duration);
|
|
79
|
+
remainingRef.current = nextRemaining;
|
|
80
|
+
setRemaining(nextRemaining);
|
|
81
|
+
if (nextRemaining > 0 && !isPausedRef.current) {
|
|
82
|
+
start();
|
|
83
|
+
}
|
|
63
84
|
return clear;
|
|
64
|
-
}, [duration]);
|
|
85
|
+
}, [clear, duration, resetKey, start]);
|
|
65
86
|
const onPause = (0, import_react.useCallback)(() => {
|
|
87
|
+
isPausedRef.current = true;
|
|
66
88
|
clear();
|
|
67
89
|
setIsPaused(true);
|
|
68
90
|
}, [clear]);
|
|
69
91
|
const onResume = (0, import_react.useCallback)(() => {
|
|
70
|
-
|
|
71
|
-
return;
|
|
92
|
+
isPausedRef.current = false;
|
|
72
93
|
setIsPaused(false);
|
|
73
|
-
|
|
94
|
+
if (remainingRef.current > 0) {
|
|
95
|
+
start();
|
|
96
|
+
}
|
|
74
97
|
}, [start]);
|
|
75
98
|
return { remaining, isPaused, onPause, onResume };
|
|
76
99
|
}
|
|
@@ -39,10 +39,7 @@ function useEvent(callback) {
|
|
|
39
39
|
const memoFn = import_react.default.useCallback(
|
|
40
40
|
(...args) => {
|
|
41
41
|
var _a;
|
|
42
|
-
return (_a = ref.current) == null ? void 0 : _a.call(
|
|
43
|
-
ref,
|
|
44
|
-
...args
|
|
45
|
-
);
|
|
42
|
+
return (_a = ref.current) == null ? void 0 : _a.call(ref, ...args);
|
|
46
43
|
},
|
|
47
44
|
[]
|
|
48
45
|
);
|
|
@@ -112,7 +112,10 @@ var locale = {
|
|
|
112
112
|
selectNone: "Clear Selection",
|
|
113
113
|
selectionAll: "Select All on Page",
|
|
114
114
|
selectionInvert: "Invert Selection on Page",
|
|
115
|
-
selectionNone: "Clear Selection on Page"
|
|
115
|
+
selectionNone: "Clear Selection on Page",
|
|
116
|
+
sortAscending: "Click to sort ascending",
|
|
117
|
+
sortDescending: "Click to sort descending",
|
|
118
|
+
sortCancel: "Click to cancel sorting"
|
|
116
119
|
},
|
|
117
120
|
pagination: {
|
|
118
121
|
total: "Total {total} items",
|
|
@@ -112,7 +112,10 @@ var locale = {
|
|
|
112
112
|
selectNone: "選択をクリア",
|
|
113
113
|
selectionAll: "ページ内すべて選択",
|
|
114
114
|
selectionInvert: "ページ内選択を反転",
|
|
115
|
-
selectionNone: "ページ内選択をクリア"
|
|
115
|
+
selectionNone: "ページ内選択をクリア",
|
|
116
|
+
sortAscending: "クリックで昇順に並べ替え",
|
|
117
|
+
sortDescending: "クリックで降順に並べ替え",
|
|
118
|
+
sortCancel: "クリックで並べ替えを解除"
|
|
116
119
|
},
|
|
117
120
|
pagination: {
|
|
118
121
|
total: "合計 {total} 件",
|
|
@@ -103,7 +103,10 @@ var locale = {
|
|
|
103
103
|
selectNone: "清空选择",
|
|
104
104
|
selectionAll: "全选当页",
|
|
105
105
|
selectionInvert: "反选当页",
|
|
106
|
-
selectionNone: "清空当页选择"
|
|
106
|
+
selectionNone: "清空当页选择",
|
|
107
|
+
sortAscending: "点击升序排列",
|
|
108
|
+
sortDescending: "点击降序排列",
|
|
109
|
+
sortCancel: "点击取消排序"
|
|
107
110
|
},
|
|
108
111
|
pagination: {
|
|
109
112
|
total: "共 {total} 条",
|
|
@@ -103,7 +103,10 @@ var locale = {
|
|
|
103
103
|
selectNone: "清空選擇",
|
|
104
104
|
selectionAll: "全選當頁",
|
|
105
105
|
selectionInvert: "反選當頁",
|
|
106
|
-
selectionNone: "清空當頁選擇"
|
|
106
|
+
selectionNone: "清空當頁選擇",
|
|
107
|
+
sortAscending: "點擊升序排列",
|
|
108
|
+
sortDescending: "點擊降序排列",
|
|
109
|
+
sortCancel: "點擊取消排序"
|
|
107
110
|
},
|
|
108
111
|
pagination: {
|
|
109
112
|
total: "共 {total} 條",
|
|
@@ -39,7 +39,7 @@ var BaseDemo = () => {
|
|
|
39
39
|
const showMessage = (type) => {
|
|
40
40
|
switch (type) {
|
|
41
41
|
case "info":
|
|
42
|
-
messageApi.open("This is an info message");
|
|
42
|
+
messageApi.open({ content: "This is an info message", duration: 0 });
|
|
43
43
|
break;
|
|
44
44
|
case "success":
|
|
45
45
|
import_yee_c.message.success("This is a success 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 (
|
|
25
|
-
* @default
|
|
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():
|
|
6
|
+
export declare function useGlobalMessage(): MessageApi;
|
|
@@ -35,7 +35,7 @@ __export(message_provider_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(message_provider_exports);
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_use_message = __toESM(require("./use-message"));
|
|
38
|
-
var MessageContext = (0, import_react.createContext)(
|
|
38
|
+
var MessageContext = (0, import_react.createContext)(void 0);
|
|
39
39
|
function MessageProvider({ children }) {
|
|
40
40
|
const { messageApi, messageHolder } = (0, import_use_message.default)();
|
|
41
41
|
return /* @__PURE__ */ import_react.default.createElement(MessageContext.Provider, { value: messageApi }, messageHolder, children);
|
|
@@ -66,16 +66,17 @@ var import_lucide_react = require("lucide-react");
|
|
|
66
66
|
var import_react = __toESM(require("react"));
|
|
67
67
|
var import_Spin = __toESM(require("../Spin"));
|
|
68
68
|
var icons = {
|
|
69
|
-
info: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size:
|
|
70
|
-
success: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheck, { size:
|
|
71
|
-
warning: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, { size:
|
|
72
|
-
error: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, { size:
|
|
69
|
+
info: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 }),
|
|
70
|
+
success: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleCheck, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 }),
|
|
71
|
+
warning: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleAlert, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 }),
|
|
72
|
+
error: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CircleX, { size: 22, fill: "currentColor", stroke: "#FFF", strokeWidth: 2 }),
|
|
73
73
|
loading: /* @__PURE__ */ import_react.default.createElement(import_Spin.default, { className: "loading", type: "spin", size: "small", height: "auto" })
|
|
74
74
|
};
|
|
75
75
|
var Message = (props) => {
|
|
76
76
|
const _a = props, {
|
|
77
77
|
prefixCls = "yee-message",
|
|
78
78
|
id: key,
|
|
79
|
+
timerGeneration,
|
|
79
80
|
status,
|
|
80
81
|
content,
|
|
81
82
|
style,
|
|
@@ -89,6 +90,7 @@ var Message = (props) => {
|
|
|
89
90
|
} = _a, rest = __objRest(_a, [
|
|
90
91
|
"prefixCls",
|
|
91
92
|
"id",
|
|
93
|
+
"timerGeneration",
|
|
92
94
|
"status",
|
|
93
95
|
"content",
|
|
94
96
|
"style",
|
|
@@ -103,30 +105,33 @@ var Message = (props) => {
|
|
|
103
105
|
(0, import_react.useEffect)(() => {
|
|
104
106
|
if (duration && duration > 0) {
|
|
105
107
|
const timer = setTimeout(() => {
|
|
106
|
-
onDestroy == null ? void 0 : onDestroy(key);
|
|
107
|
-
onClose == null ? void 0 : onClose();
|
|
108
|
+
onDestroy == null ? void 0 : onDestroy(key, timerGeneration);
|
|
108
109
|
}, duration * 1e3);
|
|
109
110
|
return () => {
|
|
110
111
|
clearTimeout(timer);
|
|
111
112
|
};
|
|
112
113
|
}
|
|
113
|
-
}, [duration, key, onDestroy, onClose]);
|
|
114
|
+
}, [duration, key, onDestroy, onClose, timerGeneration]);
|
|
114
115
|
const renderIcon = () => {
|
|
115
116
|
if (!icon && !status) {
|
|
116
117
|
return null;
|
|
117
118
|
}
|
|
118
|
-
return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-icon` }, icon ? icon : status ? icons[status] : null);
|
|
119
|
+
return /* @__PURE__ */ import_react.default.createElement("span", { "aria-hidden": "true", className: `${prefixCls}-icon` }, icon ? icon : status ? icons[status] : null);
|
|
119
120
|
};
|
|
121
|
+
const isAssertive = status === "error" || status === "warning";
|
|
120
122
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
121
123
|
"div",
|
|
122
124
|
__spreadProps(__spreadValues({}, rest), {
|
|
125
|
+
"aria-atomic": "true",
|
|
126
|
+
"aria-live": isAssertive ? "assertive" : "polite",
|
|
127
|
+
role: isAssertive ? "alert" : "status",
|
|
123
128
|
"data-testid": dataTestId,
|
|
124
129
|
className: (0, import_clsx.default)(prefixCls, [`${prefixCls}-${status}`], className),
|
|
125
130
|
style,
|
|
126
131
|
onClick
|
|
127
132
|
}),
|
|
128
133
|
renderIcon(),
|
|
129
|
-
/* @__PURE__ */ import_react.default.createElement("
|
|
134
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-content` }, content)
|
|
130
135
|
);
|
|
131
136
|
};
|
|
132
137
|
var message_default = Message;
|
|
@@ -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-
|
|
40
|
+
color: var(--yee-success-color);
|
|
39
41
|
}
|
|
40
42
|
}
|
|
41
43
|
|
|
@@ -1,16 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { MessageApi } from './interface';
|
|
3
3
|
declare const useMessage: () => {
|
|
4
|
-
messageApi:
|
|
5
|
-
|
|
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;
|
|
@@ -54,61 +54,119 @@ var import_react_dom = require("react-dom");
|
|
|
54
54
|
var import_message = __toESM(require("./message"));
|
|
55
55
|
var useMessage = () => {
|
|
56
56
|
const [messages, setMessages] = (0, import_react.useState)([]);
|
|
57
|
+
const [portalContainer, setPortalContainer] = (0, import_react.useState)(
|
|
58
|
+
null
|
|
59
|
+
);
|
|
60
|
+
const messagesRef = (0, import_react.useRef)([]);
|
|
61
|
+
const generationByKey = (0, import_react.useRef)(/* @__PURE__ */ new Map());
|
|
62
|
+
const generation = (0, import_react.useRef)(0);
|
|
63
|
+
const timerGeneration = (0, import_react.useRef)(0);
|
|
57
64
|
const count = (0, import_react.useRef)(0);
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
...prevMessage.filter((msg) => msg.key !== key)
|
|
61
|
-
]);
|
|
62
|
-
};
|
|
63
|
-
const add = (0, import_react.useCallback)((props) => {
|
|
64
|
-
const id = count.current++;
|
|
65
|
-
setMessages((prevMessages) => [...prevMessages, __spreadValues({ key: id }, props)]);
|
|
66
|
-
return () => onDestroy(id);
|
|
65
|
+
(0, import_react.useEffect)(() => {
|
|
66
|
+
setPortalContainer(document.body);
|
|
67
67
|
}, []);
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
);
|
|
68
|
+
const updateMessages = (0, import_react.useCallback)(
|
|
69
|
+
(updater) => {
|
|
70
|
+
const nextMessages = updater(messagesRef.current);
|
|
71
|
+
messagesRef.current = nextMessages;
|
|
72
|
+
setMessages(nextMessages);
|
|
73
73
|
},
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
[]
|
|
75
|
+
);
|
|
76
|
+
const onDestroy = (0, import_react.useCallback)(
|
|
77
|
+
(key, expectedTimerGeneration) => {
|
|
78
|
+
var _a;
|
|
79
|
+
const target = messagesRef.current.find((message) => message.key === key);
|
|
80
|
+
if (expectedTimerGeneration !== void 0 && (target == null ? void 0 : target.timerGeneration) !== expectedTimerGeneration) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
if (!target) {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
86
|
+
generationByKey.current.delete(key);
|
|
87
|
+
updateMessages(
|
|
88
|
+
(current) => current.filter((message) => message.key !== key)
|
|
77
89
|
);
|
|
90
|
+
(_a = target.onClose) == null ? void 0 : _a.call(target);
|
|
78
91
|
},
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
92
|
+
[updateMessages]
|
|
93
|
+
);
|
|
94
|
+
const add = (0, import_react.useCallback)(
|
|
95
|
+
(props) => {
|
|
96
|
+
var _a, _b;
|
|
97
|
+
const key = (_a = props.key) != null ? _a : count.current++;
|
|
98
|
+
if (typeof key === "number" && key >= count.current) {
|
|
99
|
+
count.current = key + 1;
|
|
100
|
+
}
|
|
101
|
+
const keyGeneration = (_b = generationByKey.current.get(key)) != null ? _b : generation.current++;
|
|
102
|
+
generationByKey.current.set(key, keyGeneration);
|
|
103
|
+
const nextMessage = __spreadProps(__spreadValues({}, props), {
|
|
104
|
+
key,
|
|
105
|
+
timerGeneration: timerGeneration.current++
|
|
106
|
+
});
|
|
107
|
+
updateMessages((current) => {
|
|
108
|
+
const exists = current.some((item) => item.key === key);
|
|
109
|
+
if (exists) {
|
|
110
|
+
return current.map(
|
|
111
|
+
(item) => item.key === key ? nextMessage : item
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
return [...current, nextMessage];
|
|
115
|
+
});
|
|
116
|
+
return () => {
|
|
117
|
+
if (generationByKey.current.get(key) === keyGeneration) {
|
|
118
|
+
onDestroy(key);
|
|
119
|
+
}
|
|
120
|
+
};
|
|
83
121
|
},
|
|
84
|
-
|
|
85
|
-
|
|
122
|
+
[onDestroy, updateMessages]
|
|
123
|
+
);
|
|
124
|
+
const clear = (0, import_react.useCallback)(() => {
|
|
125
|
+
const currentMessages = messagesRef.current;
|
|
126
|
+
generationByKey.current.clear();
|
|
127
|
+
messagesRef.current = [];
|
|
128
|
+
setMessages([]);
|
|
129
|
+
currentMessages.forEach((message) => {
|
|
130
|
+
var _a;
|
|
131
|
+
return (_a = message.onClose) == null ? void 0 : _a.call(message);
|
|
132
|
+
});
|
|
133
|
+
}, []);
|
|
134
|
+
const messageApi = (0, import_react.useMemo)(
|
|
135
|
+
() => ({
|
|
136
|
+
open: (props) => add(
|
|
137
|
+
typeof props === "string" ? { content: props, status: "info" } : __spreadValues({ status: "info" }, props)
|
|
138
|
+
),
|
|
139
|
+
info: (props) => add(
|
|
140
|
+
typeof props === "string" ? { content: props, status: "info" } : __spreadValues({ status: "info" }, props)
|
|
141
|
+
),
|
|
142
|
+
success: (props) => add(
|
|
143
|
+
typeof props === "string" ? { content: props, status: "success" } : __spreadProps(__spreadValues({}, props), { status: "success" })
|
|
144
|
+
),
|
|
145
|
+
error: (props) => add(
|
|
86
146
|
typeof props === "string" ? { content: props, status: "error" } : __spreadProps(__spreadValues({}, props), { status: "error" })
|
|
87
|
-
)
|
|
88
|
-
|
|
89
|
-
warning: (props) => {
|
|
90
|
-
return add(
|
|
147
|
+
),
|
|
148
|
+
warning: (props) => add(
|
|
91
149
|
typeof props === "string" ? { content: props, status: "warning" } : __spreadProps(__spreadValues({}, props), { status: "warning" })
|
|
92
|
-
)
|
|
93
|
-
|
|
94
|
-
loading: (props) => {
|
|
95
|
-
return add(
|
|
150
|
+
),
|
|
151
|
+
loading: (props) => add(
|
|
96
152
|
typeof props === "string" ? { content: props, status: "loading" } : __spreadProps(__spreadValues({}, props), { status: "loading" })
|
|
97
|
-
)
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
);
|
|
103
|
-
},
|
|
104
|
-
clear: () => {
|
|
105
|
-
setMessages([]);
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
const messageHolder = (0, import_react_dom.createPortal)(
|
|
109
|
-
/* @__PURE__ */ import_react.default.createElement("div", { className: "yee-message-list" }, messages.map((msg) => /* @__PURE__ */ import_react.default.createElement(import_message.default, __spreadProps(__spreadValues({}, msg), { onDestroy, id: msg.key, key: msg.key })))),
|
|
110
|
-
document.body
|
|
153
|
+
),
|
|
154
|
+
destroy: onDestroy,
|
|
155
|
+
clear
|
|
156
|
+
}),
|
|
157
|
+
[add, clear, onDestroy]
|
|
111
158
|
);
|
|
159
|
+
const messageHolder = portalContainer ? (0, import_react_dom.createPortal)(
|
|
160
|
+
/* @__PURE__ */ import_react.default.createElement("div", { className: "yee-message-list" }, messages.map((msg) => /* @__PURE__ */ import_react.default.createElement(
|
|
161
|
+
import_message.default,
|
|
162
|
+
__spreadProps(__spreadValues({}, msg), {
|
|
163
|
+
onDestroy,
|
|
164
|
+
id: msg.key,
|
|
165
|
+
key: msg.key
|
|
166
|
+
})
|
|
167
|
+
))),
|
|
168
|
+
portalContainer
|
|
169
|
+
) : null;
|
|
112
170
|
return { messageApi, messageHolder };
|
|
113
171
|
};
|
|
114
172
|
var use_message_default = useMessage;
|
|
@@ -1,46 +1,40 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Root } from 'react-dom/client';
|
|
3
|
-
import { MessageConfig, MessageType, WrapperedMessageConfig } from './interface';
|
|
3
|
+
import { MessageClose, MessageConfig, MessageType, WrapperedMessageConfig } from './interface';
|
|
4
4
|
declare class MessageWrapper {
|
|
5
5
|
root: Root | null;
|
|
6
6
|
messages: MessageType[];
|
|
7
7
|
container: HTMLElement | null;
|
|
8
|
+
generationByKey: Map<string | number, number>;
|
|
9
|
+
generation: number;
|
|
10
|
+
timerGeneration: number;
|
|
8
11
|
constructor();
|
|
9
12
|
private createContainer;
|
|
10
13
|
private cleanupContainer;
|
|
11
14
|
uuid(): string;
|
|
12
15
|
unmount(): void;
|
|
13
16
|
render(): void;
|
|
14
|
-
show(params: WrapperedMessageConfig):
|
|
15
|
-
destroy(key: string | number): void;
|
|
16
|
-
open(params: string | MessageConfig):
|
|
17
|
-
info(params: string | MessageConfig):
|
|
18
|
-
success(params: string | MessageConfig):
|
|
19
|
-
warning(params: string | MessageConfig):
|
|
20
|
-
error(params: string | MessageConfig):
|
|
21
|
-
loading(params: string | MessageConfig):
|
|
17
|
+
show(params: WrapperedMessageConfig): MessageClose;
|
|
18
|
+
destroy(key: string | number, expectedTimerGeneration?: number): void;
|
|
19
|
+
open(params: string | MessageConfig): MessageClose;
|
|
20
|
+
info(params: string | MessageConfig): MessageClose;
|
|
21
|
+
success(params: string | MessageConfig): MessageClose;
|
|
22
|
+
warning(params: string | MessageConfig): MessageClose;
|
|
23
|
+
error(params: string | MessageConfig): MessageClose;
|
|
24
|
+
loading(params: string | MessageConfig): MessageClose;
|
|
22
25
|
}
|
|
23
26
|
declare const messageWrapper: MessageWrapper;
|
|
24
27
|
export default messageWrapper;
|
|
25
28
|
export declare const message: {
|
|
26
|
-
open: (params: string | MessageConfig) =>
|
|
27
|
-
info: (params: string | MessageConfig) =>
|
|
28
|
-
success: (params: string | MessageConfig) =>
|
|
29
|
-
warning: (params: string | MessageConfig) =>
|
|
30
|
-
error: (params: string | MessageConfig) =>
|
|
31
|
-
loading: (params: string | MessageConfig) =>
|
|
32
|
-
destroy: (key: string | number) => void;
|
|
29
|
+
open: (params: string | MessageConfig) => MessageClose;
|
|
30
|
+
info: (params: string | MessageConfig) => MessageClose;
|
|
31
|
+
success: (params: string | MessageConfig) => MessageClose;
|
|
32
|
+
warning: (params: string | MessageConfig) => MessageClose;
|
|
33
|
+
error: (params: string | MessageConfig) => MessageClose;
|
|
34
|
+
loading: (params: string | MessageConfig) => MessageClose;
|
|
35
|
+
destroy: (key: string | number, expectedTimerGeneration?: number) => void;
|
|
33
36
|
useMessage: () => {
|
|
34
|
-
messageApi:
|
|
35
|
-
|
|
36
|
-
info: (props: string | MessageConfig) => () => void;
|
|
37
|
-
success: (props: string | MessageConfig) => () => void;
|
|
38
|
-
error: (props: string | MessageConfig) => () => void;
|
|
39
|
-
warning: (props: string | MessageConfig) => () => void;
|
|
40
|
-
loading: (props: string | MessageConfig) => () => void;
|
|
41
|
-
destroy: (key: string | number) => void;
|
|
42
|
-
clear: () => void;
|
|
43
|
-
};
|
|
44
|
-
messageHolder: React.ReactPortal;
|
|
37
|
+
messageApi: import("./interface").MessageApi;
|
|
38
|
+
messageHolder: React.ReactPortal | null;
|
|
45
39
|
};
|
|
46
40
|
};
|