@chayns-components/core 5.0.0-beta.414 → 5.0.0-beta.415
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/lib/api/signature/delete.js +2 -2
- package/lib/api/signature/delete.js.map +1 -1
- package/lib/api/signature/get.js +2 -2
- package/lib/api/signature/get.js.map +1 -1
- package/lib/api/signature/put.js +2 -2
- package/lib/api/signature/put.js.map +1 -1
- package/lib/components/accordion/accordion-head/AccordionHead.js +3 -3
- package/lib/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/components/amount-control/AmountControl.js +4 -4
- package/lib/components/amount-control/AmountControl.js.map +1 -1
- package/lib/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/components/color-scheme-provider/ColorSchemeProvider.js +1 -1
- package/lib/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/components/combobox/ComboBox.js.map +1 -1
- package/lib/components/context-menu/ContextMenu.d.ts +1 -1
- package/lib/components/context-menu/ContextMenu.js +7 -7
- package/lib/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.d.ts +1 -1
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.js +5 -5
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +1 -1
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js +5 -5
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
- package/lib/components/date-info/DateInfo.js +7 -8
- package/lib/components/date-info/DateInfo.js.map +1 -1
- package/lib/components/file-input/FileInput.js.map +1 -1
- package/lib/components/filter-buttons/FilterButtons.d.ts +1 -1
- package/lib/components/filter-buttons/FilterButtons.js +4 -4
- package/lib/components/filter-buttons/FilterButtons.js.map +1 -1
- package/lib/components/filter-buttons/filter-button/FilterButton.d.ts +1 -1
- package/lib/components/filter-buttons/filter-button/FilterButton.js +3 -3
- package/lib/components/filter-buttons/filter-button/FilterButton.js.map +1 -1
- package/lib/components/filter-buttons/filter-button/FilterButton.styles.d.ts +1 -1
- package/lib/components/filter-buttons/filter-button/FilterButton.styles.js +4 -4
- package/lib/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/components/icon/Icon.js +3 -3
- package/lib/components/icon/Icon.js.map +1 -1
- package/lib/components/input/Input.styles.js +1 -0
- package/lib/components/input/Input.styles.js.map +1 -1
- package/lib/components/list/list-item/list-item-head/ListItemHead.js.map +1 -1
- package/lib/components/mention-finder/MentionFinder.d.ts +1 -1
- package/lib/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/components/mention-finder/MentionFinder.styles.js +3 -3
- package/lib/components/mention-finder/MentionFinder.styles.js.map +1 -1
- package/lib/components/number-input/NumberInput.js +8 -8
- package/lib/components/number-input/NumberInput.js.map +1 -1
- package/lib/components/popup/Popup.d.ts +1 -1
- package/lib/components/popup/Popup.js +6 -6
- package/lib/components/popup/Popup.js.map +1 -1
- package/lib/components/popup/popup-content/PopupContent.d.ts +1 -1
- package/lib/components/popup/popup-content/PopupContent.js +4 -4
- package/lib/components/popup/popup-content/PopupContent.js.map +1 -1
- package/lib/components/popup/popup-content/PopupContent.styles.d.ts +1 -1
- package/lib/components/popup/popup-content/PopupContent.styles.js +5 -5
- package/lib/components/popup/popup-content/PopupContent.styles.js.map +1 -1
- package/lib/components/radio-button/RadioButton.d.ts +1 -1
- package/lib/components/radio-button/RadioButton.js.map +1 -1
- package/lib/components/search-box/SearchBox.d.ts +1 -1
- package/lib/components/search-box/SearchBox.js +3 -3
- package/lib/components/search-box/SearchBox.js.map +1 -1
- package/lib/components/search-box/search-box-item/SearchBoxItem.d.ts +1 -1
- package/lib/components/search-box/search-box-item/SearchBoxItem.js.map +1 -1
- package/lib/components/select-button/SelectButton.d.ts +1 -1
- package/lib/components/select-button/SelectButton.js.map +1 -1
- package/lib/components/sharing-bar/SharingBar.d.ts +1 -1
- package/lib/components/sharing-bar/SharingBar.js.map +1 -1
- package/lib/components/signature/Signature.js.map +1 -1
- package/lib/components/tooltip/Tooltip.d.ts +1 -1
- package/lib/components/tooltip/Tooltip.js +1 -1
- package/lib/components/tooltip/Tooltip.js.map +1 -1
- package/lib/{components/date-info/constants/language.js → constants/dateInfo.js} +1 -1
- package/lib/constants/dateInfo.js.map +1 -0
- package/lib/{components/mention-finder/constants/alignment.js → constants/mentionFinder.js} +1 -1
- package/lib/constants/mentionFinder.js.map +1 -0
- package/lib/{components/number-input/constants/number.js → constants/numberInput.js} +1 -1
- package/lib/constants/numberInput.js.map +1 -0
- package/lib/constants/{serverUrls.js → signature.js} +1 -1
- package/lib/constants/signature.js.map +1 -0
- package/lib/index.d.ts +6 -5
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib/{components/context-menu/constants/alignment.js → types/contextMenu.js} +1 -1
- package/lib/types/contextMenu.js.map +1 -0
- package/lib/{components/filter-buttons/types.js → types/filterButtons.js} +1 -1
- package/lib/types/filterButtons.js.map +1 -0
- package/lib/{components/popup/types.js → types/popup.js} +1 -1
- package/lib/types/popup.js.map +1 -0
- package/lib/types/radioButton.js +2 -0
- package/lib/types/radioButton.js.map +1 -0
- package/lib/types/searchBox.js +2 -0
- package/lib/types/searchBox.js.map +1 -0
- package/lib/types/selectButton.js +2 -0
- package/lib/types/selectButton.js.map +1 -0
- package/lib/types/tooltip.js +2 -0
- package/lib/types/tooltip.js.map +1 -0
- package/lib/{components/accordion/utils.js → utils/accordion.js} +1 -1
- package/lib/utils/accordion.js.map +1 -0
- package/lib/{components/amount-control/utils.js → utils/amountControl.js} +1 -1
- package/lib/utils/amountControl.js.map +1 -0
- package/lib/{components/date-info/utils/format.d.ts → utils/dateInfo.d.ts} +7 -1
- package/lib/{components/date-info/utils/format.js → utils/dateInfo.js} +65 -16
- package/lib/utils/dateInfo.js.map +1 -0
- package/lib/utils/font.js.map +1 -0
- package/lib/{components/icon/utils.js → utils/icon.js} +1 -1
- package/lib/utils/icon.js.map +1 -0
- package/lib/{components/number-input/utils/number.js → utils/numberInput.js} +6 -6
- package/lib/utils/numberInput.js.map +1 -0
- package/lib/{components/search-box/utils.d.ts → utils/searchBox.d.ts} +1 -1
- package/lib/{components/search-box/utils.js → utils/searchBox.js} +1 -1
- package/lib/{components/search-box/utils.js.map → utils/searchBox.js.map} +1 -1
- package/package.json +2 -2
- package/lib/components/accordion/utils.js.map +0 -1
- package/lib/components/amount-control/utils.js.map +0 -1
- package/lib/components/color-scheme-provider/font.js.map +0 -1
- package/lib/components/context-menu/constants/alignment.js.map +0 -1
- package/lib/components/date-info/constants/language.js.map +0 -1
- package/lib/components/date-info/utils/format.js.map +0 -1
- package/lib/components/date-info/utils/language.d.ts +0 -7
- package/lib/components/date-info/utils/language.js +0 -57
- package/lib/components/date-info/utils/language.js.map +0 -1
- package/lib/components/filter-buttons/types.js.map +0 -1
- package/lib/components/icon/utils.js.map +0 -1
- package/lib/components/mention-finder/constants/alignment.js.map +0 -1
- package/lib/components/number-input/constants/number.js.map +0 -1
- package/lib/components/number-input/utils/number.js.map +0 -1
- package/lib/components/popup/types.js.map +0 -1
- package/lib/components/radio-button/types.js +0 -2
- package/lib/components/radio-button/types.js.map +0 -1
- package/lib/components/search-box/types.js +0 -2
- package/lib/components/search-box/types.js.map +0 -1
- package/lib/components/select-button/types.js +0 -2
- package/lib/components/select-button/types.js.map +0 -1
- package/lib/components/tooltip/interface.js +0 -2
- package/lib/components/tooltip/interface.js.map +0 -1
- package/lib/constants/serverUrls.js.map +0 -1
- /package/lib/{components/date-info/constants/language.d.ts → constants/dateInfo.d.ts} +0 -0
- /package/lib/{components/mention-finder/constants/alignment.d.ts → constants/mentionFinder.d.ts} +0 -0
- /package/lib/{components/number-input/constants/number.d.ts → constants/numberInput.d.ts} +0 -0
- /package/lib/constants/{serverUrls.d.ts → signature.d.ts} +0 -0
- /package/lib/{components/context-menu/constants/alignment.d.ts → types/contextMenu.d.ts} +0 -0
- /package/lib/{components/filter-buttons/types.d.ts → types/filterButtons.d.ts} +0 -0
- /package/lib/{components/popup/types.d.ts → types/popup.d.ts} +0 -0
- /package/lib/{components/radio-button/types.d.ts → types/radioButton.d.ts} +0 -0
- /package/lib/{components/search-box/types.d.ts → types/searchBox.d.ts} +0 -0
- /package/lib/{components/select-button/types.d.ts → types/selectButton.d.ts} +0 -0
- /package/lib/{components/tooltip/interface.d.ts → types/tooltip.d.ts} +0 -0
- /package/lib/{components/accordion/utils.d.ts → utils/accordion.d.ts} +0 -0
- /package/lib/{components/amount-control/utils.d.ts → utils/amountControl.d.ts} +0 -0
- /package/lib/{components/color-scheme-provider → utils}/font.d.ts +0 -0
- /package/lib/{components/color-scheme-provider → utils}/font.js +0 -0
- /package/lib/{components/icon/utils.d.ts → utils/icon.d.ts} +0 -0
- /package/lib/{components/number-input/utils/number.d.ts → utils/numberInput.d.ts} +0 -0
|
@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var
|
|
9
|
-
var _alignment = require("../constants/alignment");
|
|
8
|
+
var _contextMenu = require("../../../types/contextMenu");
|
|
10
9
|
var _ContextMenuContent = require("./ContextMenuContent.styles");
|
|
10
|
+
var _Icon = _interopRequireDefault(require("../../icon/Icon"));
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
13
13
|
let {
|
|
@@ -15,9 +15,9 @@ const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
|
|
|
15
15
|
coordinates,
|
|
16
16
|
items
|
|
17
17
|
} = _ref;
|
|
18
|
-
const isBottomLeftAlignment = alignment ===
|
|
19
|
-
const isTopLeftAlignment = alignment ===
|
|
20
|
-
const isTopRightAlignment = alignment ===
|
|
18
|
+
const isBottomLeftAlignment = alignment === _contextMenu.ContextMenuAlignment.BottomLeft;
|
|
19
|
+
const isTopLeftAlignment = alignment === _contextMenu.ContextMenuAlignment.TopLeft;
|
|
20
|
+
const isTopRightAlignment = alignment === _contextMenu.ContextMenuAlignment.TopRight;
|
|
21
21
|
const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;
|
|
22
22
|
const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;
|
|
23
23
|
const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuContent.js","names":["_react","_interopRequireDefault","require","
|
|
1
|
+
{"version":3,"file":"ContextMenuContent.js","names":["_react","_interopRequireDefault","require","_contextMenu","_ContextMenuContent","_Icon","obj","__esModule","default","ContextMenuContent","React","forwardRef","_ref","ref","alignment","coordinates","items","isBottomLeftAlignment","ContextMenuAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionContextMenuContent","animate","opacity","y","exit","initial","position","style","left","x","top","transition","type","transformTemplate","_ref2","map","_ref3","icons","key","onClick","text","StyledContextMenuContentItem","event","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText","displayName","_default","exports"],"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';\nimport {\n StyledContextMenuContentItem,\n StyledContextMenuContentItemIconWrapper,\n StyledContextMenuContentItemText,\n StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\nimport Icon from '../../icon/Icon';\n\ntype ContextMenuContentProps = {\n alignment: ContextMenuAlignment;\n coordinates: ContextMenuCoordinates;\n items: ContextMenuItem[];\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n ({ alignment, coordinates, items }, ref) => {\n const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n\n const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n return (\n <StyledMotionContextMenuContent\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n position={alignment}\n ref={ref}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ type: 'tween' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n {items.map(({ icons, key, onClick, text }) => (\n <StyledContextMenuContentItem\n key={key}\n onClick={(event) => {\n void onClick(event);\n }}\n >\n <StyledContextMenuContentItemIconWrapper>\n <Icon icons={icons} />\n </StyledContextMenuContentItemIconWrapper>\n <StyledContextMenuContentItemText>{text}</StyledContextMenuContentItemText>\n </StyledContextMenuContentItem>\n ))}\n </StyledMotionContextMenuContent>\n );\n },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
/// <reference types="react" />
|
|
3
3
|
import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
|
|
4
|
-
import { ContextMenuAlignment } from '
|
|
4
|
+
import { ContextMenuAlignment } from '../../../types/contextMenu';
|
|
5
5
|
type StyledMotionContextMenuContentProps = WithTheme<{
|
|
6
6
|
position: ContextMenuAlignment;
|
|
7
7
|
}>;
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.StyledMotionContextMenuContent = exports.StyledContextMenuContentItemText = exports.StyledContextMenuContentItemIconWrapper = exports.StyledContextMenuContentItem = void 0;
|
|
7
7
|
var _framerMotion = require("framer-motion");
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
-
var
|
|
9
|
+
var _contextMenu = require("../../../types/contextMenu");
|
|
10
10
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
11
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
12
|
const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
|
|
@@ -44,25 +44,25 @@ const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent =
|
|
|
44
44
|
position
|
|
45
45
|
} = _ref3;
|
|
46
46
|
switch (position) {
|
|
47
|
-
case
|
|
47
|
+
case _contextMenu.ContextMenuAlignment.TopLeft:
|
|
48
48
|
return (0, _styledComponents.css)`
|
|
49
49
|
bottom: -7px;
|
|
50
50
|
right: 13px;
|
|
51
51
|
transform: rotate(45deg);
|
|
52
52
|
`;
|
|
53
|
-
case
|
|
53
|
+
case _contextMenu.ContextMenuAlignment.BottomLeft:
|
|
54
54
|
return (0, _styledComponents.css)`
|
|
55
55
|
top: -7px;
|
|
56
56
|
right: 13px;
|
|
57
57
|
transform: rotate(225deg);
|
|
58
58
|
`;
|
|
59
|
-
case
|
|
59
|
+
case _contextMenu.ContextMenuAlignment.TopRight:
|
|
60
60
|
return (0, _styledComponents.css)`
|
|
61
61
|
transform: rotate(45deg);
|
|
62
62
|
bottom: -7px;
|
|
63
63
|
left: 13px;
|
|
64
64
|
`;
|
|
65
|
-
case
|
|
65
|
+
case _contextMenu.ContextMenuAlignment.BottomRight:
|
|
66
66
|
return (0, _styledComponents.css)`
|
|
67
67
|
transform: rotate(225deg);
|
|
68
68
|
top: -7px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuContent.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","
|
|
1
|
+
{"version":3,"file":"ContextMenuContent.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_contextMenu","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMotionContextMenuContent","exports","styled","motion","div","_ref","theme","_ref2","text","_ref3","position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n position: absolute;\n z-index: 0;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ position }) => {\n switch (position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 13px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 13px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 13px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 13px;\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n cursor: pointer;\n display: flex;\n padding: 5px 8px 5px 5px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n flex: 0 0 auto;\n margin: 0 8px 0 3px;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 0 auto;\n white-space: nowrap;\n`;\n"],"mappings":"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"}
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _dateFns = require("date-fns");
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var
|
|
10
|
-
var _language = require("./utils/language");
|
|
9
|
+
var _dateInfo = require("../../utils/dateInfo");
|
|
11
10
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
11
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
12
|
const DateInfo = _ref => {
|
|
@@ -23,13 +22,13 @@ const DateInfo = _ref => {
|
|
|
23
22
|
} = _ref;
|
|
24
23
|
const [formattedDate, setFormattedDate] = (0, _react.useState)(new Date(date));
|
|
25
24
|
const [formattedDateString, setFormattedDateString] = (0, _react.useState)('');
|
|
26
|
-
const [language] = (0, _react.useState)((0,
|
|
25
|
+
const [language] = (0, _react.useState)((0, _dateInfo.getLanguage)());
|
|
27
26
|
(0, _react.useEffect)(() => {
|
|
28
27
|
// This useEffect is used for normal date formation
|
|
29
28
|
if (shouldShowDateToNowDifference) {
|
|
30
29
|
return;
|
|
31
30
|
}
|
|
32
|
-
let newFormattedDateString = (0,
|
|
31
|
+
let newFormattedDateString = (0, _dateInfo.getFormattedDayOfWeek)({
|
|
33
32
|
shouldShowDayOfWeek,
|
|
34
33
|
shouldShowRelativeDayOfWeek,
|
|
35
34
|
shouldUseShortText,
|
|
@@ -37,17 +36,17 @@ const DateInfo = _ref => {
|
|
|
37
36
|
language
|
|
38
37
|
});
|
|
39
38
|
let formatString = 'dd. ';
|
|
40
|
-
formatString += `${(0,
|
|
39
|
+
formatString += `${(0, _dateInfo.getMonthFormat)({
|
|
41
40
|
shouldUseShortText
|
|
42
41
|
})}`;
|
|
43
|
-
formatString += `${(0,
|
|
42
|
+
formatString += `${(0, _dateInfo.getYearFormat)({
|
|
44
43
|
date: formattedDate,
|
|
45
44
|
shouldShowThisYear
|
|
46
45
|
})}`;
|
|
47
46
|
newFormattedDateString += (0, _dateFns.format)(formattedDate, formatString, {
|
|
48
47
|
locale: language
|
|
49
48
|
});
|
|
50
|
-
newFormattedDateString += (0,
|
|
49
|
+
newFormattedDateString += (0, _dateInfo.getFormattedTime)({
|
|
51
50
|
date: formattedDate,
|
|
52
51
|
shouldShowTime,
|
|
53
52
|
language
|
|
@@ -94,7 +93,7 @@ const DateInfo = _ref => {
|
|
|
94
93
|
(0, _react.useEffect)(() => {
|
|
95
94
|
// This useEffect is for showing the difference of the date to now
|
|
96
95
|
if (shouldShowDateToNowDifference) {
|
|
97
|
-
setFormattedDateString((0,
|
|
96
|
+
setFormattedDateString((0, _dateInfo.getTimeTillNow)({
|
|
98
97
|
date: formattedDate,
|
|
99
98
|
currentDate,
|
|
100
99
|
language
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInfo.js","names":["_dateFns","require","_react","_interopRequireWildcard","_format","_language","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","DateInfo","_ref","date","preText","shouldShowThisYear","shouldShowTime","shouldShowRelativeDayOfWeek","shouldUseShortText","shouldShowDayOfWeek","shouldShowDateToNowDifference","formattedDate","setFormattedDate","useState","Date","formattedDateString","setFormattedDateString","language","getLanguage","useEffect","newFormattedDateString","getFormattedDayOfWeek","formatString","getMonthFormat","getYearFormat","format","locale","getFormattedTime","currentDate","setCurrentDate","timeoutTime","getSeconds","timeDiffInMs","getTime","isPast","Math","max","timeout","setTimeout","clearTimeout","getTimeTillNow","useMemo","createElement","trim","displayName","_default","exports"],"sources":["../../../src/components/date-info/DateInfo.tsx"],"sourcesContent":["import { format, isPast } from 'date-fns';\nimport React, { FC, useEffect, useMemo, useState } from 'react';\nimport {\n getFormattedDayOfWeek,\n getFormattedTime,\n getMonthFormat,\n getTimeTillNow,\n getYearFormat,\n} from './utils/format';\nimport { getLanguage } from './utils/language';\n\nexport type DateInfoProps = {\n /**\n * The date, that should be displayed\n */\n date: Date | string;\n /**\n * Additional text for \"shouldShowDateToNowDifference\" prop. Writes a text before the calculated time\n */\n preText?: string;\n /**\n * Adds the current year to the display\n */\n shouldShowThisYear?: boolean;\n /**\n * Adds the time to the display.\n */\n shouldShowTime?: boolean;\n /**\n * Whether the relative day of week to today should be shown (today, yesterday or tomorrow).\n */\n shouldShowRelativeDayOfWeek?: boolean;\n /**\n * Shortens the day and month text to maximum three digits\n */\n shouldUseShortText?: boolean;\n /**\n * Adds the day of week to the display\n */\n shouldShowDayOfWeek?: boolean;\n /**\n * Shows the difference from the date to now. The component handles updates itself.\n */\n shouldShowDateToNowDifference?: boolean;\n};\n\nconst DateInfo: FC<DateInfoProps> = ({\n date,\n preText = '',\n shouldShowThisYear,\n shouldShowTime,\n shouldShowRelativeDayOfWeek,\n shouldUseShortText,\n shouldShowDayOfWeek,\n shouldShowDateToNowDifference,\n}) => {\n const [formattedDate, setFormattedDate] = useState(new Date(date));\n const [formattedDateString, setFormattedDateString] = useState<string>('');\n const [language] = useState(getLanguage());\n\n useEffect(() => {\n // This useEffect is used for normal date formation\n if (shouldShowDateToNowDifference) {\n return;\n }\n\n let newFormattedDateString = getFormattedDayOfWeek({\n shouldShowDayOfWeek,\n shouldShowRelativeDayOfWeek,\n shouldUseShortText,\n date: formattedDate,\n language,\n });\n\n let formatString = 'dd. ';\n\n formatString += `${getMonthFormat({ shouldUseShortText })}`;\n\n formatString += `${getYearFormat({\n date: formattedDate,\n shouldShowThisYear,\n })}`;\n\n newFormattedDateString += format(formattedDate, formatString, { locale: language });\n\n newFormattedDateString += getFormattedTime({\n date: formattedDate,\n shouldShowTime,\n language,\n });\n\n setFormattedDateString(newFormattedDateString);\n }, [\n date,\n formattedDate,\n language,\n shouldShowDateToNowDifference,\n shouldShowDayOfWeek,\n shouldShowRelativeDayOfWeek,\n shouldShowThisYear,\n shouldShowTime,\n shouldUseShortText,\n ]);\n\n // Calculate remaining time till next minute to update time according to time left\n const [currentDate, setCurrentDate] = useState(new Date());\n\n useEffect(() => {\n // This useEffect is for calculating the current date for shouldShowDateToNowDifference option\n if (!shouldShowDateToNowDifference) {\n return () => {};\n }\n\n let timeoutTime = formattedDate.getSeconds() - new Date().getSeconds();\n\n // If the seconds of date are after seconds of current time, the timeoutTime has to be calculated differently\n if (timeoutTime < 0) {\n timeoutTime = 60 - new Date().getSeconds() + formattedDate.getSeconds();\n }\n\n // initialized with remaining time\n let timeDiffInMs = formattedDate.getTime() - currentDate.getTime();\n\n // set to elapsed time\n if (isPast(formattedDate)) {\n timeDiffInMs = currentDate.getTime() - formattedDate.getTime();\n }\n\n // time difference is less than a minute, time should be updated every second\n if (timeDiffInMs < 60000) {\n timeoutTime = 1;\n }\n\n // Set timeoutTime to at least 1000ms\n timeoutTime = Math.max(timeoutTime * 1000, 1000);\n\n const timeout = setTimeout(() => {\n setCurrentDate(new Date());\n }, timeoutTime);\n\n return () => {\n clearTimeout(timeout);\n };\n }, [currentDate, date, formattedDate, shouldShowDateToNowDifference]);\n\n useEffect(() => {\n // This useEffect is for showing the difference of the date to now\n if (shouldShowDateToNowDifference) {\n setFormattedDateString(getTimeTillNow({ date: formattedDate, currentDate, language }));\n }\n }, [currentDate, date, formattedDate, language, shouldShowDateToNowDifference]);\n\n useEffect(() => {\n setFormattedDate(new Date(date));\n }, [date]);\n\n return useMemo(\n () => (\n <span>\n {preText.trim()} {formattedDateString}\n </span>\n ),\n [formattedDateString, preText]\n );\n};\n\nDateInfo.displayName = 'DateInfo';\n\nexport default DateInfo;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DateInfo.js","names":["_dateFns","require","_react","_interopRequireWildcard","_dateInfo","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","DateInfo","_ref","date","preText","shouldShowThisYear","shouldShowTime","shouldShowRelativeDayOfWeek","shouldUseShortText","shouldShowDayOfWeek","shouldShowDateToNowDifference","formattedDate","setFormattedDate","useState","Date","formattedDateString","setFormattedDateString","language","getLanguage","useEffect","newFormattedDateString","getFormattedDayOfWeek","formatString","getMonthFormat","getYearFormat","format","locale","getFormattedTime","currentDate","setCurrentDate","timeoutTime","getSeconds","timeDiffInMs","getTime","isPast","Math","max","timeout","setTimeout","clearTimeout","getTimeTillNow","useMemo","createElement","trim","displayName","_default","exports"],"sources":["../../../src/components/date-info/DateInfo.tsx"],"sourcesContent":["import { format, isPast } from 'date-fns';\nimport React, { FC, useEffect, useMemo, useState } from 'react';\nimport {\n getFormattedDayOfWeek,\n getFormattedTime,\n getLanguage,\n getMonthFormat,\n getTimeTillNow,\n getYearFormat,\n} from '../../utils/dateInfo';\n\nexport type DateInfoProps = {\n /**\n * The date, that should be displayed\n */\n date: Date | string;\n /**\n * Additional text for \"shouldShowDateToNowDifference\" prop. Writes a text before the calculated time\n */\n preText?: string;\n /**\n * Adds the current year to the display\n */\n shouldShowThisYear?: boolean;\n /**\n * Adds the time to the display.\n */\n shouldShowTime?: boolean;\n /**\n * Whether the relative day of week to today should be shown (today, yesterday or tomorrow).\n */\n shouldShowRelativeDayOfWeek?: boolean;\n /**\n * Shortens the day and month text to maximum three digits\n */\n shouldUseShortText?: boolean;\n /**\n * Adds the day of week to the display\n */\n shouldShowDayOfWeek?: boolean;\n /**\n * Shows the difference from the date to now. The component handles updates itself.\n */\n shouldShowDateToNowDifference?: boolean;\n};\n\nconst DateInfo: FC<DateInfoProps> = ({\n date,\n preText = '',\n shouldShowThisYear,\n shouldShowTime,\n shouldShowRelativeDayOfWeek,\n shouldUseShortText,\n shouldShowDayOfWeek,\n shouldShowDateToNowDifference,\n}) => {\n const [formattedDate, setFormattedDate] = useState(new Date(date));\n const [formattedDateString, setFormattedDateString] = useState<string>('');\n const [language] = useState(getLanguage());\n\n useEffect(() => {\n // This useEffect is used for normal date formation\n if (shouldShowDateToNowDifference) {\n return;\n }\n\n let newFormattedDateString = getFormattedDayOfWeek({\n shouldShowDayOfWeek,\n shouldShowRelativeDayOfWeek,\n shouldUseShortText,\n date: formattedDate,\n language,\n });\n\n let formatString = 'dd. ';\n\n formatString += `${getMonthFormat({ shouldUseShortText })}`;\n\n formatString += `${getYearFormat({\n date: formattedDate,\n shouldShowThisYear,\n })}`;\n\n newFormattedDateString += format(formattedDate, formatString, { locale: language });\n\n newFormattedDateString += getFormattedTime({\n date: formattedDate,\n shouldShowTime,\n language,\n });\n\n setFormattedDateString(newFormattedDateString);\n }, [\n date,\n formattedDate,\n language,\n shouldShowDateToNowDifference,\n shouldShowDayOfWeek,\n shouldShowRelativeDayOfWeek,\n shouldShowThisYear,\n shouldShowTime,\n shouldUseShortText,\n ]);\n\n // Calculate remaining time till next minute to update time according to time left\n const [currentDate, setCurrentDate] = useState(new Date());\n\n useEffect(() => {\n // This useEffect is for calculating the current date for shouldShowDateToNowDifference option\n if (!shouldShowDateToNowDifference) {\n return () => {};\n }\n\n let timeoutTime = formattedDate.getSeconds() - new Date().getSeconds();\n\n // If the seconds of date are after seconds of current time, the timeoutTime has to be calculated differently\n if (timeoutTime < 0) {\n timeoutTime = 60 - new Date().getSeconds() + formattedDate.getSeconds();\n }\n\n // initialized with remaining time\n let timeDiffInMs = formattedDate.getTime() - currentDate.getTime();\n\n // set to elapsed time\n if (isPast(formattedDate)) {\n timeDiffInMs = currentDate.getTime() - formattedDate.getTime();\n }\n\n // time difference is less than a minute, time should be updated every second\n if (timeDiffInMs < 60000) {\n timeoutTime = 1;\n }\n\n // Set timeoutTime to at least 1000ms\n timeoutTime = Math.max(timeoutTime * 1000, 1000);\n\n const timeout = setTimeout(() => {\n setCurrentDate(new Date());\n }, timeoutTime);\n\n return () => {\n clearTimeout(timeout);\n };\n }, [currentDate, date, formattedDate, shouldShowDateToNowDifference]);\n\n useEffect(() => {\n // This useEffect is for showing the difference of the date to now\n if (shouldShowDateToNowDifference) {\n setFormattedDateString(getTimeTillNow({ date: formattedDate, currentDate, language }));\n }\n }, [currentDate, date, formattedDate, language, shouldShowDateToNowDifference]);\n\n useEffect(() => {\n setFormattedDate(new Date(date));\n }, [date]);\n\n return useMemo(\n () => (\n <span>\n {preText.trim()} {formattedDateString}\n </span>\n ),\n [formattedDateString, preText],\n );\n};\n\nDateInfo.displayName = 'DateInfo';\n\nexport default DateInfo;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_file","_fileDialog","_Icon","_interopRequireDefault","_List","_FileListItem","_FileInput","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","FileInput","_ref","icons","onMaxFilesReached","maxFiles","onRemove","onAdd","placeholder","internalFiles","setInternalFiles","useState","handleAddFiles","useCallback","files","newFileItems","forEach","file","filterDuplicateFile","newFile","push","length","prevState","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","isDisabled","useMemo","handleClick","selectFiles","multiple","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","content","items","map","createElement","StyledMotionFileInputList","animate","height","opacity","exit","key","transition","duration","type","fileType","fileSize","size","StyledFileInput","StyledFileInputContainer","onClick","onDragOver","onDrop","StyledFileInputText","AnimatePresence","initial","displayName","_default","exports"],"sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n DragEvent,\n FC,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { filterDuplicateFile } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n StyledFileInput,\n StyledFileInputContainer,\n StyledFileInputText,\n StyledMotionFileInputList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n icons?: string[];\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[]) => void;\n /**\n * Function to be executed when the maximum amount of Files are reached.\n */\n onMaxFilesReached?: () => void;\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (file: File) => void;\n /**\n * The text that should be displayed inside the FileInput\n */\n placeholder?: string;\n};\n\nconst FileInput: FC<FileInputProps> = ({\n icons = ['fa fa-upload'],\n onMaxFilesReached,\n maxFiles,\n onRemove,\n onAdd,\n placeholder = 'Dateien hinzufügen',\n}) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n\n const handleAddFiles = useCallback(\n (files: File[]) => {\n const newFileItems: File[] = [];\n\n files.forEach((file) => {\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n if (newFileItems.length > 0 && typeof onAdd === 'function') {\n onAdd(newFileItems);\n }\n\n setInternalFiles((prevState) => [...prevState, ...newFileItems]);\n },\n [internalFiles, onAdd]\n );\n\n const handleDeleteFile = useCallback(\n (fileName?: string) => {\n let fileToDelete: File | undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === fileName) {\n fileToDelete = file;\n }\n\n return name !== fileName;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [internalFiles, onRemove]\n );\n\n const isDisabled = useMemo(() => {\n if (maxFiles) {\n if (internalFiles.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, maxFiles, onMaxFilesReached]);\n\n const handleClick = useCallback(async () => {\n if (isDisabled) {\n return;\n }\n\n const files = await selectFiles({\n multiple: true,\n });\n\n handleAddFiles(files);\n }, [handleAddFiles, isDisabled]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n const draggedFiles = Array.from(e.dataTransfer.files);\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles]\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = internalFiles.map((file) => (\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={file.name}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem\n fileType={file.type}\n fileName={file.name}\n fileSize={file.size}\n onRemove={handleDeleteFile}\n />\n </StyledMotionFileInputList>\n ));\n\n return items;\n }, [handleDeleteFile, internalFiles]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <StyledFileInputContainer\n isDisabled={isDisabled}\n onClick={() => void handleClick()}\n onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n >\n <Icon icons={icons} />\n <StyledFileInputText>{placeholder}</StyledFileInputText>\n </StyledFileInputContainer>\n <List>\n <AnimatePresence initial={false}>{content}</AnimatePresence>\n </List>\n </StyledFileInput>\n ),\n [content, handleClick, handleDrop, icons, isDisabled, placeholder]\n );\n};\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FileInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_file","_fileDialog","_Icon","_interopRequireDefault","_List","_FileListItem","_FileInput","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","FileInput","_ref","icons","onMaxFilesReached","maxFiles","onRemove","onAdd","placeholder","internalFiles","setInternalFiles","useState","handleAddFiles","useCallback","files","newFileItems","forEach","file","filterDuplicateFile","newFile","push","length","prevState","handleDeleteFile","fileName","fileToDelete","filteredFiles","filter","name","isDisabled","useMemo","handleClick","selectFiles","multiple","handleDrop","preventDefault","draggedFiles","Array","from","dataTransfer","content","items","map","createElement","StyledMotionFileInputList","animate","height","opacity","exit","key","transition","duration","type","fileType","fileSize","size","StyledFileInput","StyledFileInputContainer","onClick","onDragOver","onDrop","StyledFileInputText","AnimatePresence","initial","displayName","_default","exports"],"sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { DragEvent, FC, ReactElement, useCallback, useMemo, useState } from 'react';\nimport { filterDuplicateFile } from '../../utils/file';\nimport { selectFiles } from '../../utils/fileDialog';\nimport Icon from '../icon/Icon';\nimport List from '../list/List';\nimport FileListItem from './file-list/FileListItem';\nimport {\n StyledFileInput,\n StyledFileInputContainer,\n StyledFileInputText,\n StyledMotionFileInputList,\n} from './FileInput.styles';\n\nexport type FileInputProps = {\n /**\n * An array of icons that should be displayed inside the FileInput\n */\n icons?: string[];\n /**\n * The maximum amount of Files that can be uploaded.\n */\n maxFiles?: number;\n /**\n * A function to be executed when files are added.\n */\n onAdd?: (files: File[]) => void;\n /**\n * Function to be executed when the maximum amount of Files are reached.\n */\n onMaxFilesReached?: () => void;\n /**\n * A function to be executed when a file is removed.\n */\n onRemove?: (file: File) => void;\n /**\n * The text that should be displayed inside the FileInput\n */\n placeholder?: string;\n};\n\nconst FileInput: FC<FileInputProps> = ({\n icons = ['fa fa-upload'],\n onMaxFilesReached,\n maxFiles,\n onRemove,\n onAdd,\n placeholder = 'Dateien hinzufügen',\n}) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n\n const handleAddFiles = useCallback(\n (files: File[]) => {\n const newFileItems: File[] = [];\n\n files.forEach((file) => {\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n if (newFileItems.length > 0 && typeof onAdd === 'function') {\n onAdd(newFileItems);\n }\n\n setInternalFiles((prevState) => [...prevState, ...newFileItems]);\n },\n [internalFiles, onAdd],\n );\n\n const handleDeleteFile = useCallback(\n (fileName?: string) => {\n let fileToDelete: File | undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === fileName) {\n fileToDelete = file;\n }\n\n return name !== fileName;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete || typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [internalFiles, onRemove],\n );\n\n const isDisabled = useMemo(() => {\n if (maxFiles) {\n if (internalFiles.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, maxFiles, onMaxFilesReached]);\n\n const handleClick = useCallback(async () => {\n if (isDisabled) {\n return;\n }\n\n const files = await selectFiles({\n multiple: true,\n });\n\n handleAddFiles(files);\n }, [handleAddFiles, isDisabled]);\n\n const handleDrop = useCallback(\n (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n const draggedFiles = Array.from(e.dataTransfer.files);\n\n handleAddFiles(draggedFiles);\n },\n [handleAddFiles],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = internalFiles.map((file) => (\n <StyledMotionFileInputList\n animate={{ height: 'auto', opacity: 1 }}\n exit={{ height: 0, opacity: 0 }}\n key={file.name}\n transition={{ duration: 0.25, type: 'tween' }}\n >\n <FileListItem\n fileType={file.type}\n fileName={file.name}\n fileSize={file.size}\n onRemove={handleDeleteFile}\n />\n </StyledMotionFileInputList>\n ));\n\n return items;\n }, [handleDeleteFile, internalFiles]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <StyledFileInputContainer\n isDisabled={isDisabled}\n onClick={() => void handleClick()}\n onDragOver={(e: DragEvent<HTMLDivElement>) => e.preventDefault()}\n onDrop={(e: DragEvent<HTMLDivElement>) => void handleDrop(e)}\n >\n <Icon icons={icons} />\n <StyledFileInputText>{placeholder}</StyledFileInputText>\n </StyledFileInputContainer>\n <List>\n <AnimatePresence initial={false}>{content}</AnimatePresence>\n </List>\n </StyledFileInput>\n ),\n [content, handleClick, handleDrop, icons, isDisabled, placeholder],\n );\n};\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _FilterButton = _interopRequireDefault(require("./filter-button/FilterButton"));
|
|
9
9
|
var _FilterButtons = require("./FilterButtons.styles");
|
|
10
|
-
var
|
|
10
|
+
var _filterButtons = require("../../types/filterButtons");
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -16,7 +16,7 @@ const FilterButtons = _ref => {
|
|
|
16
16
|
selectedItemIds,
|
|
17
17
|
onSelect,
|
|
18
18
|
items,
|
|
19
|
-
size =
|
|
19
|
+
size = _filterButtons.FilterButtonSize.Normal
|
|
20
20
|
} = _ref;
|
|
21
21
|
const [selectedIds, setSelectedIds] = (0, _react.useState)([]);
|
|
22
22
|
|
|
@@ -56,7 +56,7 @@ const FilterButtons = _ref => {
|
|
|
56
56
|
key: "all",
|
|
57
57
|
onSelect: handleSelect,
|
|
58
58
|
isSelected: selectedIds.includes('all'),
|
|
59
|
-
shape:
|
|
59
|
+
shape: _filterButtons.FilterButtonItemShape.Rectangular,
|
|
60
60
|
size: size,
|
|
61
61
|
text: "Alle"
|
|
62
62
|
})];
|
|
@@ -74,7 +74,7 @@ const FilterButtons = _ref => {
|
|
|
74
74
|
key: id,
|
|
75
75
|
onSelect: handleSelect,
|
|
76
76
|
isSelected: selectedIds.includes(id),
|
|
77
|
-
shape:
|
|
77
|
+
shape: _filterButtons.FilterButtonItemShape.Round,
|
|
78
78
|
size: size,
|
|
79
79
|
text: text
|
|
80
80
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButtons.js","names":["_react","_interopRequireWildcard","require","_FilterButton","_interopRequireDefault","_FilterButtons","
|
|
1
|
+
{"version":3,"file":"FilterButtons.js","names":["_react","_interopRequireWildcard","require","_FilterButton","_interopRequireDefault","_FilterButtons","_filterButtons","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","FilterButtons","_ref","selectedItemIds","onSelect","items","size","FilterButtonSize","Normal","selectedIds","setSelectedIds","useState","useEffect","handleSelect","useCallback","id","newIds","includes","filter","filteredId","length","selectedId","reactItems","useMemo","array","createElement","key","isSelected","shape","FilterButtonItemShape","Rectangular","text","forEach","_ref2","icons","color","push","Round","StyledFilterButton","displayName","_default","exports"],"sources":["../../../src/components/filter-buttons/FilterButtons.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport FilterButton from './filter-button/FilterButton';\nimport { StyledFilterButton } from './FilterButtons.styles';\nimport {\n FilterButtonItemShape,\n FilterButtonSize,\n IFilterButtonItem,\n} from '../../types/filterButtons';\n\nexport type FilterButtonsProps = {\n /**\n * The items that should be displayed.\n */\n items: IFilterButtonItem[];\n /**\n * A function that should be executed when an item is selected.\n */\n onSelect?: (keys: string[]) => void;\n /**\n * The keys of items that should be selected.\n */\n selectedItemIds?: string[];\n /**\n * The size auf the filter buttons. Use the FilterButtonSize enum.\n */\n size?: FilterButtonSize;\n};\n\nconst FilterButtons: FC<FilterButtonsProps> = ({\n selectedItemIds,\n onSelect,\n items,\n size = FilterButtonSize.Normal,\n}) => {\n const [selectedIds, setSelectedIds] = useState<string[]>([]);\n\n /**\n * This function set the selectedItemKey\n */\n useEffect(() => {\n if (selectedItemIds) {\n setSelectedIds(selectedItemIds);\n }\n }, [selectedItemIds]);\n\n /**\n * Function to update the selected items\n */\n const handleSelect = useCallback(\n (id: string) => {\n let newIds: string[];\n\n if (id === 'all') {\n newIds = selectedIds.includes('all') ? ['all'] : [];\n } else {\n newIds = selectedIds.includes(id)\n ? selectedIds.filter((filteredId) => filteredId !== id)\n : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n }\n\n if (newIds.length === 0) {\n newIds = ['all'];\n }\n\n setSelectedIds(newIds);\n\n if (typeof onSelect === 'function') {\n onSelect(newIds.filter((selectedId) => selectedId !== 'all'));\n }\n },\n [onSelect, selectedIds],\n );\n\n const reactItems = useMemo(() => {\n if (items.length === 0) {\n return null;\n }\n\n const array: ReactElement[] = [\n <FilterButton\n id=\"all\"\n key=\"all\"\n onSelect={handleSelect}\n isSelected={selectedIds.includes('all')}\n shape={FilterButtonItemShape.Rectangular}\n size={size}\n text=\"Alle\"\n />,\n ];\n\n items.forEach(({ icons, text, color, id }) => {\n array.push(\n <FilterButton\n color={color}\n icons={icons}\n id={id}\n key={id}\n onSelect={handleSelect}\n isSelected={selectedIds.includes(id)}\n shape={FilterButtonItemShape.Round}\n size={size}\n text={text}\n />,\n );\n });\n\n return array;\n }, [handleSelect, items, selectedIds, size]);\n\n return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButtons.displayName = 'FilterButtons';\n\nexport default FilterButtons;\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CSSProperties, FC } from 'react';
|
|
2
|
-
import { FilterButtonItemShape, FilterButtonSize } from '
|
|
2
|
+
import { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';
|
|
3
3
|
export type FilterButtonProps = {
|
|
4
4
|
color?: CSSProperties['color'];
|
|
5
5
|
icons?: string[];
|
|
@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var
|
|
9
|
-
var _types = require("../types");
|
|
8
|
+
var _filterButtons = require("../../../types/filterButtons");
|
|
10
9
|
var _FilterButton = require("./FilterButton.styles");
|
|
10
|
+
var _Icon = _interopRequireDefault(require("../../icon/Icon"));
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
13
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -31,7 +31,7 @@ const FilterButton = _ref => {
|
|
|
31
31
|
onClick: handleClick
|
|
32
32
|
}, /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButtonItemLabel, null, icons && /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
33
33
|
icons: icons,
|
|
34
|
-
size: size ===
|
|
34
|
+
size: size === _filterButtons.FilterButtonSize.Normal ? 15 : 10
|
|
35
35
|
}), /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButtonItemLabelText, null, text)), /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButtonItemBorder, {
|
|
36
36
|
isSelected: isSelected,
|
|
37
37
|
shape: shape,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.js","names":["_react","_interopRequireWildcard","require","
|
|
1
|
+
{"version":3,"file":"FilterButton.js","names":["_react","_interopRequireWildcard","require","_filterButtons","_FilterButton","_Icon","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","FilterButton","_ref","icons","size","shape","text","color","isSelected","id","onSelect","handleClick","useCallback","useMemo","createElement","StyledFilterButtonItem","onClick","StyledFilterButtonItemLabel","FilterButtonSize","Normal","StyledFilterButtonItemLabelText","StyledFilterButtonItemBorder","StyledMotionFilterButtonItemBackground","displayName","_default","exports"],"sources":["../../../../src/components/filter-buttons/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { CSSProperties, FC, useCallback, useMemo } from 'react';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\nimport {\n StyledFilterButtonItem,\n StyledFilterButtonItemBorder,\n StyledFilterButtonItemLabel,\n StyledFilterButtonItemLabelText,\n StyledMotionFilterButtonItemBackground,\n} from './FilterButton.styles';\nimport Icon from '../../icon/Icon';\n\nexport type FilterButtonProps = {\n color?: CSSProperties['color'];\n icons?: string[];\n isSelected: boolean;\n shape: FilterButtonItemShape;\n size: FilterButtonSize;\n text: string;\n id: string;\n onSelect: (key: string) => void;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n icons,\n size,\n shape,\n text,\n color,\n isSelected,\n id,\n onSelect,\n}) => {\n const handleClick = useCallback(() => {\n onSelect(id);\n }, [id, onSelect]);\n\n return useMemo(\n () => (\n <StyledFilterButtonItem isSelected={isSelected} size={size} onClick={handleClick}>\n <StyledFilterButtonItemLabel>\n {icons && (\n <Icon icons={icons} size={size === FilterButtonSize.Normal ? 15 : 10} />\n )}\n <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n </StyledFilterButtonItemLabel>\n <StyledFilterButtonItemBorder isSelected={isSelected} shape={shape} color={color} />\n <StyledMotionFilterButtonItemBackground\n isSelected={isSelected}\n shape={shape}\n color={color}\n />\n </StyledFilterButtonItem>\n ),\n [color, handleClick, icons, isSelected, shape, size, text],\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSProperties } from 'react';
|
|
2
2
|
import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
|
|
3
|
-
import { FilterButtonItemShape, FilterButtonSize } from '
|
|
3
|
+
import { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';
|
|
4
4
|
type StyledFilterButtonItemProps = WithTheme<{
|
|
5
5
|
size: FilterButtonSize;
|
|
6
6
|
isSelected: boolean;
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.StyledMotionFilterButtonItemBackground = exports.StyledFilterButtonItemLabelText = exports.StyledFilterButtonItemLabel = exports.StyledFilterButtonItemBorder = exports.StyledFilterButtonItem = void 0;
|
|
7
7
|
var _framerMotion = require("framer-motion");
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
|
-
var
|
|
9
|
+
var _filterButtons = require("../../../types/filterButtons");
|
|
10
10
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
11
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
12
|
const StyledFilterButtonItem = exports.StyledFilterButtonItem = _styledComponents.default.div`
|
|
@@ -15,7 +15,7 @@ const StyledFilterButtonItem = exports.StyledFilterButtonItem = _styledComponent
|
|
|
15
15
|
let {
|
|
16
16
|
size
|
|
17
17
|
} = _ref;
|
|
18
|
-
return size ===
|
|
18
|
+
return size === _filterButtons.FilterButtonSize.Normal ? 15 : 12;
|
|
19
19
|
}}px;
|
|
20
20
|
cursor: pointer;
|
|
21
21
|
user-select: none;
|
|
@@ -60,7 +60,7 @@ const StyledFilterButtonItemBorder = exports.StyledFilterButtonItemBorder = _sty
|
|
|
60
60
|
let {
|
|
61
61
|
shape
|
|
62
62
|
} = _ref4;
|
|
63
|
-
return shape ===
|
|
63
|
+
return shape === _filterButtons.FilterButtonItemShape.Round ? 100 : 0;
|
|
64
64
|
}}px;
|
|
65
65
|
${_ref5 => {
|
|
66
66
|
let {
|
|
@@ -93,7 +93,7 @@ const StyledMotionFilterButtonItemBackground = exports.StyledMotionFilterButtonI
|
|
|
93
93
|
let {
|
|
94
94
|
shape
|
|
95
95
|
} = _ref7;
|
|
96
|
-
return shape ===
|
|
96
|
+
return shape === _filterButtons.FilterButtonItemShape.Round ? 100 : 0;
|
|
97
97
|
}}px;
|
|
98
98
|
background-color: ${_ref8 => {
|
|
99
99
|
let {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","
|
|
1
|
+
{"version":3,"file":"FilterButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_filterButtons","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledFilterButtonItem","exports","styled","div","_ref","size","FilterButtonSize","Normal","_ref2","isSelected","css","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","_ref3","theme","text","StyledFilterButtonItemBorder","_ref4","shape","FilterButtonItemShape","Round","_ref5","color","headline","StyledMotionFilterButtonItemBackground","motion","_ref6","_ref7","_ref8"],"sources":["../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { FilterButtonItemShape, FilterButtonSize } from '../../../types/filterButtons';\n\ntype StyledFilterButtonItemProps = WithTheme<{ size: FilterButtonSize; isSelected: boolean }>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n position: relative;\n font-size: ${({ size }) => (size === FilterButtonSize.Normal ? 15 : 12)}px;\n cursor: pointer;\n user-select: none;\n padding: 3px 14px;\n\n &:hover > div:last-child {\n ${({ isSelected }) =>\n !isSelected &&\n css`\n opacity: 0.2;\n `}\n }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n display: flex;\n gap: 5px;\n align-items: center;\n position: relative;\n z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n margin-top: 2px;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n shape: FilterButtonItemShape;\n color: CSSProperties['color'];\n isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n opacity: 0.4;\n z-index: 0;\n border-radius: ${({ shape }) => (shape === FilterButtonItemShape.Round ? 100 : 0)}px;\n ${({ color, theme, isSelected }: StyledFilterButtonItemBorderProps) =>\n !isSelected &&\n css`\n border-width: 1px;\n border-style: solid;\n border-color: ${color ?? theme.headline};\n `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n shape: FilterButtonItemShape;\n color: CSSProperties['color'];\n isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n motion.div,\n)<StyledFilterButtonItemBackgroundProps>`\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 0;\n opacity: ${({ isSelected }) => (isSelected ? 0.4 : 0)};\n transition: opacity 0.5s ease;\n border-radius: ${({ shape }) => (shape === FilterButtonItemShape.Round ? 100 : 0)}px;\n background-color: ${({ color, theme }: StyledFilterButtonItemBackgroundProps) =>\n color ?? theme.headline};\n`;\n"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ exports.default = void 0;
|
|
|
7
7
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _Icon = require("./Icon.styles");
|
|
10
|
-
var
|
|
10
|
+
var _icon = require("../../utils/icon");
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
12
|
const Icon = _ref => {
|
|
13
13
|
let {
|
|
@@ -39,7 +39,7 @@ const Icon = _ref => {
|
|
|
39
39
|
};
|
|
40
40
|
let maxStackSizeFactor = 1;
|
|
41
41
|
icons.forEach(icon => {
|
|
42
|
-
const stackSizeFactor = (0,
|
|
42
|
+
const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);
|
|
43
43
|
if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {
|
|
44
44
|
maxStackSizeFactor = stackSizeFactor;
|
|
45
45
|
}
|
|
@@ -54,7 +54,7 @@ const Icon = _ref => {
|
|
|
54
54
|
onMouseDown: onMouseDown,
|
|
55
55
|
size: size
|
|
56
56
|
}, icons.map(icon => {
|
|
57
|
-
const stackSizeFactor = (0,
|
|
57
|
+
const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);
|
|
58
58
|
const iconClasses = (0, _clsx.default)(icon, {
|
|
59
59
|
'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
|
|
60
60
|
});
|