@itcase/ui-core 1.10.47 → 1.10.49
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/cjs/context/Notifications.interface.js +2 -1
- package/dist/cjs/context/Notifications.js +207 -1
- package/dist/cjs/context/UIContext.js +76 -1
- package/dist/cjs/context/UrlAssetPrefix.js +17 -1
- package/dist/cjs/context/index.js +24 -1
- package/dist/cjs/hoc/index.js +11 -1
- package/dist/cjs/hoc/urlWithAssetPrefix.js +78 -1
- package/dist/cjs/hooks/index.js +37 -1
- package/dist/cjs/hooks/useActiveClasses/index.js +9 -1
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.helpers.js +93 -1
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.interface.js +65 -1
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.js +60 -1
- package/dist/cjs/hooks/useAppearanceConfig/index.js +8 -1
- package/dist/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js +30 -1
- package/dist/cjs/hooks/useDevicePropsGenerator/index.js +23 -1
- package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.interface.js +2 -1
- package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +236 -1
- package/dist/cjs/hooks/useDeviceTargetClass.js +64 -1
- package/dist/cjs/hooks/useMediaQueries/index.js +9 -1
- package/dist/cjs/hooks/useMediaQueries/useMediaQueries.js +124 -1
- package/dist/cjs/hooks/useStyles/index.js +23 -1
- package/dist/cjs/hooks/useStyles/styleAttributes.helpers.js +9 -1
- package/dist/cjs/hooks/useStyles/styleAttributes.interface.js +2 -1
- package/dist/cjs/hooks/useStyles/styleAttributes.js +177 -1
- package/dist/cjs/hooks/useStyles/useStyles.js +224 -1
- package/dist/cjs/hooks/useViewportFix.js +43 -1
- package/dist/cjs/utils/index.js +9 -1
- package/dist/cjs/utils/mergeAppearanceKeys.js +18 -1
- package/dist/cjs/utils/setViewportProperty.js +8 -1
- package/dist/context/Notifications.js +202 -1
- package/dist/context/UIContext.js +73 -1
- package/dist/context/UrlAssetPrefix.js +14 -1
- package/dist/context/index.js +11 -1
- package/dist/hoc/index.js +5 -1
- package/dist/hoc/urlWithAssetPrefix.js +76 -1
- package/dist/hooks/index.js +24 -1
- package/dist/hooks/useActiveClasses/index.js +3 -1
- package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js +89 -1
- package/dist/hooks/useActiveClasses/useActiveClasses.interface.js +63 -1
- package/dist/hooks/useActiveClasses/useActiveClasses.js +58 -1
- package/dist/hooks/useAppearanceConfig/index.js +2 -1
- package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js +28 -1
- package/dist/hooks/useDevicePropsGenerator/index.js +17 -1
- package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +234 -1
- package/dist/hooks/useDeviceTargetClass.js +62 -1
- package/dist/hooks/useMediaQueries/index.js +3 -1
- package/dist/hooks/useMediaQueries/useMediaQueries.js +122 -1
- package/dist/hooks/useStyles/index.js +16 -1
- package/dist/hooks/useStyles/styleAttributes.helpers.js +7 -1
- package/dist/hooks/useStyles/styleAttributes.js +173 -1
- package/dist/hooks/useStyles/useStyles.js +222 -1
- package/dist/hooks/useViewportFix.js +41 -1
- package/dist/types/context/Notifications.d.ts +8 -8
- package/dist/types/hoc/urlWithAssetPrefix.d.ts +2 -3
- package/dist/types/hooks/useActiveClasses/useActiveClasses.interface.d.ts +4 -4
- package/dist/types/hooks/useAppearanceConfig/useAppearanceConfig.d.ts +1 -1
- package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.d.ts +1 -1
- package/dist/types/hooks/useDeviceTargetClass.d.ts +2 -1
- package/dist/types/hooks/useMediaQueries/useMediaQueries.d.ts +2 -1
- package/dist/types/hooks/useStyles/styleAttributes.helpers.d.ts +1 -1
- package/dist/utils/index.js +2 -1
- package/dist/utils/mergeAppearanceKeys.js +16 -1
- package/dist/utils/setViewportProperty.js +6 -1
- package/package.json +2 -2
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
@@ -1 +1,207 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var uuid = require('uuid');
|
|
7
|
+
var common = require('@itcase/common');
|
|
8
|
+
|
|
9
|
+
const STATUSES = {
|
|
10
|
+
error: 'error',
|
|
11
|
+
info: 'info',
|
|
12
|
+
success: 'success',
|
|
13
|
+
warning: 'warning',
|
|
14
|
+
};
|
|
15
|
+
const NotificationsContext = React.createContext([]);
|
|
16
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
17
|
+
const NotificationsAPIContext = React.createContext({
|
|
18
|
+
hideNotifications: (targetId) => { },
|
|
19
|
+
removeNotification: (targetId) => { },
|
|
20
|
+
showNotification: (notification, onClose) => { },
|
|
21
|
+
notificationStatuses: STATUSES,
|
|
22
|
+
});
|
|
23
|
+
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
24
|
+
function NotificationsProvider(props) {
|
|
25
|
+
const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
|
|
26
|
+
const [notificationsList, setNotificationsList] = React.useState(() => {
|
|
27
|
+
// We need to set id to every notification item and original list also be have new id's
|
|
28
|
+
return (initialNotificationsList || []).map((notificationItem) => {
|
|
29
|
+
return createNotification(notificationItem, notificationItem.onClose);
|
|
30
|
+
});
|
|
31
|
+
});
|
|
32
|
+
const removeNotification = React.useCallback((targetId) => {
|
|
33
|
+
if (!targetId) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
setNotificationsList((prevNotificationsList) => {
|
|
37
|
+
return prevNotificationsList.filter((notificationItem) => {
|
|
38
|
+
const isNeedToRemove = String(notificationItem.id) === String(targetId);
|
|
39
|
+
if (isNeedToRemove) {
|
|
40
|
+
clearTimeout(notificationItem._closeTimeout);
|
|
41
|
+
// @typescript-eslint/no-unused-expressions
|
|
42
|
+
notificationItem.onClose && notificationItem.onClose();
|
|
43
|
+
}
|
|
44
|
+
return !isNeedToRemove;
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
}, []);
|
|
48
|
+
const hideNotifications = React.useCallback((targetId) => {
|
|
49
|
+
if (!targetId) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
setNotificationsList((prevNotificationsList) => {
|
|
53
|
+
return prevNotificationsList.map((notificationItem) => {
|
|
54
|
+
const isNeedToHide = String(notificationItem.id) === String(targetId);
|
|
55
|
+
if (!isNeedToHide || notificationItem.isClosing) {
|
|
56
|
+
return notificationItem;
|
|
57
|
+
}
|
|
58
|
+
clearTimeout(notificationItem._closeTimeout);
|
|
59
|
+
return {
|
|
60
|
+
...notificationItem,
|
|
61
|
+
isClosing: true,
|
|
62
|
+
};
|
|
63
|
+
});
|
|
64
|
+
});
|
|
65
|
+
}, []);
|
|
66
|
+
const showNotification = React.useCallback((notification, onClose) => {
|
|
67
|
+
const newNotificationItem = createNotification(notification, onClose);
|
|
68
|
+
setNotificationsList((prevNotificationsList) => {
|
|
69
|
+
const newState = prevNotificationsList.slice();
|
|
70
|
+
const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
|
|
71
|
+
// Add new notification
|
|
72
|
+
if (existsNotificationIndex === -1) {
|
|
73
|
+
return [...newState, newNotificationItem];
|
|
74
|
+
}
|
|
75
|
+
// Or update exists notification
|
|
76
|
+
const updatedNotificationItem = newState[existsNotificationIndex];
|
|
77
|
+
// Clear timeout to avoid close event for updated notification
|
|
78
|
+
clearTimeout(updatedNotificationItem._closeTimeout);
|
|
79
|
+
updatedNotificationItem._closeTimeout = undefined;
|
|
80
|
+
// Replace exists notification by new one
|
|
81
|
+
newState[existsNotificationIndex] = newNotificationItem;
|
|
82
|
+
return newState;
|
|
83
|
+
});
|
|
84
|
+
if (newNotificationItem.closeByTime) {
|
|
85
|
+
newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
|
|
86
|
+
}
|
|
87
|
+
return newNotificationItem;
|
|
88
|
+
},
|
|
89
|
+
// "hideNotifications" is never changed
|
|
90
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
91
|
+
[]);
|
|
92
|
+
const notificationsAPI = React.useMemo(() => ({
|
|
93
|
+
hideNotifications: hideNotifications,
|
|
94
|
+
removeNotification: removeNotification,
|
|
95
|
+
notificationStatuses: STATUSES,
|
|
96
|
+
showNotification: showNotification,
|
|
97
|
+
}),
|
|
98
|
+
// Functions is never changes, no sense to set as dependencies
|
|
99
|
+
// eslint-disable-next-line
|
|
100
|
+
[]);
|
|
101
|
+
React.useEffect(() => {
|
|
102
|
+
// Set timeout for initial notifications list one time on first render
|
|
103
|
+
notificationsList.forEach((notificationItem) => {
|
|
104
|
+
if (notificationItem.closeByTime) {
|
|
105
|
+
setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
|
|
106
|
+
}
|
|
107
|
+
});
|
|
108
|
+
// Show notifications on all requests errors.
|
|
109
|
+
// Enable one time without disabling. Use "isLogging" on request config level
|
|
110
|
+
// to disable notifications logger.
|
|
111
|
+
if (isLogRequestsErrors) {
|
|
112
|
+
common.axiosInstanceITCase.responseErrorHandler.loggerManager = {
|
|
113
|
+
log: (responseError) => {
|
|
114
|
+
if (responseError.message) {
|
|
115
|
+
// prevent from showing many network errors
|
|
116
|
+
const errorListToDedupe = ['network'];
|
|
117
|
+
const id = errorListToDedupe.includes(responseError.key)
|
|
118
|
+
? responseError.key
|
|
119
|
+
: undefined;
|
|
120
|
+
showNotification({
|
|
121
|
+
id: id,
|
|
122
|
+
title: responseError.message,
|
|
123
|
+
status: 'error',
|
|
124
|
+
closeByTime: 4000,
|
|
125
|
+
});
|
|
126
|
+
}
|
|
127
|
+
},
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
131
|
+
}, []);
|
|
132
|
+
return (jsxRuntime.jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsxRuntime.jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
|
|
133
|
+
}
|
|
134
|
+
function useNotifications() {
|
|
135
|
+
return React.useContext(NotificationsContext);
|
|
136
|
+
}
|
|
137
|
+
function useNotificationsAPI() {
|
|
138
|
+
return React.useContext(NotificationsAPIContext);
|
|
139
|
+
}
|
|
140
|
+
const statusToAppearanceList = {
|
|
141
|
+
error: 'errorPrimary sizeS solid rounded',
|
|
142
|
+
info: 'infoPrimary sizeS solid rounded',
|
|
143
|
+
success: 'successPrimary sizeS solid rounded',
|
|
144
|
+
warning: 'warningPrimary sizeS solid rounded',
|
|
145
|
+
};
|
|
146
|
+
function createNotification(notification, onClose) {
|
|
147
|
+
// Default notification item properties
|
|
148
|
+
let id = uuid.v4().split('-')[0];
|
|
149
|
+
let title = '';
|
|
150
|
+
let text = '';
|
|
151
|
+
let closeIcon = '';
|
|
152
|
+
let closeIconSrc = '';
|
|
153
|
+
let type = 'float';
|
|
154
|
+
let buttonLabel = '';
|
|
155
|
+
let status = STATUSES.warning;
|
|
156
|
+
let closeByTime = 4500;
|
|
157
|
+
let appearance = statusToAppearanceList[status];
|
|
158
|
+
let after = null;
|
|
159
|
+
let isLoading = false;
|
|
160
|
+
let closeIconAppearance = '';
|
|
161
|
+
let onClickButton = () => { };
|
|
162
|
+
if (typeof notification === 'string') {
|
|
163
|
+
text = notification;
|
|
164
|
+
}
|
|
165
|
+
else if (typeof notification === 'object') {
|
|
166
|
+
id = String(notification.id ?? id);
|
|
167
|
+
title = notification.title ?? title;
|
|
168
|
+
text = notification.text ?? text;
|
|
169
|
+
closeIconAppearance =
|
|
170
|
+
notification.closeIconAppearance ?? closeIconAppearance;
|
|
171
|
+
type = notification.type ?? type;
|
|
172
|
+
closeIcon = notification.closeIcon ?? closeIcon;
|
|
173
|
+
closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
|
|
174
|
+
buttonLabel = notification.buttonLabel ?? buttonLabel;
|
|
175
|
+
onClickButton = notification.onClickButton ?? onClickButton;
|
|
176
|
+
status = notification.status ?? status;
|
|
177
|
+
closeByTime = notification.closeByTime ?? closeByTime;
|
|
178
|
+
isLoading = notification.isLoading ?? isLoading;
|
|
179
|
+
after = notification.after ?? after;
|
|
180
|
+
appearance =
|
|
181
|
+
notification.appearance ??
|
|
182
|
+
statusToAppearanceList[notification.status] ??
|
|
183
|
+
appearance;
|
|
184
|
+
}
|
|
185
|
+
return {
|
|
186
|
+
id: id,
|
|
187
|
+
appearance: appearance,
|
|
188
|
+
type: type,
|
|
189
|
+
title: title,
|
|
190
|
+
status: status,
|
|
191
|
+
text: text,
|
|
192
|
+
buttonLabel: buttonLabel,
|
|
193
|
+
after: after,
|
|
194
|
+
closeByTime: closeByTime,
|
|
195
|
+
closeIcon: closeIcon,
|
|
196
|
+
closeIconAppearance: closeIconAppearance,
|
|
197
|
+
closeIconSrc: closeIconSrc,
|
|
198
|
+
isLoading: isLoading,
|
|
199
|
+
onClickButton: onClickButton,
|
|
200
|
+
onClose: onClose,
|
|
201
|
+
};
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
exports.NotificationsProvider = NotificationsProvider;
|
|
205
|
+
exports.statusToAppearanceList = statusToAppearanceList;
|
|
206
|
+
exports.useNotifications = useNotifications;
|
|
207
|
+
exports.useNotificationsAPI = useNotificationsAPI;
|
|
@@ -1 +1,76 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var camelCase = require('lodash/camelCase');
|
|
7
|
+
var useMediaQueries = require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
8
|
+
var setViewportProperty = require('../utils/setViewportProperty.js');
|
|
9
|
+
require('react-responsive');
|
|
10
|
+
|
|
11
|
+
const UserDeviceContext = React.createContext({
|
|
12
|
+
isMobile: false,
|
|
13
|
+
isTablet: false,
|
|
14
|
+
isDesktop: false,
|
|
15
|
+
deviceCurrentMainType: '',
|
|
16
|
+
deviceCurrentType: '',
|
|
17
|
+
deviceTypesList: [],
|
|
18
|
+
});
|
|
19
|
+
const UIProvider = React.memo(function UIProvider(props) {
|
|
20
|
+
const { userDeviceState = {}, children } = props;
|
|
21
|
+
/** NOTE:
|
|
22
|
+
* Remember that the "useMediaQueries" hook works by next scenario:
|
|
23
|
+
* when changing the device type(browser width), the hook will first "enable"
|
|
24
|
+
* the new type(set true), and then "disable" the previous one(set false),
|
|
25
|
+
* what provoke to double rendering, and in moment we have two different types as "true".
|
|
26
|
+
* We will need to look at how to change this behavior.
|
|
27
|
+
*/
|
|
28
|
+
const allDevicesTypes = useMediaQueries.useMediaQueries(userDeviceState);
|
|
29
|
+
const { isMobile, isTablet, isDesktop, ...fullNamedDeviceTypes } = allDevicesTypes;
|
|
30
|
+
const deviceCurrentMainType = (isMobile && 'mobile') ||
|
|
31
|
+
(isTablet && 'tablet') ||
|
|
32
|
+
(isDesktop && 'desktop') ||
|
|
33
|
+
'';
|
|
34
|
+
const [deviceCurrentType, deviceTypesList] = React.useMemo(() => {
|
|
35
|
+
const deviceTypesList = Object.keys(allDevicesTypes).map((key) => camelCase(key.replace('is', '')));
|
|
36
|
+
// In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
|
|
37
|
+
let deviceCurrentType = Object.keys(fullNamedDeviceTypes).find(
|
|
38
|
+
// If "fullNamedDeviceTypes.isMobileLarge: true" - that our device
|
|
39
|
+
(key) => fullNamedDeviceTypes[key]);
|
|
40
|
+
// Or set main type (e.g. "isMobile")
|
|
41
|
+
if (!deviceCurrentType) {
|
|
42
|
+
deviceCurrentType = deviceCurrentMainType;
|
|
43
|
+
}
|
|
44
|
+
deviceCurrentType = camelCase(deviceCurrentType.replace('is', ''));
|
|
45
|
+
// On server side render we doesn't known user device and we need to set special word
|
|
46
|
+
return [deviceCurrentType || '_none_', deviceTypesList];
|
|
47
|
+
}, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes]);
|
|
48
|
+
const deviceContextState = React.useMemo(() => {
|
|
49
|
+
return {
|
|
50
|
+
...allDevicesTypes,
|
|
51
|
+
deviceCurrentMainType: deviceCurrentMainType,
|
|
52
|
+
deviceCurrentType: deviceCurrentType,
|
|
53
|
+
deviceTypesList: deviceTypesList,
|
|
54
|
+
};
|
|
55
|
+
}, [
|
|
56
|
+
allDevicesTypes,
|
|
57
|
+
deviceCurrentMainType,
|
|
58
|
+
deviceCurrentType,
|
|
59
|
+
deviceTypesList,
|
|
60
|
+
]);
|
|
61
|
+
React.useEffect(() => {
|
|
62
|
+
setViewportProperty.setViewportProperty();
|
|
63
|
+
window.addEventListener('resize', setViewportProperty.setViewportProperty);
|
|
64
|
+
}, []);
|
|
65
|
+
return (jsxRuntime.jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
|
|
66
|
+
});
|
|
67
|
+
function useUserDeviceContext() {
|
|
68
|
+
const context = React.useContext(UserDeviceContext);
|
|
69
|
+
if (!context) {
|
|
70
|
+
throw new Error('useUserDeviceContext is not defined');
|
|
71
|
+
}
|
|
72
|
+
return context;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
exports.UIProvider = UIProvider;
|
|
76
|
+
exports.useUserDeviceContext = useUserDeviceContext;
|
|
@@ -1 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
|
|
6
|
+
const UrlAssetPrefixContext = React.createContext({
|
|
7
|
+
assetPrefix: undefined,
|
|
8
|
+
ignorePathsList: undefined,
|
|
9
|
+
});
|
|
10
|
+
function UrlAssetPrefixProvider(props) {
|
|
11
|
+
const { assetPrefix, ignorePathsList, children } = props;
|
|
12
|
+
const value = React.useMemo(() => ({ assetPrefix, ignorePathsList }), [assetPrefix, ignorePathsList]);
|
|
13
|
+
return (jsxRuntime.jsx(UrlAssetPrefixContext.Provider, { value: value, children: children }));
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
exports.UrlAssetPrefixContext = UrlAssetPrefixContext;
|
|
17
|
+
exports.UrlAssetPrefixProvider = UrlAssetPrefixProvider;
|
|
@@ -1 +1,24 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var Notifications = require('./Notifications.js');
|
|
4
|
+
var UIContext = require('./UIContext.js');
|
|
5
|
+
var UrlAssetPrefix = require('./UrlAssetPrefix.js');
|
|
6
|
+
require('react/jsx-runtime');
|
|
7
|
+
require('react');
|
|
8
|
+
require('uuid');
|
|
9
|
+
require('@itcase/common');
|
|
10
|
+
require('lodash/camelCase');
|
|
11
|
+
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
12
|
+
require('react-responsive');
|
|
13
|
+
require('../utils/setViewportProperty.js');
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
exports.NotificationsProvider = Notifications.NotificationsProvider;
|
|
18
|
+
exports.statusToAppearanceList = Notifications.statusToAppearanceList;
|
|
19
|
+
exports.useNotifications = Notifications.useNotifications;
|
|
20
|
+
exports.useNotificationsAPI = Notifications.useNotificationsAPI;
|
|
21
|
+
exports.UIProvider = UIContext.UIProvider;
|
|
22
|
+
exports.useUserDeviceContext = UIContext.useUserDeviceContext;
|
|
23
|
+
exports.UrlAssetPrefixContext = UrlAssetPrefix.UrlAssetPrefixContext;
|
|
24
|
+
exports.UrlAssetPrefixProvider = UrlAssetPrefix.UrlAssetPrefixProvider;
|
package/dist/cjs/hoc/index.js
CHANGED
|
@@ -1 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var urlWithAssetPrefix = require('./urlWithAssetPrefix.js');
|
|
4
|
+
require('react/jsx-runtime');
|
|
5
|
+
require('react');
|
|
6
|
+
require('@itcase/common');
|
|
7
|
+
require('../context/UrlAssetPrefix.js');
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
exports.urlWithAssetPrefix = urlWithAssetPrefix.urlWithAssetPrefix;
|
|
@@ -1 +1,78 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var common = require('@itcase/common');
|
|
6
|
+
var UrlAssetPrefix = require('../context/UrlAssetPrefix.js');
|
|
7
|
+
|
|
8
|
+
const urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
|
|
9
|
+
/**
|
|
10
|
+
* HOC, который добавляет assetPrefix к URL-пропсам.
|
|
11
|
+
*
|
|
12
|
+
* @template P - Тип пропсов оборачиваемого компонента.
|
|
13
|
+
* @template T - Тип ref (если используется forwardRef).
|
|
14
|
+
* @template Check - Проверка на наличие хотя бы одного URL-пропа.
|
|
15
|
+
*
|
|
16
|
+
* @param WrappedComponent - Компонент, который оборачиваем.
|
|
17
|
+
* @param _error - Проверка: если ни одного URL-пропа нет, будет ошибка компиляции.
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* const A = (props: { src?: string }) => <div />;
|
|
21
|
+
* urlWithAssetPrefix(A); // ✅ OK
|
|
22
|
+
*
|
|
23
|
+
* const B = (props: { id: string }) => <div />;
|
|
24
|
+
* urlWithAssetPrefix(B); // ❌ TS ошибка (нет url-пропов)
|
|
25
|
+
*/
|
|
26
|
+
const urlWithAssetPrefix = (WrappedComponent, ..._error) => {
|
|
27
|
+
const HOC = React.forwardRef(function HOC(props, ref) {
|
|
28
|
+
const { assetPrefix, ignorePathsList } = React.useContext(UrlAssetPrefix.UrlAssetPrefixContext);
|
|
29
|
+
const overrideProps = urlPropsList.reduce((resultProps, propKey) => {
|
|
30
|
+
let url = props[propKey];
|
|
31
|
+
if (url && typeof url === 'string') {
|
|
32
|
+
if (assetPrefix) {
|
|
33
|
+
const isNeedAssetPrefix = checkIsNeedAssetPrefix(url, assetPrefix, ignorePathsList);
|
|
34
|
+
if (isNeedAssetPrefix) {
|
|
35
|
+
const prefixPath = common.formatURL(assetPrefix).slice(0, -1);
|
|
36
|
+
url = `${prefixPath}${url}`;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
resultProps[propKey] = url;
|
|
40
|
+
}
|
|
41
|
+
return resultProps;
|
|
42
|
+
}, {});
|
|
43
|
+
return jsxRuntime.jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
|
|
44
|
+
});
|
|
45
|
+
return HOC;
|
|
46
|
+
};
|
|
47
|
+
const checkIsNeedAssetPrefix = (url, assetPrefix, ignorePathsList = []) => {
|
|
48
|
+
// Ignore prefix if:
|
|
49
|
+
const isPrefixIgnore =
|
|
50
|
+
// Url is absolute
|
|
51
|
+
url.startsWith('http:') ||
|
|
52
|
+
url.startsWith('https:') ||
|
|
53
|
+
// Url is data string
|
|
54
|
+
url.startsWith('data:') ||
|
|
55
|
+
url.startsWith('blob:') ||
|
|
56
|
+
// Url already have prefix
|
|
57
|
+
url.startsWith(assetPrefix);
|
|
58
|
+
if (isPrefixIgnore) {
|
|
59
|
+
return false;
|
|
60
|
+
}
|
|
61
|
+
// And check special paths for ignore prefix
|
|
62
|
+
for (const urlPath of ignorePathsList) {
|
|
63
|
+
if (urlPath instanceof RegExp) {
|
|
64
|
+
if (urlPath.test(url)) {
|
|
65
|
+
return false;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
if (common.formatURL(url).startsWith(common.formatURL(urlPath))) {
|
|
70
|
+
return false;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
// Need to add prefix to url
|
|
75
|
+
return true;
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
exports.urlWithAssetPrefix = urlWithAssetPrefix;
|
package/dist/cjs/hooks/index.js
CHANGED
|
@@ -1 +1,37 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var useActiveClasses = require('./useActiveClasses/useActiveClasses.js');
|
|
4
|
+
var useAppearanceConfig = require('./useAppearanceConfig/useAppearanceConfig.js');
|
|
5
|
+
var useDevicePropsGenerator = require('./useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
6
|
+
var useDeviceTargetClass = require('./useDeviceTargetClass.js');
|
|
7
|
+
var useMediaQueries = require('./useMediaQueries/useMediaQueries.js');
|
|
8
|
+
var styleAttributes_helpers = require('./useStyles/styleAttributes.helpers.js');
|
|
9
|
+
var useStyles = require('./useStyles/useStyles.js');
|
|
10
|
+
var useViewportFix = require('./useViewportFix.js');
|
|
11
|
+
require('clsx');
|
|
12
|
+
require('./useActiveClasses/useActiveClasses.helpers.js');
|
|
13
|
+
require('react');
|
|
14
|
+
require('lodash/camelCase');
|
|
15
|
+
require('lodash/castArray');
|
|
16
|
+
require('lodash/upperFirst');
|
|
17
|
+
require('../context/Notifications.js');
|
|
18
|
+
require('react/jsx-runtime');
|
|
19
|
+
require('uuid');
|
|
20
|
+
require('@itcase/common');
|
|
21
|
+
require('../context/UIContext.js');
|
|
22
|
+
require('../utils/setViewportProperty.js');
|
|
23
|
+
require('../context/UrlAssetPrefix.js');
|
|
24
|
+
require('./useStyles/styleAttributes.js');
|
|
25
|
+
require('lodash/maxBy');
|
|
26
|
+
require('react-responsive');
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
exports.useActiveClasses = useActiveClasses.useActiveClasses;
|
|
31
|
+
exports.useAppearanceConfig = useAppearanceConfig.useAppearanceConfig;
|
|
32
|
+
exports.useDevicePropsGenerator = useDevicePropsGenerator.useDevicePropsGenerator;
|
|
33
|
+
exports.useDeviceTargetClass = useDeviceTargetClass.useDeviceTargetClass;
|
|
34
|
+
exports.useMediaQueries = useMediaQueries.useMediaQueries;
|
|
35
|
+
exports.getStyleAttributeKey = styleAttributes_helpers.getStyleAttributeKey;
|
|
36
|
+
exports.useStyles = useStyles.useStyles;
|
|
37
|
+
exports.useViewportFix = useViewportFix.useViewportFix;
|
|
@@ -1 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var useActiveClasses = require('./useActiveClasses.js');
|
|
4
|
+
require('clsx');
|
|
5
|
+
require('./useActiveClasses.helpers.js');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.useActiveClasses = useActiveClasses.useActiveClasses;
|
|
@@ -1 +1,93 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const CLASS_RULES = {
|
|
4
|
+
fill: [
|
|
5
|
+
{
|
|
6
|
+
key: 'fillClass',
|
|
7
|
+
stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
key: 'fillHoverClass',
|
|
11
|
+
stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
key: 'fillActiveClass',
|
|
15
|
+
stateFn: ({ isActive, isDisabled }) => Boolean(isActive) && !isDisabled,
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
key: 'fillActiveHoverClass',
|
|
19
|
+
stateFn: ({ isActive, isDisabled }) => Boolean(isActive) && !isDisabled,
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
key: 'fillDisabledClass',
|
|
23
|
+
stateFn: ({ isActive, isDisabled }) => !isActive && Boolean(isDisabled),
|
|
24
|
+
},
|
|
25
|
+
],
|
|
26
|
+
borderColor: [
|
|
27
|
+
{
|
|
28
|
+
key: 'borderColorClass',
|
|
29
|
+
stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
key: 'borderColorHoverClass',
|
|
33
|
+
stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
key: 'borderColorActiveClass',
|
|
37
|
+
stateFn: ({ isActive, isDisabled }) => Boolean(isActive) && !isDisabled,
|
|
38
|
+
},
|
|
39
|
+
],
|
|
40
|
+
textColor: [
|
|
41
|
+
{
|
|
42
|
+
key: 'textColorClass',
|
|
43
|
+
stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
|
|
44
|
+
},
|
|
45
|
+
],
|
|
46
|
+
};
|
|
47
|
+
const formatState = (key) => {
|
|
48
|
+
// Try to find one of the state tokens in the input key:
|
|
49
|
+
// - matches "ActiveHover", "Active", "Hover" or "Disabled"
|
|
50
|
+
// - case-insensitive because of the /i flag
|
|
51
|
+
// Examples of matches:
|
|
52
|
+
// "fillActiveColorHover" -> match[0] === "ActiveHover"
|
|
53
|
+
// "borderDisabled" -> match[0] === "Disabled"
|
|
54
|
+
const stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
|
|
55
|
+
if (!stateMatch) {
|
|
56
|
+
return '';
|
|
57
|
+
}
|
|
58
|
+
// Replace the matched token with a normalized snake-like form and
|
|
59
|
+
// prepend an underscore. The chained replace calls map:
|
|
60
|
+
// ActiveHover -> active_hover
|
|
61
|
+
// Active -> active
|
|
62
|
+
// Hover -> hover
|
|
63
|
+
// Disabled -> disabled
|
|
64
|
+
// The final .toLowerCase() ensures output is lowercased regardless of input casing.
|
|
65
|
+
// Examples:
|
|
66
|
+
// "fillActiveColorHover" -> "_active_hover"
|
|
67
|
+
// "borderDisabled" -> "disabled"
|
|
68
|
+
return ('_' +
|
|
69
|
+
stateMatch[0]
|
|
70
|
+
.replace(/ActiveHover/i, 'active_hover')
|
|
71
|
+
.replace(/Active/i, 'active')
|
|
72
|
+
.replace(/Hover/i, 'hover')
|
|
73
|
+
.replace(/Disabled/i, 'disabled')
|
|
74
|
+
.toLowerCase());
|
|
75
|
+
};
|
|
76
|
+
// Insert a hyphen between a lowercase letter followed by an uppercase letter:
|
|
77
|
+
// - regex: /([a-z])([A-Z])/g
|
|
78
|
+
// ([a-z]) -> capture group 1: a lowercase letter
|
|
79
|
+
// ([A-Z]) -> capture group 2: an uppercase letter
|
|
80
|
+
// g -> global: replace all occurrences
|
|
81
|
+
// - replacement: '$1-$2' puts a hyphen between the two captured groups
|
|
82
|
+
// - finally .toLowerCase() to produce a full kebab-case string
|
|
83
|
+
//
|
|
84
|
+
// Examples:
|
|
85
|
+
// "myTestString" -> "my-test-string"
|
|
86
|
+
// "borderColorActiveHover" -> "border-color-active-hover"
|
|
87
|
+
const toKebabCase = (str) => {
|
|
88
|
+
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
exports.CLASS_RULES = CLASS_RULES;
|
|
92
|
+
exports.formatState = formatState;
|
|
93
|
+
exports.toKebabCase = toKebabCase;
|
|
@@ -1 +1,65 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const suffix = [
|
|
4
|
+
'Button',
|
|
5
|
+
'Checkbox',
|
|
6
|
+
'Radio',
|
|
7
|
+
'Checkmark',
|
|
8
|
+
'Avatar',
|
|
9
|
+
'AvatarStack',
|
|
10
|
+
'Badge',
|
|
11
|
+
'Breadcrumbs',
|
|
12
|
+
'Cell',
|
|
13
|
+
'Chips',
|
|
14
|
+
'Choice',
|
|
15
|
+
'Code',
|
|
16
|
+
'CookiesWarning',
|
|
17
|
+
'Dadata',
|
|
18
|
+
'DatePeriod',
|
|
19
|
+
'Divider',
|
|
20
|
+
'Dot',
|
|
21
|
+
'Drawer',
|
|
22
|
+
'Dropdown',
|
|
23
|
+
'DropdownItem',
|
|
24
|
+
'Flex',
|
|
25
|
+
'Grid',
|
|
26
|
+
'Group',
|
|
27
|
+
'HeroTitle',
|
|
28
|
+
'HTMLContent',
|
|
29
|
+
'Icon',
|
|
30
|
+
'Image',
|
|
31
|
+
'Input',
|
|
32
|
+
'InputPassword',
|
|
33
|
+
'Label',
|
|
34
|
+
'Link',
|
|
35
|
+
'List',
|
|
36
|
+
'Loader',
|
|
37
|
+
'Logo',
|
|
38
|
+
'MenuItem',
|
|
39
|
+
'Modal',
|
|
40
|
+
'ModalSheetBottom',
|
|
41
|
+
'Notification',
|
|
42
|
+
'Overlay',
|
|
43
|
+
'Pagination',
|
|
44
|
+
'RangeSlider',
|
|
45
|
+
'Response',
|
|
46
|
+
'ScrollBar',
|
|
47
|
+
'ScrollOnDrag',
|
|
48
|
+
'ScrollToView',
|
|
49
|
+
'Search',
|
|
50
|
+
'Segmented',
|
|
51
|
+
'Select',
|
|
52
|
+
'SvgContent',
|
|
53
|
+
'Swiper',
|
|
54
|
+
'Switch',
|
|
55
|
+
'Tab',
|
|
56
|
+
'Text',
|
|
57
|
+
'Textarea',
|
|
58
|
+
'Tile',
|
|
59
|
+
'Title',
|
|
60
|
+
'Tooltip',
|
|
61
|
+
'Video',
|
|
62
|
+
'Warning',
|
|
63
|
+
];
|
|
64
|
+
|
|
65
|
+
exports.suffix = suffix;
|