@zohodesk/dot 1.4.0 → 1.4.1
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/AppearanceThemeValidationExcludeFiles.js +1 -0
- package/.cli/PropLessFiles.html +1 -1
- package/.cli/propValidation_report.html +1 -1
- package/README.md +6 -0
- package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +3 -0
- package/assets/Appearance/light/mode/Dot_LightMode.module.css +3 -0
- package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +3 -0
- 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 +5 -2
- 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/coverage-final.json +16 -16
- package/coverage/coverage-summary.json +16 -16
- package/coverage/index.html +1 -1
- package/es/ActionButton/ActionButton.module.css +7 -0
- package/es/AlphabeticList/AlphabeticList.module.css +2 -0
- package/es/AttachmentViewer/AttachmentViewer.module.css +2 -0
- package/es/ChannelIcon/ChannelIcon.module.css +4 -0
- package/es/FormAction/FormAction.module.css +2 -0
- package/es/IconButton/IconButton.module.css +1 -0
- package/es/Provider/Config.js +2 -1
- package/es/TagWithIcon/TagWithIcon.module.css +19 -5
- package/es/avatar/AvatarIcon/AvatarIcon.module.css +6 -0
- package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css +4 -0
- package/es/form/fields/ValidationMessage/ValidationMessage.module.css +1 -0
- package/es/layout/SubtabLayout/SubtabLayout.module.css +2 -0
- package/es/list/Comment/Comment.module.css +1 -0
- package/es/list/Dot/Dot.module.css +1 -0
- package/es/list/ListLayout/ListLayout.module.css +12 -0
- package/es/list/Subject/Subject.module.css +1 -0
- package/es/list/Thread/Thread.module.css +1 -0
- package/es/setup/header/Search/Search.module.css +1 -0
- package/es/setup/table/TableRow/SetupTableRow.module.css +3 -2
- package/es/v1/notification/DesktopNotification/DesktopNotification.js +79 -55
- package/es/v1/notification/DesktopNotification/props/defaultProps.js +3 -1
- package/es/v1/notification/DesktopNotification/props/propTypes.js +2 -1
- package/es/v1/notification/DesktopNotificationHeader/DesktopNotificationHeader.js +59 -23
- package/es/v1/notification/DesktopNotificationHeader/props/defaultProps.js +3 -1
- package/es/v1/notification/DesktopNotificationHeader/props/propTypes.js +2 -1
- package/es/v1/setup/header/Button/Button.js +17 -29
- package/es/v1/setup/header/Link/Link.js +23 -35
- package/es/v1/setup/header/Search/Search.js +43 -69
- package/es/v1/setup/header/Views/Views.js +27 -39
- package/es/v1/setup/helptips/Description/Description.js +8 -20
- package/es/v1/setup/helptips/Link/Link.js +20 -32
- package/es/v1/setup/helptips/ListGroup/ListGroup.js +18 -30
- package/es/v1/setup/helptips/Title/Title.js +8 -20
- package/es/version2/GlobalNotification/GlobalNotification.module.css +3 -0
- package/es/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css +1 -0
- package/es/version2/notification/DesktopNotification/DesktopNotification.js +78 -55
- package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +10 -4
- package/es/version2/notification/DesktopNotification/props/defaultProps.js +3 -1
- package/es/version2/notification/DesktopNotification/props/propTypes.js +2 -1
- package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js +59 -23
- package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +14 -17
- package/es/version2/notification/DesktopNotificationHeader/props/defaultProps.js +3 -1
- package/es/version2/notification/DesktopNotificationHeader/props/propTypes.js +2 -1
- package/lib/ActionButton/ActionButton.module.css +7 -0
- package/lib/AlphabeticList/AlphabeticList.module.css +2 -0
- package/lib/AttachmentViewer/AttachmentViewer.module.css +2 -0
- package/lib/ChannelIcon/ChannelIcon.module.css +4 -0
- package/lib/FormAction/FormAction.module.css +2 -0
- package/lib/IconButton/IconButton.module.css +1 -0
- package/lib/Provider/Config.js +2 -1
- package/lib/TagWithIcon/TagWithIcon.module.css +19 -5
- package/lib/avatar/AvatarIcon/AvatarIcon.module.css +6 -0
- package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css +4 -0
- package/lib/form/fields/ValidationMessage/ValidationMessage.module.css +1 -0
- package/lib/layout/SubtabLayout/SubtabLayout.module.css +2 -0
- package/lib/list/Comment/Comment.module.css +1 -0
- package/lib/list/Dot/Dot.module.css +1 -0
- package/lib/list/ListLayout/ListLayout.module.css +12 -0
- package/lib/list/Subject/Subject.module.css +1 -0
- package/lib/list/Thread/Thread.module.css +1 -0
- package/lib/setup/header/Search/Search.module.css +1 -0
- package/lib/setup/table/TableRow/SetupTableRow.module.css +3 -2
- package/lib/v1/notification/DesktopNotification/DesktopNotification.js +74 -55
- package/lib/v1/notification/DesktopNotification/props/defaultProps.js +5 -1
- package/lib/v1/notification/DesktopNotification/props/propTypes.js +2 -1
- package/lib/v1/notification/DesktopNotificationHeader/DesktopNotificationHeader.js +57 -23
- package/lib/v1/notification/DesktopNotificationHeader/props/defaultProps.js +5 -1
- package/lib/v1/notification/DesktopNotificationHeader/props/propTypes.js +2 -1
- package/lib/v1/setup/header/Button/Button.js +17 -63
- package/lib/v1/setup/header/Link/Link.js +23 -69
- package/lib/v1/setup/header/Search/Search.js +57 -89
- package/lib/v1/setup/header/Views/Views.js +27 -73
- package/lib/v1/setup/helptips/Description/Description.js +8 -53
- package/lib/v1/setup/helptips/Link/Link.js +23 -69
- package/lib/v1/setup/helptips/ListGroup/ListGroup.js +26 -72
- package/lib/v1/setup/helptips/Title/Title.js +8 -53
- package/lib/version2/GlobalNotification/GlobalNotification.module.css +3 -0
- package/lib/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css +1 -0
- package/lib/version2/notification/DesktopNotification/DesktopNotification.js +74 -55
- package/lib/version2/notification/DesktopNotification/DesktopNotification.module.css +10 -4
- package/lib/version2/notification/DesktopNotification/props/defaultProps.js +5 -1
- package/lib/version2/notification/DesktopNotification/props/propTypes.js +2 -1
- package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.js +57 -23
- package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +14 -17
- package/lib/version2/notification/DesktopNotificationHeader/props/defaultProps.js +5 -1
- package/lib/version2/notification/DesktopNotificationHeader/props/propTypes.js +2 -1
- package/package.json +11 -9
- package/result.json +1 -1
|
@@ -6,11 +6,16 @@
|
|
|
6
6
|
.container {
|
|
7
7
|
vertical-align: middle;
|
|
8
8
|
composes: varClass;
|
|
9
|
+
/* css:theme-validation:ignore */
|
|
9
10
|
border-width: 1px;
|
|
10
11
|
border-style: solid;
|
|
11
12
|
border-radius: 50%;
|
|
12
13
|
border-color: var(--border_color)
|
|
13
14
|
}
|
|
15
|
+
.borderOnHover:hover,
|
|
16
|
+
.borderOnActive {
|
|
17
|
+
/* css:theme-validation:ignore */
|
|
18
|
+
}
|
|
14
19
|
.borderOnHover:hover, .borderOnActive {
|
|
15
20
|
border-color: var(--border_hoverColor)
|
|
16
21
|
}
|
|
@@ -35,6 +40,7 @@
|
|
|
35
40
|
--border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
|
|
36
41
|
}
|
|
37
42
|
.iconColor {
|
|
43
|
+
/* css:theme-validation:ignore */
|
|
38
44
|
color: var(--icon_color);
|
|
39
45
|
}
|
|
40
46
|
.icon_danger {
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
}
|
|
22
22
|
.title {
|
|
23
23
|
font-family: var(--zd_semibold);
|
|
24
|
+
/* css:theme-validation:ignore */
|
|
24
25
|
color: var(--titleColor);
|
|
25
26
|
}
|
|
26
27
|
.small .title {
|
|
@@ -31,6 +32,7 @@
|
|
|
31
32
|
}
|
|
32
33
|
.linkWrapper,
|
|
33
34
|
.linkDescWrapper {
|
|
35
|
+
/* css:theme-validation:ignore */
|
|
34
36
|
color: var(--descriptionColor);
|
|
35
37
|
}
|
|
36
38
|
.small .linkWrapper,
|
|
@@ -60,11 +62,13 @@
|
|
|
60
62
|
line-height: var(--zd_size19);
|
|
61
63
|
}
|
|
62
64
|
.link {
|
|
65
|
+
/* css:theme-validation:ignore */
|
|
63
66
|
color: var(--linkColor);
|
|
64
67
|
display: inline-block;
|
|
65
68
|
cursor: pointer;
|
|
66
69
|
}
|
|
67
70
|
.link:hover {
|
|
71
|
+
/* css:theme-validation:ignore */
|
|
68
72
|
color: var(--linkHoverColor);
|
|
69
73
|
}
|
|
70
74
|
.children {
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.tertiary_borderStyle {
|
|
51
|
+
/* css:theme-validation:ignore */
|
|
51
52
|
border-bottom: 1px solid var(--borderColor);
|
|
52
53
|
}
|
|
53
54
|
|
|
@@ -149,6 +150,7 @@
|
|
|
149
150
|
|
|
150
151
|
.footer {
|
|
151
152
|
composes: varClass;
|
|
153
|
+
/* css:theme-validation:ignore */
|
|
152
154
|
border-top: 1px solid var(--borderColor);
|
|
153
155
|
}
|
|
154
156
|
|
|
@@ -35,10 +35,22 @@
|
|
|
35
35
|
padding: var(--zd_size2) 0 ;
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
.compact .innerContainer,
|
|
39
|
+
.classic .innerContainer,
|
|
40
|
+
.superCompact .innerContainer {
|
|
41
|
+
/* css:theme-validation:ignore */
|
|
42
|
+
}
|
|
43
|
+
|
|
38
44
|
.compact .innerContainer, .classic .innerContainer, .superCompact .innerContainer {
|
|
39
45
|
border-bottom: 1px dotted var(--listBorder);
|
|
40
46
|
}
|
|
41
47
|
|
|
48
|
+
.compact,
|
|
49
|
+
.classic,
|
|
50
|
+
.superCompact {
|
|
51
|
+
/* css:theme-validation:ignore */
|
|
52
|
+
}
|
|
53
|
+
|
|
42
54
|
[dir=ltr] .compact, [dir=ltr] .classic, [dir=ltr] .superCompact {
|
|
43
55
|
border-left: var(--zd_size2) solid transparent;
|
|
44
56
|
}
|
|
@@ -24,6 +24,8 @@ var _FormAction = _interopRequireDefault(require("../../../FormAction/FormAction
|
|
|
24
24
|
|
|
25
25
|
var _DesktopNotificationHeader = _interopRequireDefault(require("../DesktopNotificationHeader/DesktopNotificationHeader"));
|
|
26
26
|
|
|
27
|
+
var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
|
|
28
|
+
|
|
27
29
|
var _DesktopNotificationModule = _interopRequireDefault(require("../../../version2/notification/DesktopNotification/DesktopNotification.module.css"));
|
|
28
30
|
|
|
29
31
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -84,7 +86,8 @@ function DesktopNotificationUI(props) {
|
|
|
84
86
|
customClass = _props$customClass === void 0 ? {} : _props$customClass,
|
|
85
87
|
_props$i18nKeys = props.i18nKeys,
|
|
86
88
|
i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
|
|
87
|
-
customProps = props.customProps
|
|
89
|
+
customProps = props.customProps,
|
|
90
|
+
responsiveId = props.responsiveId;
|
|
88
91
|
var _i18nKeys$closeTitle = i18nKeys.closeTitle,
|
|
89
92
|
closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
|
|
90
93
|
var containerClass = customClass.containerClass;
|
|
@@ -110,66 +113,82 @@ function DesktopNotificationUI(props) {
|
|
|
110
113
|
var Zindex = isAnimate ? getNextIndex() : null;
|
|
111
114
|
var uiVariantOne = title && (info || secondaryInfo);
|
|
112
115
|
var uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
|
|
116
|
+
|
|
117
|
+
function responsiveFunc(_ref2) {
|
|
118
|
+
var mediaQueryOR = _ref2.mediaQueryOR;
|
|
119
|
+
return {
|
|
120
|
+
uptoTablet: mediaQueryOR([{
|
|
121
|
+
maxWidth: 760
|
|
122
|
+
}])
|
|
123
|
+
};
|
|
124
|
+
}
|
|
125
|
+
|
|
113
126
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
114
127
|
className: _DesktopNotificationModule["default"].parentElement,
|
|
115
128
|
style: needAutoZindex && isAnimate ? {
|
|
116
129
|
zIndex: "".concat(Zindex)
|
|
117
130
|
} : {},
|
|
118
131
|
"data-selector-id": dataSelectorId
|
|
119
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
132
|
+
}, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
|
|
133
|
+
query: responsiveFunc,
|
|
134
|
+
responsiveId: responsiveId
|
|
135
|
+
}, function (_ref3) {
|
|
136
|
+
var uptoTablet = _ref3.uptoTablet;
|
|
137
|
+
return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
|
|
138
|
+
className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, "\n ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass, "\n ").concat(uptoTablet ? _DesktopNotificationModule["default"].tapWidth : _DesktopNotificationModule["default"]["".concat(size)]),
|
|
139
|
+
isCover: false,
|
|
140
|
+
dataId: dataId,
|
|
141
|
+
isInline: uiVariantTwo
|
|
142
|
+
}, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
|
|
143
|
+
type: type,
|
|
144
|
+
title: title,
|
|
145
|
+
variant: titleVariant,
|
|
146
|
+
needIcon: needIcon,
|
|
147
|
+
onClose: onClose,
|
|
148
|
+
closeTitle: closeTitle,
|
|
149
|
+
renderAlertIcon: renderAlertIcon,
|
|
150
|
+
dataId: "".concat(dataId, "_close"),
|
|
151
|
+
needClose: needClose
|
|
152
|
+
})), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
153
|
+
alignBox: "column"
|
|
154
|
+
}, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
155
|
+
flexible: true
|
|
156
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
157
|
+
className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
|
|
158
|
+
}, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
|
|
159
|
+
className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
|
|
160
|
+
}, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
|
|
161
|
+
className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
|
|
162
|
+
}, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
163
|
+
flexible: true
|
|
164
|
+
}, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
165
|
+
className: _DesktopNotificationModule["default"].footer
|
|
166
|
+
}, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
167
|
+
className: "".concat(_DesktopNotificationModule["default"].message)
|
|
168
|
+
}, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
|
|
169
|
+
size: "small",
|
|
170
|
+
paddingLeftSize: "xmedium"
|
|
171
|
+
}, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
172
|
+
onClick: onClickSubmit,
|
|
173
|
+
"data-id": "".concat(dataId, "_submitButton"),
|
|
174
|
+
"data-test-id": "".concat(dataId, "_submitButton")
|
|
175
|
+
}, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
176
|
+
align: "vertical",
|
|
177
|
+
alignBox: "row"
|
|
178
|
+
}, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
179
|
+
flexible: true
|
|
180
|
+
}, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
181
|
+
flexible: true
|
|
182
|
+
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
183
|
+
text: submitText,
|
|
184
|
+
palette: submitType ? submitType : buttonPalette
|
|
185
|
+
})))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
186
|
+
text: cancelText,
|
|
187
|
+
palette: "secondary",
|
|
188
|
+
dataId: "".concat(dataId, "_cancelButton"),
|
|
189
|
+
onClick: onClickCancel
|
|
190
|
+
})) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null);
|
|
191
|
+
}));
|
|
173
192
|
}
|
|
174
193
|
|
|
175
194
|
DesktopNotificationUI.propTypes = _propTypes.DesktopNotificationUI_propTypes;
|
|
@@ -4,6 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _Config = require("../../../../Provider/Config");
|
|
9
|
+
|
|
7
10
|
var _default = {
|
|
8
11
|
isMore: false,
|
|
9
12
|
isAnimate: true,
|
|
@@ -17,6 +20,7 @@ var _default = {
|
|
|
17
20
|
isShrinkView: false,
|
|
18
21
|
needClose: true,
|
|
19
22
|
customProps: {},
|
|
20
|
-
dataSelectorId: 'desktopNotification'
|
|
23
|
+
dataSelectorId: 'desktopNotification',
|
|
24
|
+
responsiveId: (0, _Config.getDotLibraryConfig)('desktopNotificationResponsiveId')
|
|
21
25
|
};
|
|
22
26
|
exports["default"] = _default;
|
|
@@ -14,7 +14,8 @@ var propTypes = {
|
|
|
14
14
|
onPortalClose: _propTypes["default"].func,
|
|
15
15
|
autoClose: _propTypes["default"].bool,
|
|
16
16
|
hideTime: _propTypes["default"].string,
|
|
17
|
-
Element: _propTypes["default"].element
|
|
17
|
+
Element: _propTypes["default"].element,
|
|
18
|
+
responsiveId: _propTypes["default"].string
|
|
18
19
|
};
|
|
19
20
|
exports.propTypes = propTypes;
|
|
20
21
|
var DesktopNotificationUI_propTypes = {
|
|
@@ -17,6 +17,10 @@ var _AlertClose = _interopRequireDefault(require("../../alert/AlertClose/AlertCl
|
|
|
17
17
|
|
|
18
18
|
var _AlertIcons = _interopRequireDefault(require("../../alert/alertIcons/AlertIcons"));
|
|
19
19
|
|
|
20
|
+
var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
|
|
21
|
+
|
|
22
|
+
var _Typography = _interopRequireDefault(require("@zohodesk/components/es/v1/Typography/Typography"));
|
|
23
|
+
|
|
20
24
|
var _DesktopNotificationHeaderModule = _interopRequireDefault(require("../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css"));
|
|
21
25
|
|
|
22
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -31,35 +35,65 @@ function DesktopNotificationHeader(props) {
|
|
|
31
35
|
needIcon = props.needIcon,
|
|
32
36
|
title = props.title,
|
|
33
37
|
renderAlertIcon = props.renderAlertIcon,
|
|
34
|
-
needClose = props.needClose
|
|
38
|
+
needClose = props.needClose,
|
|
39
|
+
responsiveId = props.responsiveId;
|
|
40
|
+
|
|
41
|
+
function responsiveFunc(_ref) {
|
|
42
|
+
var mediaQueryOR = _ref.mediaQueryOR;
|
|
43
|
+
return {
|
|
44
|
+
uptoTablet: mediaQueryOR([{
|
|
45
|
+
maxWidth: 760
|
|
46
|
+
}])
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
|
|
35
50
|
return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
36
51
|
align: "vertical",
|
|
37
52
|
alignBox: "row",
|
|
38
53
|
className: "".concat(_DesktopNotificationHeaderModule["default"].container, " ").concat(_DesktopNotificationHeaderModule["default"][variant], " ").concat(_DesktopNotificationHeaderModule["default"][type]),
|
|
39
54
|
isCover: false,
|
|
40
55
|
wrap: "wrap"
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
}, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
|
|
57
|
+
query: responsiveFunc,
|
|
58
|
+
responsiveId: responsiveId
|
|
59
|
+
}, function (_ref2) {
|
|
60
|
+
var uptoTablet = _ref2.uptoTablet;
|
|
61
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
62
|
+
className: _DesktopNotificationHeaderModule["default"].iconContainer
|
|
63
|
+
}, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
|
|
64
|
+
type: type
|
|
65
|
+
})) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
66
|
+
flexible: true
|
|
67
|
+
}, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
68
|
+
alignBox: "row",
|
|
69
|
+
align: "center"
|
|
70
|
+
}, variant === 'primary' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
71
|
+
shrink: true
|
|
72
|
+
}, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
|
|
73
|
+
$i18n_dataTitle: title,
|
|
74
|
+
$ui_className: _DesktopNotificationHeaderModule["default"].title,
|
|
75
|
+
$ui_tagName: "h1",
|
|
76
|
+
$ui_size: uptoTablet ? '16' : '18',
|
|
77
|
+
$ui_lineHeight: "20",
|
|
78
|
+
$ui_weight: "bold",
|
|
79
|
+
$flag_reset: true,
|
|
80
|
+
$ui_wordBreak: "breakWord"
|
|
81
|
+
}, title)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
82
|
+
className: "".concat(_DesktopNotificationHeaderModule["default"].infoText)
|
|
83
|
+
}, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
|
|
84
|
+
$i18n_dataTitle: title,
|
|
85
|
+
$ui_className: _DesktopNotificationHeaderModule["default"].title,
|
|
86
|
+
$ui_size: "14",
|
|
87
|
+
$ui_wordBreak: "breakWord"
|
|
88
|
+
}, title)))), needClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
|
|
89
|
+
className: _DesktopNotificationHeaderModule["default"].close
|
|
90
|
+
}, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
|
|
91
|
+
onClose: onClose,
|
|
92
|
+
dataTitle: closeTitle,
|
|
93
|
+
dataId: dataId,
|
|
94
|
+
type: "light"
|
|
95
|
+
})) : null);
|
|
96
|
+
}));
|
|
63
97
|
}
|
|
64
98
|
|
|
65
99
|
DesktopNotificationHeader.propTypes = _propTypes["default"];
|
|
@@ -4,9 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
+
|
|
8
|
+
var _Config = require("../../../../Provider/Config");
|
|
9
|
+
|
|
7
10
|
var _default = {
|
|
8
11
|
needIcon: true,
|
|
9
12
|
variant: 'primary',
|
|
10
|
-
needClose: true
|
|
13
|
+
needClose: true,
|
|
14
|
+
responsiveId: (0, _Config.getDotLibraryConfig)('desktopNotificationResponsiveId')
|
|
11
15
|
};
|
|
12
16
|
exports["default"] = _default;
|
|
@@ -18,6 +18,7 @@ var _default = {
|
|
|
18
18
|
title: _propTypes["default"].string,
|
|
19
19
|
renderAlertIcon: _propTypes["default"].func,
|
|
20
20
|
type: _propTypes["default"].oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
|
|
21
|
-
variant: _propTypes["default"].oneOf(['primary', 'secondary'])
|
|
21
|
+
variant: _propTypes["default"].oneOf(['primary', 'secondary']),
|
|
22
|
+
responsiveId: _propTypes["default"].string
|
|
22
23
|
};
|
|
23
24
|
exports["default"] = _default;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
|
-
exports["default"] =
|
|
6
|
+
exports["default"] = Button;
|
|
9
7
|
|
|
10
8
|
var _react = _interopRequireDefault(require("react"));
|
|
11
9
|
|
|
@@ -19,65 +17,21 @@ var _HeaderButtonModule = _interopRequireDefault(require("../../../../setup/head
|
|
|
19
17
|
|
|
20
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
21
19
|
|
|
22
|
-
function
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
20
|
+
function Button(props) {
|
|
21
|
+
var palette = props.palette,
|
|
22
|
+
text = props.text,
|
|
23
|
+
onClick = props.onClick,
|
|
24
|
+
id = props.id;
|
|
25
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
26
|
+
className: _HeaderButtonModule["default"].container
|
|
27
|
+
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
28
|
+
id: id,
|
|
29
|
+
onClick: onClick,
|
|
30
|
+
palette: palette,
|
|
31
|
+
size: "medium",
|
|
32
|
+
text: text
|
|
33
|
+
}));
|
|
34
|
+
}
|
|
37
35
|
|
|
38
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
39
|
-
|
|
40
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
41
|
-
|
|
42
|
-
var Button = /*#__PURE__*/function (_React$Component) {
|
|
43
|
-
_inherits(Button, _React$Component);
|
|
44
|
-
|
|
45
|
-
var _super = _createSuper(Button);
|
|
46
|
-
|
|
47
|
-
function Button(props) {
|
|
48
|
-
_classCallCheck(this, Button);
|
|
49
|
-
|
|
50
|
-
return _super.call(this, props);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
_createClass(Button, [{
|
|
54
|
-
key: "render",
|
|
55
|
-
value: function render() {
|
|
56
|
-
var _this$props = this.props,
|
|
57
|
-
palette = _this$props.palette,
|
|
58
|
-
text = _this$props.text,
|
|
59
|
-
onClick = _this$props.onClick,
|
|
60
|
-
id = _this$props.id;
|
|
61
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
62
|
-
className: _HeaderButtonModule["default"].container
|
|
63
|
-
}, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
64
|
-
id: id,
|
|
65
|
-
onClick: onClick,
|
|
66
|
-
palette: palette,
|
|
67
|
-
size: "medium",
|
|
68
|
-
text: text
|
|
69
|
-
}));
|
|
70
|
-
}
|
|
71
|
-
}]);
|
|
72
|
-
|
|
73
|
-
return Button;
|
|
74
|
-
}(_react["default"].Component);
|
|
75
|
-
|
|
76
|
-
exports["default"] = Button;
|
|
77
36
|
Button.defaultProps = _defaultProps.defaultProps;
|
|
78
|
-
Button.propTypes = _propTypes.propTypes;
|
|
79
|
-
// Button.docs = {
|
|
80
|
-
// componentGroup: 'Header',
|
|
81
|
-
// folderName: 'Setup'
|
|
82
|
-
// };
|
|
83
|
-
// }
|
|
37
|
+
Button.propTypes = _propTypes.propTypes;
|