@itcase/ui 1.9.57 → 1.9.59
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_BIHJrAbQ.js → Avatar_cjs_BcCK-1qn.js} +5 -8
- package/dist/{Avatar_es_CtP68jPM.js → Avatar_es_Dn6PILdH.js} +2 -5
- package/dist/{Button_cjs_BCcz3-Fw.js → Button_cjs_DqbZe2Sk.js} +7 -13
- package/dist/{Button_es_DAzeb-vJ.js → Button_es_C9pw5qr_.js} +2 -8
- package/dist/{ChipsGroup_cjs_C27x9x9O.js → ChipsGroup_cjs_BNapN3BL.js} +7 -11
- package/dist/{ChipsGroup_es_BTe1MYhV.js → ChipsGroup_es_CYtMZd_G.js} +1 -5
- package/dist/{DatePicker_cjs_Dvw_cGFH.js → DatePicker_cjs_CY3VQDAV.js} +10 -14
- package/dist/{DatePicker_es_t3u6yddn.js → DatePicker_es_C110M8WT.js} +4 -8
- package/dist/{Group_cjs_MYtD5is_.js → Group_cjs_CvX0cIz2.js} +5 -17
- package/dist/{Group_es_C_WChp2_.js → Group_es_BgJhtaOv.js} +2 -14
- package/dist/{Image_cjs_Hvjp2QDB.js → Image_cjs_BdHJJUTP.js} +4 -6
- package/dist/{Image_es_DpOCNWpn.js → Image_es_5EyRL35j.js} +1 -3
- package/dist/{Input_cjs_BQIi1N63.js → Input_cjs_BStFgIuQ.js} +3 -4
- package/dist/{Input_es_BYbc2X9M.js → Input_es_BVvf5Gpr.js} +1 -2
- package/dist/{Label_cjs_RI5tFcPt.js → Label_cjs_BYjXyKWj.js} +5 -9
- package/dist/{Label_es_CNRTIAWo.js → Label_es_SG60qCRL.js} +1 -5
- package/dist/{Loader_cjs_CJpdLndn.js → Loader_cjs_BgiKK0BF.js} +5 -8
- package/dist/{Loader_es_CqlLujBJ.js → Loader_es_DzjoV2MF.js} +1 -4
- package/dist/{Overlay_cjs_BK_0yTLw.js → Overlay_cjs_OmKx5lKU.js} +4 -6
- package/dist/{Overlay_es_DOO535JM.js → Overlay_es_DhKLpjdA.js} +1 -3
- package/dist/{SelectContainer_cjs_DTIqXM5V.js → SelectContainer_cjs_CdxNPEhL.js} +17 -22
- package/dist/{SelectContainer_es_CXkK4_Om.js → SelectContainer_es_BQNyIzfX.js} +3 -8
- package/dist/cjs/components/Accordion.js +7 -22
- package/dist/cjs/components/Avatar.js +4 -18
- package/dist/cjs/components/AvatarStack.js +8 -22
- package/dist/cjs/components/Badge.js +5 -19
- package/dist/cjs/components/Breadcrumbs.js +7 -21
- package/dist/cjs/components/Button.js +4 -18
- package/dist/cjs/components/Cell.js +6 -20
- package/dist/cjs/components/Checkbox.js +7 -15
- package/dist/cjs/components/Checkmark.js +5 -19
- package/dist/cjs/components/Chips.js +2 -16
- package/dist/cjs/components/Choice.js +7 -21
- package/dist/cjs/components/Code.js +5 -10
- package/dist/cjs/components/CookiesWarning.js +7 -21
- package/dist/cjs/components/Dadata.js +4 -9
- package/dist/cjs/components/DatePeriod.js +18 -33
- package/dist/cjs/components/DatePicker.js +7 -21
- package/dist/cjs/components/Divider.js +6 -14
- package/dist/cjs/components/Dot.js +4 -10
- package/dist/cjs/components/Drawer.js +6 -21
- package/dist/cjs/components/Dropdown.js +5 -21
- package/dist/cjs/components/Dropzone.js +11 -25
- package/dist/cjs/components/Flex.js +6 -12
- package/dist/cjs/components/Grid.js +8 -14
- package/dist/cjs/components/Group.js +3 -10
- package/dist/cjs/components/HTMLContent.js +4 -10
- package/dist/cjs/components/HeroTitle.js +5 -19
- package/dist/cjs/components/Icon.js +5 -19
- package/dist/cjs/components/Image.js +4 -12
- package/dist/cjs/components/Input.js +4 -9
- package/dist/cjs/components/InputNumber.js +6 -20
- package/dist/cjs/components/InputPassword.js +5 -19
- package/dist/cjs/components/Label.js +2 -16
- package/dist/cjs/components/Link.js +6 -14
- package/dist/cjs/components/List.js +8 -16
- package/dist/cjs/components/Loader.js +3 -11
- package/dist/cjs/components/Logo.js +8 -18
- package/dist/cjs/components/MenuItem.js +5 -19
- package/dist/cjs/components/Modal.js +7 -21
- package/dist/cjs/components/ModalSheetBottom.js +5 -19
- package/dist/cjs/components/Notification.js +11 -25
- package/dist/cjs/components/Overlay.js +3 -10
- package/dist/cjs/components/Pagination.js +8 -24
- package/dist/cjs/components/Radio.js +5 -13
- package/dist/cjs/components/RangeSlider.js +4 -10
- package/dist/cjs/components/Response.js +10 -24
- package/dist/cjs/components/SVGContent.js +5 -14
- package/dist/cjs/components/ScrollOnDrag.js +4 -10
- package/dist/cjs/components/ScrollToView.js +4 -10
- package/dist/cjs/components/Search.js +7 -21
- package/dist/cjs/components/Segmented.js +6 -20
- package/dist/cjs/components/Select.js +5 -20
- package/dist/cjs/components/Swiper.js +6 -20
- package/dist/cjs/components/Switch.js +5 -13
- package/dist/cjs/components/Tab.js +8 -23
- package/dist/cjs/components/Text.js +6 -14
- package/dist/cjs/components/Textarea.js +5 -10
- package/dist/cjs/components/Tile.js +5 -19
- package/dist/cjs/components/Title.js +5 -19
- package/dist/cjs/components/Tooltip.js +5 -19
- package/dist/cjs/components/Video.js +5 -9
- package/dist/cjs/components/Warning.js +5 -19
- package/dist/cjs/context/Notifications.js +16 -188
- package/dist/cjs/context/UIContext.js +14 -71
- package/dist/cjs/context/UrlAssetPrefix.js +15 -13
- package/dist/cjs/hoc/urlWithAssetPrefix.js +14 -73
- package/dist/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js +14 -25
- package/dist/cjs/hooks/useAppearanceConfig.js +12 -2
- package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js +10 -124
- package/dist/cjs/hooks/useDevicePropsGenerator.js +6 -9
- package/dist/cjs/hooks/useDeviceTargetClass.js +8 -4
- package/dist/cjs/hooks/useMediaQueries/useMediaQueries.js +13 -116
- package/dist/cjs/hooks/useMediaQueries.js +11 -2
- package/dist/cjs/hooks/useStyles/styleAttributes.js +15 -168
- package/dist/cjs/hooks/useStyles/useStyles.js +10 -196
- package/dist/cjs/hooks/useStyles.js +7 -10
- package/dist/cjs/hooks.js +15 -6
- package/dist/cjs/utils/mergeAppearanceKeys.js +15 -15
- package/dist/cjs/utils/setViewportProperty.js +15 -5
- package/dist/cjs/utils.js +14 -4
- package/dist/components/Accordion.js +1 -16
- package/dist/components/Avatar.js +4 -18
- package/dist/components/AvatarStack.js +4 -18
- package/dist/components/Badge.js +2 -16
- package/dist/components/Breadcrumbs.js +1 -15
- package/dist/components/Button.js +4 -18
- package/dist/components/Cell.js +2 -16
- package/dist/components/Checkbox.js +4 -12
- package/dist/components/Checkmark.js +1 -15
- package/dist/components/Chips.js +2 -16
- package/dist/components/Choice.js +2 -16
- package/dist/components/Code.js +3 -8
- package/dist/components/CookiesWarning.js +4 -18
- package/dist/components/Dadata.js +4 -9
- package/dist/components/DatePeriod.js +12 -27
- package/dist/components/DatePicker.js +7 -21
- package/dist/components/Divider.js +3 -11
- package/dist/components/Dot.js +2 -8
- package/dist/components/Drawer.js +3 -18
- package/dist/components/Dropdown.js +1 -17
- package/dist/components/Dropzone.js +7 -21
- package/dist/components/Flex.js +2 -8
- package/dist/components/Grid.js +2 -8
- package/dist/components/Group/Group.appearance.js +1 -4
- package/dist/components/Group.js +3 -10
- package/dist/components/HTMLContent.js +2 -8
- package/dist/components/HeroTitle.js +1 -15
- package/dist/components/Icon.js +2 -16
- package/dist/components/Image.js +4 -12
- package/dist/components/Input.js +4 -9
- package/dist/components/InputNumber.js +4 -18
- package/dist/components/InputPassword.js +2 -16
- package/dist/components/Label.js +2 -16
- package/dist/components/Link.js +2 -10
- package/dist/components/List.js +2 -10
- package/dist/components/Loader.js +3 -11
- package/dist/components/Logo.js +3 -13
- package/dist/components/MenuItem.js +1 -15
- package/dist/components/Modal.js +3 -17
- package/dist/components/ModalSheetBottom.js +1 -15
- package/dist/components/Notification.js +5 -19
- package/dist/components/Overlay.js +3 -10
- package/dist/components/Pagination.js +1 -17
- package/dist/components/Radio.js +2 -10
- package/dist/components/RangeSlider.js +2 -8
- package/dist/components/Response.js +5 -19
- package/dist/components/SVGContent.js +2 -11
- package/dist/components/ScrollOnDrag.js +2 -8
- package/dist/components/ScrollToView.js +2 -8
- package/dist/components/Search.js +1 -15
- package/dist/components/Segmented.js +2 -16
- package/dist/components/Select.js +5 -20
- package/dist/components/Swiper.js +2 -16
- package/dist/components/Switch.js +2 -10
- package/dist/components/Tab.js +2 -17
- package/dist/components/Text.js +3 -11
- package/dist/components/Textarea.js +3 -8
- package/dist/components/Tile.js +1 -15
- package/dist/components/Title.js +2 -16
- package/dist/components/Tooltip.js +2 -16
- package/dist/components/Video.js +4 -8
- package/dist/components/Warning.js +1 -15
- package/dist/hooks/useAppearanceConfig.js +11 -1
- package/dist/hooks/useDevicePropsGenerator.js +5 -8
- package/dist/hooks/useMediaQueries.js +10 -1
- package/dist/hooks/useStyles.js +6 -9
- package/dist/hooks.js +12 -7
- package/dist/primitives_cjs_DX--6Yn5.js +2715 -0
- package/dist/primitives_es_BNlMaZfZ.js +2672 -0
- package/dist/utils.js +12 -2
- package/package.json +1 -1
- package/dist/Divider_cjs_C5Ou2Kqa.js +0 -104
- package/dist/Divider_es_D2snK_vn.js +0 -100
- package/dist/DropdownItem_cjs_k28TIoDU.js +0 -230
- package/dist/DropdownItem_es_DjPgbwtU.js +0 -225
- package/dist/Icon_cjs_DTvdhr8B.js +0 -1099
- package/dist/Icon_es_kewxGRUB.js +0 -1086
- package/dist/Link_cjs_Dn7UhCYe.js +0 -277
- package/dist/Link_es_BDAmhIzd.js +0 -272
- package/dist/Text_cjs_erTy2pUN.js +0 -68
- package/dist/Text_es_DVNvU0m0.js +0 -64
- package/dist/components/Group/appearance/groupSurface.js +0 -8
- package/dist/types/components/Group/appearance/groupSurface.d.ts +0 -3
|
@@ -2,30 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var clsx = require('clsx');
|
|
5
|
-
var
|
|
6
|
-
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
7
|
-
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
|
-
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
9
|
-
var Icon = require('../../Icon_cjs_DTvdhr8B.js');
|
|
10
|
-
var Text = require('../../Text_cjs_erTy2pUN.js');
|
|
5
|
+
var primitives = require('../../primitives_cjs_DX--6Yn5.js');
|
|
11
6
|
require('react');
|
|
12
7
|
require('lodash/camelCase');
|
|
13
8
|
require('lodash/castArray');
|
|
14
9
|
require('lodash/upperFirst');
|
|
15
|
-
require('../context/Notifications.js');
|
|
16
10
|
require('uuid');
|
|
17
11
|
require('@itcase/common');
|
|
18
|
-
require('../context/UIContext.js');
|
|
19
|
-
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
20
12
|
require('react-responsive');
|
|
21
|
-
require('../utils/setViewportProperty.js');
|
|
22
|
-
require('../hooks.js');
|
|
23
|
-
require('../hooks/useStyles/styleAttributes.js');
|
|
24
13
|
require('lodash/maxBy');
|
|
25
14
|
require('react-inlinesvg');
|
|
26
|
-
require('../../Link_cjs_Dn7UhCYe.js');
|
|
27
|
-
require('../hoc/urlWithAssetPrefix.js');
|
|
28
|
-
require('../context/UrlAssetPrefix.js');
|
|
29
15
|
|
|
30
16
|
const tileAppearanceShape = {
|
|
31
17
|
circular: {
|
|
@@ -167,11 +153,11 @@ const tileConfig = {
|
|
|
167
153
|
};
|
|
168
154
|
function Tile(props) {
|
|
169
155
|
const { appearance, className, dataTestId, dataTour, type, title, desc, badgeValue, iconClick, before, after, isSkeleton, onClick, children, } = props;
|
|
170
|
-
const appearanceConfig =
|
|
171
|
-
const propsGenerator =
|
|
156
|
+
const appearanceConfig = primitives.useAppearanceConfig(appearance, tileConfig);
|
|
157
|
+
const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
|
|
172
158
|
const { directionClass, alignClass, alignDirectionClass, fillClass, titleTextAlign, titleTextColor, titleTextSize, titleTextWeight, titleTextWrap, descTextColor, descTextSize, descTextWrap, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, icon, iconAppearance, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
|
|
173
|
-
const { styles: tileStyles } =
|
|
174
|
-
return (jsxRuntime.jsx("div", { className: clsx('tile', className, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, alignClass && `align_${alignClass}`, directionClass && `direction_${directionClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `tile_size_${sizeClass}`, type && `tile_type_${type}`, badgeValue && `tile_state_badge`, widthClass && `width_${widthClass}`, isSkeleton && `tile_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: tileStyles, onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxRuntime.jsxs("div", { className: "tile__header", children: [jsxRuntime.jsxs("div", { className: "tile__header-inner", children: [title && (jsxRuntime.jsx(
|
|
159
|
+
const { styles: tileStyles } = primitives.useStyles(props);
|
|
160
|
+
return (jsxRuntime.jsx("div", { className: clsx('tile', className, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, alignClass && `align_${alignClass}`, directionClass && `direction_${directionClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `tile_size_${sizeClass}`, type && `tile_type_${type}`, badgeValue && `tile_state_badge`, widthClass && `width_${widthClass}`, isSkeleton && `tile_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: tileStyles, onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxRuntime.jsxs("div", { className: "tile__header", children: [jsxRuntime.jsxs("div", { className: "tile__header-inner", children: [title && (jsxRuntime.jsx(primitives.Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (jsxRuntime.jsx(primitives.Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), jsxRuntime.jsxs("div", { className: "tile__header-actions", children: [badgeValue && (jsxRuntime.jsx(primitives.Badge, { appearance: primitives.mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: "tile__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(primitives.Icon, { appearance: iconAppearance, className: "tile__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon, onClick: iconClick }))] })] }), children, after] }) }));
|
|
175
161
|
}
|
|
176
162
|
|
|
177
163
|
exports.Tile = Tile;
|
|
@@ -1,34 +1,20 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var primitives = require('../../primitives_cjs_DX--6Yn5.js');
|
|
4
4
|
require('react/jsx-runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('clsx');
|
|
7
|
-
require('react-inlinesvg');
|
|
8
|
-
require('../../Link_cjs_Dn7UhCYe.js');
|
|
9
|
-
require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
|
-
require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
7
|
require('lodash/camelCase');
|
|
12
8
|
require('lodash/castArray');
|
|
13
9
|
require('lodash/upperFirst');
|
|
14
|
-
require('../context/Notifications.js');
|
|
15
10
|
require('uuid');
|
|
16
11
|
require('@itcase/common');
|
|
17
|
-
require('../context/UIContext.js');
|
|
18
|
-
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
19
12
|
require('react-responsive');
|
|
20
|
-
require('../utils/setViewportProperty.js');
|
|
21
|
-
require('../hooks.js');
|
|
22
|
-
require('../hooks/useStyles/styleAttributes.js');
|
|
23
|
-
require('../hooks/useStyles/useStyles.js');
|
|
24
13
|
require('lodash/maxBy');
|
|
25
|
-
require('
|
|
26
|
-
require('../hoc/urlWithAssetPrefix.js');
|
|
27
|
-
require('../context/UrlAssetPrefix.js');
|
|
28
|
-
require('../utils/mergeAppearanceKeys.js');
|
|
14
|
+
require('react-inlinesvg');
|
|
29
15
|
|
|
30
16
|
|
|
31
17
|
|
|
32
|
-
exports.Title =
|
|
33
|
-
exports.titleAppearance =
|
|
34
|
-
exports.titleConfig =
|
|
18
|
+
exports.Title = primitives.Title;
|
|
19
|
+
exports.titleAppearance = primitives.titleAppearance;
|
|
20
|
+
exports.titleConfig = primitives.titleConfig;
|
|
@@ -1,34 +1,20 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var primitives = require('../../primitives_cjs_DX--6Yn5.js');
|
|
4
4
|
require('react/jsx-runtime');
|
|
5
5
|
require('react');
|
|
6
6
|
require('clsx');
|
|
7
|
-
require('react-inlinesvg');
|
|
8
|
-
require('../../Link_cjs_Dn7UhCYe.js');
|
|
9
|
-
require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
10
|
-
require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
11
7
|
require('lodash/camelCase');
|
|
12
8
|
require('lodash/castArray');
|
|
13
9
|
require('lodash/upperFirst');
|
|
14
|
-
require('../context/Notifications.js');
|
|
15
10
|
require('uuid');
|
|
16
11
|
require('@itcase/common');
|
|
17
|
-
require('../context/UIContext.js');
|
|
18
|
-
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
19
12
|
require('react-responsive');
|
|
20
|
-
require('../utils/setViewportProperty.js');
|
|
21
|
-
require('../hooks.js');
|
|
22
|
-
require('../hooks/useStyles/styleAttributes.js');
|
|
23
|
-
require('../hooks/useStyles/useStyles.js');
|
|
24
13
|
require('lodash/maxBy');
|
|
25
|
-
require('
|
|
26
|
-
require('../hoc/urlWithAssetPrefix.js');
|
|
27
|
-
require('../context/UrlAssetPrefix.js');
|
|
28
|
-
require('../utils/mergeAppearanceKeys.js');
|
|
14
|
+
require('react-inlinesvg');
|
|
29
15
|
|
|
30
16
|
|
|
31
17
|
|
|
32
|
-
exports.Tooltip =
|
|
33
|
-
exports.tooltipAppearance =
|
|
34
|
-
exports.tooltipConfig =
|
|
18
|
+
exports.Tooltip = primitives.Tooltip;
|
|
19
|
+
exports.tooltipAppearance = primitives.tooltipAppearance;
|
|
20
|
+
exports.tooltipConfig = primitives.tooltipConfig;
|
|
@@ -2,24 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var clsx = require('clsx');
|
|
5
|
-
var
|
|
5
|
+
var primitives = require('../../primitives_cjs_DX--6Yn5.js');
|
|
6
6
|
require('react');
|
|
7
7
|
require('lodash/camelCase');
|
|
8
|
-
require('lodash/
|
|
8
|
+
require('lodash/castArray');
|
|
9
9
|
require('lodash/upperFirst');
|
|
10
|
-
require('../context/Notifications.js');
|
|
11
10
|
require('uuid');
|
|
12
11
|
require('@itcase/common');
|
|
13
|
-
require('../context/UIContext.js');
|
|
14
|
-
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
15
12
|
require('react-responsive');
|
|
16
|
-
require('
|
|
17
|
-
require('
|
|
18
|
-
require('../hooks/useStyles/styleAttributes.js');
|
|
13
|
+
require('lodash/maxBy');
|
|
14
|
+
require('react-inlinesvg');
|
|
19
15
|
|
|
20
16
|
function Video(props) {
|
|
21
17
|
const { id, className, dataTestId, dataTour, position, mp4, ogv, poster, webm, children, } = props;
|
|
22
|
-
const { styles: videoStyles } =
|
|
18
|
+
const { styles: videoStyles } = primitives.useStyles(props);
|
|
23
19
|
return (jsxRuntime.jsxs("div", { id: id, className: clsx('video', className, poster && `video_poster`, position && `video_position_${position}`), "data-testid": dataTestId, "data-tour": dataTour, style: videoStyles, children: [jsxRuntime.jsxs("video", { className: "video__wrapper", autoPlay: true, loop: true, muted: true, playsInline: false, poster: poster, children: [webm && jsxRuntime.jsx("source", { type: 'video/webm; codecs="vp8, vorbis"', src: webm }), ogv && jsxRuntime.jsx("source", { type: 'video/ogg; codecs="theora, vorbi"', src: ogv }), mp4 && (jsxRuntime.jsx("source", { type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"', src: mp4 }))] }), children] }));
|
|
24
20
|
}
|
|
25
21
|
|
|
@@ -3,30 +3,16 @@
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var clsx = require('clsx');
|
|
6
|
-
var
|
|
7
|
-
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
8
|
-
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
9
|
-
var Icon = require('../../Icon_cjs_DTvdhr8B.js');
|
|
10
|
-
var Text = require('../../Text_cjs_erTy2pUN.js');
|
|
6
|
+
var primitives = require('../../primitives_cjs_DX--6Yn5.js');
|
|
11
7
|
var _default = require('@itcase/icons/default');
|
|
12
8
|
require('lodash/camelCase');
|
|
13
9
|
require('lodash/castArray');
|
|
14
10
|
require('lodash/upperFirst');
|
|
15
|
-
require('../context/Notifications.js');
|
|
16
11
|
require('uuid');
|
|
17
12
|
require('@itcase/common');
|
|
18
|
-
require('../context/UIContext.js');
|
|
19
|
-
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
20
13
|
require('react-responsive');
|
|
21
|
-
require('../utils/setViewportProperty.js');
|
|
22
|
-
require('../hooks.js');
|
|
23
|
-
require('../hooks/useStyles/styleAttributes.js');
|
|
24
14
|
require('lodash/maxBy');
|
|
25
15
|
require('react-inlinesvg');
|
|
26
|
-
require('../../Link_cjs_Dn7UhCYe.js');
|
|
27
|
-
require('../hoc/urlWithAssetPrefix.js');
|
|
28
|
-
require('../context/UrlAssetPrefix.js');
|
|
29
|
-
require('../utils/mergeAppearanceKeys.js');
|
|
30
16
|
|
|
31
17
|
const warningAppearanceAccent = {
|
|
32
18
|
accentMutedPrimary: {
|
|
@@ -188,12 +174,12 @@ const warningConfig = {
|
|
|
188
174
|
};
|
|
189
175
|
function Warning(props) {
|
|
190
176
|
const { appearance, className, dataTestId, dataTour, label, description, isSkeleton, children, } = props;
|
|
191
|
-
const appearanceConfig =
|
|
192
|
-
const propsGenerator =
|
|
177
|
+
const appearanceConfig = primitives.useAppearanceConfig(appearance, warningConfig);
|
|
178
|
+
const propsGenerator = primitives.useDevicePropsGenerator(props, appearanceConfig);
|
|
193
179
|
const { fillClass, labelTextColor, labelTextSize, labelTextWeight, descriptionTextColor, descriptionTextSize, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
|
|
194
|
-
const { styles: warningStyles } =
|
|
180
|
+
const { styles: warningStyles } = primitives.useStyles(props);
|
|
195
181
|
const [isVisible, setIsVisible] = React.useState(true);
|
|
196
|
-
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}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `warning_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(
|
|
182
|
+
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}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `warning_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(primitives.Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: 'warning__content', children: [label && (jsxRuntime.jsx(primitives.Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsxRuntime.jsx(primitives.Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description })), children] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(primitives.Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
|
|
197
183
|
}
|
|
198
184
|
|
|
199
185
|
exports.Warning = Warning;
|
|
@@ -1,192 +1,20 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
'use strict';
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
require('react/jsx-runtime');
|
|
4
|
+
require('react');
|
|
5
|
+
require('uuid');
|
|
6
|
+
require('@itcase/common');
|
|
7
|
+
var primitives = require('../../primitives_cjs_DX--6Yn5.js');
|
|
8
|
+
require('clsx');
|
|
9
|
+
require('lodash/camelCase');
|
|
10
|
+
require('lodash/castArray');
|
|
11
|
+
require('lodash/upperFirst');
|
|
12
|
+
require('react-responsive');
|
|
13
|
+
require('lodash/maxBy');
|
|
14
|
+
require('react-inlinesvg');
|
|
8
15
|
|
|
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
|
-
showNotification: (notification, onClose) => { },
|
|
20
|
-
notificationStatuses: STATUSES,
|
|
21
|
-
});
|
|
22
|
-
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
23
|
-
function NotificationsProvider(props) {
|
|
24
|
-
const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
|
|
25
|
-
const [notificationsList, setNotificationsList] = React.useState(() => {
|
|
26
|
-
// We need to set id to every notification item and original list also be have new id's
|
|
27
|
-
return (initialNotificationsList || []).map((notificationItem) => {
|
|
28
|
-
return createNotification(notificationItem, notificationItem.onClose);
|
|
29
|
-
});
|
|
30
|
-
});
|
|
31
|
-
const hideNotifications = React.useCallback((targetId) => {
|
|
32
|
-
// If not target, then nothing to hide
|
|
33
|
-
if (!targetId) {
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
setNotificationsList((prevNotificationsList) => {
|
|
37
|
-
const newState = prevNotificationsList.filter((notificationItem) => {
|
|
38
|
-
// Check on need to hide, if current notification is target for hide
|
|
39
|
-
const isNeedToHide = String(notificationItem.id) === String(targetId);
|
|
40
|
-
// Callback for close if exists
|
|
41
|
-
if (isNeedToHide) {
|
|
42
|
-
clearTimeout(notificationItem._closeTimeout);
|
|
43
|
-
// @typescript-eslint/no-unused-expressions
|
|
44
|
-
notificationItem.onClose && notificationItem.onClose();
|
|
45
|
-
}
|
|
46
|
-
// Save in state if no need to hide
|
|
47
|
-
return !isNeedToHide;
|
|
48
|
-
});
|
|
49
|
-
// Set new notifications list without target item to state
|
|
50
|
-
return newState;
|
|
51
|
-
});
|
|
52
|
-
}, []);
|
|
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));
|
|
58
|
-
// Add new notification
|
|
59
|
-
if (existsNotificationIndex === -1) {
|
|
60
|
-
return [...newState, newNotificationItem];
|
|
61
|
-
}
|
|
62
|
-
// Or update exists notification
|
|
63
|
-
const updatedNotificationItem = newState[existsNotificationIndex];
|
|
64
|
-
// Clear timeout to avoid close event for updated notification
|
|
65
|
-
clearTimeout(updatedNotificationItem._closeTimeout);
|
|
66
|
-
updatedNotificationItem._closeTimeout = undefined;
|
|
67
|
-
// Replace exists notification by new one
|
|
68
|
-
newState[existsNotificationIndex] = newNotificationItem;
|
|
69
|
-
return newState;
|
|
70
|
-
});
|
|
71
|
-
if (newNotificationItem.closeByTime) {
|
|
72
|
-
newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
|
|
73
|
-
}
|
|
74
|
-
return newNotificationItem;
|
|
75
|
-
},
|
|
76
|
-
// "hideNotifications" is never changed
|
|
77
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
78
|
-
[]);
|
|
79
|
-
const notificationsAPI = React.useMemo(() => ({
|
|
80
|
-
hideNotifications: hideNotifications,
|
|
81
|
-
notificationStatuses: STATUSES,
|
|
82
|
-
showNotification: showNotification,
|
|
83
|
-
}),
|
|
84
|
-
// Functions is never changes, no sense to set as dependencies
|
|
85
|
-
// eslint-disable-next-line
|
|
86
|
-
[]);
|
|
87
|
-
React.useEffect(() => {
|
|
88
|
-
// Set timeout for initial notifications list one time on first render
|
|
89
|
-
notificationsList.forEach((notificationItem) => {
|
|
90
|
-
if (notificationItem.closeByTime) {
|
|
91
|
-
setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
// Show notifications on all requests errors.
|
|
95
|
-
// Enable one time without disabling. Use "isLogging" on request config level
|
|
96
|
-
// to disable notifications logger.
|
|
97
|
-
if (isLogRequestsErrors) {
|
|
98
|
-
common.axiosInstanceITCase.responseErrorHandler.loggerManager = {
|
|
99
|
-
log: (responseError) => {
|
|
100
|
-
if (responseError.message) {
|
|
101
|
-
// prevent from showing many network errors
|
|
102
|
-
const errorListToDedupe = ['network'];
|
|
103
|
-
const id = errorListToDedupe.includes(responseError.key)
|
|
104
|
-
? responseError.key
|
|
105
|
-
: undefined;
|
|
106
|
-
showNotification({
|
|
107
|
-
id: id,
|
|
108
|
-
title: responseError.message,
|
|
109
|
-
status: 'error',
|
|
110
|
-
closeByTime: 4000,
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
},
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
117
|
-
}, []);
|
|
118
|
-
return (jsxRuntime.jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsxRuntime.jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
|
|
119
|
-
}
|
|
120
|
-
function useNotifications() {
|
|
121
|
-
return React.useContext(NotificationsContext);
|
|
122
|
-
}
|
|
123
|
-
function useNotificationsAPI() {
|
|
124
|
-
return React.useContext(NotificationsAPIContext);
|
|
125
|
-
}
|
|
126
|
-
const statusToAppearanceList = {
|
|
127
|
-
error: 'errorPrimary sizeS solid rounded',
|
|
128
|
-
info: 'infoPrimary sizeS solid rounded',
|
|
129
|
-
success: 'successPrimary sizeS solid rounded',
|
|
130
|
-
warning: 'warningPrimary sizeS solid rounded',
|
|
131
|
-
};
|
|
132
|
-
function createNotification(notification, onClose) {
|
|
133
|
-
// Default notification item properties
|
|
134
|
-
let id = uuid.v4().split('-')[0];
|
|
135
|
-
let title = '';
|
|
136
|
-
let text = '';
|
|
137
|
-
let closeIcon = '';
|
|
138
|
-
let closeIconSrc = '';
|
|
139
|
-
let type = 'float';
|
|
140
|
-
let buttonLabel = '';
|
|
141
|
-
let status = STATUSES.warning;
|
|
142
|
-
let closeByTime = 4500;
|
|
143
|
-
let appearance = statusToAppearanceList[status];
|
|
144
|
-
let after = null;
|
|
145
|
-
let isLoading = false;
|
|
146
|
-
let closeIconAppearance = '';
|
|
147
|
-
let onClickButton = () => { };
|
|
148
|
-
if (typeof notification === 'string') {
|
|
149
|
-
text = notification;
|
|
150
|
-
}
|
|
151
|
-
else if (typeof notification === 'object') {
|
|
152
|
-
id = String(notification.id ?? id);
|
|
153
|
-
title = notification.title ?? title;
|
|
154
|
-
text = notification.text ?? text;
|
|
155
|
-
closeIconAppearance =
|
|
156
|
-
notification.closeIconAppearance ?? closeIconAppearance;
|
|
157
|
-
type = notification.type ?? type;
|
|
158
|
-
closeIcon = notification.closeIcon ?? closeIcon;
|
|
159
|
-
closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
|
|
160
|
-
buttonLabel = notification.buttonLabel ?? buttonLabel;
|
|
161
|
-
onClickButton = notification.onClickButton ?? onClickButton;
|
|
162
|
-
status = notification.status ?? status;
|
|
163
|
-
closeByTime = notification.closeByTime ?? closeByTime;
|
|
164
|
-
isLoading = notification.isLoading ?? isLoading;
|
|
165
|
-
after = notification.after ?? after;
|
|
166
|
-
appearance =
|
|
167
|
-
notification.appearance ??
|
|
168
|
-
statusToAppearanceList[notification.status] ??
|
|
169
|
-
appearance;
|
|
170
|
-
}
|
|
171
|
-
return {
|
|
172
|
-
id: id,
|
|
173
|
-
appearance: appearance,
|
|
174
|
-
type: type,
|
|
175
|
-
title: title,
|
|
176
|
-
status: status,
|
|
177
|
-
text: text,
|
|
178
|
-
buttonLabel: buttonLabel,
|
|
179
|
-
after: after,
|
|
180
|
-
closeByTime: closeByTime,
|
|
181
|
-
closeIcon: closeIcon,
|
|
182
|
-
closeIconAppearance: closeIconAppearance,
|
|
183
|
-
closeIconSrc: closeIconSrc,
|
|
184
|
-
isLoading: isLoading,
|
|
185
|
-
onClickButton: onClickButton,
|
|
186
|
-
onClose: onClose,
|
|
187
|
-
};
|
|
188
|
-
}
|
|
189
16
|
|
|
190
|
-
|
|
191
|
-
exports.
|
|
192
|
-
exports.
|
|
17
|
+
|
|
18
|
+
exports.NotificationsProvider = primitives.NotificationsProvider;
|
|
19
|
+
exports.useNotifications = primitives.useNotifications;
|
|
20
|
+
exports.useNotificationsAPI = primitives.useNotificationsAPI;
|
|
@@ -1,76 +1,19 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
'use strict';
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
|
|
3
|
+
require('react/jsx-runtime');
|
|
4
|
+
require('react');
|
|
5
|
+
require('lodash/camelCase');
|
|
6
|
+
var primitives = require('../../primitives_cjs_DX--6Yn5.js');
|
|
7
|
+
require('clsx');
|
|
8
|
+
require('lodash/castArray');
|
|
9
|
+
require('lodash/upperFirst');
|
|
10
|
+
require('uuid');
|
|
11
|
+
require('@itcase/common');
|
|
9
12
|
require('react-responsive');
|
|
13
|
+
require('lodash/maxBy');
|
|
14
|
+
require('react-inlinesvg');
|
|
10
15
|
|
|
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
16
|
|
|
75
|
-
|
|
76
|
-
exports.
|
|
17
|
+
|
|
18
|
+
exports.UIProvider = primitives.UIProvider;
|
|
19
|
+
exports.useUserDeviceContext = primitives.useUserDeviceContext;
|
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
require('react/jsx-runtime');
|
|
4
|
+
require('react');
|
|
5
|
+
var primitives = require('../../primitives_cjs_DX--6Yn5.js');
|
|
6
|
+
require('clsx');
|
|
7
|
+
require('lodash/camelCase');
|
|
8
|
+
require('lodash/castArray');
|
|
9
|
+
require('lodash/upperFirst');
|
|
10
|
+
require('uuid');
|
|
11
|
+
require('@itcase/common');
|
|
12
|
+
require('react-responsive');
|
|
13
|
+
require('lodash/maxBy');
|
|
14
|
+
require('react-inlinesvg');
|
|
5
15
|
|
|
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
|
|
|
16
|
-
|
|
17
|
-
exports.
|
|
17
|
+
|
|
18
|
+
exports.UrlAssetPrefixContext = primitives.UrlAssetPrefixContext;
|
|
19
|
+
exports.UrlAssetPrefixProvider = primitives.UrlAssetPrefixProvider;
|
|
@@ -1,77 +1,18 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var
|
|
3
|
+
require('react/jsx-runtime');
|
|
4
|
+
require('react');
|
|
5
|
+
require('@itcase/common');
|
|
6
|
+
var primitives = require('../../primitives_cjs_DX--6Yn5.js');
|
|
7
|
+
require('clsx');
|
|
8
|
+
require('lodash/camelCase');
|
|
9
|
+
require('lodash/castArray');
|
|
10
|
+
require('lodash/upperFirst');
|
|
11
|
+
require('uuid');
|
|
12
|
+
require('react-responsive');
|
|
13
|
+
require('lodash/maxBy');
|
|
14
|
+
require('react-inlinesvg');
|
|
7
15
|
|
|
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 already have prefix
|
|
56
|
-
url.startsWith(assetPrefix);
|
|
57
|
-
if (isPrefixIgnore) {
|
|
58
|
-
return false;
|
|
59
|
-
}
|
|
60
|
-
// And check special paths for ignore prefix
|
|
61
|
-
for (const urlPath of ignorePathsList) {
|
|
62
|
-
if (urlPath instanceof RegExp) {
|
|
63
|
-
if (urlPath.test(url)) {
|
|
64
|
-
return false;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
else {
|
|
68
|
-
if (common.formatURL(url).startsWith(common.formatURL(urlPath))) {
|
|
69
|
-
return false;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
// Need to add prefix to url
|
|
74
|
-
return true;
|
|
75
|
-
};
|
|
76
16
|
|
|
77
|
-
|
|
17
|
+
|
|
18
|
+
exports.urlWithAssetPrefix = primitives.urlWithAssetPrefix;
|