@itcase/ui 1.8.123 → 1.8.125
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_AwXEUY8j.js +161 -0
- package/dist/Avatar_es_BtlaCRc5.js +157 -0
- package/dist/{Button_cjs_Ce97psFT.js → Button_cjs_C34BU1BK.js} +46 -34
- package/dist/{Button_es_CZss7cXh.js → Button_es_DnlzLBUT.js} +46 -34
- package/dist/ChipsGroup_cjs_DfAKN5CA.js +344 -0
- package/dist/{ChipsGroup_es_ayPPUwQ7.js → ChipsGroup_es_DBKY2UyF.js} +48 -35
- package/dist/DatePicker_cjs_DfbeIL2m.js +182 -0
- package/dist/DatePicker_es_BIJNx427.js +178 -0
- package/dist/Divider_cjs_DrmV2ezS.js +105 -0
- package/dist/Divider_es_BiYozVBS.js +101 -0
- package/dist/DropdownItem_cjs_vHuzXW9M.js +211 -0
- package/dist/DropdownItem_es_DVHWWgnU.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_BVLGzj7Y.js} +170 -157
- package/dist/{Icon_es_BrwLifge.js → Icon_es_DkVkzTha.js} +170 -157
- package/dist/Image_cjs_BUM81t4Y.js +28 -0
- package/dist/Image_es_C-IjVkKX.js +26 -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_DwAmukik.js} +45 -33
- package/dist/{Label_es_SULlg9bL.js → Label_es_B2kcstsG.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 -29
- 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 -29
- 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/Button/Button.appearance.d.ts +232 -232
- package/dist/types/components/Button/Button.d.ts +4 -4
- package/dist/types/components/Button/Button.interface.d.ts +5 -5
- package/dist/types/components/Pagination/Pagination.d.ts +1 -1
- package/dist/types/components/Select/SelectContainer.d.ts +1 -1
- package/dist/types/components/Text/Text.appearance.d.ts +58 -58
- package/dist/types/components/Text/Text.interface.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
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { useState, Fragment } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
|
-
import { I as Icon } from '../
|
|
5
|
-
import { T as Text } from '../
|
|
4
|
+
import { I as Icon } from '../Icon_es_DkVkzTha.js';
|
|
5
|
+
import { T as Text } from '../Text_es_CnymlElo.js';
|
|
6
6
|
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
7
7
|
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
8
8
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
9
|
-
import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
|
|
10
9
|
import { icons16 } from '@itcase/icons/default';
|
|
11
10
|
import 'react-inlinesvg';
|
|
12
11
|
import '../hoc/urlWithAssetPrefix.js';
|
|
13
12
|
import '@itcase/common';
|
|
14
13
|
import '../context/UrlAssetPrefix.js';
|
|
15
|
-
import '../
|
|
14
|
+
import '../Link_es_P2b6ya7P.js';
|
|
16
15
|
import 'lodash/camelCase';
|
|
17
16
|
import 'lodash/castArray';
|
|
18
17
|
import 'lodash/upperFirst';
|
|
@@ -26,7 +25,7 @@ import '../hooks.js';
|
|
|
26
25
|
import '../hooks/useStyles/styleAttributes.js';
|
|
27
26
|
import 'lodash/maxBy';
|
|
28
27
|
|
|
29
|
-
|
|
28
|
+
const warningAppearanceAccent = {
|
|
30
29
|
accentMutedPrimary: {
|
|
31
30
|
fill: 'accentTertiary',
|
|
32
31
|
labelTextColor: 'accentTextQuaternary',
|
|
@@ -49,7 +48,7 @@ var warningAppearanceAccent = {
|
|
|
49
48
|
},
|
|
50
49
|
};
|
|
51
50
|
|
|
52
|
-
|
|
51
|
+
const warningAppearanceError = {
|
|
53
52
|
errorMutedPrimary: {
|
|
54
53
|
fill: 'errorTertiary',
|
|
55
54
|
labelTextColor: 'errorTextQuaternary',
|
|
@@ -72,7 +71,7 @@ var warningAppearanceError = {
|
|
|
72
71
|
},
|
|
73
72
|
};
|
|
74
73
|
|
|
75
|
-
|
|
74
|
+
const warningAppearanceInfo = {
|
|
76
75
|
infoMutedPrimary: {
|
|
77
76
|
fill: 'infoTertiary',
|
|
78
77
|
labelTextColor: 'infoTextSecondary',
|
|
@@ -95,7 +94,7 @@ var warningAppearanceInfo = {
|
|
|
95
94
|
},
|
|
96
95
|
};
|
|
97
96
|
|
|
98
|
-
|
|
97
|
+
const warningAppearanceSize = {
|
|
99
98
|
sizeL: {
|
|
100
99
|
size: 'l',
|
|
101
100
|
labelTextSize: 's',
|
|
@@ -106,7 +105,7 @@ var warningAppearanceSize = {
|
|
|
106
105
|
},
|
|
107
106
|
};
|
|
108
107
|
|
|
109
|
-
|
|
108
|
+
const warningAppearanceStyle = {
|
|
110
109
|
solid: {
|
|
111
110
|
borderColor: 'none',
|
|
112
111
|
},
|
|
@@ -120,7 +119,7 @@ var warningAppearanceStyle = {
|
|
|
120
119
|
},
|
|
121
120
|
};
|
|
122
121
|
|
|
123
|
-
|
|
122
|
+
const warningAppearanceWarning = {
|
|
124
123
|
warningMutedPrimary: {
|
|
125
124
|
fill: 'warningTertiary',
|
|
126
125
|
labelTextColor: 'warningTextSecondary',
|
|
@@ -143,23 +142,30 @@ var warningAppearanceWarning = {
|
|
|
143
142
|
},
|
|
144
143
|
};
|
|
145
144
|
|
|
146
|
-
|
|
145
|
+
const warningAppearance = {
|
|
146
|
+
...warningAppearanceAccent,
|
|
147
|
+
...warningAppearanceWarning,
|
|
148
|
+
...warningAppearanceError,
|
|
149
|
+
...warningAppearanceInfo,
|
|
150
|
+
...warningAppearanceStyle,
|
|
151
|
+
...warningAppearanceSize,
|
|
152
|
+
};
|
|
147
153
|
|
|
148
|
-
|
|
154
|
+
const warningConfig = {
|
|
149
155
|
appearance: warningAppearance,
|
|
150
|
-
setAppearance:
|
|
156
|
+
setAppearance: (appearanceConfig) => {
|
|
151
157
|
warningConfig.appearance = appearanceConfig;
|
|
152
158
|
},
|
|
153
159
|
};
|
|
154
160
|
function Warning(props) {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
161
|
+
const { className, appearance, label, description, shape, isSkeleton } = props;
|
|
162
|
+
const appearanceConfig = useAppearanceConfig(appearance, warningConfig);
|
|
163
|
+
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
164
|
+
const { fillClass, labelTextColor, labelTextSize, labelTextWeight, descriptionTextColor, descriptionTextSize, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeSize, iconBeforeSrc, sizeClass, } = propsGenerator;
|
|
159
165
|
// @ts-ignore
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
return (jsx(Fragment, { children: isVisible && (jsxs("div", { className: clsx(className, 'warning', fillClass &&
|
|
166
|
+
const { styles: warningStyles } = useStyles(props);
|
|
167
|
+
const [isVisible, setIsVisible] = useState(true);
|
|
168
|
+
return (jsx(Fragment, { children: isVisible && (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) && (jsx(Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: 'warning__content', children: [label && (jsx(Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsx(Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description }))] }), (iconAfter || iconAfterSrc) && (jsx(Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
|
|
163
169
|
}
|
|
164
170
|
|
|
165
171
|
export { Warning, warningAppearance, warningConfig };
|
|
@@ -1,41 +1,40 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { a as __spreadArray } from '../tslib.es6_es_Bwu1Cn-t.js';
|
|
3
2
|
import { jsx } from 'react/jsx-runtime';
|
|
4
3
|
import { createContext, useState, useCallback, useMemo, useEffect, useContext } from 'react';
|
|
5
4
|
import { v4 } from 'uuid';
|
|
6
5
|
import { axiosInstanceITCase } from '@itcase/common';
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
const STATUSES = {
|
|
9
8
|
error: 'error',
|
|
10
9
|
warning: 'warning',
|
|
11
10
|
info: 'info',
|
|
12
11
|
success: 'success',
|
|
13
12
|
};
|
|
14
|
-
|
|
13
|
+
const NotificationsContext = createContext([]);
|
|
15
14
|
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
16
|
-
|
|
17
|
-
hideNotifications:
|
|
18
|
-
showNotification:
|
|
15
|
+
const NotificationsAPIContext = createContext({
|
|
16
|
+
hideNotifications: (targetId) => { },
|
|
17
|
+
showNotification: (notification, onClose) => { },
|
|
19
18
|
notificationStatuses: STATUSES,
|
|
20
19
|
});
|
|
21
20
|
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
22
21
|
function NotificationsProvider(props) {
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
|
|
23
|
+
const [notificationsList, setNotificationsList] = useState(() => {
|
|
25
24
|
// We need to set id to every notification item and original list also be have new id's
|
|
26
|
-
return (initialNotificationsList || []).map(
|
|
25
|
+
return (initialNotificationsList || []).map((notificationItem) => {
|
|
27
26
|
return createNotification(notificationItem, notificationItem.onClose);
|
|
28
27
|
});
|
|
29
|
-
})
|
|
30
|
-
|
|
28
|
+
});
|
|
29
|
+
const hideNotifications = useCallback((targetId) => {
|
|
31
30
|
// If not target, then nothing to hide
|
|
32
31
|
if (!targetId) {
|
|
33
32
|
return;
|
|
34
33
|
}
|
|
35
|
-
setNotificationsList(
|
|
36
|
-
|
|
34
|
+
setNotificationsList((prevNotificationsList) => {
|
|
35
|
+
const newState = prevNotificationsList.filter((notificationItem) => {
|
|
37
36
|
// Check on need to hide, if current notification is target for hide
|
|
38
|
-
|
|
37
|
+
const isNeedToHide = String(notificationItem.id) === String(targetId);
|
|
39
38
|
// Callback for close if exists
|
|
40
39
|
if (isNeedToHide) {
|
|
41
40
|
clearTimeout(notificationItem._closeTimeout);
|
|
@@ -49,19 +48,17 @@ function NotificationsProvider(props) {
|
|
|
49
48
|
return newState;
|
|
50
49
|
});
|
|
51
50
|
}, []);
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
setNotificationsList(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
return String(notificationItem.id) === String(newNotificationItem.id);
|
|
58
|
-
});
|
|
51
|
+
const showNotification = useCallback((notification, onClose) => {
|
|
52
|
+
const newNotificationItem = createNotification(notification, onClose);
|
|
53
|
+
setNotificationsList((prevNotificationsList) => {
|
|
54
|
+
const newState = prevNotificationsList.slice();
|
|
55
|
+
const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
|
|
59
56
|
// Add new notification
|
|
60
57
|
if (existsNotificationIndex === -1) {
|
|
61
|
-
return
|
|
58
|
+
return [...newState, newNotificationItem];
|
|
62
59
|
}
|
|
63
60
|
// Or update exists notification
|
|
64
|
-
|
|
61
|
+
const updatedNotificationItem = newState[existsNotificationIndex];
|
|
65
62
|
// Clear timeout to avoid close event for updated notification
|
|
66
63
|
clearTimeout(updatedNotificationItem._closeTimeout);
|
|
67
64
|
updatedNotificationItem._closeTimeout = undefined;
|
|
@@ -70,26 +67,26 @@ function NotificationsProvider(props) {
|
|
|
70
67
|
return newState;
|
|
71
68
|
});
|
|
72
69
|
if (newNotificationItem.closeByTime) {
|
|
73
|
-
newNotificationItem._closeTimeout = setTimeout(
|
|
70
|
+
newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
|
|
74
71
|
}
|
|
75
72
|
return newNotificationItem;
|
|
76
73
|
},
|
|
77
74
|
// "hideNotifications" is never changed
|
|
78
75
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
79
76
|
[]);
|
|
80
|
-
|
|
77
|
+
const notificationsAPI = useMemo(() => ({
|
|
81
78
|
hideNotifications: hideNotifications,
|
|
82
79
|
notificationStatuses: STATUSES,
|
|
83
80
|
showNotification: showNotification,
|
|
84
|
-
})
|
|
81
|
+
}),
|
|
85
82
|
// Functions is never changes, no sense to set as dependencies
|
|
86
83
|
// eslint-disable-next-line
|
|
87
84
|
[]);
|
|
88
|
-
useEffect(
|
|
85
|
+
useEffect(() => {
|
|
89
86
|
// Set timeout for initial notifications list one time on first render
|
|
90
|
-
notificationsList.forEach(
|
|
87
|
+
notificationsList.forEach((notificationItem) => {
|
|
91
88
|
if (notificationItem.closeByTime) {
|
|
92
|
-
setTimeout(
|
|
89
|
+
setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
|
|
93
90
|
}
|
|
94
91
|
});
|
|
95
92
|
// Show notifications on all requests errors.
|
|
@@ -97,7 +94,7 @@ function NotificationsProvider(props) {
|
|
|
97
94
|
// to disable notifications logger.
|
|
98
95
|
if (isLogRequestsErrors) {
|
|
99
96
|
axiosInstanceITCase.responseErrorHandler.loggerManager = {
|
|
100
|
-
log:
|
|
97
|
+
log: (responseError) => {
|
|
101
98
|
if (responseError.message) {
|
|
102
99
|
showNotification({
|
|
103
100
|
title: responseError.message,
|
|
@@ -119,24 +116,23 @@ function useNotificationsAPI() {
|
|
|
119
116
|
return useContext(NotificationsAPIContext);
|
|
120
117
|
}
|
|
121
118
|
function createNotification(notification, onClose) {
|
|
122
|
-
var _a, _b, _c, _d, _e;
|
|
123
119
|
// Default notification item properties
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
120
|
+
let id = v4().split('-')[0];
|
|
121
|
+
let title = '';
|
|
122
|
+
let text = '';
|
|
123
|
+
let status = STATUSES.warning;
|
|
128
124
|
// let appearance = STATUSES.appearance
|
|
129
|
-
|
|
130
|
-
|
|
125
|
+
let closeByTime = 4500;
|
|
126
|
+
let appearance = '';
|
|
131
127
|
if (typeof notification === 'string') {
|
|
132
128
|
text = notification;
|
|
133
129
|
}
|
|
134
130
|
else if (typeof notification === 'object') {
|
|
135
|
-
id =
|
|
136
|
-
title =
|
|
137
|
-
text =
|
|
138
|
-
status =
|
|
139
|
-
closeByTime =
|
|
131
|
+
id = notification.id ?? id;
|
|
132
|
+
title = notification.title ?? title;
|
|
133
|
+
text = notification.text ?? text;
|
|
134
|
+
status = notification.status ?? status;
|
|
135
|
+
closeByTime = notification.closeByTime ?? closeByTime;
|
|
140
136
|
}
|
|
141
137
|
switch (status) {
|
|
142
138
|
case 'success':
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { b as __rest, _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
|
|
3
2
|
import { jsx } from 'react/jsx-runtime';
|
|
4
3
|
import { createContext, memo, useMemo, useEffect, useContext } from 'react';
|
|
5
4
|
import camelCase from 'lodash/camelCase';
|
|
@@ -7,14 +6,14 @@ import { useMediaQueries } from '../hooks/useMediaQueries/useMediaQueries.js';
|
|
|
7
6
|
import { setViewportProperty } from '../utils/setViewportProperty.js';
|
|
8
7
|
import 'react-responsive';
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
const UserDeviceContext = createContext({
|
|
11
10
|
isMobile: false,
|
|
12
11
|
isTablet: false,
|
|
13
12
|
isDesktop: false,
|
|
14
13
|
deviceCurrentMainType: '',
|
|
15
14
|
});
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
const UIProvider = memo(function UIProvider(props) {
|
|
16
|
+
const { userDeviceState = {}, children } = props;
|
|
18
17
|
/** NOTE:
|
|
19
18
|
* Remember that the "useMediaQueries" hook works by next scenario:
|
|
20
19
|
* when changing the device type(browser width), the hook will first "enable"
|
|
@@ -22,20 +21,18 @@ var UIProvider = memo(function UIProvider(props) {
|
|
|
22
21
|
* what provoke to double rendering, and in moment we have two different types as "true".
|
|
23
22
|
* We will need to look at how to change this behavior.
|
|
24
23
|
*/
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
const allDevicesTypes = useMediaQueries(userDeviceState);
|
|
25
|
+
const { isMobile, isTablet, isDesktop, ...fullNamedDeviceTypes } = allDevicesTypes;
|
|
26
|
+
const deviceCurrentMainType = (isMobile && 'mobile') ||
|
|
28
27
|
(isTablet && 'tablet') ||
|
|
29
28
|
(isDesktop && 'desktop') ||
|
|
30
29
|
'';
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
return camelCase(key.replace('is', ''));
|
|
34
|
-
});
|
|
30
|
+
const [deviceCurrentType, deviceTypesList] = useMemo(() => {
|
|
31
|
+
const deviceTypesList = Object.keys(allDevicesTypes).map((key) => camelCase(key.replace('is', '')));
|
|
35
32
|
// In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
|
|
36
|
-
|
|
33
|
+
let deviceCurrentType = Object.keys(fullNamedDeviceTypes).find(
|
|
37
34
|
// If "fullNamedDeviceTypes.isMobileLarge: true" - that our device
|
|
38
|
-
|
|
35
|
+
(key) => fullNamedDeviceTypes[key]);
|
|
39
36
|
// Or set main type (e.g. "isMobile")
|
|
40
37
|
if (!deviceCurrentType) {
|
|
41
38
|
deviceCurrentType = deviceCurrentMainType;
|
|
@@ -43,16 +40,21 @@ var UIProvider = memo(function UIProvider(props) {
|
|
|
43
40
|
deviceCurrentType = camelCase(deviceCurrentType.replace('is', ''));
|
|
44
41
|
// On server side render we doesn't known user device and we need to set special word
|
|
45
42
|
return [deviceCurrentType || '_none_', deviceTypesList];
|
|
46
|
-
}, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes])
|
|
47
|
-
|
|
48
|
-
return
|
|
43
|
+
}, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes]);
|
|
44
|
+
const deviceContextState = useMemo(() => {
|
|
45
|
+
return {
|
|
46
|
+
...allDevicesTypes,
|
|
47
|
+
deviceCurrentMainType: deviceCurrentMainType,
|
|
48
|
+
deviceCurrentType: deviceCurrentType,
|
|
49
|
+
deviceTypesList: deviceTypesList,
|
|
50
|
+
};
|
|
49
51
|
}, [
|
|
50
52
|
allDevicesTypes,
|
|
51
53
|
deviceCurrentMainType,
|
|
52
54
|
deviceCurrentType,
|
|
53
55
|
deviceTypesList,
|
|
54
56
|
]);
|
|
55
|
-
useEffect(
|
|
57
|
+
useEffect(() => {
|
|
56
58
|
setViewportProperty();
|
|
57
59
|
window.addEventListener('resize', setViewportProperty);
|
|
58
60
|
}, []);
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { createContext, useMemo } from 'react';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
const UrlAssetPrefixContext = createContext({
|
|
5
5
|
assetPrefix: undefined,
|
|
6
6
|
ignorePathsList: undefined,
|
|
7
7
|
});
|
|
8
8
|
function UrlAssetPrefixProvider(props) {
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
const { assetPrefix, ignorePathsList, children } = props;
|
|
10
|
+
const value = useMemo(() => ({ assetPrefix, ignorePathsList }), [assetPrefix, ignorePathsList]);
|
|
11
11
|
return (jsx(UrlAssetPrefixContext.Provider, { value: value, children: children }));
|
|
12
12
|
}
|
|
13
13
|
|
|
@@ -68,15 +68,15 @@
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
:root {
|
|
71
|
-
--tile-size-xxl-min-width:
|
|
71
|
+
--tile-size-xxl-min-width: 240px;
|
|
72
72
|
--tile-size-xxl-padding: 24px;
|
|
73
73
|
--tile-size-xxl-gap: 24px;
|
|
74
74
|
|
|
75
|
-
--tile-size-xl-min-width:
|
|
75
|
+
--tile-size-xl-min-width: 240px;
|
|
76
76
|
--tile-size-xl-padding: 24px;
|
|
77
77
|
--tile-size-xl-gap: 24px;
|
|
78
78
|
|
|
79
|
-
--tile-size-l-min-width:
|
|
79
|
+
--tile-size-l-min-width: 240px;
|
|
80
80
|
--tile-size-l-padding: 24px;
|
|
81
81
|
--tile-size-l-gap: 24px;
|
|
82
82
|
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
|
|
2
1
|
import { jsx } from 'react/jsx-runtime';
|
|
3
2
|
import React, { useContext } from 'react';
|
|
4
3
|
import { formatURL } from '@itcase/common';
|
|
5
4
|
import { UrlAssetPrefixContext } from '../context/UrlAssetPrefix.js';
|
|
6
5
|
|
|
7
|
-
|
|
6
|
+
const urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
|
|
8
7
|
/**
|
|
9
8
|
* HOC, который добавляет assetPrefix к URL-пропсам.
|
|
10
9
|
*
|
|
@@ -22,31 +21,30 @@ var urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
|
|
|
22
21
|
* const B = (props: { id: string }) => <div />;
|
|
23
22
|
* urlWithAssetPrefix(B); // ❌ TS ошибка (нет url-пропов)
|
|
24
23
|
*/
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
24
|
+
const urlWithAssetPrefix = (WrappedComponent, ..._error) => {
|
|
25
|
+
const HOC = React.forwardRef(function HOC(props, ref) {
|
|
26
|
+
const { assetPrefix, ignorePathsList } = useContext(UrlAssetPrefixContext);
|
|
27
|
+
const overrideProps = urlPropsList.reduce((resultProps, propKey) => {
|
|
28
|
+
let url = props[propKey];
|
|
30
29
|
if (url && typeof url === 'string') {
|
|
31
30
|
if (assetPrefix) {
|
|
32
|
-
|
|
31
|
+
const isNeedAssetPrefix = checkIsNeedAssetPrefix(url, assetPrefix, ignorePathsList);
|
|
33
32
|
if (isNeedAssetPrefix) {
|
|
34
|
-
|
|
35
|
-
url =
|
|
33
|
+
const prefixPath = formatURL(assetPrefix).slice(0, -1);
|
|
34
|
+
url = `${prefixPath}${url}`;
|
|
36
35
|
}
|
|
37
36
|
}
|
|
38
37
|
resultProps[propKey] = url;
|
|
39
38
|
}
|
|
40
39
|
return resultProps;
|
|
41
40
|
}, {});
|
|
42
|
-
return jsx(WrappedComponent,
|
|
41
|
+
return jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
|
|
43
42
|
});
|
|
44
43
|
return HOC;
|
|
45
44
|
};
|
|
46
|
-
|
|
47
|
-
if (ignorePathsList === void 0) { ignorePathsList = []; }
|
|
45
|
+
const checkIsNeedAssetPrefix = (url, assetPrefix, ignorePathsList = []) => {
|
|
48
46
|
// Ignore prefix if:
|
|
49
|
-
|
|
47
|
+
const isPrefixIgnore =
|
|
50
48
|
// Url is absolute
|
|
51
49
|
url.startsWith('http:') ||
|
|
52
50
|
url.startsWith('https:') ||
|
|
@@ -58,8 +56,7 @@ var checkIsNeedAssetPrefix = function (url, assetPrefix, ignorePathsList) {
|
|
|
58
56
|
return false;
|
|
59
57
|
}
|
|
60
58
|
// And check special paths for ignore prefix
|
|
61
|
-
for (
|
|
62
|
-
var urlPath = ignorePathsList_1[_i];
|
|
59
|
+
for (const urlPath of ignorePathsList) {
|
|
63
60
|
if (urlPath instanceof RegExp) {
|
|
64
61
|
if (urlPath.test(url)) {
|
|
65
62
|
return false;
|
|
@@ -1,82 +1,55 @@
|
|
|
1
|
-
|
|
1
|
+
const CLASS_RULES = {
|
|
2
2
|
fill: [
|
|
3
3
|
{
|
|
4
4
|
key: 'fillClass',
|
|
5
|
-
stateFn:
|
|
6
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
7
|
-
return !isActive && !isDisabled;
|
|
8
|
-
},
|
|
5
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
|
|
9
6
|
},
|
|
10
7
|
{
|
|
11
8
|
key: 'fillHoverClass',
|
|
12
|
-
stateFn:
|
|
13
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
14
|
-
return !isActive && !isDisabled;
|
|
15
|
-
},
|
|
9
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
|
|
16
10
|
},
|
|
17
11
|
{
|
|
18
12
|
key: 'fillActiveClass',
|
|
19
|
-
stateFn:
|
|
20
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
21
|
-
return Boolean(isActive) && !isDisabled;
|
|
22
|
-
},
|
|
13
|
+
stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
|
|
23
14
|
},
|
|
24
15
|
{
|
|
25
16
|
key: 'fillActiveHoverClass',
|
|
26
|
-
stateFn:
|
|
27
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
28
|
-
return Boolean(isActive) && !isDisabled;
|
|
29
|
-
},
|
|
17
|
+
stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
|
|
30
18
|
},
|
|
31
19
|
{
|
|
32
20
|
key: 'fillDisabledClass',
|
|
33
|
-
stateFn:
|
|
34
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
35
|
-
return !isActive && Boolean(isDisabled);
|
|
36
|
-
},
|
|
21
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && Boolean(isDisabled),
|
|
37
22
|
},
|
|
38
23
|
],
|
|
39
24
|
borderColor: [
|
|
40
25
|
{
|
|
41
26
|
key: 'borderColorClass',
|
|
42
|
-
stateFn:
|
|
43
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
44
|
-
return !isActive && !isDisabled;
|
|
45
|
-
},
|
|
27
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
|
|
46
28
|
},
|
|
47
29
|
{
|
|
48
30
|
key: 'borderColorHoverClass',
|
|
49
|
-
stateFn:
|
|
50
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
51
|
-
return !isActive && !isDisabled;
|
|
52
|
-
},
|
|
31
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
|
|
53
32
|
},
|
|
54
33
|
{
|
|
55
34
|
key: 'borderColorActiveClass',
|
|
56
|
-
stateFn:
|
|
57
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
58
|
-
return Boolean(isActive) && !isDisabled;
|
|
59
|
-
},
|
|
35
|
+
stateFn: ({ isDisabled, isActive }) => Boolean(isActive) && !isDisabled,
|
|
60
36
|
},
|
|
61
37
|
],
|
|
62
38
|
textColor: [
|
|
63
39
|
{
|
|
64
40
|
key: 'textColorClass',
|
|
65
|
-
stateFn:
|
|
66
|
-
var isDisabled = _a.isDisabled, isActive = _a.isActive;
|
|
67
|
-
return !isActive && !isDisabled;
|
|
68
|
-
},
|
|
41
|
+
stateFn: ({ isDisabled, isActive }) => !isActive && !isDisabled,
|
|
69
42
|
},
|
|
70
43
|
],
|
|
71
44
|
};
|
|
72
|
-
|
|
45
|
+
const formatState = (key) => {
|
|
73
46
|
// Try to find one of the state tokens in the input key:
|
|
74
47
|
// - matches "ActiveHover", "Active", "Hover" or "Disabled"
|
|
75
48
|
// - case-insensitive because of the /i flag
|
|
76
49
|
// Examples of matches:
|
|
77
50
|
// "fillActiveHoverColor" -> match[0] === "ActiveHover"
|
|
78
51
|
// "borderDisabled" -> match[0] === "Disabled"
|
|
79
|
-
|
|
52
|
+
const stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
|
|
80
53
|
if (!stateMatch) {
|
|
81
54
|
return '';
|
|
82
55
|
}
|
|
@@ -109,7 +82,7 @@ var formatState = function (key) {
|
|
|
109
82
|
// Examples:
|
|
110
83
|
// "myTestString" -> "my-test-string"
|
|
111
84
|
// "borderColorActiveHover" -> "border-color-active-hover"
|
|
112
|
-
|
|
85
|
+
const toKebabCase = (str) => {
|
|
113
86
|
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
|
114
87
|
};
|
|
115
88
|
|