@itcase/ui 1.2.12 → 1.2.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Group-Buo_BxGT.js → Group-9Mpk5tQD.js} +8 -4
- package/dist/{Group-BXfLh7AZ.js → Group-C9TsGwJy.js} +8 -4
- package/dist/cjs/components/CookiesWarning.js +1 -1
- package/dist/cjs/components/FormField.js +1 -1
- package/dist/cjs/components/Group.js +1 -1
- package/dist/cjs/components/Notification.js +1 -0
- package/dist/cjs/components/Panel.js +1 -1
- package/dist/cjs/components/Response.js +1 -1
- package/dist/cjs/components/Select.js +1 -1
- package/dist/cjs/context/Notifications.js +128 -144
- package/dist/cjs/context/UIContext.js +22 -31
- package/dist/cjs/hooks/styleAttributes.interface.js +2 -0
- package/dist/cjs/hooks/useDeviceTargetClass.js +1 -0
- package/dist/cjs/hooks/useStyles.js +1 -0
- package/dist/cjs/hooks.js +2 -0
- package/dist/components/CookiesWarning.js +1 -1
- package/dist/components/FormField.js +1 -1
- package/dist/components/Group.js +1 -1
- package/dist/components/Notification.js +1 -0
- package/dist/components/Panel.js +1 -1
- package/dist/components/Response.js +1 -1
- package/dist/components/Select.js +1 -1
- package/dist/context/Notifications.js +129 -145
- package/dist/context/UIContext.js +23 -32
- package/dist/css/components/DatePicker/DatePicker.css +26 -32
- package/dist/css/components/Group/Group.css +24 -0
- package/dist/css/styles/mediaqueries.css +1 -1
- package/dist/hooks/styleAttributes.interface.js +1 -0
- package/dist/hooks/useDeviceTargetClass.js +1 -0
- package/dist/hooks/useStyles.js +1 -0
- package/dist/hooks.js +1 -0
- package/dist/types/components/Page/index.d.ts +42 -0
- package/dist/types/constants/componentProps/align.d.ts +2 -0
- package/dist/types/constants/componentProps/alignDirection.d.ts +2 -0
- package/dist/types/constants/componentProps/fill.d.ts +2 -0
- package/dist/types/constants/componentProps/horizontalResizeMode.d.ts +2 -0
- package/dist/types/constants/componentProps/position.d.ts +2 -0
- package/dist/types/constants/componentProps/verticalResizeMode.d.ts +2 -0
- package/dist/types/context/Notifications.d.ts +14 -11
- package/dist/types/context/Notifications.interface.d.ts +25 -0
- package/dist/types/context/UIContext.d.ts +5 -4
- package/dist/types/context/index.d.ts +2 -0
- package/package.json +19 -18
- package/dist/cjs/components/Page.js +0 -416
- package/dist/components/Page.js +0 -414
|
@@ -12,7 +12,7 @@ var groupConfig = {
|
|
|
12
12
|
},
|
|
13
13
|
};
|
|
14
14
|
function Group(props) {
|
|
15
|
-
var id = props.id,
|
|
15
|
+
var id = props.id, children = props.children, appearance = props.appearance, className = props.className, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, name = props.name, set = props.set, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
|
|
16
16
|
var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
17
17
|
prefix: 'group_content-align_',
|
|
18
18
|
propsKey: 'contentAlign',
|
|
@@ -97,15 +97,19 @@ function Group(props) {
|
|
|
97
97
|
prefix: 'group_text-color_hover_',
|
|
98
98
|
propsKey: 'textColorHover',
|
|
99
99
|
});
|
|
100
|
+
var iconFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
|
|
101
|
+
prefix: 'group_icon_fill_hover_',
|
|
102
|
+
propsKey: 'iconFillHover',
|
|
103
|
+
});
|
|
100
104
|
// @ts-expect-error
|
|
101
105
|
var _b = useStyles.useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
|
|
102
106
|
// prettier-ignore
|
|
103
107
|
var appearanceConfig = (appearance && groupConfig.appearance && groupConfig.appearance[appearance]);
|
|
104
|
-
return (jsxRuntime.jsx(Tag, {
|
|
108
|
+
return (jsxRuntime.jsx(Tag, { className: clsx(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass ||
|
|
105
109
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
|
|
106
110
|
"group_direction_".concat(appearanceConfig.direction)
|
|
107
111
|
.replace(/([A-Z])/g, '-$1')
|
|
108
|
-
.toLowerCase()), alignClass, textColorClass, textColorActiveClass, textColorHoverClass, fillClass ||
|
|
112
|
+
.toLowerCase()), alignClass, textColorClass, textColorActiveClass, textColorHoverClass, iconFillHoverClass, fillClass ||
|
|
109
113
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
|
|
110
114
|
"fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
|
|
111
115
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
|
|
@@ -117,7 +121,7 @@ function Group(props) {
|
|
|
117
121
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
|
|
118
122
|
"border-width_".concat(appearanceConfig.borderWidth)
|
|
119
123
|
.replace(/([A-Z])/g, '-$1')
|
|
120
|
-
.toLowerCase()), borderTypeClass, elevationClass, justifyContentClass), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
|
|
124
|
+
.toLowerCase()), borderTypeClass, elevationClass, justifyContentClass), name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
|
|
121
125
|
}
|
|
122
126
|
Group.defaultProps = {
|
|
123
127
|
tag: 'div',
|
|
@@ -10,7 +10,7 @@ var groupConfig = {
|
|
|
10
10
|
},
|
|
11
11
|
};
|
|
12
12
|
function Group(props) {
|
|
13
|
-
var id = props.id,
|
|
13
|
+
var id = props.id, children = props.children, appearance = props.appearance, className = props.className, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, name = props.name, set = props.set, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
|
|
14
14
|
var contentAlignClass = useDeviceTargetClass(props, {
|
|
15
15
|
prefix: 'group_content-align_',
|
|
16
16
|
propsKey: 'contentAlign',
|
|
@@ -95,15 +95,19 @@ function Group(props) {
|
|
|
95
95
|
prefix: 'group_text-color_hover_',
|
|
96
96
|
propsKey: 'textColorHover',
|
|
97
97
|
});
|
|
98
|
+
var iconFillHoverClass = useDeviceTargetClass(props, {
|
|
99
|
+
prefix: 'group_icon_fill_hover_',
|
|
100
|
+
propsKey: 'iconFillHover',
|
|
101
|
+
});
|
|
98
102
|
// @ts-expect-error
|
|
99
103
|
var _b = useStyles(props), groupStyles = _b.styles, groupWrapperStyles = _b.wrapper;
|
|
100
104
|
// prettier-ignore
|
|
101
105
|
var appearanceConfig = (appearance && groupConfig.appearance && groupConfig.appearance[appearance]);
|
|
102
|
-
return (jsx(Tag, {
|
|
106
|
+
return (jsx(Tag, { className: clsx(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass ||
|
|
103
107
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.direction) &&
|
|
104
108
|
"group_direction_".concat(appearanceConfig.direction)
|
|
105
109
|
.replace(/([A-Z])/g, '-$1')
|
|
106
|
-
.toLowerCase()), alignClass, textColorClass, textColorActiveClass, textColorHoverClass, fillClass ||
|
|
110
|
+
.toLowerCase()), alignClass, textColorClass, textColorActiveClass, textColorHoverClass, iconFillHoverClass, fillClass ||
|
|
107
111
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
|
|
108
112
|
"fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
|
|
109
113
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
|
|
@@ -115,7 +119,7 @@ function Group(props) {
|
|
|
115
119
|
((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
|
|
116
120
|
"border-width_".concat(appearanceConfig.borderWidth)
|
|
117
121
|
.replace(/([A-Z])/g, '-$1')
|
|
118
|
-
.toLowerCase()), borderTypeClass, elevationClass, justifyContentClass), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
|
|
122
|
+
.toLowerCase()), borderTypeClass, elevationClass, justifyContentClass), name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
|
|
119
123
|
}
|
|
120
124
|
Group.defaultProps = {
|
|
121
125
|
tag: 'div',
|
|
@@ -6,7 +6,7 @@ var clsx = require('clsx');
|
|
|
6
6
|
var Cookies = require('js-cookie');
|
|
7
7
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
8
8
|
var Button = require('../../Button-VFc2pmvE.js');
|
|
9
|
-
var Group = require('../../Group-
|
|
9
|
+
var Group = require('../../Group-9Mpk5tQD.js');
|
|
10
10
|
var Text = require('../../Text-_YhyTsQ1.js');
|
|
11
11
|
require('lodash/castArray');
|
|
12
12
|
require('lodash/camelCase');
|
|
@@ -13,7 +13,7 @@ require('react-select');
|
|
|
13
13
|
var index = require('./Select.js');
|
|
14
14
|
require('react');
|
|
15
15
|
require('../../Badge-2JkquAEb.js');
|
|
16
|
-
require('../../Group-
|
|
16
|
+
require('../../Group-9Mpk5tQD.js');
|
|
17
17
|
var Switch = require('../../Switch-B5yVEqxz.js');
|
|
18
18
|
require('react-inlinesvg');
|
|
19
19
|
require('../../Link-BoJdm1hz.js');
|
|
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var clsx = require('clsx');
|
|
5
5
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
6
6
|
var useStyles = require('../hooks/useStyles.js');
|
|
7
|
-
var Group = require('../../Group-
|
|
7
|
+
var Group = require('../../Group-9Mpk5tQD.js');
|
|
8
8
|
var Text = require('../../Text-_YhyTsQ1.js');
|
|
9
9
|
require('react');
|
|
10
10
|
require('lodash/castArray');
|
|
@@ -7,7 +7,7 @@ var SVG = require('react-inlinesvg');
|
|
|
7
7
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
8
8
|
var useStyles = require('../hooks/useStyles.js');
|
|
9
9
|
var Button = require('../../Button-VFc2pmvE.js');
|
|
10
|
-
var Group = require('../../Group-
|
|
10
|
+
var Group = require('../../Group-9Mpk5tQD.js');
|
|
11
11
|
var Text = require('../../Text-_YhyTsQ1.js');
|
|
12
12
|
var Title = require('../../Title-zwP6c2U2.js');
|
|
13
13
|
require('lodash/castArray');
|
|
@@ -10,7 +10,7 @@ var CreatableSelect = require('react-select/creatable');
|
|
|
10
10
|
var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
|
|
11
11
|
var Text = require('../../Text-_YhyTsQ1.js');
|
|
12
12
|
var Badge = require('../../Badge-2JkquAEb.js');
|
|
13
|
-
var Group = require('../../Group-
|
|
13
|
+
var Group = require('../../Group-9Mpk5tQD.js');
|
|
14
14
|
var Divider = require('../../Divider-BjB5MD6u.js');
|
|
15
15
|
require('react-inlinesvg');
|
|
16
16
|
require('../hooks/useStyles.js');
|
|
@@ -1,168 +1,152 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var tslib_es6 = require('../../tslib.es6-CCZ3TN_7.js');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
6
|
var React = require('react');
|
|
5
7
|
var PropTypes = require('prop-types');
|
|
6
8
|
var uuid = require('uuid');
|
|
7
9
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
var STATUSES = {
|
|
11
|
+
error: 'error',
|
|
12
|
+
info: 'info',
|
|
13
|
+
success: 'success',
|
|
14
|
+
warning: 'warning',
|
|
13
15
|
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
var NotificationsContext = React.createContext([]);
|
|
17
|
+
var NotificationsAPIContext = React.createContext({
|
|
18
|
+
hideNotifications: function (targetId) { },
|
|
19
|
+
notificationStatuses: STATUSES,
|
|
20
|
+
showNotification: function (notification, onClose) { },
|
|
19
21
|
});
|
|
20
22
|
function NotificationsProvider(props) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
// If not target, then nothing to hide
|
|
33
|
-
if (!targetId) {
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
setNotificationsList(prevState => {
|
|
37
|
-
const newState = prevState.filter(notificationItem => {
|
|
38
|
-
// Check on need to hide, if current notification is target for hide
|
|
39
|
-
const isNeedToHide = String(notificationItem.id) === String(targetId);
|
|
40
|
-
// Callback for close if exists
|
|
41
|
-
if (isNeedToHide) {
|
|
42
|
-
clearTimeout(notificationItem._closeTimeout);
|
|
43
|
-
notificationItem.onClose && notificationItem.onClose();
|
|
23
|
+
var children = props.children, _a = props.initialNotificationsList, initialNotificationsList = _a === void 0 ? [] : _a;
|
|
24
|
+
var _b = React.useState(function () {
|
|
25
|
+
// We need to set id to every notification item and original list also be have new id's
|
|
26
|
+
return (initialNotificationsList || []).map(function (notificationItem) {
|
|
27
|
+
return createNotification(notificationItem, notificationItem.onClose);
|
|
28
|
+
});
|
|
29
|
+
}), notificationsList = _b[0], setNotificationsList = _b[1];
|
|
30
|
+
var hideNotifications = React.useCallback(function (targetId) {
|
|
31
|
+
// If not target, then nothing to hide
|
|
32
|
+
if (!targetId) {
|
|
33
|
+
return;
|
|
44
34
|
}
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
35
|
+
setNotificationsList(function (prevNotificationsList) {
|
|
36
|
+
var newState = prevNotificationsList.filter(function (notificationItem) {
|
|
37
|
+
// Check on need to hide, if current notification is target for hide
|
|
38
|
+
var isNeedToHide = String(notificationItem.id) === String(targetId);
|
|
39
|
+
// Callback for close if exists
|
|
40
|
+
if (isNeedToHide) {
|
|
41
|
+
clearTimeout(notificationItem._closeTimeout);
|
|
42
|
+
// @typescript-eslint/no-unused-expressions
|
|
43
|
+
notificationItem.onClose && notificationItem.onClose();
|
|
44
|
+
}
|
|
45
|
+
// Save in state if no need to hide
|
|
46
|
+
return !isNeedToHide;
|
|
47
|
+
});
|
|
48
|
+
// Set new notifications list without target item to state
|
|
49
|
+
return newState;
|
|
50
|
+
});
|
|
51
|
+
}, []);
|
|
52
|
+
var showNotification = React.useCallback(function (notification, onClose) {
|
|
53
|
+
var newNotificationItem = createNotification(notification, onClose);
|
|
54
|
+
setNotificationsList(function (prevNotificationsList) {
|
|
55
|
+
var newState = prevNotificationsList.slice();
|
|
56
|
+
var existsNotificationIndex = newState.findIndex(function (notificationItem) { return String(notificationItem.id) === String(newNotificationItem.id); });
|
|
57
|
+
// Add new notification
|
|
58
|
+
if (existsNotificationIndex === -1) {
|
|
59
|
+
return tslib_es6.__spreadArray(tslib_es6.__spreadArray([], newState, true), [newNotificationItem], false);
|
|
60
|
+
}
|
|
61
|
+
// Or update exists notification
|
|
62
|
+
var updatedNotificationItem = newState[existsNotificationIndex];
|
|
63
|
+
// Clear timeout to avoid close event for updated notification
|
|
64
|
+
clearTimeout(updatedNotificationItem._closeTimeout);
|
|
65
|
+
updatedNotificationItem._closeTimeout = undefined;
|
|
66
|
+
// Replace exists notification by new one
|
|
67
|
+
newState[existsNotificationIndex] = newNotificationItem;
|
|
68
|
+
return newState;
|
|
69
|
+
});
|
|
70
|
+
if (newNotificationItem.closeByTime) {
|
|
71
|
+
newNotificationItem._closeTimeout = setTimeout(function () { return hideNotifications(newNotificationItem.id); }, newNotificationItem.closeByTime);
|
|
72
|
+
}
|
|
73
|
+
return newNotificationItem;
|
|
74
|
+
},
|
|
75
|
+
// "hideNotifications" is never changed
|
|
76
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
77
|
+
[]);
|
|
78
|
+
var notificationsAPI = React.useMemo(function () { return ({
|
|
79
|
+
hideNotifications: hideNotifications,
|
|
80
|
+
notificationStatuses: STATUSES,
|
|
81
|
+
showNotification: showNotification,
|
|
82
|
+
}); },
|
|
83
|
+
// Functions is never changes, no sense to set as dependencies
|
|
86
84
|
// eslint-disable-next-line
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
85
|
+
[]);
|
|
86
|
+
React.useEffect(function () {
|
|
87
|
+
// Set timeout for initial notifications list one time on first render
|
|
88
|
+
notificationsList.forEach(function (notificationItem) {
|
|
89
|
+
if (notificationItem.closeByTime) {
|
|
90
|
+
setTimeout(function () { return hideNotifications(notificationItem.id); }, notificationItem.closeByTime);
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
// eslint-disable-next-line
|
|
94
|
+
}, []);
|
|
95
|
+
return (jsxRuntime.jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsxRuntime.jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
|
|
93
96
|
}
|
|
94
97
|
NotificationsProvider.propTypes = {
|
|
95
|
-
|
|
96
|
-
|
|
98
|
+
children: PropTypes.any,
|
|
99
|
+
initialNotificationsList: PropTypes.array,
|
|
97
100
|
};
|
|
98
101
|
function useNotifications() {
|
|
99
|
-
|
|
102
|
+
return React.useContext(NotificationsContext);
|
|
100
103
|
}
|
|
101
104
|
function useNotificationsAPI() {
|
|
102
|
-
|
|
105
|
+
return React.useContext(NotificationsAPIContext);
|
|
103
106
|
}
|
|
104
107
|
function createNotification(notification, onClose) {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
id = notification.id ?? id;
|
|
116
|
-
title = notification.title ?? title;
|
|
117
|
-
text = notification.text ?? text;
|
|
118
|
-
status = notification.status ?? status;
|
|
119
|
-
closeByTime = notification.closeByTime ?? closeByTime;
|
|
120
|
-
}
|
|
121
|
-
switch (status) {
|
|
122
|
-
case 'success':
|
|
123
|
-
textColor = 'successTextPrimary';
|
|
124
|
-
break;
|
|
125
|
-
case 'info':
|
|
126
|
-
textColor = 'infoTextPrimary';
|
|
127
|
-
break;
|
|
128
|
-
case 'error':
|
|
129
|
-
textColor = 'errorTextPrimary';
|
|
130
|
-
break;
|
|
131
|
-
case 'warning':
|
|
132
|
-
textColor = 'warningTextPrimary';
|
|
133
|
-
break;
|
|
134
|
-
}
|
|
135
|
-
return {
|
|
136
|
-
id: id,
|
|
137
|
-
title: title,
|
|
138
|
-
text: text,
|
|
139
|
-
status: status,
|
|
140
|
-
textColor: textColor,
|
|
141
|
-
closeByTime: closeByTime,
|
|
142
|
-
onClose: onClose
|
|
143
|
-
};
|
|
144
|
-
}
|
|
145
|
-
NotificationsProvider.__docgenInfo = {
|
|
146
|
-
"description": "",
|
|
147
|
-
"methods": [],
|
|
148
|
-
"displayName": "NotificationsProvider",
|
|
149
|
-
"props": {
|
|
150
|
-
"children": {
|
|
151
|
-
"description": "",
|
|
152
|
-
"type": {
|
|
153
|
-
"name": "any"
|
|
154
|
-
},
|
|
155
|
-
"required": false
|
|
156
|
-
},
|
|
157
|
-
"initialNotificationsList": {
|
|
158
|
-
"description": "",
|
|
159
|
-
"type": {
|
|
160
|
-
"name": "array"
|
|
161
|
-
},
|
|
162
|
-
"required": false
|
|
108
|
+
var _a, _b, _c, _d, _e;
|
|
109
|
+
// Default notification item properties
|
|
110
|
+
var id = uuid.v4().split('-')[0];
|
|
111
|
+
var title = '';
|
|
112
|
+
var text = '';
|
|
113
|
+
var status = STATUSES.warning;
|
|
114
|
+
var closeByTime = 4500;
|
|
115
|
+
var textColor = '';
|
|
116
|
+
if (typeof notification === 'string') {
|
|
117
|
+
text = notification;
|
|
163
118
|
}
|
|
164
|
-
|
|
165
|
-
|
|
119
|
+
else if (typeof notification === 'object') {
|
|
120
|
+
id = (_a = notification.id) !== null && _a !== void 0 ? _a : id;
|
|
121
|
+
title = (_b = notification.title) !== null && _b !== void 0 ? _b : title;
|
|
122
|
+
text = (_c = notification.text) !== null && _c !== void 0 ? _c : text;
|
|
123
|
+
status = (_d = notification.status) !== null && _d !== void 0 ? _d : status;
|
|
124
|
+
closeByTime = (_e = notification.closeByTime) !== null && _e !== void 0 ? _e : closeByTime;
|
|
125
|
+
}
|
|
126
|
+
switch (status) {
|
|
127
|
+
case 'success':
|
|
128
|
+
textColor = 'successTextPrimary';
|
|
129
|
+
break;
|
|
130
|
+
case 'info':
|
|
131
|
+
textColor = 'infoTextPrimary';
|
|
132
|
+
break;
|
|
133
|
+
case 'error':
|
|
134
|
+
textColor = 'errorTextPrimary';
|
|
135
|
+
break;
|
|
136
|
+
case 'warning':
|
|
137
|
+
textColor = 'warningTextPrimary';
|
|
138
|
+
break;
|
|
139
|
+
}
|
|
140
|
+
return {
|
|
141
|
+
id: id,
|
|
142
|
+
closeByTime: closeByTime,
|
|
143
|
+
status: status,
|
|
144
|
+
text: text,
|
|
145
|
+
textColor: textColor,
|
|
146
|
+
title: title,
|
|
147
|
+
onClose: onClose,
|
|
148
|
+
};
|
|
149
|
+
}
|
|
166
150
|
|
|
167
151
|
exports.NotificationsProvider = NotificationsProvider;
|
|
168
152
|
exports.useNotifications = useNotifications;
|
|
@@ -1,50 +1,41 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
5
|
var React = require('react');
|
|
5
6
|
var PropTypes = require('prop-types');
|
|
6
7
|
var useMediaQueries = require('../hooks/useMediaQueries.js');
|
|
7
8
|
require('react-responsive');
|
|
8
9
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
var UserDeviceContext = React.createContext({
|
|
11
|
+
isMobile: false,
|
|
12
|
+
isTablet: false,
|
|
13
|
+
isDesktop: false,
|
|
13
14
|
});
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
var SiteMenuContext = React.createContext({
|
|
16
|
+
isSiteMenuOpen: false,
|
|
17
|
+
setIsSiteMenuOpen: function () { },
|
|
17
18
|
});
|
|
18
19
|
function useUserDeviceContext() {
|
|
19
|
-
|
|
20
|
+
return React.useContext(UserDeviceContext);
|
|
20
21
|
}
|
|
21
22
|
function useSiteMenuContext() {
|
|
22
|
-
|
|
23
|
+
return React.useContext(SiteMenuContext);
|
|
23
24
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const siteMenuContextState = React.useMemo(() => ({
|
|
31
|
-
isSiteMenuOpen,
|
|
32
|
-
setIsSiteMenuOpen
|
|
33
|
-
}), [isSiteMenuOpen]);
|
|
34
|
-
const mediaQueriesDevices = useMediaQueries.useMediaQueries(userDeviceState);
|
|
35
|
-
return /*#__PURE__*/React.createElement(UserDeviceContext.Provider, {
|
|
36
|
-
value: mediaQueriesDevices
|
|
37
|
-
}, /*#__PURE__*/React.createElement(SiteMenuContext.Provider, {
|
|
38
|
-
value: siteMenuContextState
|
|
39
|
-
}, children));
|
|
25
|
+
var UIProvider = React.memo(function UIProvider(props) {
|
|
26
|
+
var children = props.children, _a = props.userDeviceState, userDeviceState = _a === void 0 ? {} : _a;
|
|
27
|
+
var _b = React.useState(false), isSiteMenuOpen = _b[0], setIsSiteMenuOpen = _b[1];
|
|
28
|
+
var siteMenuContextState = React.useMemo(function () { return ({ isSiteMenuOpen: isSiteMenuOpen, setIsSiteMenuOpen: setIsSiteMenuOpen }); }, [isSiteMenuOpen]);
|
|
29
|
+
var mediaQueriesDevices = useMediaQueries.useMediaQueries(userDeviceState);
|
|
30
|
+
return (jsxRuntime.jsx(UserDeviceContext.Provider, { value: mediaQueriesDevices, children: jsxRuntime.jsx(SiteMenuContext.Provider, { value: siteMenuContextState, children: children }) }));
|
|
40
31
|
});
|
|
41
32
|
UIProvider.propTypes = {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
33
|
+
children: PropTypes.any,
|
|
34
|
+
userDeviceState: PropTypes.shape({
|
|
35
|
+
isMobile: PropTypes.bool,
|
|
36
|
+
isTablet: PropTypes.bool,
|
|
37
|
+
isDesktop: PropTypes.bool,
|
|
38
|
+
}),
|
|
48
39
|
};
|
|
49
40
|
|
|
50
41
|
exports.UIProvider = UIProvider;
|
|
@@ -4,6 +4,7 @@ var React = require('react');
|
|
|
4
4
|
var castArray = require('lodash/castArray');
|
|
5
5
|
var camelCase = require('lodash/camelCase');
|
|
6
6
|
var UIContext = require('../context/UIContext.js');
|
|
7
|
+
require('react/jsx-runtime');
|
|
7
8
|
require('prop-types');
|
|
8
9
|
require('./useMediaQueries.js');
|
|
9
10
|
require('react-responsive');
|
|
@@ -6,6 +6,7 @@ var maxBy = require('lodash/maxBy');
|
|
|
6
6
|
var upperFirst = require('lodash/upperFirst');
|
|
7
7
|
var UIContext = require('../context/UIContext.js');
|
|
8
8
|
var styleAttributes = require('./styleAttributes.js');
|
|
9
|
+
require('react/jsx-runtime');
|
|
9
10
|
require('prop-types');
|
|
10
11
|
require('./useMediaQueries.js');
|
|
11
12
|
require('react-responsive');
|
|
@@ -4,7 +4,7 @@ import clsx from 'clsx';
|
|
|
4
4
|
import Cookies from 'js-cookie';
|
|
5
5
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
6
6
|
import { B as Button } from '../Button-YvFWfIzn.js';
|
|
7
|
-
import { G as Group } from '../Group-
|
|
7
|
+
import { G as Group } from '../Group-C9TsGwJy.js';
|
|
8
8
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
9
9
|
import 'lodash/castArray';
|
|
10
10
|
import 'lodash/camelCase';
|
|
@@ -11,7 +11,7 @@ import 'react-select';
|
|
|
11
11
|
import { SelectInput } from './Select.js';
|
|
12
12
|
import 'react';
|
|
13
13
|
import '../Badge-CrhdvxY6.js';
|
|
14
|
-
import '../Group-
|
|
14
|
+
import '../Group-C9TsGwJy.js';
|
|
15
15
|
import { S as Switch } from '../Switch-DEXsrPCo.js';
|
|
16
16
|
import 'react-inlinesvg';
|
|
17
17
|
import '../Link-BSquFKSX.js';
|
package/dist/components/Group.js
CHANGED
package/dist/components/Panel.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
4
4
|
import { useStyles } from '../hooks/useStyles.js';
|
|
5
|
-
import { G as Group } from '../Group-
|
|
5
|
+
import { G as Group } from '../Group-C9TsGwJy.js';
|
|
6
6
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
7
7
|
import 'react';
|
|
8
8
|
import 'lodash/castArray';
|
|
@@ -5,7 +5,7 @@ import SVG from 'react-inlinesvg';
|
|
|
5
5
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
6
6
|
import { useStyles } from '../hooks/useStyles.js';
|
|
7
7
|
import { B as Button } from '../Button-YvFWfIzn.js';
|
|
8
|
-
import { G as Group } from '../Group-
|
|
8
|
+
import { G as Group } from '../Group-C9TsGwJy.js';
|
|
9
9
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
10
10
|
import { T as Title } from '../Title-BfSFPJtJ.js';
|
|
11
11
|
import 'lodash/castArray';
|
|
@@ -8,7 +8,7 @@ import CreatableSelect from 'react-select/creatable';
|
|
|
8
8
|
import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
|
|
9
9
|
import { T as Text } from '../Text-CG3xPG27.js';
|
|
10
10
|
import { B as Badge } from '../Badge-CrhdvxY6.js';
|
|
11
|
-
import { G as Group } from '../Group-
|
|
11
|
+
import { G as Group } from '../Group-C9TsGwJy.js';
|
|
12
12
|
import { D as Divider } from '../Divider-U5UdY-ef.js';
|
|
13
13
|
import 'react-inlinesvg';
|
|
14
14
|
import '../hooks/useStyles.js';
|