@zohodesk/dot 1.4.8 → 1.4.9

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 (47) hide show
  1. package/README.md +15 -0
  2. package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +0 -1
  3. package/assets/Appearance/light/mode/Dot_LightMode.module.css +0 -1
  4. package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +0 -1
  5. package/coverage/ExternalLink/ExternalLink.js.html +1 -1
  6. package/coverage/ExternalLink/ExternalLink.module.css.html +1 -1
  7. package/coverage/ExternalLink/index.html +1 -1
  8. package/coverage/ExternalLink/props/defaultProps.js.html +1 -1
  9. package/coverage/ExternalLink/props/index.html +1 -1
  10. package/coverage/ExternalLink/props/propTypes.js.html +1 -1
  11. package/coverage/IconButton/IconButton.js.html +1 -1
  12. package/coverage/IconButton/IconButton.module.css.html +1 -1
  13. package/coverage/IconButton/index.html +1 -1
  14. package/coverage/IconButton/props/defaultProps.js.html +1 -1
  15. package/coverage/IconButton/props/index.html +1 -1
  16. package/coverage/IconButton/props/propTypes.js.html +1 -1
  17. package/coverage/Image/Image.js.html +1 -1
  18. package/coverage/Image/Image.module.css.html +1 -1
  19. package/coverage/Image/index.html +1 -1
  20. package/coverage/Image/props/defaultProps.js.html +1 -1
  21. package/coverage/Image/props/index.html +1 -1
  22. package/coverage/Image/props/propTypes.js.html +1 -1
  23. package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.js.html +1 -1
  24. package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.module.css.html +1 -1
  25. package/coverage/avatar/AvatarWithTeam/index.html +1 -1
  26. package/coverage/avatar/AvatarWithTeam/props/defaultProps.js.html +1 -1
  27. package/coverage/avatar/AvatarWithTeam/props/index.html +1 -1
  28. package/coverage/avatar/AvatarWithTeam/props/propTypes.js.html +1 -1
  29. package/coverage/index.html +1 -1
  30. package/es/common/dot_boxShadow.module.css +3 -1
  31. package/es/v1/GlobalNotification/GlobalNotification.js +51 -19
  32. package/es/v1/GlobalNotification/props/defaultProps.js +3 -1
  33. package/es/v1/GlobalNotification/props/propTypes.js +12 -2
  34. package/es/version2/GlobalNotification/GlobalNotification.js +52 -26
  35. package/es/version2/GlobalNotification/GlobalNotification.module.css +57 -6
  36. package/es/version2/GlobalNotification/props/defaultProps.js +3 -1
  37. package/es/version2/GlobalNotification/props/propTypes.js +12 -4
  38. package/lib/common/dot_boxShadow.module.css +3 -1
  39. package/lib/v1/GlobalNotification/GlobalNotification.js +66 -17
  40. package/lib/v1/GlobalNotification/props/defaultProps.js +3 -1
  41. package/lib/v1/GlobalNotification/props/propTypes.js +17 -4
  42. package/lib/version2/GlobalNotification/GlobalNotification.js +52 -29
  43. package/lib/version2/GlobalNotification/GlobalNotification.module.css +57 -6
  44. package/lib/version2/GlobalNotification/props/defaultProps.js +3 -1
  45. package/lib/version2/GlobalNotification/props/propTypes.js +12 -4
  46. package/package.json +3 -3
  47. package/result.json +1 -1
package/README.md CHANGED
@@ -2,6 +2,21 @@
2
2
 
3
3
  In this Library, we Provide Some Basic Components to Build Your Application
4
4
 
5
+ # 1.4.9
6
+
7
+ - **GlobalNotification**
8
+ - needAutoClose prop added and removed type based autoclose code.
9
+ - hideTime, needShadow, shadowCount, eleRef, id prop added
10
+ - eleRef prop added
11
+ - showMessage prop removed
12
+ - changed in v1 also
13
+ - globalnotification_default_box_shadow css variable removed
14
+
15
+ - **GlobalNotification.module.css**
16
+
17
+ - width 100% to 420px changed
18
+ - shadow class added
19
+
5
20
  # 1.4.8
6
21
 
7
22
  - **StatusListItem** - customClass and children prop support given
package/assets/Appearance/dark/mode/Dot_DarkMode.module.css CHANGED
@@ -474,7 +474,6 @@
474
474
  --zdt_globalnotification_error_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
475
475
  --zdt_globalnotification_warning_bg: hsla(229, 10.09%, calc(21.37% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
476
476
  --zdt_globalnotification_warning_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
477
- --zdt_globalnotification_default_box_shadow: rgba(0, 0, 0, 0.3);
478
477
 
479
478
  /* alert lookup */
480
479
  --zdt_alertlookup_bg: hsla(217, 23.23%, calc(19.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
package/assets/Appearance/light/mode/Dot_LightMode.module.css CHANGED
@@ -474,7 +474,6 @@
474
474
  --zdt_globalnotification_error_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
475
475
  --zdt_globalnotification_warning_bg: hsla(24, 100.00%, calc(97.06% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
476
476
  --zdt_globalnotification_warning_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
477
- --zdt_globalnotification_default_box_shadow: rgba(55, 84, 170, 0.25);
478
477
 
479
478
  /* alert lookup */
480
479
  --zdt_alertlookup_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css CHANGED
@@ -474,7 +474,6 @@
474
474
  --zdt_globalnotification_error_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
475
475
  --zdt_globalnotification_warning_bg: hsla(229, 10.09%, calc(21.37% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
476
476
  --zdt_globalnotification_warning_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
477
- --zdt_globalnotification_default_box_shadow: rgba(0, 0, 0, 0.3);
478
477
 
479
478
  /* alert lookup */
480
479
  --zdt_alertlookup_bg: hsla(0, 0.00%, calc(16.86% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
package/coverage/ExternalLink/ExternalLink.js.html CHANGED
@@ -214,7 +214,7 @@ ExternalLink.propTypes = propTypes;
214
214
  <div class='footer quiet pad2 space-top1 center small'>
215
215
  Code coverage generated by
216
216
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
217
- at 2024-02-09T13:11:08.502Z
217
+ at 2024-02-13T15:14:32.720Z
218
218
  </div>
219
219
  <script src="../prettify.js"></script>
220
220
  <script>
package/coverage/ExternalLink/ExternalLink.module.css.html CHANGED
@@ -79,7 +79,7 @@
79
79
  <div class='footer quiet pad2 space-top1 center small'>
80
80
  Code coverage generated by
81
81
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
82
- at 2024-02-09T13:11:08.502Z
82
+ at 2024-02-13T15:14:32.720Z
83
83
  </div>
84
84
  <script src="../prettify.js"></script>
85
85
  <script>
package/coverage/ExternalLink/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-02-09T13:11:08.502Z
119
+ at 2024-02-13T15:14:32.720Z
120
120
  </div>
121
121
  <script src="../prettify.js"></script>
122
122
  <script>
package/coverage/ExternalLink/props/defaultProps.js.html CHANGED
@@ -85,7 +85,7 @@
85
85
  <div class='footer quiet pad2 space-top1 center small'>
86
86
  Code coverage generated by
87
87
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
88
- at 2024-02-09T13:11:08.502Z
88
+ at 2024-02-13T15:14:32.720Z
89
89
  </div>
90
90
  <script src="../../prettify.js"></script>
91
91
  <script>
package/coverage/ExternalLink/props/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-02-09T13:11:08.502Z
119
+ at 2024-02-13T15:14:32.720Z
120
120
  </div>
121
121
  <script src="../../prettify.js"></script>
122
122
  <script>
package/coverage/ExternalLink/props/propTypes.js.html CHANGED
@@ -109,7 +109,7 @@ export const propTypes = {
109
109
  <div class='footer quiet pad2 space-top1 center small'>
110
110
  Code coverage generated by
111
111
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
112
- at 2024-02-09T13:11:08.502Z
112
+ at 2024-02-13T15:14:32.720Z
113
113
  </div>
114
114
  <script src="../../prettify.js"></script>
115
115
  <script>
package/coverage/IconButton/IconButton.js.html CHANGED
@@ -451,7 +451,7 @@ IconButton.defaultProps = defaultProps;
451
451
  <div class='footer quiet pad2 space-top1 center small'>
452
452
  Code coverage generated by
453
453
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
454
- at 2024-02-09T13:11:08.502Z
454
+ at 2024-02-13T15:14:32.720Z
455
455
  </div>
456
456
  <script src="../prettify.js"></script>
457
457
  <script>
package/coverage/IconButton/IconButton.module.css.html CHANGED
@@ -139,7 +139,7 @@
139
139
  <div class='footer quiet pad2 space-top1 center small'>
140
140
  Code coverage generated by
141
141
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
142
- at 2024-02-09T13:11:08.502Z
142
+ at 2024-02-13T15:14:32.720Z
143
143
  </div>
144
144
  <script src="../prettify.js"></script>
145
145
  <script>
package/coverage/IconButton/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-02-09T13:11:08.502Z
119
+ at 2024-02-13T15:14:32.720Z
120
120
  </div>
121
121
  <script src="../prettify.js"></script>
122
122
  <script>
package/coverage/IconButton/props/defaultProps.js.html CHANGED
@@ -121,7 +121,7 @@
121
121
  <div class='footer quiet pad2 space-top1 center small'>
122
122
  Code coverage generated by
123
123
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
124
- at 2024-02-09T13:11:08.502Z
124
+ at 2024-02-13T15:14:32.720Z
125
125
  </div>
126
126
  <script src="../../prettify.js"></script>
127
127
  <script>
package/coverage/IconButton/props/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-02-09T13:11:08.502Z
119
+ at 2024-02-13T15:14:32.720Z
120
120
  </div>
121
121
  <script src="../../prettify.js"></script>
122
122
  <script>
package/coverage/IconButton/props/propTypes.js.html CHANGED
@@ -172,7 +172,7 @@ export const propTypes = {
172
172
  <div class='footer quiet pad2 space-top1 center small'>
173
173
  Code coverage generated by
174
174
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
175
- at 2024-02-09T13:11:08.502Z
175
+ at 2024-02-13T15:14:32.720Z
176
176
  </div>
177
177
  <script src="../../prettify.js"></script>
178
178
  <script>
package/coverage/Image/Image.js.html CHANGED
@@ -169,7 +169,7 @@ Image.defaultProps = defaultProps;
169
169
  <div class='footer quiet pad2 space-top1 center small'>
170
170
  Code coverage generated by
171
171
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
172
- at 2024-02-09T13:11:08.502Z
172
+ at 2024-02-13T15:14:32.720Z
173
173
  </div>
174
174
  <script src="../prettify.js"></script>
175
175
  <script>
package/coverage/Image/Image.module.css.html CHANGED
@@ -103,7 +103,7 @@
103
103
  <div class='footer quiet pad2 space-top1 center small'>
104
104
  Code coverage generated by
105
105
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
106
- at 2024-02-09T13:11:08.502Z
106
+ at 2024-02-13T15:14:32.720Z
107
107
  </div>
108
108
  <script src="../prettify.js"></script>
109
109
  <script>
package/coverage/Image/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-02-09T13:11:08.502Z
119
+ at 2024-02-13T15:14:32.720Z
120
120
  </div>
121
121
  <script src="../prettify.js"></script>
122
122
  <script>
package/coverage/Image/props/defaultProps.js.html CHANGED
@@ -82,7 +82,7 @@
82
82
  <div class='footer quiet pad2 space-top1 center small'>
83
83
  Code coverage generated by
84
84
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
85
- at 2024-02-09T13:11:08.502Z
85
+ at 2024-02-13T15:14:32.720Z
86
86
  </div>
87
87
  <script src="../../prettify.js"></script>
88
88
  <script>
package/coverage/Image/props/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-02-09T13:11:08.502Z
119
+ at 2024-02-13T15:14:32.720Z
120
120
  </div>
121
121
  <script src="../../prettify.js"></script>
122
122
  <script>
package/coverage/Image/props/propTypes.js.html CHANGED
@@ -112,7 +112,7 @@ export const propTypes = {
112
112
  <div class='footer quiet pad2 space-top1 center small'>
113
113
  Code coverage generated by
114
114
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
115
- at 2024-02-09T13:11:08.502Z
115
+ at 2024-02-13T15:14:32.720Z
116
116
  </div>
117
117
  <script src="../../prettify.js"></script>
118
118
  <script>
package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.js.html CHANGED
@@ -433,7 +433,7 @@ AvatarWithTeam.propTypes = propTypes;
433
433
  <div class='footer quiet pad2 space-top1 center small'>
434
434
  Code coverage generated by
435
435
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
436
- at 2024-02-09T13:11:08.502Z
436
+ at 2024-02-13T15:14:32.720Z
437
437
  </div>
438
438
  <script src="../../prettify.js"></script>
439
439
  <script>
package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.module.css.html CHANGED
@@ -118,7 +118,7 @@
118
118
  <div class='footer quiet pad2 space-top1 center small'>
119
119
  Code coverage generated by
120
120
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
121
- at 2024-02-09T13:11:08.502Z
121
+ at 2024-02-13T15:14:32.720Z
122
122
  </div>
123
123
  <script src="../../prettify.js"></script>
124
124
  <script>
package/coverage/avatar/AvatarWithTeam/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-02-09T13:11:08.502Z
119
+ at 2024-02-13T15:14:32.720Z
120
120
  </div>
121
121
  <script src="../../prettify.js"></script>
122
122
  <script>
package/coverage/avatar/AvatarWithTeam/props/defaultProps.js.html CHANGED
@@ -97,7 +97,7 @@
97
97
  <div class='footer quiet pad2 space-top1 center small'>
98
98
  Code coverage generated by
99
99
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
100
- at 2024-02-09T13:11:08.502Z
100
+ at 2024-02-13T15:14:32.720Z
101
101
  </div>
102
102
  <script src="../../../prettify.js"></script>
103
103
  <script>
package/coverage/avatar/AvatarWithTeam/props/index.html CHANGED
@@ -116,7 +116,7 @@
116
116
  <div class='footer quiet pad2 space-top1 center small'>
117
117
  Code coverage generated by
118
118
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
119
- at 2024-02-09T13:11:08.502Z
119
+ at 2024-02-13T15:14:32.720Z
120
120
  </div>
121
121
  <script src="../../../prettify.js"></script>
122
122
  <script>
package/coverage/avatar/AvatarWithTeam/props/propTypes.js.html CHANGED
@@ -148,7 +148,7 @@ export const propTypes = {
148
148
  <div class='footer quiet pad2 space-top1 center small'>
149
149
  Code coverage generated by
150
150
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
151
- at 2024-02-09T13:11:08.502Z
151
+ at 2024-02-13T15:14:32.720Z
152
152
  </div>
153
153
  <script src="../../../prettify.js"></script>
154
154
  <script>
package/coverage/index.html CHANGED
@@ -206,7 +206,7 @@
206
206
  <div class='footer quiet pad2 space-top1 center small'>
207
207
  Code coverage generated by
208
208
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
209
- at 2024-02-09T13:11:08.502Z
209
+ at 2024-02-13T15:14:32.720Z
210
210
  </div>
211
211
  <script src="prettify.js"></script>
212
212
  <script>
package/es/common/dot_boxShadow.module.css CHANGED
@@ -31,8 +31,10 @@
31
31
  --zd_bs_toastmessage_container: var(--zd_bs_contrast_outline, 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow));
32
32
 
33
33
  /* global notification */
34
- --zd_bs_globalnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--globalnotification_box_shadow));
34
+ --zd_bs_globalnotification_container: var(--zd_bs_contrast_outline, 0px 4px 4px 0px var(--zdt_message_default_box_shadow));
35
35
 
36
36
  /* desktop notification */
37
37
  --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
38
+
39
+
38
40
  }
package/es/v1/GlobalNotification/GlobalNotification.js CHANGED
@@ -7,28 +7,50 @@ import AutoClose from '../../actions/AutoClose';
7
7
  import AlertIcons from '../alert/alertIcons/AlertIcons';
8
8
  import AlertClose from '../alert/AlertClose/AlertClose';
9
9
  import { Container, Box } from '@zohodesk/components/es/v1/Layout';
10
+ import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
10
11
  import style from '../../version2/GlobalNotification/GlobalNotification.module.css';
11
12
  export default function GlobalNotification(props) {
12
13
  let {
13
14
  type,
14
15
  message,
15
16
  hideMessage,
17
+ hideTime,
16
18
  onClick,
19
+ onClose,
20
+ needAutoClose,
17
21
  i18nKeys = {},
18
22
  customProps,
19
23
  dataSelectorId,
20
- showMessage
24
+ id,
25
+ needShadow,
26
+ shadowCount,
27
+ eleRef
21
28
  } = props;
29
+ const hideMessageTimer = useRef(null);
30
+ const [shadowClose, setShadowClose] = useState(true);
22
31
  useEffect(() => {
23
- if (!['danger', 'error', 'warning'].includes(type)) {
24
- setTimeout(() => {
25
- hideMessage();
26
- }, 3000);
32
+ if (needAutoClose) {
33
+ hideMessageTimer.current = setTimeout(() => {
34
+ hideMessage(id);
35
+ }, hideTime);
27
36
  }
28
- }, [showMessage, type]);
37
+
38
+ return () => {
39
+ if (hideMessageTimer.current) {
40
+ clearTimeout(hideMessageTimer.current);
41
+ }
42
+ };
43
+ }, []);
29
44
  let {
30
45
  closeTitle = 'Close'
31
46
  } = i18nKeys;
47
+
48
+ function onCloseLocal(e) {
49
+ setShadowClose(false);
50
+ hideMessage && hideMessage(id);
51
+ onClose && onClose(e);
52
+ }
53
+
32
54
  return /*#__PURE__*/React.createElement(GlobalNotificationUI, {
33
55
  type: type,
34
56
  message: message,
@@ -36,7 +58,12 @@ export default function GlobalNotification(props) {
36
58
  onClick: onClick,
37
59
  closeTitle: closeTitle,
38
60
  customProps: customProps,
39
- dataSelectorId: dataSelectorId
61
+ dataSelectorId: dataSelectorId,
62
+ id: id,
63
+ shadowCount: shadowCount,
64
+ onClose: onCloseLocal,
65
+ needShadow: shadowClose && needShadow,
66
+ eleRef: eleRef
40
67
  });
41
68
  }
42
69
  GlobalNotification.propTypes = propTypes;
@@ -48,28 +75,33 @@ GlobalNotification.defaultProps = defaultProps; // if (__DOCS__) {
48
75
  // }
49
76
 
50
77
  export function GlobalNotificationUI(props) {
51
- function onClose(e) {
52
- let {
53
- hideMessage,
54
- onClose
55
- } = props;
56
- hideMessage && hideMessage(e);
57
- onClose && onClose(e);
58
- }
59
-
60
78
  let {
61
79
  type = '',
62
80
  message,
63
81
  onClick,
64
82
  closeTitle = '',
65
83
  customProps = {},
66
- dataSelectorId
84
+ dataSelectorId,
85
+ shadowCount,
86
+ needShadow,
87
+ eleRef,
88
+ onClose
67
89
  } = props;
68
90
  let {
69
91
  ExtraProps = {}
70
92
  } = customProps;
93
+
94
+ function onCloseLocal(e) {
95
+ cancelBubblingEffect(e);
96
+ onClose && onClose(e);
97
+ }
98
+
71
99
  return /*#__PURE__*/React.createElement("div", _extends({
72
- className: `${style.message} ${type ? style[type] : ''}`,
100
+ ref: eleRef,
101
+ className: ` ${style.message}
102
+ ${needShadow && shadowCount >= 2 ? shadowCount > 2 ? `${style.stackShadowTwo} ${style.stackShadowOne}` : style.stackShadowOne : ''}
103
+ ${type ? style[type] : ''}
104
+ `,
73
105
  "data-id": `show_${type}_message`,
74
106
  "data-test-id": `show_${type}_message`,
75
107
  tabIndex: 0,
@@ -100,7 +132,7 @@ export function GlobalNotificationUI(props) {
100
132
  }, /*#__PURE__*/React.createElement(AlertClose, {
101
133
  dataId: `close_${type}_message`,
102
134
  dataTitle: closeTitle,
103
- onClose: onClose,
135
+ onClose: onCloseLocal,
104
136
  type: type
105
137
  }))));
106
138
  }
package/es/v1/GlobalNotification/props/defaultProps.js CHANGED
@@ -1,4 +1,6 @@
1
1
  export const defaultProps = {
2
2
  customProps: {},
3
- dataSelectorId: 'globalNotification'
3
+ dataSelectorId: 'globalNotification',
4
+ needAutoClose: true,
5
+ hideTime: 3000
4
6
  };
package/es/v1/GlobalNotification/props/propTypes.js CHANGED
@@ -9,7 +9,13 @@ export const propTypes = {
9
9
  i18nKeys: PropTypes.object,
10
10
  customProps: PropTypes.shape({
11
11
  ExtraProps: PropTypes.object
12
- })
12
+ }),
13
+ id: PropTypes.number,
14
+ hideTime: PropTypes.number,
15
+ needAutoClose: PropTypes.bool,
16
+ isCollapseView: PropTypes.bool,
17
+ shadowCount: PropTypes.number,
18
+ needShadow: PropTypes.bool
13
19
  };
14
20
  export const UI_propTypes = {
15
21
  dataSelectorId: PropTypes.string,
@@ -21,7 +27,11 @@ export const UI_propTypes = {
21
27
  type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
22
28
  customProps: PropTypes.shape({
23
29
  ExtraProps: PropTypes.object
24
- })
30
+ }),
31
+ needShadow: PropTypes.bool,
32
+ shadowCount: PropTypes.number,
33
+ id: PropTypes.number,
34
+ onClose: PropTypes.func
25
35
  };
26
36
  export const new_propTypes = {
27
37
  Element: PropTypes.element,
package/es/version2/GlobalNotification/GlobalNotification.js CHANGED
@@ -8,43 +8,51 @@ import AlertIcons from '../alertIcons/AlertIcons';
8
8
  import AlertClose from '../AlertClose/AlertClose';
9
9
  import style from './GlobalNotification.module.css';
10
10
  import { Container, Box } from '@zohodesk/components/lib/Layout';
11
+ import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
11
12
  export default class GlobalNotification extends React.Component {
12
13
  constructor(props) {
13
14
  super(props);
15
+ this.hideMessageTimer = null;
14
16
  this.state = {
15
- hideMessage: false
17
+ shadowClose: true
16
18
  };
19
+ this.onClose = this.onClose.bind(this);
17
20
  }
18
21
 
19
- UNSAFE_componentWillReceiveProps(nextProps) {
22
+ componentDidMount() {
20
23
  let {
21
- showMessage,
22
24
  hideMessage,
23
- type
25
+ hideTime,
26
+ id,
27
+ needAutoClose
24
28
  } = this.props;
25
29
 
26
- if (showMessage !== nextProps.showMessage || type !== nextProps.type) {
27
- if (!['danger', 'error', 'warning'].includes(nextProps.type)) {
28
- setTimeout(() => {
29
- hideMessage();
30
- }, 3000);
31
- }
30
+ if (needAutoClose) {
31
+ this.hideMessageTimer = setTimeout(() => {
32
+ hideMessage(id);
33
+ }, hideTime);
32
34
  }
33
35
  }
34
36
 
35
- componentDidMount() {
36
- let {
37
- type,
38
- hideMessage
39
- } = this.props;
40
-
41
- if (!['danger', 'error', 'warning'].includes(type)) {
42
- setTimeout(() => {
43
- hideMessage();
44
- }, 3000);
37
+ componentWillUnmount() {
38
+ if (this.hideMessageTimer) {
39
+ clearTimeout(this.hideMessageTimer);
45
40
  }
46
41
  }
47
42
 
43
+ onClose(e) {
44
+ const {
45
+ onClose,
46
+ hideMessage,
47
+ id
48
+ } = this.props;
49
+ this.setState({
50
+ shadowClose: false
51
+ });
52
+ hideMessage && hideMessage(id);
53
+ onClose && onClose(e);
54
+ }
55
+
48
56
  render() {
49
57
  let {
50
58
  type,
@@ -53,8 +61,15 @@ export default class GlobalNotification extends React.Component {
53
61
  onClick,
54
62
  i18nKeys = {},
55
63
  customProps,
56
- dataSelectorId
64
+ dataSelectorId,
65
+ id,
66
+ needShadow,
67
+ shadowCount,
68
+ eleRef
57
69
  } = this.props;
70
+ let {
71
+ shadowClose
72
+ } = this.state;
58
73
  let {
59
74
  closeTitle = 'Close'
60
75
  } = i18nKeys;
@@ -65,7 +80,12 @@ export default class GlobalNotification extends React.Component {
65
80
  onClick: onClick,
66
81
  closeTitle: closeTitle,
67
82
  customProps: customProps,
68
- dataSelectorId: dataSelectorId
83
+ dataSelectorId: dataSelectorId,
84
+ id: id,
85
+ shadowCount: shadowCount,
86
+ onClose: this.onClose,
87
+ needShadow: shadowClose && needShadow,
88
+ eleRef: eleRef
69
89
  });
70
90
  }
71
91
 
@@ -81,10 +101,9 @@ GlobalNotification.defaultProps = defaultProps; // if (__DOCS__) {
81
101
  export function GlobalNotificationUI(props) {
82
102
  function onClose(e) {
83
103
  let {
84
- hideMessage,
85
104
  onClose
86
105
  } = props;
87
- hideMessage && hideMessage(e);
106
+ cancelBubblingEffect(e);
88
107
  onClose && onClose(e);
89
108
  }
90
109
 
@@ -94,13 +113,20 @@ export function GlobalNotificationUI(props) {
94
113
  onClick,
95
114
  closeTitle = '',
96
115
  customProps = {},
97
- dataSelectorId
116
+ dataSelectorId,
117
+ shadowCount,
118
+ needShadow,
119
+ eleRef
98
120
  } = props;
99
121
  let {
100
122
  ExtraProps = {}
101
123
  } = customProps;
102
124
  return /*#__PURE__*/React.createElement("div", _extends({
103
- className: `${style.message} ${type ? style[type] : ''}`,
125
+ ref: eleRef,
126
+ className: ` ${style.message}
127
+ ${needShadow && shadowCount >= 2 ? shadowCount > 2 ? `${style.stackShadowTwo} ${style.stackShadowOne}` : style.stackShadowOne : ''}
128
+ ${type ? style[type] : ''}
129
+ `,
104
130
  "data-id": `show_${type}_message`,
105
131
  "data-test-id": `show_${type}_message`,
106
132
  tabIndex: 0,