@mailstep/design-system 0.1.12 → 0.1.13
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/package.json +1 -1
- package/ui/Blocks/CornerDialog/CornerDialog.js +14 -12
- package/ui/Blocks/CornerDialog/CornerDialog.js.map +1 -1
- package/ui/Blocks/CornerDialog/index.js +6 -2
- package/ui/Blocks/CornerDialog/index.js.map +1 -1
- package/ui/Blocks/CornerDialog/styles.js +22 -11
- package/ui/Blocks/CornerDialog/styles.js.map +1 -1
- package/ui/Blocks/CornerDialog/utils.js +4 -1
- package/ui/Blocks/CornerDialog/utils.js.map +1 -1
- package/ui/Blocks/ImageList/ImageList.js +19 -17
- package/ui/Blocks/ImageList/ImageList.js.map +1 -1
- package/ui/Blocks/ImageList/components/AddPhoto/index.js +11 -9
- package/ui/Blocks/ImageList/components/AddPhoto/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/AddPhoto/styles.js +12 -5
- package/ui/Blocks/ImageList/components/AddPhoto/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/CloseButton/index.js +8 -6
- package/ui/Blocks/ImageList/components/CloseButton/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/CloseButton/styles.js +10 -4
- package/ui/Blocks/ImageList/components/CloseButton/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageElement/index.js +9 -7
- package/ui/Blocks/ImageList/components/ImageElement/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageElement/styles.js +11 -5
- package/ui/Blocks/ImageList/components/ImageElement/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageTag/index.js +7 -5
- package/ui/Blocks/ImageList/components/ImageTag/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageTag/styles.js +10 -4
- package/ui/Blocks/ImageList/components/ImageTag/styles.js.map +1 -1
- package/ui/Blocks/ImageList/index.js +6 -2
- package/ui/Blocks/ImageList/index.js.map +1 -1
- package/ui/Blocks/ImageList/styles.js +10 -4
- package/ui/Blocks/ImageList/styles.js.map +1 -1
- package/ui/Blocks/LightBox/LightBox.js +12 -10
- package/ui/Blocks/LightBox/LightBox.js.map +1 -1
- package/ui/Blocks/LightBox/hooks/useLightBox.js +8 -6
- package/ui/Blocks/LightBox/hooks/useLightBox.js.map +1 -1
- package/ui/Blocks/LightBox/index.js +8 -4
- package/ui/Blocks/LightBox/index.js.map +1 -1
- package/ui/Blocks/LightBox/styles.js +14 -6
- package/ui/Blocks/LightBox/styles.js.map +1 -1
- package/ui/Blocks/Modal/Modal.js +20 -18
- package/ui/Blocks/Modal/Modal.js.map +1 -1
- package/ui/Blocks/Modal/hooks/useClickOutside.js +8 -6
- package/ui/Blocks/Modal/hooks/useClickOutside.js.map +1 -1
- package/ui/Blocks/Modal/hooks/useModal.js +8 -6
- package/ui/Blocks/Modal/hooks/useModal.js.map +1 -1
- package/ui/Blocks/Modal/index.d.ts +1 -1
- package/ui/Blocks/Modal/index.js +7 -3
- package/ui/Blocks/Modal/index.js.map +1 -1
- package/ui/Blocks/Modal/styles.js +29 -16
- package/ui/Blocks/Modal/styles.js.map +1 -1
- package/ui/Blocks/Modal/utils.js +4 -1
- package/ui/Blocks/Modal/utils.js.map +1 -1
- package/ui/Blocks/Tabs/Tabs.js +13 -11
- package/ui/Blocks/Tabs/Tabs.js.map +1 -1
- package/ui/Blocks/Tabs/hooks/useTabs.js +6 -4
- package/ui/Blocks/Tabs/hooks/useTabs.js.map +1 -1
- package/ui/Blocks/Tabs/index.js +8 -3
- package/ui/Blocks/Tabs/index.js.map +1 -1
- package/ui/Blocks/Tabs/styles.js +19 -9
- package/ui/Blocks/Tabs/styles.js.map +1 -1
- package/ui/Elements/Alert/Alert.js +14 -10
- package/ui/Elements/Alert/Alert.js.map +1 -1
- package/ui/Elements/Alert/index.js +7 -2
- package/ui/Elements/Alert/index.js.map +1 -1
- package/ui/Elements/Alert/styles.js +29 -15
- package/ui/Elements/Alert/styles.js.map +1 -1
- package/ui/Elements/Avatar/Avatar.js +15 -9
- package/ui/Elements/Avatar/Avatar.js.map +1 -1
- package/ui/Elements/Avatar/index.js +7 -2
- package/ui/Elements/Avatar/index.js.map +1 -1
- package/ui/Elements/Badge/Badge.js +21 -13
- package/ui/Elements/Badge/Badge.js.map +1 -1
- package/ui/Elements/Badge/index.js +7 -2
- package/ui/Elements/Badge/index.js.map +1 -1
- package/ui/Elements/BorderedBox/BorderedBox.js +15 -7
- package/ui/Elements/BorderedBox/BorderedBox.js.map +1 -1
- package/ui/Elements/BorderedBox/index.js +7 -2
- package/ui/Elements/BorderedBox/index.js.map +1 -1
- package/ui/Elements/Button/Button.js +11 -7
- package/ui/Elements/Button/Button.js.map +1 -1
- package/ui/Elements/Button/index.js +7 -2
- package/ui/Elements/Button/index.js.map +1 -1
- package/ui/Elements/Button/styles.js +19 -10
- package/ui/Elements/Button/styles.js.map +1 -1
- package/ui/Elements/Card/Card.js +21 -14
- package/ui/Elements/Card/Card.js.map +1 -1
- package/ui/Elements/Card/index.js +9 -3
- package/ui/Elements/Card/index.js.map +1 -1
- package/ui/Elements/Card/styles.js +23 -13
- package/ui/Elements/Card/styles.js.map +1 -1
- package/ui/Elements/Dropdown/Dropdown.js +18 -10
- package/ui/Elements/Dropdown/Dropdown.js.map +1 -1
- package/ui/Elements/Dropdown/index.js +7 -2
- package/ui/Elements/Dropdown/index.js.map +1 -1
- package/ui/Elements/ErrorMessage/ErrorMessage.js +17 -9
- package/ui/Elements/ErrorMessage/ErrorMessage.js.map +1 -1
- package/ui/Elements/ErrorMessage/index.js +7 -2
- package/ui/Elements/ErrorMessage/index.js.map +1 -1
- package/ui/Elements/Icon/Icon.js +224 -214
- package/ui/Elements/Icon/Icon.js.map +1 -1
- package/ui/Elements/Icon/icons/Complaint.js +6 -4
- package/ui/Elements/Icon/icons/Complaint.js.map +1 -1
- package/ui/Elements/Icon/icons/Expeditions.js +6 -4
- package/ui/Elements/Icon/icons/Expeditions.js.map +1 -1
- package/ui/Elements/Icon/icons/FlagCZ.js +6 -4
- package/ui/Elements/Icon/icons/FlagCZ.js.map +1 -1
- package/ui/Elements/Icon/icons/FlagUSA.js +6 -4
- package/ui/Elements/Icon/icons/FlagUSA.js.map +1 -1
- package/ui/Elements/Icon/icons/HamburgerMenu.js +6 -4
- package/ui/Elements/Icon/icons/HamburgerMenu.js.map +1 -1
- package/ui/Elements/Icon/icons/HelpCircle1.js +6 -4
- package/ui/Elements/Icon/icons/HelpCircle1.js.map +1 -1
- package/ui/Elements/Icon/icons/Income.js +6 -4
- package/ui/Elements/Icon/icons/Income.js.map +1 -1
- package/ui/Elements/Icon/icons/Inventory.js +6 -4
- package/ui/Elements/Icon/icons/Inventory.js.map +1 -1
- package/ui/Elements/Icon/icons/MenuItems.js +6 -4
- package/ui/Elements/Icon/icons/MenuItems.js.map +1 -1
- package/ui/Elements/Icon/icons/MobileCancel.js +6 -4
- package/ui/Elements/Icon/icons/MobileCancel.js.map +1 -1
- package/ui/Elements/Icon/icons/Notification2.js +6 -4
- package/ui/Elements/Icon/icons/Notification2.js.map +1 -1
- package/ui/Elements/Icon/icons/Plus1.js +6 -4
- package/ui/Elements/Icon/icons/Plus1.js.map +1 -1
- package/ui/Elements/Icon/icons/Products.js +6 -4
- package/ui/Elements/Icon/icons/Products.js.map +1 -1
- package/ui/Elements/Icon/icons/Profile.js +6 -4
- package/ui/Elements/Icon/icons/Profile.js.map +1 -1
- package/ui/Elements/Icon/icons/Return.js +6 -4
- package/ui/Elements/Icon/icons/Return.js.map +1 -1
- package/ui/Elements/Icon/icons/Settings2.js +6 -4
- package/ui/Elements/Icon/icons/Settings2.js.map +1 -1
- package/ui/Elements/Icon/icons/Transfer.js +6 -4
- package/ui/Elements/Icon/icons/Transfer.js.map +1 -1
- package/ui/Elements/Icon/index.js +10 -5
- package/ui/Elements/Icon/index.js.map +1 -1
- package/ui/Elements/Image/Image.js +9 -5
- package/ui/Elements/Image/Image.js.map +1 -1
- package/ui/Elements/Image/index.js +7 -2
- package/ui/Elements/Image/index.js.map +1 -1
- package/ui/Elements/Label/Label.js +17 -10
- package/ui/Elements/Label/Label.js.map +1 -1
- package/ui/Elements/Label/index.js +8 -3
- package/ui/Elements/Label/index.js.map +1 -1
- package/ui/Elements/Line/Line.js +14 -6
- package/ui/Elements/Line/Line.js.map +1 -1
- package/ui/Elements/Line/index.js +7 -2
- package/ui/Elements/Line/index.js.map +1 -1
- package/ui/Elements/Link/Link.js +23 -15
- package/ui/Elements/Link/Link.js.map +1 -1
- package/ui/Elements/Link/index.js +7 -2
- package/ui/Elements/Link/index.js.map +1 -1
- package/ui/Elements/Logo/Logo.js +35 -27
- package/ui/Elements/Logo/Logo.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_black.png.js +5 -1
- package/ui/Elements/Logo/assets/mailship/logo_black.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_m.png.js +5 -1
- package/ui/Elements/Logo/assets/mailship/logo_m.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_white.png.js +5 -1
- package/ui/Elements/Logo/assets/mailship/logo_white.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/mailship-logo.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailship/mailship-logo.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstock/mailstock.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailstock/mailstock.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.svg.js.map +1 -1
- package/ui/Elements/Logo/index.js +7 -2
- package/ui/Elements/Logo/index.js.map +1 -1
- package/ui/Elements/Pagination/Pagination.js +11 -7
- package/ui/Elements/Pagination/Pagination.js.map +1 -1
- package/ui/Elements/Pagination/index.js +7 -2
- package/ui/Elements/Pagination/index.js.map +1 -1
- package/ui/Elements/Pagination/styled.js +25 -14
- package/ui/Elements/Pagination/styled.js.map +1 -1
- package/ui/Elements/Paragraph/Paragraph.js +7 -3
- package/ui/Elements/Paragraph/Paragraph.js.map +1 -1
- package/ui/Elements/Paragraph/index.js +7 -2
- package/ui/Elements/Paragraph/index.js.map +1 -1
- package/ui/Elements/Portal/index.js +15 -6
- package/ui/Elements/Portal/index.js.map +1 -1
- package/ui/Elements/ProgressBar/ProgressBar.js +8 -4
- package/ui/Elements/ProgressBar/ProgressBar.js.map +1 -1
- package/ui/Elements/ProgressBar/index.js +7 -2
- package/ui/Elements/ProgressBar/index.js.map +1 -1
- package/ui/Elements/ProgressBar/styles.js +22 -14
- package/ui/Elements/ProgressBar/styles.js.map +1 -1
- package/ui/Elements/SimpleLink/SimpleLink.js +15 -7
- package/ui/Elements/SimpleLink/SimpleLink.js.map +1 -1
- package/ui/Elements/SimpleLink/index.js +7 -2
- package/ui/Elements/SimpleLink/index.js.map +1 -1
- package/ui/Elements/SpaceAround/SpaceAround.js +20 -12
- package/ui/Elements/SpaceAround/SpaceAround.js.map +1 -1
- package/ui/Elements/SpaceAround/index.js +7 -2
- package/ui/Elements/SpaceAround/index.js.map +1 -1
- package/ui/Elements/Spinner/Spinner.js +10 -4
- package/ui/Elements/Spinner/Spinner.js.map +1 -1
- package/ui/Elements/Spinner/index.js +7 -2
- package/ui/Elements/Spinner/index.js.map +1 -1
- package/ui/Elements/Spinner/styles.js +16 -9
- package/ui/Elements/Spinner/styles.js.map +1 -1
- package/ui/Elements/Tag/Tag.js +16 -7
- package/ui/Elements/Tag/Tag.js.map +1 -1
- package/ui/Elements/Tag/index.js +7 -2
- package/ui/Elements/Tag/index.js.map +1 -1
- package/ui/Elements/Tag/palletes.js +3 -1
- package/ui/Elements/Tag/palletes.js.map +1 -1
- package/ui/Elements/Text/Text.js +9 -5
- package/ui/Elements/Text/Text.js.map +1 -1
- package/ui/Elements/Toast/Toast.js +18 -10
- package/ui/Elements/Toast/Toast.js.map +1 -1
- package/ui/Elements/Toast/index.js +7 -2
- package/ui/Elements/Toast/index.js.map +1 -1
- package/ui/Elements/Toggle/Toggle.js +23 -15
- package/ui/Elements/Toggle/Toggle.js.map +1 -1
- package/ui/Elements/Toggle/index.js +7 -2
- package/ui/Elements/Toggle/index.js.map +1 -1
- package/ui/Elements/Typography/Typography.js +31 -17
- package/ui/Elements/Typography/Typography.js.map +1 -1
- package/ui/Elements/Typography/index.js +19 -3
- package/ui/Elements/Typography/index.js.map +1 -1
- package/ui/Forms/Checkbox/Checkbox.js +13 -9
- package/ui/Forms/Checkbox/Checkbox.js.map +1 -1
- package/ui/Forms/Checkbox/index.js +7 -2
- package/ui/Forms/Checkbox/index.js.map +1 -1
- package/ui/Forms/Checkbox/styles.js +18 -9
- package/ui/Forms/Checkbox/styles.js.map +1 -1
- package/ui/Forms/Input/Input.js +21 -19
- package/ui/Forms/Input/Input.js.map +1 -1
- package/ui/Forms/Input/index.js +7 -2
- package/ui/Forms/Input/index.js.map +1 -1
- package/ui/Forms/Input/styles.js +32 -19
- package/ui/Forms/Input/styles.js.map +1 -1
- package/ui/Forms/RadioButton/RadioButton.js +10 -6
- package/ui/Forms/RadioButton/RadioButton.js.map +1 -1
- package/ui/Forms/RadioButton/index.js +7 -2
- package/ui/Forms/RadioButton/index.js.map +1 -1
- package/ui/Forms/RadioButton/styles.js +20 -9
- package/ui/Forms/RadioButton/styles.js.map +1 -1
- package/ui/ThemeProvider/ThemeProvider.js +9 -5
- package/ui/ThemeProvider/ThemeProvider.js.map +1 -1
- package/ui/ThemeProvider/index.js +6 -2
- package/ui/ThemeProvider/index.js.map +1 -1
- package/ui/ThemeProvider/themes/default.js +5 -1
- package/ui/ThemeProvider/themes/default.js.map +1 -1
- package/ui/ThemeProvider/themes/index.js +11 -7
- package/ui/ThemeProvider/themes/index.js.map +1 -1
- package/ui/ThemeProvider/themes/light.js +5 -1
- package/ui/ThemeProvider/themes/light.js.map +1 -1
- package/ui/ThemeProvider/themes/mailwise.js +5 -1
- package/ui/ThemeProvider/themes/mailwise.js.map +1 -1
- package/ui/dts/ThemeProvider/index.d.ts +0 -1
- package/ui/index.d.ts +1 -1
- package/ui/index.js +143 -60
- package/ui/index.js.map +1 -1
- package/ui/utils/CreateRgba/createRgba.js +15 -6
- package/ui/utils/CreateRgba/createRgba.js.map +1 -1
- package/ui/utils/KeyPress/KeyPress.js +8 -4
- package/ui/utils/KeyPress/KeyPress.js.map +1 -1
- package/ui/utils/KeyPress/index.js +6 -2
- package/ui/utils/KeyPress/index.js.map +1 -1
- package/ui/utils/index.js +11 -5
- package/ui/utils/index.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,23 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var utils = require('./utils.js');
|
|
6
|
+
var index = require('../../Elements/Portal/index.js');
|
|
7
|
+
var Icon = require('../../Elements/Icon/Icon.js');
|
|
8
|
+
require('tslib');
|
|
9
|
+
var styles = require('./styles.js');
|
|
8
10
|
|
|
9
11
|
var CornerDialog = function (_a) {
|
|
10
12
|
var title = _a.title, children = _a.children, onClose = _a.onClose, statusToTitle = _a.statusToTitle, _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, _intent = _a.intent;
|
|
11
|
-
var _c = useState(false), isMounted = _c[0], setIsMounted = _c[1];
|
|
12
|
-
useEffect(function () {
|
|
13
|
+
var _c = React.useState(false), isMounted = _c[0], setIsMounted = _c[1];
|
|
14
|
+
React.useEffect(function () {
|
|
13
15
|
setIsMounted(true);
|
|
14
16
|
}, []);
|
|
15
17
|
var intent = _intent !== null && _intent !== void 0 ? _intent : 'info';
|
|
16
|
-
var _d = statusToColors[intent], fontColor = _d.fontColor, backgroundColor = _d.backgroundColor, fill = _d.fill;
|
|
18
|
+
var _d = utils.statusToColors[intent], fontColor = _d.fontColor, backgroundColor = _d.backgroundColor, fill = _d.fill;
|
|
17
19
|
if (!isOpen)
|
|
18
20
|
return null;
|
|
19
|
-
return (jsx(Portal, { children: jsxs(Container, { "$mounted": isMounted, children: [jsxs(Status, { background: backgroundColor, children: [jsx(Icon, { icon: statusToIcon[intent], fill: fill }), jsx(StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), jsx(Header, { children: title }), jsx(CloseBtn, { onClick: onClose, children: jsx(Icon, { icon: "close", size: "25px" }) }), jsx(Wrapper, { children: children })] }) }));
|
|
21
|
+
return (jsxRuntime.jsx(index.Portal, { children: jsxRuntime.jsxs(styles.Container, { "$mounted": isMounted, children: [jsxRuntime.jsxs(styles.Status, { background: backgroundColor, children: [jsxRuntime.jsx(Icon.default, { icon: utils.statusToIcon[intent], fill: fill }), jsxRuntime.jsx(styles.StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), jsxRuntime.jsx(styles.Header, { children: title }), jsxRuntime.jsx(styles.CloseBtn, { onClick: onClose, children: jsxRuntime.jsx(Icon.default, { icon: "close", size: "25px" }) }), jsxRuntime.jsx(styles.Wrapper, { children: children })] }) }));
|
|
20
22
|
};
|
|
21
23
|
|
|
22
|
-
|
|
24
|
+
exports.CornerDialog = CornerDialog;
|
|
23
25
|
//# sourceMappingURL=CornerDialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CornerDialog.js","sources":["../../../../packages/ui/Blocks/CornerDialog/CornerDialog.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useEffect, useState } from 'react';\nimport { statusToColors, statusToIcon } from './utils';\nimport { Portal } from '../../Elements/Portal';\nimport { Icon } from '../../Elements/Icon';\nimport { Container, Header, Status, StatusText, Wrapper, CloseBtn } from './styles';\nexport var CornerDialog = function (_a) {\n var title = _a.title, children = _a.children, onClose = _a.onClose, statusToTitle = _a.statusToTitle, _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, _intent = _a.intent;\n var _c = useState(false), isMounted = _c[0], setIsMounted = _c[1];\n useEffect(function () {\n setIsMounted(true);\n }, []);\n var intent = _intent !== null && _intent !== void 0 ? _intent : 'info';\n var _d = statusToColors[intent], fontColor = _d.fontColor, backgroundColor = _d.backgroundColor, fill = _d.fill;\n if (!isOpen)\n return null;\n return (_jsx(Portal, { children: _jsxs(Container, { \"$mounted\": isMounted, children: [_jsxs(Status, { background: backgroundColor, children: [_jsx(Icon, { icon: statusToIcon[intent], fill: fill }), _jsx(StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), _jsx(Header, { children: title }), _jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { icon: \"close\", size: \"25px\" }) }), _jsx(Wrapper, { children: children })] }) }));\n};\n//# sourceMappingURL=CornerDialog.js.map"],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CornerDialog.js","sources":["../../../../packages/ui/Blocks/CornerDialog/CornerDialog.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useEffect, useState } from 'react';\nimport { statusToColors, statusToIcon } from './utils';\nimport { Portal } from '../../Elements/Portal';\nimport { Icon } from '../../Elements/Icon';\nimport { Container, Header, Status, StatusText, Wrapper, CloseBtn } from './styles';\nexport var CornerDialog = function (_a) {\n var title = _a.title, children = _a.children, onClose = _a.onClose, statusToTitle = _a.statusToTitle, _b = _a.isOpen, isOpen = _b === void 0 ? true : _b, _intent = _a.intent;\n var _c = useState(false), isMounted = _c[0], setIsMounted = _c[1];\n useEffect(function () {\n setIsMounted(true);\n }, []);\n var intent = _intent !== null && _intent !== void 0 ? _intent : 'info';\n var _d = statusToColors[intent], fontColor = _d.fontColor, backgroundColor = _d.backgroundColor, fill = _d.fill;\n if (!isOpen)\n return null;\n return (_jsx(Portal, { children: _jsxs(Container, { \"$mounted\": isMounted, children: [_jsxs(Status, { background: backgroundColor, children: [_jsx(Icon, { icon: statusToIcon[intent], fill: fill }), _jsx(StatusText, { fontColor: fontColor, children: statusToTitle[intent]() })] }), _jsx(Header, { children: title }), _jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { icon: \"close\", size: \"25px\" }) }), _jsx(Wrapper, { children: children })] }) }));\n};\n//# sourceMappingURL=CornerDialog.js.map"],"names":["useState","useEffect","statusToColors","_jsx","Portal","_jsxs","Container","Status","Icon","statusToIcon","StatusText","Header","CloseBtn","Wrapper"],"mappings":";;;;;;;;;;AAMU,IAAC,YAAY,GAAG,UAAU,EAAE,EAAE;AACxC,IAAI,IAAI,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,EAAE,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,aAAa,GAAG,EAAE,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,IAAI,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC;AAClL,IAAI,IAAI,EAAE,GAAGA,cAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;AACtE,IAAIC,eAAS,CAAC,YAAY;AAC1B,QAAQ,YAAY,CAAC,IAAI,CAAC,CAAC;AAC3B,KAAK,EAAE,EAAE,CAAC,CAAC;AACX,IAAI,IAAI,MAAM,GAAG,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3E,IAAI,IAAI,EAAE,GAAGC,oBAAc,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,eAAe,GAAG,EAAE,CAAC,eAAe,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC;AACpH,IAAI,IAAI,CAAC,MAAM;AACf,QAAQ,OAAO,IAAI,CAAC;AACpB,IAAI,QAAQC,cAAI,CAACC,YAAM,EAAE,EAAE,QAAQ,EAAEC,eAAK,CAACC,gBAAS,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,CAACD,eAAK,CAACE,aAAM,EAAE,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,CAACJ,cAAI,CAACK,YAAI,EAAE,EAAE,IAAI,EAAEC,kBAAY,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAEN,cAAI,CAACO,iBAAU,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAEP,cAAI,CAACQ,aAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAER,cAAI,CAACS,eAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAET,cAAI,CAACK,YAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAEL,cAAI,CAACU,cAAO,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC3c;;;;"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
4
|
|
|
5
|
+
var CornerDialog = require('./CornerDialog.js');
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.default = CornerDialog.CornerDialog;
|
|
6
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -1,22 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
import styled, { th } from '@xstyled/styled-components';
|
|
1
|
+
'use strict';
|
|
3
2
|
|
|
4
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var styled = require('@xstyled/styled-components');
|
|
5
|
+
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
+
|
|
10
|
+
var Container = styled__default.default.div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n position: fixed;\n z-index: 10;\n bottom: 3rem;\n right: 3rem;\n background: white;\n border-radius: 12px;\n box-shadow: cornerDialogShadow;\n width: 400px;\n padding: 50px 30px 30px;\n color: typoPrimary;\n transition: opacity 225ms linear;\n opacity: ", ";\n"], ["\n position: fixed;\n z-index: 10;\n bottom: 3rem;\n right: 3rem;\n background: white;\n border-radius: 12px;\n box-shadow: cornerDialogShadow;\n width: 400px;\n padding: 50px 30px 30px;\n color: typoPrimary;\n transition: opacity 225ms linear;\n opacity: ", ";\n"])), function (_a) {
|
|
5
11
|
var $mounted = _a.$mounted;
|
|
6
12
|
return ($mounted ? 1 : 0);
|
|
7
13
|
});
|
|
8
|
-
var Header =
|
|
9
|
-
var Wrapper =
|
|
10
|
-
var Status =
|
|
14
|
+
var Header = styled__default.default.div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n margin-bottom: 15px;\n color: typoPrimary;\n font-size: 18px;\n font-weight: bold;\n display: flex;\n align-items: center;\n"], ["\n margin-bottom: 15px;\n color: typoPrimary;\n font-size: 18px;\n font-weight: bold;\n display: flex;\n align-items: center;\n"])));
|
|
15
|
+
var Wrapper = styled__default.default.div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n"], ["\n font-size: 14px;\n font-weight: 400;\n"])));
|
|
16
|
+
var Status = styled__default.default.div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n padding: 6px 10px;\n text-transform: uppercase;\n border-radius: 12px 0 12px 0;\n background-color: ", ";\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n padding: 6px 10px;\n text-transform: uppercase;\n border-radius: 12px 0 12px 0;\n background-color: ", ";\n"])), function (_a) {
|
|
11
17
|
var background = _a.background;
|
|
12
|
-
return th.color(background);
|
|
18
|
+
return styled.th.color(background);
|
|
13
19
|
});
|
|
14
|
-
var CloseBtn =
|
|
15
|
-
var StatusText =
|
|
20
|
+
var CloseBtn = styled__default.default.div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n cursor: pointer;\n position: absolute;\n top: 12px;\n right: 12px;\n"], ["\n cursor: pointer;\n position: absolute;\n top: 12px;\n right: 12px;\n"])));
|
|
21
|
+
var StatusText = styled__default.default.span(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n display: inline-block;\n margin-left: 6px;\n font-size: 14px;\n font-weight: 700;\n color: ", ";\n"], ["\n display: inline-block;\n margin-left: 6px;\n font-size: 14px;\n font-weight: 700;\n color: ", ";\n"])), function (_a) {
|
|
16
22
|
var fontColor = _a.fontColor;
|
|
17
|
-
return th.color(fontColor);
|
|
23
|
+
return styled.th.color(fontColor);
|
|
18
24
|
});
|
|
19
25
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
20
26
|
|
|
21
|
-
|
|
27
|
+
exports.CloseBtn = CloseBtn;
|
|
28
|
+
exports.Container = Container;
|
|
29
|
+
exports.Header = Header;
|
|
30
|
+
exports.Status = Status;
|
|
31
|
+
exports.StatusText = StatusText;
|
|
32
|
+
exports.Wrapper = Wrapper;
|
|
22
33
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/CornerDialog/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: fixed;\\n z-index: 10;\\n bottom: 3rem;\\n right: 3rem;\\n background: white;\\n border-radius: 12px;\\n box-shadow: cornerDialogShadow;\\n width: 400px;\\n padding: 50px 30px 30px;\\n color: typoPrimary;\\n transition: opacity 225ms linear;\\n opacity: \", \";\\n\"], [\"\\n position: fixed;\\n z-index: 10;\\n bottom: 3rem;\\n right: 3rem;\\n background: white;\\n border-radius: 12px;\\n box-shadow: cornerDialogShadow;\\n width: 400px;\\n padding: 50px 30px 30px;\\n color: typoPrimary;\\n transition: opacity 225ms linear;\\n opacity: \", \";\\n\"])), function (_a) {\n var $mounted = _a.$mounted;\n return ($mounted ? 1 : 0);\n});\nexport var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n margin-bottom: 15px;\\n color: typoPrimary;\\n font-size: 18px;\\n font-weight: bold;\\n display: flex;\\n align-items: center;\\n\"], [\"\\n margin-bottom: 15px;\\n color: typoPrimary;\\n font-size: 18px;\\n font-weight: bold;\\n display: flex;\\n align-items: center;\\n\"])));\nexport var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n font-size: 14px;\\n font-weight: 400;\\n\"], [\"\\n font-size: 14px;\\n font-weight: 400;\\n\"])));\nexport var Status = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n position: absolute;\\n left: 0;\\n top: 0;\\n padding: 6px 10px;\\n text-transform: uppercase;\\n border-radius: 12px 0 12px 0;\\n background-color: \", \";\\n\"], [\"\\n position: absolute;\\n left: 0;\\n top: 0;\\n padding: 6px 10px;\\n text-transform: uppercase;\\n border-radius: 12px 0 12px 0;\\n background-color: \", \";\\n\"])), function (_a) {\n var background = _a.background;\n return th.color(background);\n});\nexport var CloseBtn = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n cursor: pointer;\\n position: absolute;\\n top: 12px;\\n right: 12px;\\n\"], [\"\\n cursor: pointer;\\n position: absolute;\\n top: 12px;\\n right: 12px;\\n\"])));\nexport var StatusText = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n display: inline-block;\\n margin-left: 6px;\\n font-size: 14px;\\n font-weight: 700;\\n color: \", \";\\n\"], [\"\\n display: inline-block;\\n margin-left: 6px;\\n font-size: 14px;\\n font-weight: 700;\\n color: \", \";\\n\"])), function (_a) {\n var fontColor = _a.fontColor;\n return th.color(fontColor);\n});\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/CornerDialog/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: fixed;\\n z-index: 10;\\n bottom: 3rem;\\n right: 3rem;\\n background: white;\\n border-radius: 12px;\\n box-shadow: cornerDialogShadow;\\n width: 400px;\\n padding: 50px 30px 30px;\\n color: typoPrimary;\\n transition: opacity 225ms linear;\\n opacity: \", \";\\n\"], [\"\\n position: fixed;\\n z-index: 10;\\n bottom: 3rem;\\n right: 3rem;\\n background: white;\\n border-radius: 12px;\\n box-shadow: cornerDialogShadow;\\n width: 400px;\\n padding: 50px 30px 30px;\\n color: typoPrimary;\\n transition: opacity 225ms linear;\\n opacity: \", \";\\n\"])), function (_a) {\n var $mounted = _a.$mounted;\n return ($mounted ? 1 : 0);\n});\nexport var Header = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n margin-bottom: 15px;\\n color: typoPrimary;\\n font-size: 18px;\\n font-weight: bold;\\n display: flex;\\n align-items: center;\\n\"], [\"\\n margin-bottom: 15px;\\n color: typoPrimary;\\n font-size: 18px;\\n font-weight: bold;\\n display: flex;\\n align-items: center;\\n\"])));\nexport var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n font-size: 14px;\\n font-weight: 400;\\n\"], [\"\\n font-size: 14px;\\n font-weight: 400;\\n\"])));\nexport var Status = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n position: absolute;\\n left: 0;\\n top: 0;\\n padding: 6px 10px;\\n text-transform: uppercase;\\n border-radius: 12px 0 12px 0;\\n background-color: \", \";\\n\"], [\"\\n position: absolute;\\n left: 0;\\n top: 0;\\n padding: 6px 10px;\\n text-transform: uppercase;\\n border-radius: 12px 0 12px 0;\\n background-color: \", \";\\n\"])), function (_a) {\n var background = _a.background;\n return th.color(background);\n});\nexport var CloseBtn = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n cursor: pointer;\\n position: absolute;\\n top: 12px;\\n right: 12px;\\n\"], [\"\\n cursor: pointer;\\n position: absolute;\\n top: 12px;\\n right: 12px;\\n\"])));\nexport var StatusText = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n display: inline-block;\\n margin-left: 6px;\\n font-size: 14px;\\n font-weight: 700;\\n color: \", \";\\n\"], [\"\\n display: inline-block;\\n margin-left: 6px;\\n font-size: 14px;\\n font-weight: 700;\\n color: \", \";\\n\"])), function (_a) {\n var fontColor = _a.fontColor;\n return th.color(fontColor);\n});\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;\n//# sourceMappingURL=styles.js.map"],"names":["styled","__makeTemplateObject","th"],"mappings":";;;;;;;;;AAEU,IAAC,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,8QAA8Q,EAAE,KAAK,CAAC,EAAE,CAAC,8QAA8Q,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE;AACjqB,IAAI,IAAI,QAAQ,GAAG,EAAE,CAAC,QAAQ,CAAC;AAC/B,IAAI,QAAQ,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE;AAC9B,CAAC,EAAE;AACO,IAAC,MAAM,GAAGD,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,uIAAuI,CAAC,EAAE,CAAC,uIAAuI,CAAC,CAAC,CAAC,EAAE;AAC1W,IAAC,OAAO,GAAGD,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,6CAA6C,CAAC,EAAE,CAAC,6CAA6C,CAAC,CAAC,CAAC,EAAE;AACvL,IAAC,MAAM,GAAGD,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,2JAA2J,EAAE,KAAK,CAAC,EAAE,CAAC,2JAA2J,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE;AACxb,IAAI,IAAI,UAAU,GAAG,EAAE,CAAC,UAAU,CAAC;AACnC,IAAI,OAAOC,SAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;AAChC,CAAC,EAAE;AACO,IAAC,QAAQ,GAAGF,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,6EAA6E,CAAC,EAAE,CAAC,6EAA6E,CAAC,CAAC,CAAC,EAAE;AACxP,IAAC,UAAU,GAAGD,uBAAM,CAAC,IAAI,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,qGAAqG,EAAE,KAAK,CAAC,EAAE,CAAC,qGAAqG,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE;AACjV,IAAI,IAAI,SAAS,GAAG,EAAE,CAAC,SAAS,CAAC;AACjC,IAAI,OAAOC,SAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;AAC/B,CAAC,EAAE;AACH,IAAI,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB;;;;;;;;;"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
1
3
|
var statusToColors = {
|
|
2
4
|
info: { fontColor: 'gray1', backgroundColor: 'lightGray7', fill: 'gray1' },
|
|
3
5
|
success: { fontColor: 'white', backgroundColor: 'green', fill: 'white' },
|
|
@@ -11,5 +13,6 @@ var statusToIcon = {
|
|
|
11
13
|
warning: 'circleTriangle',
|
|
12
14
|
};
|
|
13
15
|
|
|
14
|
-
|
|
16
|
+
exports.statusToColors = statusToColors;
|
|
17
|
+
exports.statusToIcon = statusToIcon;
|
|
15
18
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../packages/ui/Blocks/CornerDialog/utils.ts"],"sourcesContent":["export var statusToColors = {\n info: { fontColor: 'gray1', backgroundColor: 'lightGray7', fill: 'gray1' },\n success: { fontColor: 'white', backgroundColor: 'green', fill: 'white' },\n error: { fontColor: 'white', backgroundColor: 'red1', fill: 'white' },\n warning: { fontColor: 'blue2', backgroundColor: 'yellow1', fill: 'blue2' },\n};\nexport var statusToIcon = {\n info: 'info',\n success: 'circleCheck',\n error: 'circleX',\n warning: 'circleTriangle',\n};\n//# sourceMappingURL=utils.js.map"],"names":[],"mappings":"AAAU,IAAC,cAAc,GAAG;AAC5B,IAAI,IAAI,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE;AAC9E,IAAI,OAAO,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;AAC5E,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE;AACzE,IAAI,OAAO,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE;AAC9E,EAAE;AACQ,IAAC,YAAY,GAAG;AAC1B,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,aAAa;AAC1B,IAAI,KAAK,EAAE,SAAS;AACpB,IAAI,OAAO,EAAE,gBAAgB;AAC7B
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../packages/ui/Blocks/CornerDialog/utils.ts"],"sourcesContent":["export var statusToColors = {\n info: { fontColor: 'gray1', backgroundColor: 'lightGray7', fill: 'gray1' },\n success: { fontColor: 'white', backgroundColor: 'green', fill: 'white' },\n error: { fontColor: 'white', backgroundColor: 'red1', fill: 'white' },\n warning: { fontColor: 'blue2', backgroundColor: 'yellow1', fill: 'blue2' },\n};\nexport var statusToIcon = {\n info: 'info',\n success: 'circleCheck',\n error: 'circleX',\n warning: 'circleTriangle',\n};\n//# sourceMappingURL=utils.js.map"],"names":[],"mappings":";;AAAU,IAAC,cAAc,GAAG;AAC5B,IAAI,IAAI,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE;AAC9E,IAAI,OAAO,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;AAC5E,IAAI,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE;AACzE,IAAI,OAAO,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE;AAC9E,EAAE;AACQ,IAAC,YAAY,GAAG;AAC1B,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,aAAa;AAC1B,IAAI,KAAK,EAAE,SAAS;AACpB,IAAI,OAAO,EAAE,gBAAgB;AAC7B;;;;;"}
|
|
@@ -1,24 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var reactUseDraggableScroll = require('react-use-draggable-scroll');
|
|
7
|
+
var LightBox = require('../LightBox/LightBox.js');
|
|
8
|
+
var useLightBox = require('../LightBox/hooks/useLightBox.js');
|
|
9
|
+
var index = require('./components/AddPhoto/index.js');
|
|
10
|
+
var index$1 = require('./components/ImageElement/index.js');
|
|
11
|
+
var styled = require('@xstyled/styled-components');
|
|
12
|
+
var styles = require('./styles.js');
|
|
11
13
|
|
|
12
14
|
var ImageList = function (_a) {
|
|
13
15
|
var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images;
|
|
14
|
-
var ref = useRef();
|
|
15
|
-
var events = useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;
|
|
16
|
-
var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
|
|
17
|
-
return (jsxs(x.div, { display: "flex", alignItems: "flex-end", children: [jsx(AddPhoto, { onImageUpload: onImageUpload }), images && (jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
|
|
16
|
+
var ref = React.useRef();
|
|
17
|
+
var events = reactUseDraggableScroll.useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;
|
|
18
|
+
var _b = useLightBox.useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
|
|
19
|
+
return (jsxRuntime.jsxs(styled.x.div, { display: "flex", alignItems: "flex-end", children: [jsxRuntime.jsx(index.AddPhoto, { onImageUpload: onImageUpload }), images && (jsxRuntime.jsx(styles.ImageListContainer, tslib.__assign({ ref: ref }, events, { children: images.map(function (item, index) {
|
|
18
20
|
var _a, _b;
|
|
19
|
-
return (jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
|
|
20
|
-
}) }))), jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
|
|
21
|
+
return (jsxRuntime.jsx(index$1.ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
|
|
22
|
+
}) }))), jsxRuntime.jsx(LightBox.LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
|
|
21
23
|
};
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
exports.ImageList = ImageList;
|
|
24
26
|
//# sourceMappingURL=ImageList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageList.js","sources":["../../../../packages/ui/Blocks/ImageList/ImageList.tsx"],"sourcesContent":["import { __assign } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport LightBox, { useLightBox } from '../LightBox';\nimport { AddPhoto } from './components/AddPhoto';\nimport { ImageElement } from './components/ImageElement';\nimport { x } from '@xstyled/styled-components';\nimport { ImageListContainer } from './styles';\nexport var ImageList = function (_a) {\n var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images;\n var ref = useRef();\n var events = useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;\n var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;\n return (_jsxs(x.div, { display: \"flex\", alignItems: \"flex-end\", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload }), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {\n var _a, _b;\n return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));\n }) }))), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));\n};\n//# sourceMappingURL=ImageList.js.map"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ImageList.js","sources":["../../../../packages/ui/Blocks/ImageList/ImageList.tsx"],"sourcesContent":["import { __assign } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useRef } from 'react';\nimport { useDraggable } from 'react-use-draggable-scroll';\nimport LightBox, { useLightBox } from '../LightBox';\nimport { AddPhoto } from './components/AddPhoto';\nimport { ImageElement } from './components/ImageElement';\nimport { x } from '@xstyled/styled-components';\nimport { ImageListContainer } from './styles';\nexport var ImageList = function (_a) {\n var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images;\n var ref = useRef();\n var events = useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;\n var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;\n return (_jsxs(x.div, { display: \"flex\", alignItems: \"flex-end\", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload }), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {\n var _a, _b;\n return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));\n }) }))), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));\n};\n//# sourceMappingURL=ImageList.js.map"],"names":["useRef","useDraggable","useLightBox","_jsxs","x","_jsx","AddPhoto","ImageListContainer","__assign","ImageElement","LightBox"],"mappings":";;;;;;;;;;;;;AASU,IAAC,SAAS,GAAG,UAAU,EAAE,EAAE;AACrC,IAAI,IAAI,aAAa,GAAG,EAAE,CAAC,aAAa,EAAE,aAAa,GAAG,EAAE,CAAC,aAAa,EAAE,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,mBAAmB,GAAG,EAAE,CAAC,mBAAmB,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,CAAC;AACjL,IAAI,IAAI,GAAG,GAAGA,YAAM,EAAE,CAAC;AACvB,IAAI,IAAI,MAAM,GAAGC,oCAAY,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC;AAC5H,IAAI,IAAI,EAAE,GAAGC,uBAAW,EAAE,EAAE,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,eAAe,GAAG,EAAE,CAAC,eAAe,EAAE,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;AACzK,IAAI,QAAQC,eAAK,CAACC,QAAC,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,CAACC,cAAI,CAACC,cAAQ,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,KAAKD,cAAI,CAACE,yBAAkB,EAAEC,cAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,UAAU,IAAI,EAAE,KAAK,EAAE;AAClP,oBAAoB,IAAI,EAAE,EAAE,EAAE,CAAC;AAC/B,oBAAoB,QAAQH,cAAI,CAACI,oBAAY,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,QAAQ,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,aAAa,EAAE,aAAa,KAAK,IAAI,IAAI,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,EAAE;AACjU,iBAAiB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAEJ,cAAI,CAACK,iBAAQ,EAAE,EAAE,YAAY,EAAE,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,YAAY,CAAC,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAClT;;;;"}
|
|
@@ -1,19 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var styles = require('./styles.js');
|
|
5
7
|
|
|
6
8
|
var AddPhoto = function (_a) {
|
|
7
9
|
var onImageUpload = _a.onImageUpload;
|
|
8
|
-
var handleImageUpload = useCallback(function (event) {
|
|
10
|
+
var handleImageUpload = React.useCallback(function (event) {
|
|
9
11
|
var _a, _b;
|
|
10
12
|
if (!((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]))
|
|
11
13
|
return;
|
|
12
14
|
var reader = new FileReader();
|
|
13
15
|
reader.readAsDataURL(event.target.files[0]);
|
|
14
|
-
reader.onload = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
16
|
+
reader.onload = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
|
|
15
17
|
var _a;
|
|
16
|
-
return __generator(this, function (_b) {
|
|
18
|
+
return tslib.__generator(this, function (_b) {
|
|
17
19
|
switch (_b.label) {
|
|
18
20
|
case 0: return [4 /*yield*/, (onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({ base64: reader.result, file: (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0] }))];
|
|
19
21
|
case 1:
|
|
@@ -25,8 +27,8 @@ var AddPhoto = function (_a) {
|
|
|
25
27
|
}, [onImageUpload]);
|
|
26
28
|
if (!onImageUpload)
|
|
27
29
|
return null;
|
|
28
|
-
return (jsxs(Container, { children: [jsx(HiddenInput, { onChange: handleImageUpload, type: "file", accept: "image/*" }), jsxs("svg", { width: "36", height: "36", viewBox: "0 0 37 34", fill: "#DB2B19", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.82792 6.14124C10.7187 5.25044 11.9269 4.75 13.1867 4.75H19C19.8745 4.75 20.5833 5.45889 20.5833 6.33333C20.5833 7.20778 19.8745 7.91667 19 7.91667H13.1867C12.7668 7.91667 12.364 8.08349 12.0671 8.38041L10.7554 9.69209C9.86461 10.5829 8.65643 11.0833 7.39665 11.0833H4.75C3.87556 11.0833 3.16667 11.7922 3.16667 12.6667V28.5C3.16667 29.3745 3.87556 30.0833 4.75 30.0833H26.9167C27.7911 30.0833 28.5 29.3745 28.5 28.5V17.4167C28.5 16.5422 29.2089 15.8333 30.0833 15.8333C30.9578 15.8333 31.6667 16.5422 31.6667 17.4167V28.5C31.6667 31.1234 29.5401 33.25 26.9167 33.25H4.75C2.12665 33.25 0 31.1234 0 28.5V12.6667C0 10.0433 2.12665 7.91667 4.75 7.91667H7.39665C7.81658 7.91667 8.21931 7.74985 8.51624 7.45292L9.82792 6.14124Z" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.9165 20.5834C7.9165 16.2112 11.4609 12.6667 15.8332 12.6667C20.2054 12.6667 23.7498 16.2112 23.7498 20.5834C23.7498 24.9556 20.2054 28.5001 15.8332 28.5001C11.4609 28.5001 7.9165 24.9556 7.9165 20.5834ZM15.8332 15.8334C13.2098 15.8334 11.0832 17.96 11.0832 20.5834C11.0832 23.2068 13.2098 25.3334 15.8332 25.3334C18.4566 25.3334 20.5832 23.2068 20.5832 20.5834C20.5832 17.96 18.4566 15.8334 15.8332 15.8334Z" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M23.75 6.33333C23.75 5.45889 24.4589 4.75 25.3333 4.75H34.8333C35.7078 4.75 36.4167 5.45889 36.4167 6.33333C36.4167 7.20778 35.7078 7.91667 34.8333 7.91667H25.3333C24.4589 7.91667 23.75 7.20778 23.75 6.33333Z" }), jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M30.0833 0C30.9578 0 31.6667 0.70889 31.6667 1.58333V11.0833C31.6667 11.9578 30.9578 12.6667 30.0833 12.6667C29.2089 12.6667 28.5 11.9578 28.5 11.0833V1.58333C28.5 0.70889 29.2089 0 30.0833 0Z" })] })] }));
|
|
30
|
+
return (jsxRuntime.jsxs(styles.Container, { children: [jsxRuntime.jsx(styles.HiddenInput, { onChange: handleImageUpload, type: "file", accept: "image/*" }), jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 37 34", fill: "#DB2B19", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.82792 6.14124C10.7187 5.25044 11.9269 4.75 13.1867 4.75H19C19.8745 4.75 20.5833 5.45889 20.5833 6.33333C20.5833 7.20778 19.8745 7.91667 19 7.91667H13.1867C12.7668 7.91667 12.364 8.08349 12.0671 8.38041L10.7554 9.69209C9.86461 10.5829 8.65643 11.0833 7.39665 11.0833H4.75C3.87556 11.0833 3.16667 11.7922 3.16667 12.6667V28.5C3.16667 29.3745 3.87556 30.0833 4.75 30.0833H26.9167C27.7911 30.0833 28.5 29.3745 28.5 28.5V17.4167C28.5 16.5422 29.2089 15.8333 30.0833 15.8333C30.9578 15.8333 31.6667 16.5422 31.6667 17.4167V28.5C31.6667 31.1234 29.5401 33.25 26.9167 33.25H4.75C2.12665 33.25 0 31.1234 0 28.5V12.6667C0 10.0433 2.12665 7.91667 4.75 7.91667H7.39665C7.81658 7.91667 8.21931 7.74985 8.51624 7.45292L9.82792 6.14124Z" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.9165 20.5834C7.9165 16.2112 11.4609 12.6667 15.8332 12.6667C20.2054 12.6667 23.7498 16.2112 23.7498 20.5834C23.7498 24.9556 20.2054 28.5001 15.8332 28.5001C11.4609 28.5001 7.9165 24.9556 7.9165 20.5834ZM15.8332 15.8334C13.2098 15.8334 11.0832 17.96 11.0832 20.5834C11.0832 23.2068 13.2098 25.3334 15.8332 25.3334C18.4566 25.3334 20.5832 23.2068 20.5832 20.5834C20.5832 17.96 18.4566 15.8334 15.8332 15.8334Z" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M23.75 6.33333C23.75 5.45889 24.4589 4.75 25.3333 4.75H34.8333C35.7078 4.75 36.4167 5.45889 36.4167 6.33333C36.4167 7.20778 35.7078 7.91667 34.8333 7.91667H25.3333C24.4589 7.91667 23.75 7.20778 23.75 6.33333Z" }), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M30.0833 0C30.9578 0 31.6667 0.70889 31.6667 1.58333V11.0833C31.6667 11.9578 30.9578 12.6667 30.0833 12.6667C29.2089 12.6667 28.5 11.9578 28.5 11.0833V1.58333C28.5 0.70889 29.2089 0 30.0833 0Z" })] })] }));
|
|
29
31
|
};
|
|
30
32
|
|
|
31
|
-
|
|
33
|
+
exports.AddPhoto = AddPhoto;
|
|
32
34
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/AddPhoto/index.tsx"],"sourcesContent":["import { __awaiter, __generator } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback } from 'react';\nimport { Container, HiddenInput } from './styles';\nexport var AddPhoto = function (_a) {\n var onImageUpload = _a.onImageUpload;\n var handleImageUpload = useCallback(function (event) {\n var _a, _b;\n if (!((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]))\n return;\n var reader = new FileReader();\n reader.readAsDataURL(event.target.files[0]);\n reader.onload = function () { return __awaiter(void 0, void 0, void 0, function () {\n var _a;\n return __generator(this, function (_b) {\n switch (_b.label) {\n case 0: return [4 /*yield*/, (onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({ base64: reader.result, file: (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0] }))];\n case 1:\n _b.sent();\n return [2 /*return*/];\n }\n });\n }); };\n }, [onImageUpload]);\n if (!onImageUpload)\n return null;\n return (_jsxs(Container, { children: [_jsx(HiddenInput, { onChange: handleImageUpload, type: \"file\", accept: \"image/*\" }), _jsxs(\"svg\", { width: \"36\", height: \"36\", viewBox: \"0 0 37 34\", fill: \"#DB2B19\", xmlns: \"http://www.w3.org/2000/svg\", children: [_jsx(\"path\", { fillRule: \"evenodd\", clipRule: \"evenodd\", d: \"M9.82792 6.14124C10.7187 5.25044 11.9269 4.75 13.1867 4.75H19C19.8745 4.75 20.5833 5.45889 20.5833 6.33333C20.5833 7.20778 19.8745 7.91667 19 7.91667H13.1867C12.7668 7.91667 12.364 8.08349 12.0671 8.38041L10.7554 9.69209C9.86461 10.5829 8.65643 11.0833 7.39665 11.0833H4.75C3.87556 11.0833 3.16667 11.7922 3.16667 12.6667V28.5C3.16667 29.3745 3.87556 30.0833 4.75 30.0833H26.9167C27.7911 30.0833 28.5 29.3745 28.5 28.5V17.4167C28.5 16.5422 29.2089 15.8333 30.0833 15.8333C30.9578 15.8333 31.6667 16.5422 31.6667 17.4167V28.5C31.6667 31.1234 29.5401 33.25 26.9167 33.25H4.75C2.12665 33.25 0 31.1234 0 28.5V12.6667C0 10.0433 2.12665 7.91667 4.75 7.91667H7.39665C7.81658 7.91667 8.21931 7.74985 8.51624 7.45292L9.82792 6.14124Z\" }), _jsx(\"path\", { fillRule: \"evenodd\", clipRule: \"evenodd\", d: \"M7.9165 20.5834C7.9165 16.2112 11.4609 12.6667 15.8332 12.6667C20.2054 12.6667 23.7498 16.2112 23.7498 20.5834C23.7498 24.9556 20.2054 28.5001 15.8332 28.5001C11.4609 28.5001 7.9165 24.9556 7.9165 20.5834ZM15.8332 15.8334C13.2098 15.8334 11.0832 17.96 11.0832 20.5834C11.0832 23.2068 13.2098 25.3334 15.8332 25.3334C18.4566 25.3334 20.5832 23.2068 20.5832 20.5834C20.5832 17.96 18.4566 15.8334 15.8332 15.8334Z\" }), _jsx(\"path\", { fillRule: \"evenodd\", clipRule: \"evenodd\", d: \"M23.75 6.33333C23.75 5.45889 24.4589 4.75 25.3333 4.75H34.8333C35.7078 4.75 36.4167 5.45889 36.4167 6.33333C36.4167 7.20778 35.7078 7.91667 34.8333 7.91667H25.3333C24.4589 7.91667 23.75 7.20778 23.75 6.33333Z\" }), _jsx(\"path\", { fillRule: \"evenodd\", clipRule: \"evenodd\", d: \"M30.0833 0C30.9578 0 31.6667 0.70889 31.6667 1.58333V11.0833C31.6667 11.9578 30.9578 12.6667 30.0833 12.6667C29.2089 12.6667 28.5 11.9578 28.5 11.0833V1.58333C28.5 0.70889 29.2089 0 30.0833 0Z\" })] })] }));\n};\n//# sourceMappingURL=index.js.map"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/AddPhoto/index.tsx"],"sourcesContent":["import { __awaiter, __generator } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback } from 'react';\nimport { Container, HiddenInput } from './styles';\nexport var AddPhoto = function (_a) {\n var onImageUpload = _a.onImageUpload;\n var handleImageUpload = useCallback(function (event) {\n var _a, _b;\n if (!((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]))\n return;\n var reader = new FileReader();\n reader.readAsDataURL(event.target.files[0]);\n reader.onload = function () { return __awaiter(void 0, void 0, void 0, function () {\n var _a;\n return __generator(this, function (_b) {\n switch (_b.label) {\n case 0: return [4 /*yield*/, (onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({ base64: reader.result, file: (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0] }))];\n case 1:\n _b.sent();\n return [2 /*return*/];\n }\n });\n }); };\n }, [onImageUpload]);\n if (!onImageUpload)\n return null;\n return (_jsxs(Container, { children: [_jsx(HiddenInput, { onChange: handleImageUpload, type: \"file\", accept: \"image/*\" }), _jsxs(\"svg\", { width: \"36\", height: \"36\", viewBox: \"0 0 37 34\", fill: \"#DB2B19\", xmlns: \"http://www.w3.org/2000/svg\", children: [_jsx(\"path\", { fillRule: \"evenodd\", clipRule: \"evenodd\", d: \"M9.82792 6.14124C10.7187 5.25044 11.9269 4.75 13.1867 4.75H19C19.8745 4.75 20.5833 5.45889 20.5833 6.33333C20.5833 7.20778 19.8745 7.91667 19 7.91667H13.1867C12.7668 7.91667 12.364 8.08349 12.0671 8.38041L10.7554 9.69209C9.86461 10.5829 8.65643 11.0833 7.39665 11.0833H4.75C3.87556 11.0833 3.16667 11.7922 3.16667 12.6667V28.5C3.16667 29.3745 3.87556 30.0833 4.75 30.0833H26.9167C27.7911 30.0833 28.5 29.3745 28.5 28.5V17.4167C28.5 16.5422 29.2089 15.8333 30.0833 15.8333C30.9578 15.8333 31.6667 16.5422 31.6667 17.4167V28.5C31.6667 31.1234 29.5401 33.25 26.9167 33.25H4.75C2.12665 33.25 0 31.1234 0 28.5V12.6667C0 10.0433 2.12665 7.91667 4.75 7.91667H7.39665C7.81658 7.91667 8.21931 7.74985 8.51624 7.45292L9.82792 6.14124Z\" }), _jsx(\"path\", { fillRule: \"evenodd\", clipRule: \"evenodd\", d: \"M7.9165 20.5834C7.9165 16.2112 11.4609 12.6667 15.8332 12.6667C20.2054 12.6667 23.7498 16.2112 23.7498 20.5834C23.7498 24.9556 20.2054 28.5001 15.8332 28.5001C11.4609 28.5001 7.9165 24.9556 7.9165 20.5834ZM15.8332 15.8334C13.2098 15.8334 11.0832 17.96 11.0832 20.5834C11.0832 23.2068 13.2098 25.3334 15.8332 25.3334C18.4566 25.3334 20.5832 23.2068 20.5832 20.5834C20.5832 17.96 18.4566 15.8334 15.8332 15.8334Z\" }), _jsx(\"path\", { fillRule: \"evenodd\", clipRule: \"evenodd\", d: \"M23.75 6.33333C23.75 5.45889 24.4589 4.75 25.3333 4.75H34.8333C35.7078 4.75 36.4167 5.45889 36.4167 6.33333C36.4167 7.20778 35.7078 7.91667 34.8333 7.91667H25.3333C24.4589 7.91667 23.75 7.20778 23.75 6.33333Z\" }), _jsx(\"path\", { fillRule: \"evenodd\", clipRule: \"evenodd\", d: \"M30.0833 0C30.9578 0 31.6667 0.70889 31.6667 1.58333V11.0833C31.6667 11.9578 30.9578 12.6667 30.0833 12.6667C29.2089 12.6667 28.5 11.9578 28.5 11.0833V1.58333C28.5 0.70889 29.2089 0 30.0833 0Z\" })] })] }));\n};\n//# sourceMappingURL=index.js.map"],"names":["useCallback","__awaiter","__generator","_jsxs","Container","_jsx","HiddenInput"],"mappings":";;;;;;;AAIU,IAAC,QAAQ,GAAG,UAAU,EAAE,EAAE;AACpC,IAAI,IAAI,aAAa,GAAG,EAAE,CAAC,aAAa,CAAC;AACzC,IAAI,IAAI,iBAAiB,GAAGA,iBAAW,CAAC,UAAU,KAAK,EAAE;AACzD,QAAQ,IAAI,EAAE,EAAE,EAAE,CAAC;AACnB,QAAQ,IAAI,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;AAClI,YAAY,OAAO;AACnB,QAAQ,IAAI,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;AACtC,QAAQ,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AACpD,QAAQ,MAAM,CAAC,MAAM,GAAG,YAAY,EAAE,OAAOC,eAAS,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,YAAY;AAC3F,YAAY,IAAI,EAAE,CAAC;AACnB,YAAY,OAAOC,iBAAW,CAAC,IAAI,EAAE,UAAU,EAAE,EAAE;AACnD,gBAAgB,QAAQ,EAAE,CAAC,KAAK;AAChC,oBAAoB,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC,aAAa,aAAa,KAAK,IAAI,IAAI,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;AACvO,oBAAoB,KAAK,CAAC;AAC1B,wBAAwB,EAAE,CAAC,IAAI,EAAE,CAAC;AAClC,wBAAwB,OAAO,CAAC,CAAC,YAAY,CAAC;AAC9C,iBAAiB;AACjB,aAAa,CAAC,CAAC;AACf,SAAS,CAAC,CAAC,EAAE,CAAC;AACd,KAAK,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;AACxB,IAAI,IAAI,CAAC,aAAa;AACtB,QAAQ,OAAO,IAAI,CAAC;AACpB,IAAI,QAAQC,eAAK,CAACC,gBAAS,EAAE,EAAE,QAAQ,EAAE,CAACC,cAAI,CAACC,kBAAW,EAAE,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAAEH,eAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,4BAA4B,EAAE,QAAQ,EAAE,CAACE,cAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAAE,stBAAstB,EAAE,CAAC,EAAEA,cAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAAE,4ZAA4Z,EAAE,CAAC,EAAEA,cAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAAE,kNAAkN,EAAE,CAAC,EAAEA,cAAI,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAAE,kMAAkM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAClhE;;;;"}
|
|
@@ -1,9 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
import styled, { th } from '@xstyled/styled-components';
|
|
1
|
+
'use strict';
|
|
3
2
|
|
|
4
|
-
var
|
|
5
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var styled = require('@xstyled/styled-components');
|
|
5
|
+
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
+
|
|
10
|
+
var Container = styled__default.default.div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n position: relative;\n flex-shrink: 0;\n height: 85px !important;\n width: 85px !important;\n border-radius: ", ";\n border: ", ";\n border-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n margin-right: 15px;\n"], ["\n position: relative;\n flex-shrink: 0;\n height: 85px !important;\n width: 85px !important;\n border-radius: ", ";\n border: ", ";\n border-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n margin-right: 15px;\n"])), styled.th.radius('lg'), styled.th.border('mediumSlim'), styled.th.color('red1'));
|
|
11
|
+
var HiddenInput = styled__default.default.input(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n"], ["\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n cursor: pointer;\n"])));
|
|
6
12
|
var templateObject_1, templateObject_2;
|
|
7
13
|
|
|
8
|
-
|
|
14
|
+
exports.Container = Container;
|
|
15
|
+
exports.HiddenInput = HiddenInput;
|
|
9
16
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/AddPhoto/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: relative;\\n flex-shrink: 0;\\n height: 85px !important;\\n width: 85px !important;\\n border-radius: \", \";\\n border: \", \";\\n border-color: \", \";\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n cursor: pointer;\\n margin-right: 15px;\\n\"], [\"\\n position: relative;\\n flex-shrink: 0;\\n height: 85px !important;\\n width: 85px !important;\\n border-radius: \", \";\\n border: \", \";\\n border-color: \", \";\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n cursor: pointer;\\n margin-right: 15px;\\n\"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'));\nexport var HiddenInput = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n opacity: 0;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n cursor: pointer;\\n\"], [\"\\n opacity: 0;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n cursor: pointer;\\n\"])));\nvar templateObject_1, templateObject_2;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/AddPhoto/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: relative;\\n flex-shrink: 0;\\n height: 85px !important;\\n width: 85px !important;\\n border-radius: \", \";\\n border: \", \";\\n border-color: \", \";\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n cursor: pointer;\\n margin-right: 15px;\\n\"], [\"\\n position: relative;\\n flex-shrink: 0;\\n height: 85px !important;\\n width: 85px !important;\\n border-radius: \", \";\\n border: \", \";\\n border-color: \", \";\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n cursor: pointer;\\n margin-right: 15px;\\n\"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'));\nexport var HiddenInput = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n opacity: 0;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n cursor: pointer;\\n\"], [\"\\n opacity: 0;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n cursor: pointer;\\n\"])));\nvar templateObject_1, templateObject_2;\n//# sourceMappingURL=styles.js.map"],"names":["styled","__makeTemplateObject","th"],"mappings":";;;;;;;;;AAEU,IAAC,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,sHAAsH,EAAE,eAAe,EAAE,qBAAqB,EAAE,sHAAsH,CAAC,EAAE,CAAC,sHAAsH,EAAE,eAAe,EAAE,qBAAqB,EAAE,sHAAsH,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAEA,SAAE,CAAC,MAAM,CAAC,YAAY,CAAC,EAAEA,SAAE,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;AACvsB,IAAC,WAAW,GAAGF,uBAAM,CAAC,KAAK,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,sHAAsH,CAAC,EAAE,CAAC,sHAAsH,CAAC,CAAC,CAAC,EAAE;AACzV,IAAI,gBAAgB,EAAE,gBAAgB;;;;;"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var Icon = require('../../../../Elements/Icon/Icon.js');
|
|
5
|
+
require('tslib');
|
|
6
|
+
var styles = require('./styles.js');
|
|
5
7
|
|
|
6
8
|
var CloseButton = function (_a) {
|
|
7
9
|
var onImageRemove = _a.onImageRemove;
|
|
8
|
-
return (jsx(Container, { onClick: onImageRemove, children: jsx(Icon, { icon: "close", size: "22px", fill: "red1" }) }));
|
|
10
|
+
return (jsxRuntime.jsx(styles.Container, { onClick: onImageRemove, children: jsxRuntime.jsx(Icon.default, { icon: "close", size: "22px", fill: "red1" }) }));
|
|
9
11
|
};
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
exports.CloseButton = CloseButton;
|
|
12
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/CloseButton/index.tsx"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Icon } from '../../../../Elements/Icon';\nimport { Container } from './styles';\nexport var CloseButton = function (_a) {\n var onImageRemove = _a.onImageRemove;\n return (_jsx(Container, { onClick: onImageRemove, children: _jsx(Icon, { icon: \"close\", size: \"22px\", fill: \"red1\" }) }));\n};\n//# sourceMappingURL=index.js.map"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/CloseButton/index.tsx"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Icon } from '../../../../Elements/Icon';\nimport { Container } from './styles';\nexport var CloseButton = function (_a) {\n var onImageRemove = _a.onImageRemove;\n return (_jsx(Container, { onClick: onImageRemove, children: _jsx(Icon, { icon: \"close\", size: \"22px\", fill: \"red1\" }) }));\n};\n//# sourceMappingURL=index.js.map"],"names":["_jsx","Container","Icon"],"mappings":";;;;;;;AAGU,IAAC,WAAW,GAAG,UAAU,EAAE,EAAE;AACvC,IAAI,IAAI,aAAa,GAAG,EAAE,CAAC,aAAa,CAAC;AACzC,IAAI,QAAQA,cAAI,CAACC,gBAAS,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAED,cAAI,CAACE,YAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE;AAC9H;;;;"}
|
|
@@ -1,8 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
import styled, { th } from '@xstyled/styled-components';
|
|
1
|
+
'use strict';
|
|
3
2
|
|
|
4
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var styled = require('@xstyled/styled-components');
|
|
5
|
+
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
+
|
|
10
|
+
var Container = styled__default.default.div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n width: 30px;\n height: 30px;\n background-color: ", ";\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n width: 30px;\n height: 30px;\n background-color: ", ";\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n"])), styled.th.color('red20'));
|
|
5
11
|
var templateObject_1;
|
|
6
12
|
|
|
7
|
-
|
|
13
|
+
exports.Container = Container;
|
|
8
14
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/CloseButton/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: absolute;\\n top: 0;\\n right: 0;\\n width: 30px;\\n height: 30px;\\n background-color: \", \";\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n\"], [\"\\n position: absolute;\\n top: 0;\\n right: 0;\\n width: 30px;\\n height: 30px;\\n background-color: \", \";\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n\"])), th.color('red20'));\nvar templateObject_1;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/CloseButton/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: absolute;\\n top: 0;\\n right: 0;\\n width: 30px;\\n height: 30px;\\n background-color: \", \";\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n\"], [\"\\n position: absolute;\\n top: 0;\\n right: 0;\\n width: 30px;\\n height: 30px;\\n background-color: \", \";\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n cursor: pointer;\\n\"])), th.color('red20'));\nvar templateObject_1;\n//# sourceMappingURL=styles.js.map"],"names":["styled","__makeTemplateObject","th"],"mappings":";;;;;;;;;AAEU,IAAC,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,wGAAwG,EAAE,sHAAsH,CAAC,EAAE,CAAC,wGAAwG,EAAE,sHAAsH,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;AAC5jB,IAAI,gBAAgB;;;;"}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var styles = require('./styles.js');
|
|
5
|
+
var index$1 = require('../ImageTag/index.js');
|
|
6
|
+
var index = require('../CloseButton/index.js');
|
|
7
|
+
var styled = require('@xstyled/styled-components');
|
|
6
8
|
|
|
7
9
|
var ImageElement = function (_a) {
|
|
8
10
|
var label = _a.label, onImageRemove = _a.onImageRemove, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;
|
|
9
11
|
if (!imageUrl)
|
|
10
12
|
return null;
|
|
11
|
-
return (jsxs(x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", children: [jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && jsx(CloseButton, { onImageRemove: onImageRemove }), jsx(ImageTag, { label: label })] }));
|
|
13
|
+
return (jsxRuntime.jsxs(styled.x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", children: [jsxRuntime.jsx(styles.Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && jsxRuntime.jsx(index.CloseButton, { onImageRemove: onImageRemove }), jsxRuntime.jsx(index$1.ImageTag, { label: label })] }));
|
|
12
14
|
};
|
|
13
15
|
|
|
14
|
-
|
|
16
|
+
exports.ImageElement = ImageElement;
|
|
15
17
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/ImageElement/index.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Image } from './styles';\nimport { ImageTag } from '../ImageTag';\nimport { CloseButton } from '../CloseButton';\nimport { x } from '@xstyled/styled-components';\nexport var ImageElement = function (_a) {\n var label = _a.label, onImageRemove = _a.onImageRemove, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;\n if (!imageUrl)\n return null;\n return (_jsxs(x.div, { position: \"relative\", pr: \"15px\", pt: \"15px\", w: \"100px\", children: [_jsx(Image, { src: imageUrl, alt: \"\", width: \"85px\", height: \"85px\", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove }), _jsx(ImageTag, { label: label })] }));\n};\n//# sourceMappingURL=index.js.map"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/ImageElement/index.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Image } from './styles';\nimport { ImageTag } from '../ImageTag';\nimport { CloseButton } from '../CloseButton';\nimport { x } from '@xstyled/styled-components';\nexport var ImageElement = function (_a) {\n var label = _a.label, onImageRemove = _a.onImageRemove, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;\n if (!imageUrl)\n return null;\n return (_jsxs(x.div, { position: \"relative\", pr: \"15px\", pt: \"15px\", w: \"100px\", children: [_jsx(Image, { src: imageUrl, alt: \"\", width: \"85px\", height: \"85px\", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove }), _jsx(ImageTag, { label: label })] }));\n};\n//# sourceMappingURL=index.js.map"],"names":["_jsxs","x","_jsx","Image","CloseButton","ImageTag"],"mappings":";;;;;;;;AAKU,IAAC,YAAY,GAAG,UAAU,EAAE,EAAE;AACxC,IAAI,IAAI,KAAK,GAAG,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,EAAE,CAAC,aAAa,EAAE,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,QAAQ,GAAG,EAAE,CAAC,QAAQ,CAAC;AACvH,IAAI,IAAI,CAAC,QAAQ;AACjB,QAAQ,OAAO,IAAI,CAAC;AACpB,IAAI,QAAQA,eAAK,CAACC,QAAC,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAACC,cAAI,CAACC,YAAK,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,EAAE,aAAa,IAAID,cAAI,CAACE,iBAAW,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,EAAEF,cAAI,CAACG,gBAAQ,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE;AAC7S;;;;"}
|
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
import styled, { th } from '@xstyled/styled-components';
|
|
1
|
+
'use strict';
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var styled = require('@xstyled/styled-components');
|
|
5
|
+
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
+
|
|
10
|
+
styled__default.default.div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject([""], [""])));
|
|
11
|
+
var Image = styled__default.default.img(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n border-radius: ", ";\n"], ["\n border-radius: ", ";\n"])), styled.th.radius('lg'));
|
|
6
12
|
var templateObject_1, templateObject_2;
|
|
7
13
|
|
|
8
|
-
|
|
14
|
+
exports.Image = Image;
|
|
9
15
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/ImageElement/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\"], [\"\"])));\nexport var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n border-radius: \", \";\\n\"], [\"\\n border-radius: \", \";\\n\"])), th.radius('lg'));\nvar templateObject_1, templateObject_2;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/ImageElement/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\"], [\"\"])));\nexport var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n border-radius: \", \";\\n\"], [\"\\n border-radius: \", \";\\n\"])), th.radius('lg'));\nvar templateObject_1, templateObject_2;\n//# sourceMappingURL=styles.js.map"],"names":["styled","__makeTemplateObject","th"],"mappings":";;;;;;;;;AAEuBA,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;AACnG,IAAC,KAAK,GAAGD,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC,CAAC,EAAEC,SAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;AAC9K,IAAI,gBAAgB,EAAE,gBAAgB;;;;"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var Tag = require('../../../../Elements/Tag/Tag.js');
|
|
5
|
+
var styles = require('./styles.js');
|
|
4
6
|
|
|
5
7
|
var ImageTag = function (_a) {
|
|
6
8
|
var label = _a.label;
|
|
7
9
|
if (!label)
|
|
8
10
|
return null;
|
|
9
|
-
return (jsx(Container, { children: jsx(Tag, { size: "small", color: "darkGreen", textColor: "white", children: jsx("b", { children: label }) }) }));
|
|
11
|
+
return (jsxRuntime.jsx(styles.Container, { children: jsxRuntime.jsx(Tag.Tag, { size: "small", color: "darkGreen", textColor: "white", children: jsxRuntime.jsx("b", { children: label }) }) }));
|
|
10
12
|
};
|
|
11
13
|
|
|
12
|
-
|
|
14
|
+
exports.ImageTag = ImageTag;
|
|
13
15
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/ImageTag/index.tsx"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Tag } from '../../../../Elements/Tag';\nimport { Container } from './styles';\nexport var ImageTag = function (_a) {\n var label = _a.label;\n if (!label)\n return null;\n return (_jsx(Container, { children: _jsx(Tag, { size: \"small\", color: \"darkGreen\", textColor: \"white\", children: _jsx(\"b\", { children: label }) }) }));\n};\n//# sourceMappingURL=index.js.map"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/ImageTag/index.tsx"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Tag } from '../../../../Elements/Tag';\nimport { Container } from './styles';\nexport var ImageTag = function (_a) {\n var label = _a.label;\n if (!label)\n return null;\n return (_jsx(Container, { children: _jsx(Tag, { size: \"small\", color: \"darkGreen\", textColor: \"white\", children: _jsx(\"b\", { children: label }) }) }));\n};\n//# sourceMappingURL=index.js.map"],"names":["_jsx","Container","Tag"],"mappings":";;;;;;AAGU,IAAC,QAAQ,GAAG,UAAU,EAAE,EAAE;AACpC,IAAI,IAAI,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC;AACzB,IAAI,IAAI,CAAC,KAAK;AACd,QAAQ,OAAO,IAAI,CAAC;AACpB,IAAI,QAAQA,cAAI,CAACC,gBAAS,EAAE,EAAE,QAAQ,EAAED,cAAI,CAACE,OAAG,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAEF,cAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC3J;;;;"}
|
|
@@ -1,8 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
import styled from '@xstyled/styled-components';
|
|
1
|
+
'use strict';
|
|
3
2
|
|
|
4
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var styled = require('@xstyled/styled-components');
|
|
5
|
+
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
+
|
|
10
|
+
var Container = styled__default.default.div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n position: absolute;\n bottom: 2px;\n left: 2px;\n"], ["\n position: absolute;\n bottom: 2px;\n left: 2px;\n"])));
|
|
5
11
|
var templateObject_1;
|
|
6
12
|
|
|
7
|
-
|
|
13
|
+
exports.Container = Container;
|
|
8
14
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/ImageTag/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: absolute;\\n bottom: 2px;\\n left: 2px;\\n\"], [\"\\n position: absolute;\\n bottom: 2px;\\n left: 2px;\\n\"])));\nvar templateObject_1;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../../../packages/ui/Blocks/ImageList/components/ImageTag/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: absolute;\\n bottom: 2px;\\n left: 2px;\\n\"], [\"\\n position: absolute;\\n bottom: 2px;\\n left: 2px;\\n\"])));\nvar templateObject_1;\n//# sourceMappingURL=styles.js.map"],"names":["styled","__makeTemplateObject"],"mappings":";;;;;;;;;AAEU,IAAC,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,yDAAyD,CAAC,EAAE,CAAC,yDAAyD,CAAC,CAAC,CAAC,EAAE;AAC3N,IAAI,gBAAgB;;;;"}
|