@itcase/ui 1.8.123 → 1.8.124
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/Avatar_cjs_mojzcWRL.js +161 -0
- package/dist/Avatar_es_BFom0nAS.js +157 -0
- package/dist/{Button_cjs_Ce97psFT.js → Button_cjs_CZz8OjWi.js} +39 -27
- package/dist/{Button_es_CZss7cXh.js → Button_es_Cn3wtv3M.js} +39 -27
- package/dist/ChipsGroup_cjs_Dgskkc1e.js +344 -0
- package/dist/{ChipsGroup_es_ayPPUwQ7.js → ChipsGroup_es_BVQ7_n0k.js} +48 -35
- package/dist/DatePicker_cjs_Lzrr9Amf.js +182 -0
- package/dist/DatePicker_es_D1LvY5RT.js +178 -0
- package/dist/Divider_cjs_DrmV2ezS.js +105 -0
- package/dist/Divider_es_BiYozVBS.js +101 -0
- package/dist/DropdownItem_cjs_rKLdFxSj.js +211 -0
- package/dist/DropdownItem_es_B-1qtEa7.js +206 -0
- package/dist/Group_cjs_DmfeUcFI.js +59 -0
- package/dist/Group_es_BU5k8f5S.js +55 -0
- package/dist/{Icon_cjs_Cz6IyOkb.js → Icon_cjs_DpFxIFv5.js} +170 -121
- package/dist/{Icon_es_BrwLifge.js → Icon_es_D5eiycFI.js} +170 -121
- package/dist/Image_cjs_CBDMUzv_.js +29 -0
- package/dist/Image_es_BHec4iVN.js +27 -0
- package/dist/{Input_cjs_DRPK_RHK.js → Input_cjs_DDi5JVAV.js} +27 -19
- package/dist/{Input_es_Cv5nEb_n.js → Input_es_BnCXATnh.js} +27 -19
- package/dist/{Label_cjs_DMoaOoHi.js → Label_cjs_C-x9blCL.js} +45 -33
- package/dist/{Label_es_SULlg9bL.js → Label_es_DCqpSw_F.js} +45 -33
- package/dist/{Link_cjs_C5UsZUiF.js → Link_cjs_qKXVfU8e.js} +43 -30
- package/dist/{Link_es_XiqbdwLp.js → Link_es_P2b6ya7P.js} +43 -30
- package/dist/Loader_cjs_DIDsIq3J.js +143 -0
- package/dist/Loader_es_CmSggwbR.js +139 -0
- package/dist/Overlay_cjs_tGA2fU43.js +42 -0
- package/dist/Overlay_es_BS7OTFoy.js +38 -0
- package/dist/{Scrollbar_cjs_DcKOfcNp.js → Scrollbar_cjs_Cp-7v2Mt.js} +1 -1
- package/dist/{Scrollbar_es_CThJeCLF.js → Scrollbar_es_CcMgNvGi.js} +1 -1
- package/dist/Text_cjs_BDTjOTVB.js +69 -0
- package/dist/Text_es_CnymlElo.js +65 -0
- package/dist/cjs/components/Accordion.js +37 -34
- package/dist/cjs/components/Avatar.js +5 -6
- package/dist/cjs/components/AvatarStack/stories/__mock__.js +1 -1
- package/dist/cjs/components/AvatarStack.js +17 -16
- package/dist/cjs/components/Badge.js +3 -4
- package/dist/cjs/components/Breadcrumbs/stories/__mock__.js +1 -1
- package/dist/cjs/components/Breadcrumbs.js +27 -23
- package/dist/cjs/components/Button.js +5 -6
- package/dist/cjs/components/Cell/stories/__mock__.js +1 -1
- package/dist/cjs/components/Cell.js +28 -25
- package/dist/cjs/components/Checkbox.js +33 -26
- package/dist/cjs/components/Checkmark.js +28 -23
- package/dist/cjs/components/Chips/stories/__mock__.js +1 -1
- package/dist/cjs/components/Chips.js +4 -5
- package/dist/cjs/components/Choice/stories/__mock__.js +2 -2
- package/dist/cjs/components/Choice.js +46 -40
- package/dist/cjs/components/Code.js +34 -26
- package/dist/cjs/components/CookiesWarning.js +23 -23
- package/dist/cjs/components/Dadata.js +14 -9
- package/dist/cjs/components/DatePeriod.js +32 -30
- package/dist/cjs/components/DatePicker.js +8 -9
- package/dist/cjs/components/Divider.js +1 -2
- package/dist/cjs/components/Dot.js +5 -6
- package/dist/cjs/components/Drawer.js +23 -21
- package/dist/cjs/components/Dropdown/stories/__mock__.js +6 -6
- package/dist/cjs/components/Dropdown.js +5 -6
- package/dist/cjs/components/Flex.js +11 -12
- package/dist/cjs/components/Grid.js +15 -16
- package/dist/cjs/components/Group.js +1 -2
- package/dist/cjs/components/HTMLContent.js +5 -6
- package/dist/cjs/components/HeroTitle.js +17 -16
- package/dist/cjs/components/Icon.js +3 -4
- package/dist/cjs/components/Image.js +1 -2
- package/dist/cjs/components/Input.js +1 -2
- package/dist/cjs/components/InputPassword.js +34 -26
- package/dist/cjs/components/Label.js +4 -5
- package/dist/cjs/components/Link.js +1 -2
- package/dist/cjs/components/List.js +39 -28
- package/dist/cjs/components/Loader.js +2 -3
- package/dist/cjs/components/Logo.js +10 -11
- package/dist/cjs/components/MenuItem.js +36 -33
- package/dist/cjs/components/Modal.js +40 -38
- package/dist/cjs/components/ModalSheetBottom.js +17 -18
- package/dist/cjs/components/Notification/stories/__mock__.js +1 -1
- package/dist/cjs/components/Notification.js +31 -24
- package/dist/cjs/components/Overlay.js +1 -2
- package/dist/cjs/components/Pagination.js +43 -41
- package/dist/cjs/components/Radio.js +34 -26
- package/dist/cjs/components/RangeSlider.js +8 -9
- package/dist/cjs/components/Response/img.js +1 -1
- package/dist/cjs/components/Response.js +45 -34
- package/dist/cjs/components/SVGContent.js +6 -7
- package/dist/cjs/components/ScrollOnDrag/stories/__mock__.js +2 -2
- package/dist/cjs/components/ScrollOnDrag.js +7 -8
- package/dist/cjs/components/ScrollToView.js +8 -9
- package/dist/cjs/components/Scrollbar/stories/__mock__.js +1 -1
- package/dist/cjs/components/Scrollbar.js +1 -1
- package/dist/cjs/components/Search.js +39 -31
- package/dist/cjs/components/Segmented/stories/__mock__.js +23 -10
- package/dist/cjs/components/Segmented.js +46 -41
- package/dist/cjs/components/Select.js +118 -113
- package/dist/cjs/components/Swiper/stories/__mock__.js +3 -3
- package/dist/cjs/components/Swiper.js +27 -29
- package/dist/cjs/components/Switch.js +33 -26
- package/dist/cjs/components/Tab/stories/__mock__.js +1 -1
- package/dist/cjs/components/Tab.js +33 -27
- package/dist/cjs/components/Text.js +1 -2
- package/dist/cjs/components/Textarea.js +26 -18
- package/dist/cjs/components/Tile.js +21 -17
- package/dist/cjs/components/Title.js +3 -4
- package/dist/cjs/components/Tooltip.js +3 -4
- package/dist/cjs/components/Video/stories/__mocks__.js +1 -1
- package/dist/cjs/components/Video.js +3 -4
- package/dist/cjs/components/Warning.js +26 -20
- package/dist/cjs/context/Notifications.js +38 -42
- package/dist/cjs/context/UIContext.js +19 -17
- package/dist/cjs/context/UrlAssetPrefix.js +3 -3
- package/dist/cjs/hoc/urlWithAssetPrefix.js +13 -16
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.helpers.js +13 -40
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.interface.js +1 -1
- package/dist/cjs/hooks/useActiveClasses/useActiveClasses.js +25 -29
- package/dist/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js +13 -15
- package/dist/cjs/hooks/useAppearanceConfig.js +0 -1
- package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +21 -28
- package/dist/cjs/hooks/useDevicePropsGenerator.js +0 -1
- package/dist/cjs/hooks/useDeviceTargetClass.js +0 -1
- package/dist/cjs/hooks/useStyles/styleAttributes.js +1 -1
- package/dist/cjs/hooks/useStyles/useStyles.js +0 -1
- package/dist/cjs/hooks/useStyles.js +0 -1
- package/dist/cjs/hooks/useViewportFix.js +5 -5
- package/dist/cjs/hooks.js +1 -1
- package/dist/cjs/utils/setViewportProperty.js +3 -3
- package/dist/components/Accordion.js +37 -34
- package/dist/components/Avatar.js +5 -6
- package/dist/components/AvatarStack/stories/__mock__.js +1 -1
- package/dist/components/AvatarStack.js +17 -16
- package/dist/components/Badge.js +3 -4
- package/dist/components/Breadcrumbs/stories/__mock__.js +1 -1
- package/dist/components/Breadcrumbs.js +27 -23
- package/dist/components/Button.js +5 -6
- package/dist/components/Cell/stories/__mock__.js +1 -1
- package/dist/components/Cell.js +28 -25
- package/dist/components/Checkbox.js +33 -26
- package/dist/components/Checkmark.js +28 -23
- package/dist/components/Chips/stories/__mock__.js +1 -1
- package/dist/components/Chips.js +4 -5
- package/dist/components/Choice/stories/__mock__.js +2 -2
- package/dist/components/Choice.js +46 -40
- package/dist/components/Code.js +34 -26
- package/dist/components/CookiesWarning.js +23 -23
- package/dist/components/Dadata.js +14 -9
- package/dist/components/DatePeriod.js +32 -30
- package/dist/components/DatePicker.js +8 -9
- package/dist/components/Divider.js +1 -2
- package/dist/components/Dot.js +5 -6
- package/dist/components/Drawer.js +23 -21
- package/dist/components/Dropdown/stories/__mock__.js +6 -6
- package/dist/components/Dropdown.js +5 -6
- package/dist/components/Flex.js +11 -12
- package/dist/components/Grid.js +15 -16
- package/dist/components/Group.js +1 -2
- package/dist/components/HTMLContent.js +5 -6
- package/dist/components/HeroTitle.js +17 -16
- package/dist/components/Icon.js +3 -4
- package/dist/components/Image.js +1 -2
- package/dist/components/Input.js +1 -2
- package/dist/components/InputPassword.js +34 -26
- package/dist/components/Label.js +4 -5
- package/dist/components/Link.js +1 -2
- package/dist/components/List.js +39 -28
- package/dist/components/Loader.js +2 -3
- package/dist/components/Logo.js +10 -11
- package/dist/components/MenuItem.js +36 -33
- package/dist/components/Modal.js +40 -38
- package/dist/components/ModalSheetBottom.js +17 -18
- package/dist/components/Notification/stories/__mock__.js +1 -1
- package/dist/components/Notification.js +31 -24
- package/dist/components/Overlay.js +1 -2
- package/dist/components/Pagination.js +43 -41
- package/dist/components/Radio.js +34 -26
- package/dist/components/RangeSlider.js +8 -9
- package/dist/components/Response/img.js +1 -1
- package/dist/components/Response.js +45 -34
- package/dist/components/SVGContent.js +6 -7
- package/dist/components/ScrollOnDrag/stories/__mock__.js +2 -2
- package/dist/components/ScrollOnDrag.js +7 -8
- package/dist/components/ScrollToView.js +8 -9
- package/dist/components/Scrollbar/stories/__mock__.js +1 -1
- package/dist/components/Scrollbar.js +1 -1
- package/dist/components/Search.js +39 -31
- package/dist/components/Segmented/stories/__mock__.js +23 -10
- package/dist/components/Segmented.js +46 -41
- package/dist/components/Select.js +118 -113
- package/dist/components/Swiper/stories/__mock__.js +3 -3
- package/dist/components/Swiper.js +27 -29
- package/dist/components/Switch.js +33 -26
- package/dist/components/Tab/stories/__mock__.js +1 -1
- package/dist/components/Tab.js +33 -27
- package/dist/components/Text.js +1 -2
- package/dist/components/Textarea.js +26 -18
- package/dist/components/Tile.js +21 -17
- package/dist/components/Title.js +3 -4
- package/dist/components/Tooltip.js +3 -4
- package/dist/components/Video/stories/__mocks__.js +1 -1
- package/dist/components/Video.js +3 -4
- package/dist/components/Warning.js +26 -20
- package/dist/context/Notifications.js +38 -42
- package/dist/context/UIContext.js +19 -17
- package/dist/context/UrlAssetPrefix.js +3 -3
- package/dist/css/components/Tile/Tile.css +3 -3
- package/dist/hoc/urlWithAssetPrefix.js +13 -16
- package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js +13 -40
- package/dist/hooks/useActiveClasses/useActiveClasses.interface.js +1 -1
- package/dist/hooks/useActiveClasses/useActiveClasses.js +25 -29
- package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js +13 -15
- package/dist/hooks/useAppearanceConfig.js +0 -1
- package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +21 -28
- package/dist/hooks/useDevicePropsGenerator.js +0 -1
- package/dist/hooks/useDeviceTargetClass.js +0 -1
- package/dist/hooks/useStyles/styleAttributes.js +1 -1
- package/dist/hooks/useStyles/useStyles.js +0 -1
- package/dist/hooks/useStyles.js +0 -1
- package/dist/hooks/useViewportFix.js +5 -5
- package/dist/hooks.js +1 -1
- package/dist/types/components/Select/SelectContainer.d.ts +1 -1
- package/dist/utils/setViewportProperty.js +3 -3
- package/package.json +3 -3
- package/dist/Avatar_cjs_CLJnKU39.js +0 -157
- package/dist/Avatar_es_BgN-fbOj.js +0 -153
- package/dist/ChipsGroup_cjs_C8L3ZeD_.js +0 -331
- package/dist/DatePicker_cjs_BzEtDAb8.js +0 -183
- package/dist/DatePicker_es_DRyCMO0I.js +0 -179
- package/dist/Divider_cjs_DUYtmwn2.js +0 -97
- package/dist/Divider_es_CCLBFIx6.js +0 -93
- package/dist/DropdownItem_cjs_Bhss6lyM.js +0 -207
- package/dist/DropdownItem_es_BXl6lPJx.js +0 -202
- package/dist/Group_cjs_CsJ6ICKK.js +0 -59
- package/dist/Group_es_DRqIIM9m.js +0 -55
- package/dist/Image_cjs_DRhhc66R.js +0 -29
- package/dist/Image_es_BpMidmve.js +0 -27
- package/dist/Loader_cjs_D3lnxPlI.js +0 -132
- package/dist/Loader_es_BUSqFrCd.js +0 -128
- package/dist/Overlay_cjs_CcfJYN5o.js +0 -41
- package/dist/Overlay_es_DF3DAdxS.js +0 -37
- package/dist/Text_cjs_0EINiUq4.js +0 -68
- package/dist/Text_es_CwV9rjFD.js +0 -64
- package/dist/tslib.es6_cjs_CCZ3TN_7.js +0 -59
- package/dist/tslib.es6_es_Bwu1Cn-t.js +0 -56
|
@@ -3,18 +3,17 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
|
-
var Icon = require('../../
|
|
7
|
-
var Text = require('../../
|
|
6
|
+
var Icon = require('../../Icon_cjs_DpFxIFv5.js');
|
|
7
|
+
var Text = require('../../Text_cjs_BDTjOTVB.js');
|
|
8
8
|
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
9
9
|
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
10
10
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
11
|
-
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
12
11
|
var _default = require('@itcase/icons/default');
|
|
13
12
|
require('react-inlinesvg');
|
|
14
13
|
require('../hoc/urlWithAssetPrefix.js');
|
|
15
14
|
require('@itcase/common');
|
|
16
15
|
require('../context/UrlAssetPrefix.js');
|
|
17
|
-
require('../../
|
|
16
|
+
require('../../Link_cjs_qKXVfU8e.js');
|
|
18
17
|
require('lodash/camelCase');
|
|
19
18
|
require('lodash/castArray');
|
|
20
19
|
require('lodash/upperFirst');
|
|
@@ -28,7 +27,7 @@ require('../hooks.js');
|
|
|
28
27
|
require('../hooks/useStyles/styleAttributes.js');
|
|
29
28
|
require('lodash/maxBy');
|
|
30
29
|
|
|
31
|
-
|
|
30
|
+
const warningAppearanceAccent = {
|
|
32
31
|
accentMutedPrimary: {
|
|
33
32
|
fill: 'accentTertiary',
|
|
34
33
|
labelTextColor: 'accentTextQuaternary',
|
|
@@ -51,7 +50,7 @@ var warningAppearanceAccent = {
|
|
|
51
50
|
},
|
|
52
51
|
};
|
|
53
52
|
|
|
54
|
-
|
|
53
|
+
const warningAppearanceError = {
|
|
55
54
|
errorMutedPrimary: {
|
|
56
55
|
fill: 'errorTertiary',
|
|
57
56
|
labelTextColor: 'errorTextQuaternary',
|
|
@@ -74,7 +73,7 @@ var warningAppearanceError = {
|
|
|
74
73
|
},
|
|
75
74
|
};
|
|
76
75
|
|
|
77
|
-
|
|
76
|
+
const warningAppearanceInfo = {
|
|
78
77
|
infoMutedPrimary: {
|
|
79
78
|
fill: 'infoTertiary',
|
|
80
79
|
labelTextColor: 'infoTextSecondary',
|
|
@@ -97,7 +96,7 @@ var warningAppearanceInfo = {
|
|
|
97
96
|
},
|
|
98
97
|
};
|
|
99
98
|
|
|
100
|
-
|
|
99
|
+
const warningAppearanceSize = {
|
|
101
100
|
sizeL: {
|
|
102
101
|
size: 'l',
|
|
103
102
|
labelTextSize: 's',
|
|
@@ -108,7 +107,7 @@ var warningAppearanceSize = {
|
|
|
108
107
|
},
|
|
109
108
|
};
|
|
110
109
|
|
|
111
|
-
|
|
110
|
+
const warningAppearanceStyle = {
|
|
112
111
|
solid: {
|
|
113
112
|
borderColor: 'none',
|
|
114
113
|
},
|
|
@@ -122,7 +121,7 @@ var warningAppearanceStyle = {
|
|
|
122
121
|
},
|
|
123
122
|
};
|
|
124
123
|
|
|
125
|
-
|
|
124
|
+
const warningAppearanceWarning = {
|
|
126
125
|
warningMutedPrimary: {
|
|
127
126
|
fill: 'warningTertiary',
|
|
128
127
|
labelTextColor: 'warningTextSecondary',
|
|
@@ -145,23 +144,30 @@ var warningAppearanceWarning = {
|
|
|
145
144
|
},
|
|
146
145
|
};
|
|
147
146
|
|
|
148
|
-
|
|
147
|
+
const warningAppearance = {
|
|
148
|
+
...warningAppearanceAccent,
|
|
149
|
+
...warningAppearanceWarning,
|
|
150
|
+
...warningAppearanceError,
|
|
151
|
+
...warningAppearanceInfo,
|
|
152
|
+
...warningAppearanceStyle,
|
|
153
|
+
...warningAppearanceSize,
|
|
154
|
+
};
|
|
149
155
|
|
|
150
|
-
|
|
156
|
+
const warningConfig = {
|
|
151
157
|
appearance: warningAppearance,
|
|
152
|
-
setAppearance:
|
|
158
|
+
setAppearance: (appearanceConfig) => {
|
|
153
159
|
warningConfig.appearance = appearanceConfig;
|
|
154
160
|
},
|
|
155
161
|
};
|
|
156
162
|
function Warning(props) {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
163
|
+
const { className, appearance, label, description, shape, isSkeleton } = props;
|
|
164
|
+
const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, warningConfig);
|
|
165
|
+
const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
166
|
+
const { fillClass, labelTextColor, labelTextSize, labelTextWeight, descriptionTextColor, descriptionTextSize, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeSize, iconBeforeSrc, sizeClass, } = propsGenerator;
|
|
161
167
|
// @ts-ignore
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
return (jsxRuntime.jsx(React.Fragment, { children: isVisible && (jsxRuntime.jsxs("div", { className: clsx(className, 'warning', fillClass &&
|
|
168
|
+
const { styles: warningStyles } = useStyles.useStyles(props);
|
|
169
|
+
const [isVisible, setIsVisible] = React.useState(true);
|
|
170
|
+
return (jsxRuntime.jsx(React.Fragment, { children: isVisible && (jsxRuntime.jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shape && `warning_shape_${shape}`, isSkeleton && `warning_skeleton`), style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: 'warning__content', children: [label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsxRuntime.jsx(Text.Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description }))] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
|
|
165
171
|
}
|
|
166
172
|
|
|
167
173
|
exports.Warning = Warning;
|
|
@@ -1,43 +1,42 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
5
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
5
|
var React = require('react');
|
|
7
6
|
var uuid = require('uuid');
|
|
8
7
|
var common = require('@itcase/common');
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
const STATUSES = {
|
|
11
10
|
error: 'error',
|
|
12
11
|
warning: 'warning',
|
|
13
12
|
info: 'info',
|
|
14
13
|
success: 'success',
|
|
15
14
|
};
|
|
16
|
-
|
|
15
|
+
const NotificationsContext = React.createContext([]);
|
|
17
16
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
18
|
-
|
|
19
|
-
hideNotifications:
|
|
20
|
-
showNotification:
|
|
17
|
+
const NotificationsAPIContext = React.createContext({
|
|
18
|
+
hideNotifications: (targetId) => { },
|
|
19
|
+
showNotification: (notification, onClose) => { },
|
|
21
20
|
notificationStatuses: STATUSES,
|
|
22
21
|
});
|
|
23
22
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
24
23
|
function NotificationsProvider(props) {
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
|
|
25
|
+
const [notificationsList, setNotificationsList] = React.useState(() => {
|
|
27
26
|
// We need to set id to every notification item and original list also be have new id's
|
|
28
|
-
return (initialNotificationsList || []).map(
|
|
27
|
+
return (initialNotificationsList || []).map((notificationItem) => {
|
|
29
28
|
return createNotification(notificationItem, notificationItem.onClose);
|
|
30
29
|
});
|
|
31
|
-
})
|
|
32
|
-
|
|
30
|
+
});
|
|
31
|
+
const hideNotifications = React.useCallback((targetId) => {
|
|
33
32
|
// If not target, then nothing to hide
|
|
34
33
|
if (!targetId) {
|
|
35
34
|
return;
|
|
36
35
|
}
|
|
37
|
-
setNotificationsList(
|
|
38
|
-
|
|
36
|
+
setNotificationsList((prevNotificationsList) => {
|
|
37
|
+
const newState = prevNotificationsList.filter((notificationItem) => {
|
|
39
38
|
// Check on need to hide, if current notification is target for hide
|
|
40
|
-
|
|
39
|
+
const isNeedToHide = String(notificationItem.id) === String(targetId);
|
|
41
40
|
// Callback for close if exists
|
|
42
41
|
if (isNeedToHide) {
|
|
43
42
|
clearTimeout(notificationItem._closeTimeout);
|
|
@@ -51,19 +50,17 @@ function NotificationsProvider(props) {
|
|
|
51
50
|
return newState;
|
|
52
51
|
});
|
|
53
52
|
}, []);
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
setNotificationsList(
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
return String(notificationItem.id) === String(newNotificationItem.id);
|
|
60
|
-
});
|
|
53
|
+
const showNotification = React.useCallback((notification, onClose) => {
|
|
54
|
+
const newNotificationItem = createNotification(notification, onClose);
|
|
55
|
+
setNotificationsList((prevNotificationsList) => {
|
|
56
|
+
const newState = prevNotificationsList.slice();
|
|
57
|
+
const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
|
|
61
58
|
// Add new notification
|
|
62
59
|
if (existsNotificationIndex === -1) {
|
|
63
|
-
return
|
|
60
|
+
return [...newState, newNotificationItem];
|
|
64
61
|
}
|
|
65
62
|
// Or update exists notification
|
|
66
|
-
|
|
63
|
+
const updatedNotificationItem = newState[existsNotificationIndex];
|
|
67
64
|
// Clear timeout to avoid close event for updated notification
|
|
68
65
|
clearTimeout(updatedNotificationItem._closeTimeout);
|
|
69
66
|
updatedNotificationItem._closeTimeout = undefined;
|
|
@@ -72,26 +69,26 @@ function NotificationsProvider(props) {
|
|
|
72
69
|
return newState;
|
|
73
70
|
});
|
|
74
71
|
if (newNotificationItem.closeByTime) {
|
|
75
|
-
newNotificationItem._closeTimeout = setTimeout(
|
|
72
|
+
newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
|
|
76
73
|
}
|
|
77
74
|
return newNotificationItem;
|
|
78
75
|
},
|
|
79
76
|
// "hideNotifications" is never changed
|
|
80
77
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
81
78
|
[]);
|
|
82
|
-
|
|
79
|
+
const notificationsAPI = React.useMemo(() => ({
|
|
83
80
|
hideNotifications: hideNotifications,
|
|
84
81
|
notificationStatuses: STATUSES,
|
|
85
82
|
showNotification: showNotification,
|
|
86
|
-
})
|
|
83
|
+
}),
|
|
87
84
|
// Functions is never changes, no sense to set as dependencies
|
|
88
85
|
// eslint-disable-next-line
|
|
89
86
|
[]);
|
|
90
|
-
React.useEffect(
|
|
87
|
+
React.useEffect(() => {
|
|
91
88
|
// Set timeout for initial notifications list one time on first render
|
|
92
|
-
notificationsList.forEach(
|
|
89
|
+
notificationsList.forEach((notificationItem) => {
|
|
93
90
|
if (notificationItem.closeByTime) {
|
|
94
|
-
setTimeout(
|
|
91
|
+
setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
|
|
95
92
|
}
|
|
96
93
|
});
|
|
97
94
|
// Show notifications on all requests errors.
|
|
@@ -99,7 +96,7 @@ function NotificationsProvider(props) {
|
|
|
99
96
|
// to disable notifications logger.
|
|
100
97
|
if (isLogRequestsErrors) {
|
|
101
98
|
common.axiosInstanceITCase.responseErrorHandler.loggerManager = {
|
|
102
|
-
log:
|
|
99
|
+
log: (responseError) => {
|
|
103
100
|
if (responseError.message) {
|
|
104
101
|
showNotification({
|
|
105
102
|
title: responseError.message,
|
|
@@ -121,24 +118,23 @@ function useNotificationsAPI() {
|
|
|
121
118
|
return React.useContext(NotificationsAPIContext);
|
|
122
119
|
}
|
|
123
120
|
function createNotification(notification, onClose) {
|
|
124
|
-
var _a, _b, _c, _d, _e;
|
|
125
121
|
// Default notification item properties
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
122
|
+
let id = uuid.v4().split('-')[0];
|
|
123
|
+
let title = '';
|
|
124
|
+
let text = '';
|
|
125
|
+
let status = STATUSES.warning;
|
|
130
126
|
// let appearance = STATUSES.appearance
|
|
131
|
-
|
|
132
|
-
|
|
127
|
+
let closeByTime = 4500;
|
|
128
|
+
let appearance = '';
|
|
133
129
|
if (typeof notification === 'string') {
|
|
134
130
|
text = notification;
|
|
135
131
|
}
|
|
136
132
|
else if (typeof notification === 'object') {
|
|
137
|
-
id =
|
|
138
|
-
title =
|
|
139
|
-
text =
|
|
140
|
-
status =
|
|
141
|
-
closeByTime =
|
|
133
|
+
id = notification.id ?? id;
|
|
134
|
+
title = notification.title ?? title;
|
|
135
|
+
text = notification.text ?? text;
|
|
136
|
+
status = notification.status ?? status;
|
|
137
|
+
closeByTime = notification.closeByTime ?? closeByTime;
|
|
142
138
|
}
|
|
143
139
|
switch (status) {
|
|
144
140
|
case 'success':
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
|
-
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
5
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
5
|
var React = require('react');
|
|
7
6
|
var camelCase = require('lodash/camelCase');
|
|
@@ -9,14 +8,14 @@ var useMediaQueries = require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
|
9
8
|
var setViewportProperty = require('../utils/setViewportProperty.js');
|
|
10
9
|
require('react-responsive');
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
const UserDeviceContext = React.createContext({
|
|
13
12
|
isMobile: false,
|
|
14
13
|
isTablet: false,
|
|
15
14
|
isDesktop: false,
|
|
16
15
|
deviceCurrentMainType: '',
|
|
17
16
|
});
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
const UIProvider = React.memo(function UIProvider(props) {
|
|
18
|
+
const { userDeviceState = {}, children } = props;
|
|
20
19
|
/** NOTE:
|
|
21
20
|
* Remember that the "useMediaQueries" hook works by next scenario:
|
|
22
21
|
* when changing the device type(browser width), the hook will first "enable"
|
|
@@ -24,20 +23,18 @@ var UIProvider = React.memo(function UIProvider(props) {
|
|
|
24
23
|
* what provoke to double rendering, and in moment we have two different types as "true".
|
|
25
24
|
* We will need to look at how to change this behavior.
|
|
26
25
|
*/
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
const allDevicesTypes = useMediaQueries.useMediaQueries(userDeviceState);
|
|
27
|
+
const { isMobile, isTablet, isDesktop, ...fullNamedDeviceTypes } = allDevicesTypes;
|
|
28
|
+
const deviceCurrentMainType = (isMobile && 'mobile') ||
|
|
30
29
|
(isTablet && 'tablet') ||
|
|
31
30
|
(isDesktop && 'desktop') ||
|
|
32
31
|
'';
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
return camelCase(key.replace('is', ''));
|
|
36
|
-
});
|
|
32
|
+
const [deviceCurrentType, deviceTypesList] = React.useMemo(() => {
|
|
33
|
+
const deviceTypesList = Object.keys(allDevicesTypes).map((key) => camelCase(key.replace('is', '')));
|
|
37
34
|
// In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
|
|
38
|
-
|
|
35
|
+
let deviceCurrentType = Object.keys(fullNamedDeviceTypes).find(
|
|
39
36
|
// If "fullNamedDeviceTypes.isMobileLarge: true" - that our device
|
|
40
|
-
|
|
37
|
+
(key) => fullNamedDeviceTypes[key]);
|
|
41
38
|
// Or set main type (e.g. "isMobile")
|
|
42
39
|
if (!deviceCurrentType) {
|
|
43
40
|
deviceCurrentType = deviceCurrentMainType;
|
|
@@ -45,16 +42,21 @@ var UIProvider = React.memo(function UIProvider(props) {
|
|
|
45
42
|
deviceCurrentType = camelCase(deviceCurrentType.replace('is', ''));
|
|
46
43
|
// On server side render we doesn't known user device and we need to set special word
|
|
47
44
|
return [deviceCurrentType || '_none_', deviceTypesList];
|
|
48
|
-
}, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes])
|
|
49
|
-
|
|
50
|
-
return
|
|
45
|
+
}, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes]);
|
|
46
|
+
const deviceContextState = React.useMemo(() => {
|
|
47
|
+
return {
|
|
48
|
+
...allDevicesTypes,
|
|
49
|
+
deviceCurrentMainType: deviceCurrentMainType,
|
|
50
|
+
deviceCurrentType: deviceCurrentType,
|
|
51
|
+
deviceTypesList: deviceTypesList,
|
|
52
|
+
};
|
|
51
53
|
}, [
|
|
52
54
|
allDevicesTypes,
|
|
53
55
|
deviceCurrentMainType,
|
|
54
56
|
deviceCurrentType,
|
|
55
57
|
deviceTypesList,
|
|
56
58
|
]);
|
|
57
|
-
React.useEffect(
|
|
59
|
+
React.useEffect(() => {
|
|
58
60
|
setViewportProperty.setViewportProperty();
|
|
59
61
|
window.addEventListener('resize', setViewportProperty.setViewportProperty);
|
|
60
62
|
}, []);
|
|
@@ -3,13 +3,13 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
const UrlAssetPrefixContext = React.createContext({
|
|
7
7
|
assetPrefix: undefined,
|
|
8
8
|
ignorePathsList: undefined,
|
|
9
9
|
});
|
|
10
10
|
function UrlAssetPrefixProvider(props) {
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
const { assetPrefix, ignorePathsList, children } = props;
|
|
12
|
+
const value = React.useMemo(() => ({ assetPrefix, ignorePathsList }), [assetPrefix, ignorePathsList]);
|
|
13
13
|
return (jsxRuntime.jsx(UrlAssetPrefixContext.Provider, { value: value, children: children }));
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
4
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
4
|
var React = require('react');
|
|
6
5
|
var common = require('@itcase/common');
|
|
7
6
|
var UrlAssetPrefix = require('../context/UrlAssetPrefix.js');
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
const urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
|
|
10
9
|
/**
|
|
11
10
|
* HOC, который добавляет assetPrefix к URL-пропсам.
|
|
12
11
|
*
|
|
@@ -24,31 +23,30 @@ var urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
|
|
|
24
23
|
* const B = (props: { id: string }) => <div />;
|
|
25
24
|
* urlWithAssetPrefix(B); // ❌ TS ошибка (нет url-пропов)
|
|
26
25
|
*/
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
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];
|
|
32
31
|
if (url && typeof url === 'string') {
|
|
33
32
|
if (assetPrefix) {
|
|
34
|
-
|
|
33
|
+
const isNeedAssetPrefix = checkIsNeedAssetPrefix(url, assetPrefix, ignorePathsList);
|
|
35
34
|
if (isNeedAssetPrefix) {
|
|
36
|
-
|
|
37
|
-
url =
|
|
35
|
+
const prefixPath = common.formatURL(assetPrefix).slice(0, -1);
|
|
36
|
+
url = `${prefixPath}${url}`;
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
39
|
resultProps[propKey] = url;
|
|
41
40
|
}
|
|
42
41
|
return resultProps;
|
|
43
42
|
}, {});
|
|
44
|
-
return jsxRuntime.jsx(WrappedComponent,
|
|
43
|
+
return jsxRuntime.jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
|
|
45
44
|
});
|
|
46
45
|
return HOC;
|
|
47
46
|
};
|
|
48
|
-
|
|
49
|
-
if (ignorePathsList === void 0) { ignorePathsList = []; }
|
|
47
|
+
const checkIsNeedAssetPrefix = (url, assetPrefix, ignorePathsList = []) => {
|
|
50
48
|
// Ignore prefix if:
|
|
51
|
-
|
|
49
|
+
const isPrefixIgnore =
|
|
52
50
|
// Url is absolute
|
|
53
51
|
url.startsWith('http:') ||
|
|
54
52
|
url.startsWith('https:') ||
|
|
@@ -60,8 +58,7 @@ var checkIsNeedAssetPrefix = function (url, assetPrefix, ignorePathsList) {
|
|
|
60
58
|
return false;
|
|
61
59
|
}
|
|
62
60
|
// And check special paths for ignore prefix
|
|
63
|
-
for (
|
|
64
|
-
var urlPath = ignorePathsList_1[_i];
|
|
61
|
+
for (const urlPath of ignorePathsList) {
|
|
65
62
|
if (urlPath instanceof RegExp) {
|
|
66
63
|
if (urlPath.test(url)) {
|
|
67
64
|
return false;
|
|
@@ -1,84 +1,57 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
const CLASS_RULES = {
|
|
4
4
|
fill: [
|
|
5
5
|
{
|
|
6
6
|
key: 'fillClass',
|
|
7
|
-
stateFn:
|
|
8
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
9
|
-
return !isActive && !isDisabled;
|
|
10
|
-
},
|
|
7
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
|
|
11
8
|
},
|
|
12
9
|
{
|
|
13
10
|
key: 'fillHoverClass',
|
|
14
|
-
stateFn:
|
|
15
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
16
|
-
return !isActive && !isDisabled;
|
|
17
|
-
},
|
|
11
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
|
|
18
12
|
},
|
|
19
13
|
{
|
|
20
14
|
key: 'fillActiveClass',
|
|
21
|
-
stateFn:
|
|
22
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
23
|
-
return Boolean(isActive) && !isDisabled;
|
|
24
|
-
},
|
|
15
|
+
stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
|
|
25
16
|
},
|
|
26
17
|
{
|
|
27
18
|
key: 'fillActiveHoverClass',
|
|
28
|
-
stateFn:
|
|
29
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
30
|
-
return Boolean(isActive) && !isDisabled;
|
|
31
|
-
},
|
|
19
|
+
stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
|
|
32
20
|
},
|
|
33
21
|
{
|
|
34
22
|
key: 'fillDisabledClass',
|
|
35
|
-
stateFn:
|
|
36
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
37
|
-
return !isActive && Boolean(isDisabled);
|
|
38
|
-
},
|
|
23
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && Boolean(isDisabled),
|
|
39
24
|
},
|
|
40
25
|
],
|
|
41
26
|
borderColor: [
|
|
42
27
|
{
|
|
43
28
|
key: 'borderColorClass',
|
|
44
|
-
stateFn:
|
|
45
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
46
|
-
return !isActive && !isDisabled;
|
|
47
|
-
},
|
|
29
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
|
|
48
30
|
},
|
|
49
31
|
{
|
|
50
32
|
key: 'borderColorHoverClass',
|
|
51
|
-
stateFn:
|
|
52
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
53
|
-
return !isActive && !isDisabled;
|
|
54
|
-
},
|
|
33
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
|
|
55
34
|
},
|
|
56
35
|
{
|
|
57
36
|
key: 'borderColorActiveClass',
|
|
58
|
-
stateFn:
|
|
59
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
60
|
-
return Boolean(isActive) && !isDisabled;
|
|
61
|
-
},
|
|
37
|
+
stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
|
|
62
38
|
},
|
|
63
39
|
],
|
|
64
40
|
textColor: [
|
|
65
41
|
{
|
|
66
42
|
key: 'textColorClass',
|
|
67
|
-
stateFn:
|
|
68
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
69
|
-
return !isActive && !isDisabled;
|
|
70
|
-
},
|
|
43
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
|
|
71
44
|
},
|
|
72
45
|
],
|
|
73
46
|
};
|
|
74
|
-
|
|
47
|
+
const formatState = (key) => {
|
|
75
48
|
// Try to find one of the state tokens in the input key:
|
|
76
49
|
// - matches "ActiveHover", "Active", "Hover" or "Disabled"
|
|
77
50
|
// - case-insensitive because of the /i flag
|
|
78
51
|
// Examples of matches:
|
|
79
52
|
// "fillActiveHoverColor" -> match[0] === "ActiveHover"
|
|
80
53
|
// "borderDisabled" -> match[0] === "Disabled"
|
|
81
|
-
|
|
54
|
+
const stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
|
|
82
55
|
if (!stateMatch) {
|
|
83
56
|
return '';
|
|
84
57
|
}
|
|
@@ -111,7 +84,7 @@ var formatState = function (key) {
|
|
|
111
84
|
// Examples:
|
|
112
85
|
// "myTestString" -> "my-test-string"
|
|
113
86
|
// "borderColorActiveHover" -> "border-color-active-hover"
|
|
114
|
-
|
|
87
|
+
const toKebabCase = (str) => {
|
|
115
88
|
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
|
116
89
|
};
|
|
117
90
|
|