@zohodesk/dot 1.0.0-temp-171 → 1.0.0-temp-172
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/.cli/propValidation_report.html +1 -1
- package/coverage/ExternalLink/ExternalLink.js.html +1 -1
- package/coverage/ExternalLink/ExternalLink.module.css.html +1 -1
- package/coverage/ExternalLink/index.html +1 -1
- package/coverage/ExternalLink/props/defaultProps.js.html +1 -1
- package/coverage/ExternalLink/props/index.html +1 -1
- package/coverage/ExternalLink/props/propTypes.js.html +1 -1
- package/coverage/IconButton/IconButton.js.html +1 -1
- package/coverage/IconButton/IconButton.module.css.html +1 -1
- package/coverage/IconButton/index.html +1 -1
- package/coverage/IconButton/props/defaultProps.js.html +1 -1
- package/coverage/IconButton/props/index.html +1 -1
- package/coverage/IconButton/props/propTypes.js.html +1 -1
- package/coverage/Image/Image.js.html +1 -1
- package/coverage/Image/Image.module.css.html +1 -1
- package/coverage/Image/index.html +1 -1
- package/coverage/Image/props/defaultProps.js.html +1 -1
- package/coverage/Image/props/index.html +1 -1
- package/coverage/Image/props/propTypes.js.html +1 -1
- package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.js.html +1 -1
- package/coverage/avatar/AvatarWithTeam/AvatarWithTeam.module.css.html +1 -1
- package/coverage/avatar/AvatarWithTeam/index.html +1 -1
- package/coverage/avatar/AvatarWithTeam/props/defaultProps.js.html +1 -1
- package/coverage/avatar/AvatarWithTeam/props/index.html +1 -1
- package/coverage/avatar/AvatarWithTeam/props/propTypes.js.html +1 -1
- package/coverage/index.html +1 -1
- package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +29 -8
- package/es/form/fields/TagsMultiSelect/props/propTypes.js +5 -1
- package/es/version2/GlobalNotification/GlobalNotification.js +26 -33
- package/es/version2/GlobalNotification/GlobalNotification.module.css +11 -71
- package/es/version2/GlobalNotification/props/propTypes.js +4 -9
- package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +28 -8
- package/lib/form/fields/TagsMultiSelect/props/propTypes.js +5 -1
- package/lib/version2/GlobalNotification/GlobalNotification.js +36 -64
- package/lib/version2/GlobalNotification/GlobalNotification.module.css +11 -71
- package/lib/version2/GlobalNotification/props/propTypes.js +4 -9
- package/package.json +1 -1
- package/result.json +1 -1
|
@@ -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 2023-12-
|
|
217
|
+
at 2023-12-27T06:18:05.230Z
|
|
218
218
|
</div>
|
|
219
219
|
<script src="../prettify.js"></script>
|
|
220
220
|
<script>
|
|
@@ -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 2023-12-
|
|
82
|
+
at 2023-12-27T06:18:05.230Z
|
|
83
83
|
</div>
|
|
84
84
|
<script src="../prettify.js"></script>
|
|
85
85
|
<script>
|
|
@@ -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 2023-12-
|
|
119
|
+
at 2023-12-27T06:18:05.230Z
|
|
120
120
|
</div>
|
|
121
121
|
<script src="../prettify.js"></script>
|
|
122
122
|
<script>
|
|
@@ -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 2023-12-
|
|
88
|
+
at 2023-12-27T06:18:05.230Z
|
|
89
89
|
</div>
|
|
90
90
|
<script src="../../prettify.js"></script>
|
|
91
91
|
<script>
|
|
@@ -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 2023-12-
|
|
119
|
+
at 2023-12-27T06:18:05.230Z
|
|
120
120
|
</div>
|
|
121
121
|
<script src="../../prettify.js"></script>
|
|
122
122
|
<script>
|
|
@@ -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 2023-12-
|
|
112
|
+
at 2023-12-27T06:18:05.230Z
|
|
113
113
|
</div>
|
|
114
114
|
<script src="../../prettify.js"></script>
|
|
115
115
|
<script>
|
|
@@ -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 2023-12-
|
|
454
|
+
at 2023-12-27T06:18:05.230Z
|
|
455
455
|
</div>
|
|
456
456
|
<script src="../prettify.js"></script>
|
|
457
457
|
<script>
|
|
@@ -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 2023-12-
|
|
142
|
+
at 2023-12-27T06:18:05.230Z
|
|
143
143
|
</div>
|
|
144
144
|
<script src="../prettify.js"></script>
|
|
145
145
|
<script>
|
|
@@ -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 2023-12-
|
|
119
|
+
at 2023-12-27T06:18:05.230Z
|
|
120
120
|
</div>
|
|
121
121
|
<script src="../prettify.js"></script>
|
|
122
122
|
<script>
|
|
@@ -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 2023-12-
|
|
124
|
+
at 2023-12-27T06:18:05.230Z
|
|
125
125
|
</div>
|
|
126
126
|
<script src="../../prettify.js"></script>
|
|
127
127
|
<script>
|
|
@@ -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 2023-12-
|
|
119
|
+
at 2023-12-27T06:18:05.230Z
|
|
120
120
|
</div>
|
|
121
121
|
<script src="../../prettify.js"></script>
|
|
122
122
|
<script>
|
|
@@ -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 2023-12-
|
|
175
|
+
at 2023-12-27T06:18:05.230Z
|
|
176
176
|
</div>
|
|
177
177
|
<script src="../../prettify.js"></script>
|
|
178
178
|
<script>
|
|
@@ -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 2023-12-
|
|
172
|
+
at 2023-12-27T06:18:05.230Z
|
|
173
173
|
</div>
|
|
174
174
|
<script src="../prettify.js"></script>
|
|
175
175
|
<script>
|
|
@@ -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 2023-12-
|
|
106
|
+
at 2023-12-27T06:18:05.230Z
|
|
107
107
|
</div>
|
|
108
108
|
<script src="../prettify.js"></script>
|
|
109
109
|
<script>
|
|
@@ -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 2023-12-
|
|
119
|
+
at 2023-12-27T06:18:05.230Z
|
|
120
120
|
</div>
|
|
121
121
|
<script src="../prettify.js"></script>
|
|
122
122
|
<script>
|
|
@@ -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 2023-12-
|
|
85
|
+
at 2023-12-27T06:18:05.230Z
|
|
86
86
|
</div>
|
|
87
87
|
<script src="../../prettify.js"></script>
|
|
88
88
|
<script>
|
|
@@ -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 2023-12-
|
|
119
|
+
at 2023-12-27T06:18:05.230Z
|
|
120
120
|
</div>
|
|
121
121
|
<script src="../../prettify.js"></script>
|
|
122
122
|
<script>
|
|
@@ -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 2023-12-
|
|
115
|
+
at 2023-12-27T06:18:05.230Z
|
|
116
116
|
</div>
|
|
117
117
|
<script src="../../prettify.js"></script>
|
|
118
118
|
<script>
|
|
@@ -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 2023-12-
|
|
436
|
+
at 2023-12-27T06:18:05.230Z
|
|
437
437
|
</div>
|
|
438
438
|
<script src="../../prettify.js"></script>
|
|
439
439
|
<script>
|
|
@@ -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 2023-12-
|
|
121
|
+
at 2023-12-27T06:18:05.230Z
|
|
122
122
|
</div>
|
|
123
123
|
<script src="../../prettify.js"></script>
|
|
124
124
|
<script>
|
|
@@ -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 2023-12-
|
|
119
|
+
at 2023-12-27T06:18:05.230Z
|
|
120
120
|
</div>
|
|
121
121
|
<script src="../../prettify.js"></script>
|
|
122
122
|
<script>
|
|
@@ -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 2023-12-
|
|
100
|
+
at 2023-12-27T06:18:05.230Z
|
|
101
101
|
</div>
|
|
102
102
|
<script src="../../../prettify.js"></script>
|
|
103
103
|
<script>
|
|
@@ -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 2023-12-
|
|
119
|
+
at 2023-12-27T06:18:05.230Z
|
|
120
120
|
</div>
|
|
121
121
|
<script src="../../../prettify.js"></script>
|
|
122
122
|
<script>
|
|
@@ -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 2023-12-
|
|
151
|
+
at 2023-12-27T06:18:05.230Z
|
|
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 2023-12-
|
|
209
|
+
at 2023-12-27T06:18:05.230Z
|
|
210
210
|
</div>
|
|
211
211
|
<script src="prettify.js"></script>
|
|
212
212
|
<script>
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
|
|
1
3
|
import React from 'react';
|
|
2
4
|
import { defaultProps } from './props/defaultProps';
|
|
3
5
|
import { propTypes } from './props/propTypes';
|
|
@@ -13,6 +15,7 @@ import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/Respon
|
|
|
13
15
|
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
|
|
14
16
|
import { stopBubbling } from '../../../utils/General';
|
|
15
17
|
import { scrollTo, findScrollEnd } from '@zohodesk/components/lib/utils/Common.js';
|
|
18
|
+
import MultiSelectHeader from '@zohodesk/components/lib/MultiSelect/MultiSelectHeader';
|
|
16
19
|
import style from './TagsMultiSelect.module.css';
|
|
17
20
|
export default class TagsMultiSelect extends React.Component {
|
|
18
21
|
constructor(props) {
|
|
@@ -140,12 +143,20 @@ export default class TagsMultiSelect extends React.Component {
|
|
|
140
143
|
boxSize,
|
|
141
144
|
onSelectTag,
|
|
142
145
|
clickableTag,
|
|
143
|
-
dataSelectorId
|
|
146
|
+
dataSelectorId,
|
|
147
|
+
handleSelectAll,
|
|
148
|
+
selectAllText,
|
|
149
|
+
needSelectAll,
|
|
150
|
+
customClass
|
|
144
151
|
} = this.props;
|
|
145
152
|
let {
|
|
146
153
|
showAll
|
|
147
154
|
} = this.state;
|
|
148
155
|
let chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
|
|
156
|
+
const {
|
|
157
|
+
tagCustomClass,
|
|
158
|
+
listItemClass
|
|
159
|
+
} = customClass;
|
|
149
160
|
return /*#__PURE__*/React.createElement("div", {
|
|
150
161
|
className: ` ${!isReadOnly ? ` ${needBorder ? style.hasBorder : ''}
|
|
151
162
|
${needBorder ? style[`borderColor_${borderColor}`] : style.borderColor_transparent} ${isPopupReady && needBorder ? style.active : ''}` : ''} ${className}`,
|
|
@@ -165,19 +176,21 @@ export default class TagsMultiSelect extends React.Component {
|
|
|
165
176
|
let {
|
|
166
177
|
name,
|
|
167
178
|
tagType,
|
|
168
|
-
id
|
|
179
|
+
id,
|
|
180
|
+
boxCustomProps
|
|
169
181
|
} = tag;
|
|
170
|
-
return index < chipLimit ? /*#__PURE__*/React.createElement(Box, {
|
|
182
|
+
return index < chipLimit ? /*#__PURE__*/React.createElement(Box, _extends({
|
|
171
183
|
className: style.tag,
|
|
172
184
|
key: index
|
|
173
|
-
}, /*#__PURE__*/React.createElement(Tag, {
|
|
185
|
+
}, boxCustomProps), /*#__PURE__*/React.createElement(Tag, {
|
|
174
186
|
id: id,
|
|
175
187
|
text: name,
|
|
176
188
|
onRemove: isReadOnly ? null : deleteTag.bind(this, name),
|
|
177
189
|
closeTitle: i18nKeys.deleteText,
|
|
178
190
|
palette: clickableTag ? 'defaultLink' : tagType === 'SYSTEM' ? 'primary' : 'default',
|
|
179
191
|
isReadOnly: isReadOnly,
|
|
180
|
-
onSelectTag: onSelectTag ? onSelectTag : undefined
|
|
192
|
+
onSelectTag: onSelectTag ? onSelectTag : undefined,
|
|
193
|
+
customClass: tagCustomClass
|
|
181
194
|
})) : null;
|
|
182
195
|
}), tagsList.length > chipNeedToShow && !isPopupReady ? /*#__PURE__*/React.createElement(Box, {
|
|
183
196
|
className: style.moreLess,
|
|
@@ -231,7 +244,12 @@ export default class TagsMultiSelect extends React.Component {
|
|
|
231
244
|
alignBox: "row"
|
|
232
245
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
233
246
|
flexible: true
|
|
234
|
-
},
|
|
247
|
+
}, needSelectAll ? /*#__PURE__*/React.createElement(MultiSelectHeader, {
|
|
248
|
+
onSelect: handleSelectAll,
|
|
249
|
+
selectAllText: selectAllText,
|
|
250
|
+
suggestions: searchList,
|
|
251
|
+
dataId: `${dataId}_selectAll`
|
|
252
|
+
}) : null, isTagListLoading ? /*#__PURE__*/React.createElement(Container, {
|
|
235
253
|
align: "both",
|
|
236
254
|
className: `${tabletMode ? '' : style.viewpopNew}`
|
|
237
255
|
}, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
|
|
@@ -245,7 +263,8 @@ export default class TagsMultiSelect extends React.Component {
|
|
|
245
263
|
}, searchList.map((item, index) => {
|
|
246
264
|
let {
|
|
247
265
|
name,
|
|
248
|
-
isNew
|
|
266
|
+
isNew,
|
|
267
|
+
listItemProps
|
|
249
268
|
} = item;
|
|
250
269
|
return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
|
|
251
270
|
key: index,
|
|
@@ -257,7 +276,9 @@ export default class TagsMultiSelect extends React.Component {
|
|
|
257
276
|
needTick: true,
|
|
258
277
|
highlight: selectSearchIndex === index,
|
|
259
278
|
getRef: this.getSelectedItemRef,
|
|
260
|
-
isDisabled: listDisabled
|
|
279
|
+
isDisabled: listDisabled,
|
|
280
|
+
customProps: listItemProps,
|
|
281
|
+
customClass: listItemClass
|
|
261
282
|
}, isNew ? /*#__PURE__*/React.createElement(Container, {
|
|
262
283
|
alignBox: "row",
|
|
263
284
|
align: "vertical"
|
|
@@ -40,5 +40,9 @@ export const propTypes = {
|
|
|
40
40
|
boxSize: PropTypes.string,
|
|
41
41
|
onSelectTag: PropTypes.func,
|
|
42
42
|
clickableTag: PropTypes.bool,
|
|
43
|
-
dataSelectorId: PropTypes.string
|
|
43
|
+
dataSelectorId: PropTypes.string,
|
|
44
|
+
handleSelectAll: PropTypes.func,
|
|
45
|
+
selectAllText: PropTypes.string,
|
|
46
|
+
needSelectAll: PropTypes.bool,
|
|
47
|
+
customClass: PropTypes.object
|
|
44
48
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
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); }
|
|
2
2
|
|
|
3
|
-
import React
|
|
3
|
+
import React from 'react';
|
|
4
4
|
import { defaultProps } from './props/defaultProps';
|
|
5
5
|
import { propTypes, UI_propTypes, new_propTypes } from './props/propTypes';
|
|
6
6
|
import AutoClose from '../../actions/AutoClose';
|
|
@@ -8,34 +8,40 @@ 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';
|
|
12
11
|
export default class GlobalNotification extends React.Component {
|
|
13
12
|
constructor(props) {
|
|
14
13
|
super(props);
|
|
15
14
|
this.state = {
|
|
16
15
|
hideMessage: false
|
|
17
16
|
};
|
|
18
|
-
this.setTimeoutId = null;
|
|
19
17
|
}
|
|
20
18
|
|
|
21
|
-
|
|
19
|
+
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
22
20
|
let {
|
|
21
|
+
showMessage,
|
|
23
22
|
hideMessage,
|
|
24
|
-
|
|
25
|
-
id,
|
|
26
|
-
needAutoClose
|
|
23
|
+
type
|
|
27
24
|
} = this.props;
|
|
28
25
|
|
|
29
|
-
if (
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
26
|
+
if (showMessage !== nextProps.showMessage || type !== nextProps.type) {
|
|
27
|
+
if (!['danger', 'error', 'warning'].includes(nextProps.type)) {
|
|
28
|
+
setTimeout(() => {
|
|
29
|
+
hideMessage();
|
|
30
|
+
}, 3000);
|
|
31
|
+
}
|
|
33
32
|
}
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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);
|
|
39
45
|
}
|
|
40
46
|
}
|
|
41
47
|
|
|
@@ -47,10 +53,7 @@ export default class GlobalNotification extends React.Component {
|
|
|
47
53
|
onClick,
|
|
48
54
|
i18nKeys = {},
|
|
49
55
|
customProps,
|
|
50
|
-
dataSelectorId
|
|
51
|
-
id,
|
|
52
|
-
needNotificationExpandUI,
|
|
53
|
-
notificationCount
|
|
56
|
+
dataSelectorId
|
|
54
57
|
} = this.props;
|
|
55
58
|
let {
|
|
56
59
|
closeTitle = 'Close'
|
|
@@ -62,10 +65,7 @@ export default class GlobalNotification extends React.Component {
|
|
|
62
65
|
onClick: onClick,
|
|
63
66
|
closeTitle: closeTitle,
|
|
64
67
|
customProps: customProps,
|
|
65
|
-
dataSelectorId: dataSelectorId
|
|
66
|
-
id: id,
|
|
67
|
-
needNotificationExpandUI: needNotificationExpandUI,
|
|
68
|
-
notificationCount: notificationCount
|
|
68
|
+
dataSelectorId: dataSelectorId
|
|
69
69
|
});
|
|
70
70
|
}
|
|
71
71
|
|
|
@@ -79,17 +79,12 @@ GlobalNotification.defaultProps = defaultProps; // if (__DOCS__) {
|
|
|
79
79
|
// }
|
|
80
80
|
|
|
81
81
|
export function GlobalNotificationUI(props) {
|
|
82
|
-
const [shadowClose, setshadowClose] = useState(true);
|
|
83
|
-
|
|
84
82
|
function onClose(e) {
|
|
85
|
-
setshadowClose(false);
|
|
86
83
|
let {
|
|
87
84
|
hideMessage,
|
|
88
|
-
onClose
|
|
89
|
-
id
|
|
85
|
+
onClose
|
|
90
86
|
} = props;
|
|
91
|
-
|
|
92
|
-
hideMessage && hideMessage(id);
|
|
87
|
+
hideMessage && hideMessage(e);
|
|
93
88
|
onClose && onClose(e);
|
|
94
89
|
}
|
|
95
90
|
|
|
@@ -99,15 +94,13 @@ export function GlobalNotificationUI(props) {
|
|
|
99
94
|
onClick,
|
|
100
95
|
closeTitle = '',
|
|
101
96
|
customProps = {},
|
|
102
|
-
dataSelectorId
|
|
103
|
-
needNotificationExpandUI,
|
|
104
|
-
notificationCount
|
|
97
|
+
dataSelectorId
|
|
105
98
|
} = props;
|
|
106
99
|
let {
|
|
107
100
|
ExtraProps = {}
|
|
108
101
|
} = customProps;
|
|
109
102
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
110
|
-
className: `${style.message} ${
|
|
103
|
+
className: `${style.message} ${type ? style[type] : ''}`,
|
|
111
104
|
"data-id": `show_${type}_message`,
|
|
112
105
|
"data-test-id": `show_${type}_message`,
|
|
113
106
|
tabIndex: 0,
|
|
@@ -8,97 +8,39 @@
|
|
|
8
8
|
|
|
9
9
|
.message {
|
|
10
10
|
composes: varClass;
|
|
11
|
-
|
|
11
|
+
position: absolute;
|
|
12
12
|
top: 0 ;
|
|
13
|
-
z-index:
|
|
14
|
-
justify-self: center;
|
|
15
|
-
/* overflow: hidden; */
|
|
13
|
+
z-index: 1000;
|
|
16
14
|
/*Hook for editor alert*/
|
|
17
|
-
|
|
15
|
+
pointer-events: none;
|
|
18
16
|
text-align: center;
|
|
19
|
-
left: 0;
|
|
20
|
-
pointer-events: none; */
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.stackShadowTwo::before {
|
|
24
|
-
content: '';
|
|
25
|
-
position: absolute;
|
|
26
|
-
/* css:theme-validation:ignore */
|
|
27
|
-
height: var(--zd_size20) ;
|
|
28
|
-
width: 90% ;
|
|
29
|
-
bottom: calc( var(--zd_size10) * -1 ) ;
|
|
30
|
-
background-color: var(--globalnotification_bg_color);
|
|
31
|
-
border-radius: 0 0 6px 6px;
|
|
32
|
-
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
[dir=ltr] .stackShadowTwo::before {
|
|
36
|
-
left: 50% ;
|
|
37
|
-
right: 50% ;
|
|
38
|
-
transform: translate(-50%);
|
|
39
|
-
animation: behindInfo 0.8s forwards;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
[dir=rtl] .stackShadowTwo::before {
|
|
43
|
-
right: 50% ;
|
|
44
|
-
left: 50% ;
|
|
45
|
-
transform: translate(50%);
|
|
46
|
-
animation: behindInfo 0.8s forwards;
|
|
47
17
|
}
|
|
48
18
|
|
|
49
|
-
.
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
/* css:theme-validation:ignore */
|
|
53
|
-
height: var(--zd_size20) ;
|
|
54
|
-
width: 95% ;
|
|
55
|
-
bottom: calc( var(--zd_size5) * -1 ) ;
|
|
56
|
-
background-color: var(--globalnotification_bg_color);
|
|
57
|
-
border-radius: 0 0 6px 6px;
|
|
58
|
-
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
|
|
19
|
+
[dir=ltr] .message {
|
|
20
|
+
right: 0 ;
|
|
21
|
+
left: 0 ;
|
|
59
22
|
}
|
|
60
23
|
|
|
61
|
-
[dir=
|
|
62
|
-
left:
|
|
63
|
-
right:
|
|
64
|
-
transform: translate(-50%);
|
|
65
|
-
animation: behindInfo 0.8s forwards;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
[dir=rtl] .stackShadowOne::after {
|
|
69
|
-
right: 50% ;
|
|
70
|
-
left: 50% ;
|
|
71
|
-
transform: translate(50%);
|
|
72
|
-
animation: behindInfo 0.8s forwards;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
@keyframes behindInfo {
|
|
76
|
-
from, 40% {
|
|
77
|
-
opacity: 0;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
to {
|
|
81
|
-
opacity: 1;
|
|
82
|
-
}
|
|
24
|
+
[dir=rtl] .message {
|
|
25
|
+
left: 0 ;
|
|
26
|
+
right: 0 ;
|
|
83
27
|
}
|
|
84
28
|
|
|
85
29
|
.container {
|
|
86
30
|
position: relative;
|
|
87
31
|
pointer-events: initial;
|
|
88
|
-
/* box-shadow: var(--zd_bs_globalnotification_container); */
|
|
89
32
|
/* css:theme-validation:ignore */
|
|
90
33
|
/* css:theme-validation:ignore */
|
|
91
34
|
/* css:theme-validation:ignore */
|
|
92
35
|
color: var(--globalnotification_text_color);
|
|
93
|
-
width: var(--
|
|
94
|
-
z-index: 1;
|
|
36
|
+
max-width: var(--zd_size490) ;
|
|
95
37
|
composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
|
|
38
|
+
box-shadow: var(--zd_bs_globalnotification_container);
|
|
96
39
|
border-radius: 0 0 var(--zd_size10) var(--zd_size10);
|
|
97
40
|
background-color: var(--globalnotification_bg_color);
|
|
98
41
|
border-style: solid;
|
|
99
42
|
border-color: var(--commonalert_border_color);
|
|
100
43
|
border-width: 2px 1px 1px 1px;
|
|
101
|
-
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
|
|
102
44
|
}
|
|
103
45
|
|
|
104
46
|
[dir=ltr] .container {
|
|
@@ -161,8 +103,6 @@
|
|
|
161
103
|
font-family: var(--zd_semibold);
|
|
162
104
|
composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
|
|
163
105
|
line-height: 1.4286;
|
|
164
|
-
overflow: hidden;
|
|
165
|
-
text-overflow: ellipsis;
|
|
166
106
|
}
|
|
167
107
|
|
|
168
108
|
[dir=ltr] .text {
|
|
@@ -9,24 +9,19 @@ export const propTypes = {
|
|
|
9
9
|
i18nKeys: PropTypes.object,
|
|
10
10
|
customProps: PropTypes.shape({
|
|
11
11
|
ExtraProps: PropTypes.object
|
|
12
|
-
})
|
|
13
|
-
id: PropTypes.number,
|
|
14
|
-
hideTime: PropTypes.number,
|
|
15
|
-
isFloating: PropTypes.bool,
|
|
16
|
-
isExpand: PropTypes.bool,
|
|
17
|
-
stack: PropTypes.number
|
|
12
|
+
})
|
|
18
13
|
};
|
|
19
14
|
export const UI_propTypes = {
|
|
20
15
|
dataSelectorId: PropTypes.string,
|
|
16
|
+
onClose: PropTypes.func,
|
|
21
17
|
closeTitle: PropTypes.string,
|
|
18
|
+
hideMessage: PropTypes.func,
|
|
22
19
|
message: PropTypes.string,
|
|
23
20
|
onClick: PropTypes.func,
|
|
24
21
|
type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
|
|
25
22
|
customProps: PropTypes.shape({
|
|
26
23
|
ExtraProps: PropTypes.object
|
|
27
|
-
})
|
|
28
|
-
isExpand: PropTypes.bool,
|
|
29
|
-
stack: PropTypes.number
|
|
24
|
+
})
|
|
30
25
|
};
|
|
31
26
|
export const new_propTypes = {
|
|
32
27
|
Element: PropTypes.element,
|