@itcase/ui 1.8.96 → 1.8.97
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.
|
@@ -4,9 +4,12 @@ var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var reactModalSheet = require('react-modal-sheet');
|
|
7
|
+
var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
|
|
8
|
+
var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
|
|
7
9
|
var useStyles = require('../hooks/useStyles/useStyles.js');
|
|
10
|
+
var Icon = require('../../Icon_cjs_B-nskaAO.js');
|
|
8
11
|
require('lodash/camelCase');
|
|
9
|
-
require('lodash/
|
|
12
|
+
require('lodash/castArray');
|
|
10
13
|
require('lodash/upperFirst');
|
|
11
14
|
require('../context/Notifications.js');
|
|
12
15
|
require('uuid');
|
|
@@ -15,16 +18,33 @@ require('../context/UIContext.js');
|
|
|
15
18
|
require('../hooks/useMediaQueries/useMediaQueries.js');
|
|
16
19
|
require('react-responsive');
|
|
17
20
|
require('../utils/setViewportProperty.js');
|
|
21
|
+
require('lodash/maxBy');
|
|
18
22
|
require('../hooks/useStyles/styleAttributes.js');
|
|
23
|
+
require('clsx');
|
|
24
|
+
require('react-inlinesvg');
|
|
25
|
+
require('../hoc/urlWithAssetPrefix.js');
|
|
26
|
+
require('../context/UrlAssetPrefix.js');
|
|
27
|
+
require('../../Link_cjs_BqT6eVl6.js');
|
|
28
|
+
require('../../Text_cjs_DmuzuKFj.js');
|
|
19
29
|
|
|
20
30
|
var modalSheetBottomAppearance = {
|
|
31
|
+
sizeL: {
|
|
32
|
+
size: 'l',
|
|
33
|
+
titleTextSize: 'h4',
|
|
34
|
+
},
|
|
35
|
+
sizeM: {
|
|
36
|
+
size: 'm',
|
|
37
|
+
titleTextSize: 'h5',
|
|
38
|
+
},
|
|
21
39
|
dev: {
|
|
22
40
|
fill: 'accentPrimary',
|
|
23
41
|
},
|
|
24
42
|
};
|
|
25
43
|
|
|
44
|
+
var modalSheetBottomConfig = {
|
|
45
|
+
appearance: modalSheetBottomAppearance};
|
|
26
46
|
var ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
|
|
27
|
-
var dataTestId = props.dataTestId, dataTour = props.dataTour, initialIsOpen = props.initialIsOpen, closeButton = props.closeButton, onCloseModalSheetBottom = props.onCloseModalSheetBottom, onOpenModalSheetBottom = props.onOpenModalSheetBottom, children = props.children;
|
|
47
|
+
var dataTestId = props.dataTestId, dataTour = props.dataTour, appearance = props.appearance, initialIsOpen = props.initialIsOpen, title = props.title, closeButton = props.closeButton, onCloseModalSheetBottom = props.onCloseModalSheetBottom, onOpenModalSheetBottom = props.onOpenModalSheetBottom, children = props.children;
|
|
28
48
|
var _a = React.useState(initialIsOpen), isOpen = _a[0], setIsOpen = _a[1];
|
|
29
49
|
var openModalSheetBottom = React.useCallback(function () {
|
|
30
50
|
setIsOpen(true);
|
|
@@ -40,9 +60,12 @@ var ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
|
|
|
40
60
|
closeModal: closeModalSheetBottom,
|
|
41
61
|
isOpen: isOpen,
|
|
42
62
|
}); }, [isOpen, openModalSheetBottom, closeModalSheetBottom]);
|
|
63
|
+
var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, modalSheetBottomConfig);
|
|
64
|
+
var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
|
|
65
|
+
var titleTextColor = propsGenerator.titleTextColor, titleTextColorHover = propsGenerator.titleTextColorHover, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWidth = propsGenerator.titleTextWidth, titleTextWrap = propsGenerator.titleTextWrap;
|
|
43
66
|
// @ts-expect-error
|
|
44
67
|
var styles = useStyles.useStyles(props).styles;
|
|
45
|
-
return (jsxRuntime.jsxs(reactModalSheet.Sheet, tslib_es6.__assign({ dataTestId: dataTestId, dataTour: dataTour, className: "modal-sheet-bottom", isOpen: isOpen, onClose: closeModalSheetBottom }, props, { children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [closeButton
|
|
68
|
+
return (jsxRuntime.jsxs(reactModalSheet.Sheet, tslib_es6.__assign({ dataTestId: dataTestId, dataTour: dataTour, className: "modal-sheet-bottom", isOpen: isOpen, onClose: closeModalSheetBottom }, props, { children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header" }), (closeButton || title) && (jsxRuntime.jsxs("div", { className: "modal-sheet-bottom__header", children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), jsxRuntime.jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })] })), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxRuntime.jsx("div", { className: "modal-sheet-bottom__content-wrapper", children: children }) })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] })));
|
|
46
69
|
});
|
|
47
70
|
|
|
48
71
|
exports.ModalSheetBottom = ModalSheetBottom;
|
|
@@ -2,9 +2,12 @@ import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import React, { useState, useCallback, useImperativeHandle } from 'react';
|
|
4
4
|
import { Sheet } from 'react-modal-sheet';
|
|
5
|
+
import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
|
|
6
|
+
import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
|
|
5
7
|
import { useStyles } from '../hooks/useStyles/useStyles.js';
|
|
8
|
+
import { b as Title } from '../Icon_es_CTKPPrrC.js';
|
|
6
9
|
import 'lodash/camelCase';
|
|
7
|
-
import 'lodash/
|
|
10
|
+
import 'lodash/castArray';
|
|
8
11
|
import 'lodash/upperFirst';
|
|
9
12
|
import '../context/Notifications.js';
|
|
10
13
|
import 'uuid';
|
|
@@ -13,16 +16,33 @@ import '../context/UIContext.js';
|
|
|
13
16
|
import '../hooks/useMediaQueries/useMediaQueries.js';
|
|
14
17
|
import 'react-responsive';
|
|
15
18
|
import '../utils/setViewportProperty.js';
|
|
19
|
+
import 'lodash/maxBy';
|
|
16
20
|
import '../hooks/useStyles/styleAttributes.js';
|
|
21
|
+
import 'clsx';
|
|
22
|
+
import 'react-inlinesvg';
|
|
23
|
+
import '../hoc/urlWithAssetPrefix.js';
|
|
24
|
+
import '../context/UrlAssetPrefix.js';
|
|
25
|
+
import '../Link_es_BnUIX0QT.js';
|
|
26
|
+
import '../Text_es_DIU5ySvf.js';
|
|
17
27
|
|
|
18
28
|
var modalSheetBottomAppearance = {
|
|
29
|
+
sizeL: {
|
|
30
|
+
size: 'l',
|
|
31
|
+
titleTextSize: 'h4',
|
|
32
|
+
},
|
|
33
|
+
sizeM: {
|
|
34
|
+
size: 'm',
|
|
35
|
+
titleTextSize: 'h5',
|
|
36
|
+
},
|
|
19
37
|
dev: {
|
|
20
38
|
fill: 'accentPrimary',
|
|
21
39
|
},
|
|
22
40
|
};
|
|
23
41
|
|
|
42
|
+
var modalSheetBottomConfig = {
|
|
43
|
+
appearance: modalSheetBottomAppearance};
|
|
24
44
|
var ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
|
|
25
|
-
var dataTestId = props.dataTestId, dataTour = props.dataTour, initialIsOpen = props.initialIsOpen, closeButton = props.closeButton, onCloseModalSheetBottom = props.onCloseModalSheetBottom, onOpenModalSheetBottom = props.onOpenModalSheetBottom, children = props.children;
|
|
45
|
+
var dataTestId = props.dataTestId, dataTour = props.dataTour, appearance = props.appearance, initialIsOpen = props.initialIsOpen, title = props.title, closeButton = props.closeButton, onCloseModalSheetBottom = props.onCloseModalSheetBottom, onOpenModalSheetBottom = props.onOpenModalSheetBottom, children = props.children;
|
|
26
46
|
var _a = useState(initialIsOpen), isOpen = _a[0], setIsOpen = _a[1];
|
|
27
47
|
var openModalSheetBottom = useCallback(function () {
|
|
28
48
|
setIsOpen(true);
|
|
@@ -38,9 +58,12 @@ var ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
|
|
|
38
58
|
closeModal: closeModalSheetBottom,
|
|
39
59
|
isOpen: isOpen,
|
|
40
60
|
}); }, [isOpen, openModalSheetBottom, closeModalSheetBottom]);
|
|
61
|
+
var appearanceConfig = useAppearanceConfig(appearance, modalSheetBottomConfig);
|
|
62
|
+
var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
63
|
+
var titleTextColor = propsGenerator.titleTextColor, titleTextColorHover = propsGenerator.titleTextColorHover, titleTextSize = propsGenerator.titleTextSize, titleTextTruncate = propsGenerator.titleTextTruncate, titleTextWeight = propsGenerator.titleTextWeight, titleTextWidth = propsGenerator.titleTextWidth, titleTextWrap = propsGenerator.titleTextWrap;
|
|
41
64
|
// @ts-expect-error
|
|
42
65
|
var styles = useStyles(props).styles;
|
|
43
|
-
return (jsxs(Sheet, __assign({ dataTestId: dataTestId, dataTour: dataTour, className: "modal-sheet-bottom", isOpen: isOpen, onClose: closeModalSheetBottom }, props, { children: [jsxs(Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [closeButton
|
|
66
|
+
return (jsxs(Sheet, __assign({ dataTestId: dataTestId, dataTour: dataTour, className: "modal-sheet-bottom", isOpen: isOpen, onClose: closeModalSheetBottom }, props, { children: [jsxs(Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsx(Sheet.Header, { className: "modal-sheet-bottom__header" }), (closeButton || title) && (jsxs("div", { className: "modal-sheet-bottom__header", children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })] })), jsx(Sheet.Content, { className: "modal-sheet-bottom__content", children: jsx("div", { className: "modal-sheet-bottom__content-wrapper", children: children }) })] }), jsx(Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] })));
|
|
44
67
|
});
|
|
45
68
|
|
|
46
69
|
export { ModalSheetBottom, modalSheetBottomAppearance };
|
|
@@ -5,14 +5,15 @@
|
|
|
5
5
|
border-radius: var(--modal-sheet-bottom-container-border-radius) !important;
|
|
6
6
|
}
|
|
7
7
|
&__header {
|
|
8
|
-
height: 32px;
|
|
8
|
+
min-height: 32px;
|
|
9
|
+
padding: 0 16px;
|
|
9
10
|
& .react-modal-sheet-header {
|
|
10
11
|
max-height: 32px;
|
|
11
12
|
}
|
|
12
13
|
& .react-modal-sheet-drag-indicator {
|
|
13
14
|
background-color: var(
|
|
14
15
|
--modal-sheet-bottom-header-grabber,
|
|
15
|
-
|
|
16
|
+
#000
|
|
16
17
|
) !important;
|
|
17
18
|
}
|
|
18
19
|
}
|