@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.
- package/README.md +15 -0
- package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +0 -1
- package/assets/Appearance/light/mode/Dot_LightMode.module.css +0 -1
- package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +0 -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/common/dot_boxShadow.module.css +3 -1
- package/es/v1/GlobalNotification/GlobalNotification.js +51 -19
- package/es/v1/GlobalNotification/props/defaultProps.js +3 -1
- package/es/v1/GlobalNotification/props/propTypes.js +12 -2
- package/es/version2/GlobalNotification/GlobalNotification.js +52 -26
- package/es/version2/GlobalNotification/GlobalNotification.module.css +57 -6
- package/es/version2/GlobalNotification/props/defaultProps.js +3 -1
- package/es/version2/GlobalNotification/props/propTypes.js +12 -4
- package/lib/common/dot_boxShadow.module.css +3 -1
- package/lib/v1/GlobalNotification/GlobalNotification.js +66 -17
- package/lib/v1/GlobalNotification/props/defaultProps.js +3 -1
- package/lib/v1/GlobalNotification/props/propTypes.js +17 -4
- package/lib/version2/GlobalNotification/GlobalNotification.js +52 -29
- package/lib/version2/GlobalNotification/GlobalNotification.module.css +57 -6
- package/lib/version2/GlobalNotification/props/defaultProps.js +3 -1
- package/lib/version2/GlobalNotification/props/propTypes.js +12 -4
- package/package.json +3 -3
- package/result.json +1 -1
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
--commonalert_border_color: var(--zdt_commonalert_default_border);
|
|
4
4
|
--globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
|
|
5
5
|
--globalnotification_text_color: var(--zdt_globalnotification_default_text);
|
|
6
|
-
--globalnotification_box_shadow: var(--zdt_globalnotification_default_box_shadow);
|
|
7
6
|
}
|
|
8
7
|
|
|
9
8
|
.message {
|
|
@@ -11,19 +10,69 @@
|
|
|
11
10
|
position: absolute;
|
|
12
11
|
top: 0 ;
|
|
13
12
|
z-index: 1000;
|
|
14
|
-
|
|
15
|
-
pointer-events: none;
|
|
13
|
+
width: var(--zd_size420) ;
|
|
16
14
|
text-align: center;
|
|
15
|
+
margin: auto ;
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
[dir=ltr] .message {
|
|
20
|
-
right: 0 ;
|
|
21
19
|
left: 0 ;
|
|
20
|
+
right: 0 ;
|
|
22
21
|
}
|
|
23
22
|
|
|
24
23
|
[dir=rtl] .message {
|
|
25
|
-
left: 0 ;
|
|
26
24
|
right: 0 ;
|
|
25
|
+
left: 0 ;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.stackShadowOne::after,
|
|
29
|
+
.stackShadowTwo::before {
|
|
30
|
+
content: '';
|
|
31
|
+
position: absolute;
|
|
32
|
+
/* css:theme-validation:ignore */
|
|
33
|
+
height: var(--zd_size20) ;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.stackShadowOne::after, .stackShadowTwo::before {
|
|
37
|
+
background-color: var(--globalnotification_bg_color);
|
|
38
|
+
border-radius: 0 0 6px 6px;
|
|
39
|
+
box-shadow: var(--zd_bs_globalnotification_container);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
[dir=ltr] .stackShadowOne::after, [dir=ltr] .stackShadowTwo::before {
|
|
43
|
+
left: 50% ;
|
|
44
|
+
right: 50% ;
|
|
45
|
+
transform: translate(-50%);
|
|
46
|
+
animation: behindInfo 0.8s forwards;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
[dir=rtl] .stackShadowOne::after, [dir=rtl] .stackShadowTwo::before {
|
|
50
|
+
right: 50% ;
|
|
51
|
+
left: 50% ;
|
|
52
|
+
transform: translate(50%);
|
|
53
|
+
animation: behindInfo 0.8s forwards;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.stackShadowTwo::before {
|
|
57
|
+
width: 90% ;
|
|
58
|
+
bottom: calc( var(--zd_size10) * -1 ) ;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.stackShadowOne::after {
|
|
62
|
+
width: 95% ;
|
|
63
|
+
bottom: calc( var(--zd_size5) * -1 ) ;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@keyframes behindInfo {
|
|
67
|
+
|
|
68
|
+
0%,
|
|
69
|
+
40% {
|
|
70
|
+
opacity: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
100% {
|
|
74
|
+
opacity: 1;
|
|
75
|
+
}
|
|
27
76
|
}
|
|
28
77
|
|
|
29
78
|
.container {
|
|
@@ -33,8 +82,9 @@
|
|
|
33
82
|
/* css:theme-validation:ignore */
|
|
34
83
|
/* css:theme-validation:ignore */
|
|
35
84
|
color: var(--globalnotification_text_color);
|
|
36
|
-
|
|
85
|
+
z-index: 1;
|
|
37
86
|
composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
|
|
87
|
+
width: 100% ;
|
|
38
88
|
box-shadow: var(--zd_bs_globalnotification_container);
|
|
39
89
|
border-radius: 0 0 var(--zd_size10) var(--zd_size10);
|
|
40
90
|
background-color: var(--globalnotification_bg_color);
|
|
@@ -103,6 +153,7 @@
|
|
|
103
153
|
font-family: var(--zd_semibold);
|
|
104
154
|
composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
|
|
105
155
|
line-height: 1.4286;
|
|
156
|
+
overflow: hidden;
|
|
106
157
|
}
|
|
107
158
|
|
|
108
159
|
[dir=ltr] .text {
|
|
@@ -9,19 +9,27 @@ 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,
|
|
16
|
-
onClose: PropTypes.func,
|
|
17
22
|
closeTitle: PropTypes.string,
|
|
18
|
-
hideMessage: PropTypes.func,
|
|
19
23
|
message: PropTypes.string,
|
|
20
24
|
onClick: PropTypes.func,
|
|
21
25
|
type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error']),
|
|
22
26
|
customProps: PropTypes.shape({
|
|
23
27
|
ExtraProps: PropTypes.object
|
|
24
|
-
})
|
|
28
|
+
}),
|
|
29
|
+
needShadow: PropTypes.bool,
|
|
30
|
+
shadowCount: PropTypes.number,
|
|
31
|
+
id: PropTypes.number,
|
|
32
|
+
onClose: PropTypes.func
|
|
25
33
|
};
|
|
26
34
|
export const new_propTypes = {
|
|
27
35
|
Element: PropTypes.element,
|
|
@@ -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,
|
|
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
|
}
|
|
@@ -23,6 +23,8 @@ var _AlertClose = _interopRequireDefault(require("../alert/AlertClose/AlertClose
|
|
|
23
23
|
|
|
24
24
|
var _Layout = require("@zohodesk/components/es/v1/Layout");
|
|
25
25
|
|
|
26
|
+
var _Common = require("@zohodesk/components/es/utils/Common");
|
|
27
|
+
|
|
26
28
|
var _GlobalNotificationModule = _interopRequireDefault(require("../../version2/GlobalNotification/GlobalNotification.module.css"));
|
|
27
29
|
|
|
28
30
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -33,25 +35,63 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
33
35
|
|
|
34
36
|
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); }
|
|
35
37
|
|
|
38
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
39
|
+
|
|
40
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
41
|
+
|
|
42
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
43
|
+
|
|
44
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
45
|
+
|
|
46
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
47
|
+
|
|
48
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
49
|
+
|
|
36
50
|
function GlobalNotification(props) {
|
|
37
51
|
var type = props.type,
|
|
38
52
|
message = props.message,
|
|
39
53
|
hideMessage = props.hideMessage,
|
|
54
|
+
hideTime = props.hideTime,
|
|
40
55
|
onClick = props.onClick,
|
|
56
|
+
onClose = props.onClose,
|
|
57
|
+
needAutoClose = props.needAutoClose,
|
|
41
58
|
_props$i18nKeys = props.i18nKeys,
|
|
42
59
|
i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
|
|
43
60
|
customProps = props.customProps,
|
|
44
61
|
dataSelectorId = props.dataSelectorId,
|
|
45
|
-
|
|
62
|
+
id = props.id,
|
|
63
|
+
needShadow = props.needShadow,
|
|
64
|
+
shadowCount = props.shadowCount,
|
|
65
|
+
eleRef = props.eleRef;
|
|
66
|
+
var hideMessageTimer = useRef(null);
|
|
67
|
+
|
|
68
|
+
var _useState = useState(true),
|
|
69
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
70
|
+
shadowClose = _useState2[0],
|
|
71
|
+
setShadowClose = _useState2[1];
|
|
72
|
+
|
|
46
73
|
(0, _react.useEffect)(function () {
|
|
47
|
-
if (
|
|
48
|
-
setTimeout(function () {
|
|
49
|
-
hideMessage();
|
|
50
|
-
},
|
|
74
|
+
if (needAutoClose) {
|
|
75
|
+
hideMessageTimer.current = setTimeout(function () {
|
|
76
|
+
hideMessage(id);
|
|
77
|
+
}, hideTime);
|
|
51
78
|
}
|
|
52
|
-
|
|
79
|
+
|
|
80
|
+
return function () {
|
|
81
|
+
if (hideMessageTimer.current) {
|
|
82
|
+
clearTimeout(hideMessageTimer.current);
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
}, []);
|
|
53
86
|
var _i18nKeys$closeTitle = i18nKeys.closeTitle,
|
|
54
87
|
closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
|
|
88
|
+
|
|
89
|
+
function onCloseLocal(e) {
|
|
90
|
+
setShadowClose(false);
|
|
91
|
+
hideMessage && hideMessage(id);
|
|
92
|
+
onClose && onClose(e);
|
|
93
|
+
}
|
|
94
|
+
|
|
55
95
|
return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, {
|
|
56
96
|
type: type,
|
|
57
97
|
message: message,
|
|
@@ -59,7 +99,12 @@ function GlobalNotification(props) {
|
|
|
59
99
|
onClick: onClick,
|
|
60
100
|
closeTitle: closeTitle,
|
|
61
101
|
customProps: customProps,
|
|
62
|
-
dataSelectorId: dataSelectorId
|
|
102
|
+
dataSelectorId: dataSelectorId,
|
|
103
|
+
id: id,
|
|
104
|
+
shadowCount: shadowCount,
|
|
105
|
+
onClose: onCloseLocal,
|
|
106
|
+
needShadow: shadowClose && needShadow,
|
|
107
|
+
eleRef: eleRef
|
|
63
108
|
});
|
|
64
109
|
}
|
|
65
110
|
|
|
@@ -72,13 +117,6 @@ GlobalNotification.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
|
|
|
72
117
|
// }
|
|
73
118
|
|
|
74
119
|
function GlobalNotificationUI(props) {
|
|
75
|
-
function onClose(e) {
|
|
76
|
-
var hideMessage = props.hideMessage,
|
|
77
|
-
onClose = props.onClose;
|
|
78
|
-
hideMessage && hideMessage(e);
|
|
79
|
-
onClose && onClose(e);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
120
|
var _props$type = props.type,
|
|
83
121
|
type = _props$type === void 0 ? '' : _props$type,
|
|
84
122
|
message = props.message,
|
|
@@ -87,11 +125,22 @@ function GlobalNotificationUI(props) {
|
|
|
87
125
|
closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle,
|
|
88
126
|
_props$customProps = props.customProps,
|
|
89
127
|
customProps = _props$customProps === void 0 ? {} : _props$customProps,
|
|
90
|
-
dataSelectorId = props.dataSelectorId
|
|
128
|
+
dataSelectorId = props.dataSelectorId,
|
|
129
|
+
shadowCount = props.shadowCount,
|
|
130
|
+
needShadow = props.needShadow,
|
|
131
|
+
eleRef = props.eleRef,
|
|
132
|
+
onClose = props.onClose;
|
|
91
133
|
var _customProps$ExtraPro = customProps.ExtraProps,
|
|
92
134
|
ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
|
|
135
|
+
|
|
136
|
+
function onCloseLocal(e) {
|
|
137
|
+
(0, _Common.cancelBubblingEffect)(e);
|
|
138
|
+
onClose && onClose(e);
|
|
139
|
+
}
|
|
140
|
+
|
|
93
141
|
return /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
94
|
-
|
|
142
|
+
ref: eleRef,
|
|
143
|
+
className: " ".concat(_GlobalNotificationModule["default"].message, " \n ").concat(needShadow && shadowCount >= 2 ? shadowCount > 2 ? "".concat(_GlobalNotificationModule["default"].stackShadowTwo, " ").concat(_GlobalNotificationModule["default"].stackShadowOne) : _GlobalNotificationModule["default"].stackShadowOne : '', "\n ").concat(type ? _GlobalNotificationModule["default"][type] : '', "\n "),
|
|
95
144
|
"data-id": "show_".concat(type, "_message"),
|
|
96
145
|
"data-test-id": "show_".concat(type, "_message"),
|
|
97
146
|
tabIndex: 0,
|
|
@@ -122,7 +171,7 @@ function GlobalNotificationUI(props) {
|
|
|
122
171
|
}, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
|
|
123
172
|
dataId: "close_".concat(type, "_message"),
|
|
124
173
|
dataTitle: closeTitle,
|
|
125
|
-
onClose:
|
|
174
|
+
onClose: onCloseLocal,
|
|
126
175
|
type: type
|
|
127
176
|
}))));
|
|
128
177
|
}
|
|
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.defaultProps = void 0;
|
|
7
7
|
var defaultProps = {
|
|
8
8
|
customProps: {},
|
|
9
|
-
dataSelectorId: 'globalNotification'
|
|
9
|
+
dataSelectorId: 'globalNotification',
|
|
10
|
+
needAutoClose: true,
|
|
11
|
+
hideTime: 3000
|
|
10
12
|
};
|
|
11
13
|
exports.defaultProps = defaultProps;
|
|
@@ -9,6 +9,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
11
|
|
|
12
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
13
|
+
|
|
12
14
|
var propTypes = {
|
|
13
15
|
dataSelectorId: _propTypes["default"].string,
|
|
14
16
|
hideMessage: _propTypes["default"].func,
|
|
@@ -19,10 +21,17 @@ var propTypes = {
|
|
|
19
21
|
i18nKeys: _propTypes["default"].object,
|
|
20
22
|
customProps: _propTypes["default"].shape({
|
|
21
23
|
ExtraProps: _propTypes["default"].object
|
|
22
|
-
})
|
|
24
|
+
}),
|
|
25
|
+
id: _propTypes["default"].number,
|
|
26
|
+
hideTime: _propTypes["default"].number,
|
|
27
|
+
needAutoClose: _propTypes["default"].bool,
|
|
28
|
+
isCollapseView: _propTypes["default"].bool,
|
|
29
|
+
shadowCount: _propTypes["default"].number,
|
|
30
|
+
needShadow: _propTypes["default"].bool
|
|
23
31
|
};
|
|
24
32
|
exports.propTypes = propTypes;
|
|
25
|
-
|
|
33
|
+
|
|
34
|
+
var UI_propTypes = _defineProperty({
|
|
26
35
|
dataSelectorId: _propTypes["default"].string,
|
|
27
36
|
onClose: _propTypes["default"].func,
|
|
28
37
|
closeTitle: _propTypes["default"].string,
|
|
@@ -32,8 +41,12 @@ var UI_propTypes = {
|
|
|
32
41
|
type: _propTypes["default"].oneOf(['success', 'danger', 'info', 'warning', 'error']),
|
|
33
42
|
customProps: _propTypes["default"].shape({
|
|
34
43
|
ExtraProps: _propTypes["default"].object
|
|
35
|
-
})
|
|
36
|
-
|
|
44
|
+
}),
|
|
45
|
+
needShadow: _propTypes["default"].bool,
|
|
46
|
+
shadowCount: _propTypes["default"].number,
|
|
47
|
+
id: _propTypes["default"].number
|
|
48
|
+
}, "onClose", _propTypes["default"].func);
|
|
49
|
+
|
|
37
50
|
exports.UI_propTypes = UI_propTypes;
|
|
38
51
|
var new_propTypes = {
|
|
39
52
|
Element: _propTypes["default"].element,
|
|
@@ -25,6 +25,8 @@ var _GlobalNotificationModule = _interopRequireDefault(require("./GlobalNotifica
|
|
|
25
25
|
|
|
26
26
|
var _Layout = require("@zohodesk/components/lib/Layout");
|
|
27
27
|
|
|
28
|
+
var _Common = require("@zohodesk/components/es/utils/Common");
|
|
29
|
+
|
|
28
30
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
29
31
|
|
|
30
32
|
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); }
|
|
@@ -60,41 +62,49 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
|
|
|
60
62
|
_classCallCheck(this, GlobalNotification);
|
|
61
63
|
|
|
62
64
|
_this = _super.call(this, props);
|
|
65
|
+
_this.hideMessageTimer = null;
|
|
63
66
|
_this.state = {
|
|
64
|
-
|
|
67
|
+
shadowClose: true
|
|
65
68
|
};
|
|
69
|
+
_this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
|
|
66
70
|
return _this;
|
|
67
71
|
}
|
|
68
72
|
|
|
69
73
|
_createClass(GlobalNotification, [{
|
|
70
|
-
key: "
|
|
71
|
-
value: function
|
|
74
|
+
key: "componentDidMount",
|
|
75
|
+
value: function componentDidMount() {
|
|
72
76
|
var _this$props = this.props,
|
|
73
|
-
showMessage = _this$props.showMessage,
|
|
74
77
|
hideMessage = _this$props.hideMessage,
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
78
|
+
hideTime = _this$props.hideTime,
|
|
79
|
+
id = _this$props.id,
|
|
80
|
+
needAutoClose = _this$props.needAutoClose;
|
|
81
|
+
|
|
82
|
+
if (needAutoClose) {
|
|
83
|
+
this.hideMessageTimer = setTimeout(function () {
|
|
84
|
+
hideMessage(id);
|
|
85
|
+
}, hideTime);
|
|
83
86
|
}
|
|
84
87
|
}
|
|
85
88
|
}, {
|
|
86
|
-
key: "
|
|
87
|
-
value: function
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
hideMessage = _this$props2.hideMessage;
|
|
91
|
-
|
|
92
|
-
if (!['danger', 'error', 'warning'].includes(type)) {
|
|
93
|
-
setTimeout(function () {
|
|
94
|
-
hideMessage();
|
|
95
|
-
}, 3000);
|
|
89
|
+
key: "componentWillUnmount",
|
|
90
|
+
value: function componentWillUnmount() {
|
|
91
|
+
if (this.hideMessageTimer) {
|
|
92
|
+
clearTimeout(this.hideMessageTimer);
|
|
96
93
|
}
|
|
97
94
|
}
|
|
95
|
+
}, {
|
|
96
|
+
key: "onClose",
|
|
97
|
+
value: function onClose(e) {
|
|
98
|
+
var _this$props2 = this.props,
|
|
99
|
+
onClose = _this$props2.onClose,
|
|
100
|
+
hideMessage = _this$props2.hideMessage,
|
|
101
|
+
id = _this$props2.id;
|
|
102
|
+
this.setState({
|
|
103
|
+
shadowClose: false
|
|
104
|
+
});
|
|
105
|
+
hideMessage && hideMessage(id);
|
|
106
|
+
onClose && onClose(e);
|
|
107
|
+
}
|
|
98
108
|
}, {
|
|
99
109
|
key: "render",
|
|
100
110
|
value: function render() {
|
|
@@ -106,7 +116,12 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
|
|
|
106
116
|
_this$props3$i18nKeys = _this$props3.i18nKeys,
|
|
107
117
|
i18nKeys = _this$props3$i18nKeys === void 0 ? {} : _this$props3$i18nKeys,
|
|
108
118
|
customProps = _this$props3.customProps,
|
|
109
|
-
dataSelectorId = _this$props3.dataSelectorId
|
|
119
|
+
dataSelectorId = _this$props3.dataSelectorId,
|
|
120
|
+
id = _this$props3.id,
|
|
121
|
+
needShadow = _this$props3.needShadow,
|
|
122
|
+
shadowCount = _this$props3.shadowCount,
|
|
123
|
+
eleRef = _this$props3.eleRef;
|
|
124
|
+
var shadowClose = this.state.shadowClose;
|
|
110
125
|
var _i18nKeys$closeTitle = i18nKeys.closeTitle,
|
|
111
126
|
closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
|
|
112
127
|
return /*#__PURE__*/_react["default"].createElement(GlobalNotificationUI, {
|
|
@@ -116,7 +131,12 @@ var GlobalNotification = /*#__PURE__*/function (_React$Component) {
|
|
|
116
131
|
onClick: onClick,
|
|
117
132
|
closeTitle: closeTitle,
|
|
118
133
|
customProps: customProps,
|
|
119
|
-
dataSelectorId: dataSelectorId
|
|
134
|
+
dataSelectorId: dataSelectorId,
|
|
135
|
+
id: id,
|
|
136
|
+
shadowCount: shadowCount,
|
|
137
|
+
onClose: this.onClose,
|
|
138
|
+
needShadow: shadowClose && needShadow,
|
|
139
|
+
eleRef: eleRef
|
|
120
140
|
});
|
|
121
141
|
}
|
|
122
142
|
}]);
|
|
@@ -135,9 +155,8 @@ GlobalNotification.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
|
|
|
135
155
|
|
|
136
156
|
function GlobalNotificationUI(props) {
|
|
137
157
|
function onClose(e) {
|
|
138
|
-
var
|
|
139
|
-
|
|
140
|
-
hideMessage && hideMessage(e);
|
|
158
|
+
var onClose = props.onClose;
|
|
159
|
+
(0, _Common.cancelBubblingEffect)(e);
|
|
141
160
|
onClose && onClose(e);
|
|
142
161
|
}
|
|
143
162
|
|
|
@@ -149,11 +168,15 @@ function GlobalNotificationUI(props) {
|
|
|
149
168
|
closeTitle = _props$closeTitle === void 0 ? '' : _props$closeTitle,
|
|
150
169
|
_props$customProps = props.customProps,
|
|
151
170
|
customProps = _props$customProps === void 0 ? {} : _props$customProps,
|
|
152
|
-
dataSelectorId = props.dataSelectorId
|
|
171
|
+
dataSelectorId = props.dataSelectorId,
|
|
172
|
+
shadowCount = props.shadowCount,
|
|
173
|
+
needShadow = props.needShadow,
|
|
174
|
+
eleRef = props.eleRef;
|
|
153
175
|
var _customProps$ExtraPro = customProps.ExtraProps,
|
|
154
176
|
ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
|
|
155
177
|
return /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
156
|
-
|
|
178
|
+
ref: eleRef,
|
|
179
|
+
className: " ".concat(_GlobalNotificationModule["default"].message, " \n ").concat(needShadow && shadowCount >= 2 ? shadowCount > 2 ? "".concat(_GlobalNotificationModule["default"].stackShadowTwo, " ").concat(_GlobalNotificationModule["default"].stackShadowOne) : _GlobalNotificationModule["default"].stackShadowOne : '', "\n ").concat(type ? _GlobalNotificationModule["default"][type] : '', "\n "),
|
|
157
180
|
"data-id": "show_".concat(type, "_message"),
|
|
158
181
|
"data-test-id": "show_".concat(type, "_message"),
|
|
159
182
|
tabIndex: 0,
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
--commonalert_border_color: var(--zdt_commonalert_default_border);
|
|
4
4
|
--globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
|
|
5
5
|
--globalnotification_text_color: var(--zdt_globalnotification_default_text);
|
|
6
|
-
--globalnotification_box_shadow: var(--zdt_globalnotification_default_box_shadow);
|
|
7
6
|
}
|
|
8
7
|
|
|
9
8
|
.message {
|
|
@@ -11,19 +10,69 @@
|
|
|
11
10
|
position: absolute;
|
|
12
11
|
top: 0 ;
|
|
13
12
|
z-index: 1000;
|
|
14
|
-
|
|
15
|
-
pointer-events: none;
|
|
13
|
+
width: var(--zd_size420) ;
|
|
16
14
|
text-align: center;
|
|
15
|
+
margin: auto ;
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
[dir=ltr] .message {
|
|
20
|
-
right: 0 ;
|
|
21
19
|
left: 0 ;
|
|
20
|
+
right: 0 ;
|
|
22
21
|
}
|
|
23
22
|
|
|
24
23
|
[dir=rtl] .message {
|
|
25
|
-
left: 0 ;
|
|
26
24
|
right: 0 ;
|
|
25
|
+
left: 0 ;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.stackShadowOne::after,
|
|
29
|
+
.stackShadowTwo::before {
|
|
30
|
+
content: '';
|
|
31
|
+
position: absolute;
|
|
32
|
+
/* css:theme-validation:ignore */
|
|
33
|
+
height: var(--zd_size20) ;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.stackShadowOne::after, .stackShadowTwo::before {
|
|
37
|
+
background-color: var(--globalnotification_bg_color);
|
|
38
|
+
border-radius: 0 0 6px 6px;
|
|
39
|
+
box-shadow: var(--zd_bs_globalnotification_container);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
[dir=ltr] .stackShadowOne::after, [dir=ltr] .stackShadowTwo::before {
|
|
43
|
+
left: 50% ;
|
|
44
|
+
right: 50% ;
|
|
45
|
+
transform: translate(-50%);
|
|
46
|
+
animation: behindInfo 0.8s forwards;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
[dir=rtl] .stackShadowOne::after, [dir=rtl] .stackShadowTwo::before {
|
|
50
|
+
right: 50% ;
|
|
51
|
+
left: 50% ;
|
|
52
|
+
transform: translate(50%);
|
|
53
|
+
animation: behindInfo 0.8s forwards;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.stackShadowTwo::before {
|
|
57
|
+
width: 90% ;
|
|
58
|
+
bottom: calc( var(--zd_size10) * -1 ) ;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.stackShadowOne::after {
|
|
62
|
+
width: 95% ;
|
|
63
|
+
bottom: calc( var(--zd_size5) * -1 ) ;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
@keyframes behindInfo {
|
|
67
|
+
|
|
68
|
+
0%,
|
|
69
|
+
40% {
|
|
70
|
+
opacity: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
100% {
|
|
74
|
+
opacity: 1;
|
|
75
|
+
}
|
|
27
76
|
}
|
|
28
77
|
|
|
29
78
|
.container {
|
|
@@ -33,8 +82,9 @@
|
|
|
33
82
|
/* css:theme-validation:ignore */
|
|
34
83
|
/* css:theme-validation:ignore */
|
|
35
84
|
color: var(--globalnotification_text_color);
|
|
36
|
-
|
|
85
|
+
z-index: 1;
|
|
37
86
|
composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
|
|
87
|
+
width: 100% ;
|
|
38
88
|
box-shadow: var(--zd_bs_globalnotification_container);
|
|
39
89
|
border-radius: 0 0 var(--zd_size10) var(--zd_size10);
|
|
40
90
|
background-color: var(--globalnotification_bg_color);
|
|
@@ -103,6 +153,7 @@
|
|
|
103
153
|
font-family: var(--zd_semibold);
|
|
104
154
|
composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
|
|
105
155
|
line-height: 1.4286;
|
|
156
|
+
overflow: hidden;
|
|
106
157
|
}
|
|
107
158
|
|
|
108
159
|
[dir=ltr] .text {
|
|
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.defaultProps = void 0;
|
|
7
7
|
var defaultProps = {
|
|
8
8
|
customProps: {},
|
|
9
|
-
dataSelectorId: 'globalNotification'
|
|
9
|
+
dataSelectorId: 'globalNotification',
|
|
10
|
+
needAutoClose: true,
|
|
11
|
+
hideTime: 3000
|
|
10
12
|
};
|
|
11
13
|
exports.defaultProps = defaultProps;
|
|
@@ -19,20 +19,28 @@ var propTypes = {
|
|
|
19
19
|
i18nKeys: _propTypes["default"].object,
|
|
20
20
|
customProps: _propTypes["default"].shape({
|
|
21
21
|
ExtraProps: _propTypes["default"].object
|
|
22
|
-
})
|
|
22
|
+
}),
|
|
23
|
+
id: _propTypes["default"].number,
|
|
24
|
+
hideTime: _propTypes["default"].number,
|
|
25
|
+
needAutoClose: _propTypes["default"].bool,
|
|
26
|
+
isCollapseView: _propTypes["default"].bool,
|
|
27
|
+
shadowCount: _propTypes["default"].number,
|
|
28
|
+
needShadow: _propTypes["default"].bool
|
|
23
29
|
};
|
|
24
30
|
exports.propTypes = propTypes;
|
|
25
31
|
var UI_propTypes = {
|
|
26
32
|
dataSelectorId: _propTypes["default"].string,
|
|
27
|
-
onClose: _propTypes["default"].func,
|
|
28
33
|
closeTitle: _propTypes["default"].string,
|
|
29
|
-
hideMessage: _propTypes["default"].func,
|
|
30
34
|
message: _propTypes["default"].string,
|
|
31
35
|
onClick: _propTypes["default"].func,
|
|
32
36
|
type: _propTypes["default"].oneOf(['success', 'danger', 'info', 'warning', 'error']),
|
|
33
37
|
customProps: _propTypes["default"].shape({
|
|
34
38
|
ExtraProps: _propTypes["default"].object
|
|
35
|
-
})
|
|
39
|
+
}),
|
|
40
|
+
needShadow: _propTypes["default"].bool,
|
|
41
|
+
shadowCount: _propTypes["default"].number,
|
|
42
|
+
id: _propTypes["default"].number,
|
|
43
|
+
onClose: _propTypes["default"].func
|
|
36
44
|
};
|
|
37
45
|
exports.UI_propTypes = UI_propTypes;
|
|
38
46
|
var new_propTypes = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohodesk/dot",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.9",
|
|
4
4
|
"main": "lib/index",
|
|
5
5
|
"module": "es/index.js",
|
|
6
6
|
"private": false,
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@zohodesk-private/node-plugins": "1.1.6",
|
|
62
62
|
"@zohodesk-private/react-prop-validator": "1.2.1",
|
|
63
63
|
"@zohodesk/a11y": "2.2.0",
|
|
64
|
-
"@zohodesk/components": "1.2.
|
|
64
|
+
"@zohodesk/components": "1.2.24",
|
|
65
65
|
"@zohodesk/hooks": "2.0.2",
|
|
66
66
|
"@zohodesk/icons": "1.0.27",
|
|
67
67
|
"@zohodesk/svg": "1.1.10",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"velocity-react": "1.4.3",
|
|
76
76
|
"@zohodesk/variables": "1.0.0",
|
|
77
|
-
"@zohodesk/components": "1.2.
|
|
77
|
+
"@zohodesk/components": "1.2.24",
|
|
78
78
|
"@zohodesk/icons": "1.0.27",
|
|
79
79
|
"@zohodesk/svg": "1.1.10",
|
|
80
80
|
"@zohodesk/virtualizer": "1.0.3",
|