@chayns-components/core 5.0.0-beta.1004 → 5.0.0-beta.1005
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/cjs/components/accordion/Accordion.js +30 -30
- package/lib/cjs/components/accordion/Accordion.js.map +1 -1
- package/lib/cjs/components/accordion/Accordion.styles.js +22 -21
- package/lib/cjs/components/accordion/Accordion.styles.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js +2 -2
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js +16 -16
- package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js +26 -26
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js +11 -11
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/cjs/components/amount-control/AmountControl.js +31 -31
- package/lib/cjs/components/amount-control/AmountControl.js.map +1 -1
- package/lib/cjs/components/amount-control/AmountControl.styles.js +2 -2
- package/lib/cjs/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/cjs/components/button/Button.js +12 -12
- package/lib/cjs/components/button/Button.js.map +1 -1
- package/lib/cjs/components/button/Button.styles.js +4 -4
- package/lib/cjs/components/button/Button.styles.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.js +48 -48
- package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.styles.js +2 -2
- package/lib/cjs/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/cjs/components/context-menu/ContextMenu.js +23 -23
- package/lib/cjs/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js +2 -2
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
- package/lib/cjs/components/expandable-content/ExpandableContent.js +4 -4
- package/lib/cjs/components/expandable-content/ExpandableContent.js.map +1 -1
- package/lib/cjs/components/expandable-content/ExpandableContent.styles.js +2 -2
- package/lib/cjs/components/expandable-content/ExpandableContent.styles.js.map +1 -1
- package/lib/cjs/components/file-input/FileInput.js +27 -27
- package/lib/cjs/components/file-input/FileInput.js.map +1 -1
- package/lib/cjs/components/file-input/FileInput.styles.js +2 -2
- package/lib/cjs/components/file-input/FileInput.styles.js.map +1 -1
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js +2 -2
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/cjs/components/input/Input.styles.js +4 -4
- package/lib/cjs/components/input/Input.styles.js.map +1 -1
- package/lib/cjs/components/list/List.js +11 -11
- package/lib/cjs/components/list/List.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.js +17 -17
- package/lib/cjs/components/list/list-item/ListItem.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.styles.js +2 -2
- package/lib/cjs/components/list/list-item/ListItem.styles.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.styles.js +2 -2
- package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js +5 -5
- package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
- package/lib/cjs/components/mention-finder/MentionFinder.js +17 -17
- package/lib/cjs/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/cjs/components/mention-finder/MentionFinder.styles.js +2 -2
- package/lib/cjs/components/mention-finder/MentionFinder.styles.js.map +1 -1
- package/lib/cjs/components/popup/Popup.js +34 -34
- package/lib/cjs/components/popup/Popup.js.map +1 -1
- package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js +2 -2
- package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map +1 -1
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js +2 -2
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.js +17 -17
- package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.styles.js +2 -2
- package/lib/cjs/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/cjs/components/search-box/SearchBox.js +64 -64
- package/lib/cjs/components/search-box/SearchBox.js.map +1 -1
- package/lib/cjs/components/search-box/SearchBox.styles.js +2 -2
- package/lib/cjs/components/search-box/SearchBox.styles.js.map +1 -1
- package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js +2 -2
- package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.js +16 -16
- package/lib/cjs/components/search-input/SearchInput.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.styles.js +3 -3
- package/lib/cjs/components/search-input/SearchInput.styles.js.map +1 -1
- package/lib/cjs/components/slider/Slider.styles.js +2 -2
- package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.js +44 -44
- package/lib/cjs/components/slider-button/SliderButton.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.styles.js +2 -2
- package/lib/cjs/components/slider-button/SliderButton.styles.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.styles.js +2 -2
- package/lib/cjs/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/cjs/utils/sliderButton.js.map +1 -1
- package/lib/esm/components/accordion/Accordion.js +1 -1
- package/lib/esm/components/accordion/Accordion.js.map +1 -1
- package/lib/esm/components/accordion/Accordion.styles.js +21 -20
- package/lib/esm/components/accordion/Accordion.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-group/AccordionGroup.js +1 -1
- package/lib/esm/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/esm/components/amount-control/AmountControl.js +2 -2
- package/lib/esm/components/amount-control/AmountControl.js.map +1 -1
- package/lib/esm/components/amount-control/AmountControl.styles.js +1 -1
- package/lib/esm/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/esm/components/button/Button.js +1 -1
- package/lib/esm/components/button/Button.js.map +1 -1
- package/lib/esm/components/button/Button.styles.js +1 -1
- package/lib/esm/components/button/Button.styles.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.js +1 -1
- package/lib/esm/components/combobox/ComboBox.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.styles.js +1 -1
- package/lib/esm/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/esm/components/context-menu/ContextMenu.js +1 -1
- package/lib/esm/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js +1 -1
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.js +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.js.map +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.styles.js +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.styles.js.map +1 -1
- package/lib/esm/components/file-input/FileInput.js +1 -1
- package/lib/esm/components/file-input/FileInput.js.map +1 -1
- package/lib/esm/components/file-input/FileInput.styles.js +1 -1
- package/lib/esm/components/file-input/FileInput.styles.js.map +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/esm/components/input/Input.styles.js +1 -1
- package/lib/esm/components/input/Input.styles.js.map +1 -1
- package/lib/esm/components/list/List.js +1 -1
- package/lib/esm/components/list/List.js.map +1 -1
- package/lib/esm/components/list/list-item/ListItem.js +1 -1
- package/lib/esm/components/list/list-item/ListItem.js.map +1 -1
- package/lib/esm/components/list/list-item/ListItem.styles.js +1 -1
- package/lib/esm/components/list/list-item/ListItem.styles.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-body/ListItemBody.styles.js +1 -1
- package/lib/esm/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js +1 -1
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.js +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.styles.js +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.styles.js.map +1 -1
- package/lib/esm/components/popup/Popup.js +1 -1
- package/lib/esm/components/popup/Popup.js.map +1 -1
- package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js +1 -1
- package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.js +2 -2
- package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.styles.js +1 -1
- package/lib/esm/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/esm/components/search-box/SearchBox.js +1 -1
- package/lib/esm/components/search-box/SearchBox.js.map +1 -1
- package/lib/esm/components/search-box/SearchBox.styles.js +1 -1
- package/lib/esm/components/search-box/SearchBox.styles.js.map +1 -1
- package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js +1 -1
- package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.js +1 -1
- package/lib/esm/components/search-input/SearchInput.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.styles.js +1 -1
- package/lib/esm/components/search-input/SearchInput.styles.js.map +1 -1
- package/lib/esm/components/slider/Slider.styles.js +1 -1
- package/lib/esm/components/slider/Slider.styles.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.js +1 -1
- package/lib/esm/components/slider-button/SliderButton.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.styles.js +1 -1
- package/lib/esm/components/slider-button/SliderButton.styles.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.styles.js +1 -1
- package/lib/esm/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/esm/utils/sliderButton.js.map +1 -1
- package/lib/types/components/accordion/Accordion.styles.d.ts +2 -263
- package/lib/types/components/accordion/accordion-body/AccordionBody.styles.d.ts +2 -263
- package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts +20 -2660
- package/lib/types/components/amount-control/AmountControl.styles.d.ts +2 -273
- package/lib/types/components/button/Button.styles.d.ts +6 -799
- package/lib/types/components/combobox/ComboBox.styles.d.ts +2 -263
- package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +2 -263
- package/lib/types/components/expandable-content/ExpandableContent.styles.d.ts +2 -263
- package/lib/types/components/file-input/FileInput.styles.d.ts +2 -263
- package/lib/types/components/filter-buttons/filter-button/FilterButton.styles.d.ts +2 -263
- package/lib/types/components/input/Input.styles.d.ts +6 -791
- package/lib/types/components/list/list-item/ListItem.styles.d.ts +2 -263
- package/lib/types/components/list/list-item/list-item-body/ListItemBody.styles.d.ts +2 -263
- package/lib/types/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +8 -1052
- package/lib/types/components/mention-finder/MentionFinder.styles.d.ts +2 -263
- package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.styles.d.ts +2 -263
- package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +2 -263
- package/lib/types/components/radio-button/RadioButton.styles.d.ts +3 -264
- package/lib/types/components/search-box/SearchBox.styles.d.ts +2 -263
- package/lib/types/components/search-box/search-box-body/SearchBoxBody.styles.d.ts +2 -263
- package/lib/types/components/search-input/SearchInput.styles.d.ts +4 -526
- package/lib/types/components/slider/Slider.styles.d.ts +3 -585
- package/lib/types/components/slider-button/SliderButton.styles.d.ts +2 -263
- package/lib/types/components/truncation/Truncation.styles.d.ts +2 -263
- package/lib/types/utils/sliderButton.d.ts +1 -1
- package/package.json +3 -3
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var
|
|
8
|
-
var
|
|
7
|
+
var _react = require("motion/react");
|
|
8
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _styledComponents = require("styled-components");
|
|
10
10
|
var _useElementSize = require("../../../hooks/useElementSize");
|
|
11
11
|
var _accordion = require("../../../utils/accordion");
|
|
@@ -37,15 +37,15 @@ const AccordionHead = ({
|
|
|
37
37
|
onTitleInputChange,
|
|
38
38
|
titleColor
|
|
39
39
|
}) => {
|
|
40
|
-
const [headHeight, setHeadHeight] = (0,
|
|
40
|
+
const [headHeight, setHeadHeight] = (0, _react2.useState)({
|
|
41
41
|
closed: isWrapped ? 40 : 33,
|
|
42
42
|
open: isWrapped ? 40 : 33
|
|
43
43
|
});
|
|
44
44
|
const theme = (0, _styledComponents.useTheme)();
|
|
45
|
-
const titleElementWrapperRef = (0,
|
|
46
|
-
const titleWrapperRef = (0,
|
|
47
|
-
const [internalSearchValue, setInternalSearchValue] = (0,
|
|
48
|
-
(0,
|
|
45
|
+
const titleElementWrapperRef = (0, _react2.useRef)(null);
|
|
46
|
+
const titleWrapperRef = (0, _react2.useRef)(null);
|
|
47
|
+
const [internalSearchValue, setInternalSearchValue] = (0, _react2.useState)();
|
|
48
|
+
(0, _react2.useEffect)(() => {
|
|
49
49
|
setInternalSearchValue(searchValue);
|
|
50
50
|
}, [searchValue]);
|
|
51
51
|
const handleOnSearchChance = event => {
|
|
@@ -57,8 +57,8 @@ const AccordionHead = ({
|
|
|
57
57
|
const titleElementChildrenSize = (0, _useElementSize.useElementSize)(titleElementWrapperRef, {
|
|
58
58
|
shouldUseChildElement: true
|
|
59
59
|
});
|
|
60
|
-
const shouldPreventRightElementClick = (0,
|
|
61
|
-
(0,
|
|
60
|
+
const shouldPreventRightElementClick = (0, _react2.useMemo)(() => (0, _accordion.getElementClickEvent)(rightElement), [rightElement]);
|
|
61
|
+
(0, _react2.useEffect)(() => {
|
|
62
62
|
if (typeof onTitleInputChange === 'function') {
|
|
63
63
|
setHeadHeight({
|
|
64
64
|
closed: 50,
|
|
@@ -76,9 +76,9 @@ const AccordionHead = ({
|
|
|
76
76
|
// The fontSize need to be included to trigger a new calculation.
|
|
77
77
|
// After the size is increased, the Title is cut at the bottom.
|
|
78
78
|
}, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);
|
|
79
|
-
const iconElement = (0,
|
|
79
|
+
const iconElement = (0, _react2.useMemo)(() => {
|
|
80
80
|
if (icon || isFixed) {
|
|
81
|
-
return /*#__PURE__*/
|
|
81
|
+
return /*#__PURE__*/_react2.default.createElement(_Icon.default, {
|
|
82
82
|
icons: [isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']
|
|
83
83
|
});
|
|
84
84
|
}
|
|
@@ -87,7 +87,7 @@ const AccordionHead = ({
|
|
|
87
87
|
internalIcon = theme.accordionIcon.toString(16);
|
|
88
88
|
}
|
|
89
89
|
const internalIconStyle = theme !== null && theme !== void 0 && theme.iconStyle ? theme.iconStyle : 'fa-regular';
|
|
90
|
-
return /*#__PURE__*/
|
|
90
|
+
return /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledAccordionIcon, {
|
|
91
91
|
className: internalIconStyle,
|
|
92
92
|
$icon: internalIcon
|
|
93
93
|
});
|
|
@@ -98,21 +98,21 @@ const AccordionHead = ({
|
|
|
98
98
|
// The height of the titleElement is increased by 8px because of the padding of the accordion head element.
|
|
99
99
|
accordionHeadHeight = titleElementChildrenSize.height + 8;
|
|
100
100
|
}
|
|
101
|
-
return /*#__PURE__*/
|
|
101
|
+
return /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionAccordionHead, {
|
|
102
102
|
animate: {
|
|
103
103
|
height: accordionHeadHeight
|
|
104
104
|
},
|
|
105
105
|
className: "beta-chayns-accordion-head",
|
|
106
106
|
initial: false,
|
|
107
107
|
key: `accordionHead--${uuid}`
|
|
108
|
-
}, /*#__PURE__*/
|
|
108
|
+
}, /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionIconWrapper, {
|
|
109
109
|
animate: {
|
|
110
110
|
rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0
|
|
111
111
|
},
|
|
112
112
|
initial: false,
|
|
113
113
|
onClick: !isFixed ? onClick : undefined,
|
|
114
114
|
key: `accordionHeadIcon--${uuid}`
|
|
115
|
-
}, iconElement), /*#__PURE__*/
|
|
115
|
+
}, iconElement), /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionContentWrapper, {
|
|
116
116
|
animate: {
|
|
117
117
|
opacity: isTitleGreyed ? 0.5 : 1
|
|
118
118
|
},
|
|
@@ -124,21 +124,21 @@ const AccordionHead = ({
|
|
|
124
124
|
}, typeof onTitleInputChange === 'function' ?
|
|
125
125
|
/*#__PURE__*/
|
|
126
126
|
// eslint-disable-next-line react/jsx-no-constructed-context-values
|
|
127
|
-
|
|
127
|
+
_react2.default.createElement(_AreaContextProvider.AreaContext.Provider, {
|
|
128
128
|
value: {
|
|
129
129
|
shouldChangeColor: true
|
|
130
130
|
}
|
|
131
|
-
}, /*#__PURE__*/
|
|
131
|
+
}, /*#__PURE__*/_react2.default.createElement(_Input.default, _extends({}, titleInputProps, {
|
|
132
132
|
value: title,
|
|
133
133
|
onChange: onTitleInputChange
|
|
134
|
-
}))) : /*#__PURE__*/
|
|
134
|
+
}))) : /*#__PURE__*/_react2.default.createElement(_react.LayoutGroup, {
|
|
135
135
|
key: `accordionHeadLayoutGroup--${uuid}`
|
|
136
|
-
}, /*#__PURE__*/
|
|
136
|
+
}, /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionTitleWrapper, {
|
|
137
137
|
key: `accordionHeadTitleWrapperWrapper--${uuid}`
|
|
138
|
-
}, /*#__PURE__*/
|
|
138
|
+
}, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
139
139
|
initial: false,
|
|
140
140
|
key: `accordionHeadTitleWrapper--${uuid}`
|
|
141
|
-
}, /*#__PURE__*/
|
|
141
|
+
}, /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionTitle, {
|
|
142
142
|
animate: {
|
|
143
143
|
scale: 1
|
|
144
144
|
},
|
|
@@ -158,14 +158,14 @@ const AccordionHead = ({
|
|
|
158
158
|
}
|
|
159
159
|
},
|
|
160
160
|
key: isOpen && !isWrapped ? `accordionHeadTitleBig--${uuid}` : `accordionHeadTitle--${uuid}`
|
|
161
|
-
}, title))), titleElement && /*#__PURE__*/
|
|
161
|
+
}, title))), titleElement && /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionTitleElementWrapper, {
|
|
162
162
|
layout: true,
|
|
163
163
|
key: `accordionTitleElement--${uuid}`,
|
|
164
164
|
ref: titleElementWrapperRef
|
|
165
|
-
}, titleElement))), (typeof onSearchChange === 'function' || rightElement) && /*#__PURE__*/
|
|
165
|
+
}, titleElement))), (typeof onSearchChange === 'function' || rightElement) && /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledRightWrapper, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
166
166
|
initial: false,
|
|
167
167
|
key: `accordionRightWrapper--${uuid}`
|
|
168
|
-
}, typeof onSearchChange === 'function' && isOpen && /*#__PURE__*/
|
|
168
|
+
}, typeof onSearchChange === 'function' && isOpen && /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionSearchWrapper, {
|
|
169
169
|
animate: {
|
|
170
170
|
opacity: 1
|
|
171
171
|
},
|
|
@@ -176,12 +176,12 @@ const AccordionHead = ({
|
|
|
176
176
|
opacity: 0
|
|
177
177
|
},
|
|
178
178
|
key: `searchWrapper--${uuid}`
|
|
179
|
-
}, /*#__PURE__*/
|
|
179
|
+
}, /*#__PURE__*/_react2.default.createElement(_SearchInput.default, {
|
|
180
180
|
onChange: handleOnSearchChance,
|
|
181
181
|
placeholder: searchPlaceholder,
|
|
182
182
|
size: _Input.InputSize.Small,
|
|
183
183
|
value: internalSearchValue
|
|
184
|
-
})), rightElement && /*#__PURE__*/
|
|
184
|
+
})), rightElement && /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionRightElementWrapper, {
|
|
185
185
|
animate: {
|
|
186
186
|
opacity: 1
|
|
187
187
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","useState","closed","open","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","useEffect","handleOnSearchChance","event","target","value","titleElementChildrenSize","useElementSize","shouldUseChildElement","shouldPreventRightElementClick","useMemo","getElementClickEvent","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","StyledMotionAccordionHead","animate","initial","key","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","$isWrapped","AreaContext","Provider","shouldChangeColor","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","exit","$isOpen","$color","$hasSearch","transition","duration","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","StyledMotionSearchWrapper","placeholder","size","InputSize","Small","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n StyledAccordionIcon,\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionSearchWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchPlaceholder?: string;\n searchValue?: string;\n shouldRotateIcon?: boolean;\n title: string;\n titleElement?: ReactNode;\n uuid: string;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n titleColor?: CSSProperties['color'];\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldRotateIcon,\n title,\n titleElement,\n uuid,\n titleInputProps,\n onTitleInputChange,\n titleColor,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 33,\n open: isWrapped ? 40 : 33,\n });\n\n const theme = useTheme();\n\n const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n useEffect(() => {\n setInternalSearchValue(searchValue);\n }, [searchValue]);\n\n const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n setInternalSearchValue(event.target.value);\n if (typeof onSearchChange === 'function') {\n onSearchChange(event);\n }\n };\n\n const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n shouldUseChildElement: true,\n });\n\n const shouldPreventRightElementClick = useMemo(\n () => getElementClickEvent(rightElement),\n [rightElement],\n );\n\n useEffect(() => {\n if (typeof onTitleInputChange === 'function') {\n setHeadHeight({ closed: 50, open: 50 });\n } else {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n hasSearch: typeof onSearchChange === 'function',\n }),\n );\n }\n // The fontSize need to be included to trigger a new calculation.\n // After the size is increased, the Title is cut at the bottom.\n }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n const iconElement = useMemo(() => {\n if (icon || isFixed) {\n return (\n <Icon\n icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n theme.accordionIcon !== 110 &&\n theme.accordionIcon !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n }, [icon, theme, isFixed]);\n\n let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n accordionHeadHeight = titleElementChildrenSize.height + 8;\n }\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: accordionHeadHeight }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n key={`accordionHead--${uuid}`}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\n >\n {iconElement}\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n $isWrapped={isWrapped}\n key={`accordionHeadContentWrapper--${uuid}`}\n >\n {typeof onTitleInputChange === 'function' ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider value={{ shouldChangeColor: true }}>\n <Input {...titleInputProps} value={title} onChange={onTitleInputChange} />\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n <AnimatePresence\n initial={false}\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitle\n animate={{ scale: 1 }}\n initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n exit={{ opacity: 0 }}\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n transition={{\n opacity: {\n duration: 0,\n },\n }}\n key={\n isOpen && !isWrapped\n ? `accordionHeadTitleBig--${uuid}`\n : `accordionHeadTitle--${uuid}`\n }\n >\n {title}\n </StyledMotionTitle>\n </AnimatePresence>\n </StyledMotionTitleWrapper>\n {titleElement && (\n <StyledMotionTitleElementWrapper\n layout\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper>\n <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n {typeof onSearchChange === 'function' && isOpen && (\n <StyledMotionSearchWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`searchWrapper--${uuid}`}\n >\n <SearchInput\n onChange={handleOnSearchChance}\n placeholder={searchPlaceholder}\n size={InputSize.Small}\n value={internalSearchValue}\n />\n </StyledMotionSearchWrapper>\n )}\n {rightElement && (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`rightElementWrapper--${uuid}`}\n onClick={\n !isFixed && !shouldPreventRightElementClick\n ? onClick\n : undefined\n }\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"AccordionHead.js","names":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_useElementSize","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","useState","closed","open","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","useEffect","handleOnSearchChance","event","target","value","titleElementChildrenSize","useElementSize","shouldUseChildElement","shouldPreventRightElementClick","useMemo","getElementClickEvent","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","StyledMotionAccordionHead","animate","initial","key","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","$isWrapped","AreaContext","Provider","shouldChangeColor","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","exit","$isOpen","$color","$hasSearch","transition","duration","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","StyledMotionSearchWrapper","placeholder","size","InputSize","Small","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n StyledAccordionIcon,\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionSearchWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchPlaceholder?: string;\n searchValue?: string;\n shouldRotateIcon?: boolean;\n title: string;\n titleElement?: ReactNode;\n uuid: string;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n titleColor?: CSSProperties['color'];\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldRotateIcon,\n title,\n titleElement,\n uuid,\n titleInputProps,\n onTitleInputChange,\n titleColor,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 33,\n open: isWrapped ? 40 : 33,\n });\n\n const theme = useTheme();\n\n const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n useEffect(() => {\n setInternalSearchValue(searchValue);\n }, [searchValue]);\n\n const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n setInternalSearchValue(event.target.value);\n if (typeof onSearchChange === 'function') {\n onSearchChange(event);\n }\n };\n\n const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n shouldUseChildElement: true,\n });\n\n const shouldPreventRightElementClick = useMemo(\n () => getElementClickEvent(rightElement),\n [rightElement],\n );\n\n useEffect(() => {\n if (typeof onTitleInputChange === 'function') {\n setHeadHeight({ closed: 50, open: 50 });\n } else {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n hasSearch: typeof onSearchChange === 'function',\n }),\n );\n }\n // The fontSize need to be included to trigger a new calculation.\n // After the size is increased, the Title is cut at the bottom.\n }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n const iconElement = useMemo(() => {\n if (icon || isFixed) {\n return (\n <Icon\n icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n theme.accordionIcon !== 110 &&\n theme.accordionIcon !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n }, [icon, theme, isFixed]);\n\n let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n accordionHeadHeight = titleElementChildrenSize.height + 8;\n }\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: accordionHeadHeight }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n key={`accordionHead--${uuid}`}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\n >\n {iconElement}\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n $isWrapped={isWrapped}\n key={`accordionHeadContentWrapper--${uuid}`}\n >\n {typeof onTitleInputChange === 'function' ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider value={{ shouldChangeColor: true }}>\n <Input {...titleInputProps} value={title} onChange={onTitleInputChange} />\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n <AnimatePresence\n initial={false}\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitle\n animate={{ scale: 1 }}\n initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n exit={{ opacity: 0 }}\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n transition={{\n opacity: {\n duration: 0,\n },\n }}\n key={\n isOpen && !isWrapped\n ? `accordionHeadTitleBig--${uuid}`\n : `accordionHeadTitle--${uuid}`\n }\n >\n {title}\n </StyledMotionTitle>\n </AnimatePresence>\n </StyledMotionTitleWrapper>\n {titleElement && (\n <StyledMotionTitleElementWrapper\n layout\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' || rightElement) && (\n <StyledRightWrapper>\n <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n {typeof onSearchChange === 'function' && isOpen && (\n <StyledMotionSearchWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`searchWrapper--${uuid}`}\n >\n <SearchInput\n onChange={handleOnSearchChance}\n placeholder={searchPlaceholder}\n size={InputSize.Small}\n value={internalSearchValue}\n />\n </StyledMotionSearchWrapper>\n )}\n {rightElement && (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`rightElementWrapper--${uuid}`}\n onClick={\n !isFixed && !shouldPreventRightElementClick\n ? onClick\n : undefined\n }\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.StyledRightWrapper = exports.StyledMotionTitleWrapper = exports.StyledMotionTitleElementWrapper = exports.StyledMotionTitle = exports.StyledMotionSearchWrapper = exports.StyledMotionRightInputIconWrapper = exports.StyledMotionRightInput = exports.StyledMotionRightElementWrapper = exports.StyledMotionIconWrapper = exports.StyledMotionContentWrapper = exports.StyledMotionAccordionHead = exports.StyledAccordionIcon = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _react = require("motion/react");
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
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); }
|
|
10
10
|
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 && {}.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; }
|
|
11
|
-
const StyledMotionAccordionHead = exports.StyledMotionAccordionHead = (0, _styledComponents.default)(
|
|
11
|
+
const StyledMotionAccordionHead = exports.StyledMotionAccordionHead = (0, _styledComponents.default)(_react.motion.div)`
|
|
12
12
|
align-items: center;
|
|
13
13
|
color: ${({
|
|
14
14
|
theme
|
|
@@ -17,7 +17,7 @@ const StyledMotionAccordionHead = exports.StyledMotionAccordionHead = (0, _style
|
|
|
17
17
|
overflow: hidden;
|
|
18
18
|
padding: 4px 0;
|
|
19
19
|
`;
|
|
20
|
-
const StyledMotionIconWrapper = exports.StyledMotionIconWrapper = (0, _styledComponents.default)(
|
|
20
|
+
const StyledMotionIconWrapper = exports.StyledMotionIconWrapper = (0, _styledComponents.default)(_react.motion.div)`
|
|
21
21
|
align-items: center;
|
|
22
22
|
cursor: ${({
|
|
23
23
|
onClick
|
|
@@ -43,7 +43,7 @@ const StyledAccordionIcon = exports.StyledAccordionIcon = _styledComponents.defa
|
|
|
43
43
|
font-family: 'Font Awesome 6 Pro', Fontawesome !important;
|
|
44
44
|
}
|
|
45
45
|
`;
|
|
46
|
-
const StyledMotionContentWrapper = exports.StyledMotionContentWrapper = (0, _styledComponents.default)(
|
|
46
|
+
const StyledMotionContentWrapper = exports.StyledMotionContentWrapper = (0, _styledComponents.default)(_react.motion.div)`
|
|
47
47
|
align-self: flex-start;
|
|
48
48
|
cursor: ${({
|
|
49
49
|
onClick
|
|
@@ -60,12 +60,12 @@ const StyledMotionContentWrapper = exports.StyledMotionContentWrapper = (0, _sty
|
|
|
60
60
|
align-items: center;
|
|
61
61
|
`}
|
|
62
62
|
`;
|
|
63
|
-
const StyledMotionTitleWrapper = exports.StyledMotionTitleWrapper = (0, _styledComponents.default)(
|
|
63
|
+
const StyledMotionTitleWrapper = exports.StyledMotionTitleWrapper = (0, _styledComponents.default)(_react.motion.div)`
|
|
64
64
|
display: grid;
|
|
65
65
|
flex: 0 1 auto;
|
|
66
66
|
grid-template-areas: 'header';
|
|
67
67
|
`;
|
|
68
|
-
const StyledMotionTitle = exports.StyledMotionTitle = (0, _styledComponents.default)(
|
|
68
|
+
const StyledMotionTitle = exports.StyledMotionTitle = (0, _styledComponents.default)(_react.motion.div)`
|
|
69
69
|
font-size: ${({
|
|
70
70
|
$isOpen,
|
|
71
71
|
$isWrapped
|
|
@@ -101,7 +101,7 @@ const StyledMotionTitle = exports.StyledMotionTitle = (0, _styledComponents.defa
|
|
|
101
101
|
align-content: center;
|
|
102
102
|
`}
|
|
103
103
|
`;
|
|
104
|
-
const StyledMotionTitleElementWrapper = exports.StyledMotionTitleElementWrapper = (0, _styledComponents.default)(
|
|
104
|
+
const StyledMotionTitleElementWrapper = exports.StyledMotionTitleElementWrapper = (0, _styledComponents.default)(_react.motion.div)`
|
|
105
105
|
align-items: center;
|
|
106
106
|
display: flex;
|
|
107
107
|
flex: 1 1 auto;
|
|
@@ -116,11 +116,11 @@ const StyledRightWrapper = exports.StyledRightWrapper = _styledComponents.defaul
|
|
|
116
116
|
overflow: hidden;
|
|
117
117
|
position: relative;
|
|
118
118
|
`;
|
|
119
|
-
const StyledMotionSearchWrapper = exports.StyledMotionSearchWrapper = (0, _styledComponents.default)(
|
|
119
|
+
const StyledMotionSearchWrapper = exports.StyledMotionSearchWrapper = (0, _styledComponents.default)(_react.motion.div)`
|
|
120
120
|
align-items: center;
|
|
121
121
|
display: flex;
|
|
122
122
|
`;
|
|
123
|
-
const StyledMotionRightElementWrapper = exports.StyledMotionRightElementWrapper = (0, _styledComponents.default)(
|
|
123
|
+
const StyledMotionRightElementWrapper = exports.StyledMotionRightElementWrapper = (0, _styledComponents.default)(_react.motion.div)`
|
|
124
124
|
align-items: center;
|
|
125
125
|
display: flex;
|
|
126
126
|
|
|
@@ -130,7 +130,7 @@ const StyledMotionRightElementWrapper = exports.StyledMotionRightElementWrapper
|
|
|
130
130
|
|
|
131
131
|
will-change: unset !important;
|
|
132
132
|
`;
|
|
133
|
-
const StyledMotionRightInput = exports.StyledMotionRightInput = (0, _styledComponents.default)(
|
|
133
|
+
const StyledMotionRightInput = exports.StyledMotionRightInput = (0, _styledComponents.default)(_react.motion.input)`
|
|
134
134
|
background-color: transparent;
|
|
135
135
|
border: 1px solid transparent;
|
|
136
136
|
border-bottom-color: rgba(
|
|
@@ -147,7 +147,7 @@ const StyledMotionRightInput = exports.StyledMotionRightInput = (0, _styledCompo
|
|
|
147
147
|
$hasIcon
|
|
148
148
|
}) => $hasIcon ? '5px 23px 5px 1px' : '5px 1px'};
|
|
149
149
|
`;
|
|
150
|
-
const StyledMotionRightInputIconWrapper = exports.StyledMotionRightInputIconWrapper = (0, _styledComponents.default)(
|
|
150
|
+
const StyledMotionRightInputIconWrapper = exports.StyledMotionRightInputIconWrapper = (0, _styledComponents.default)(_react.motion.div)`
|
|
151
151
|
align-items: center;
|
|
152
152
|
display: flex;
|
|
153
153
|
height: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.styles.js","names":["
|
|
1
|
+
{"version":3,"file":"AccordionHead.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","headline","$icon","StyledMotionContentWrapper","$isWrapped","css","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type {\n FramerMotionBugFix,\n WithTheme,\n} from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n display: flex;\n overflow: hidden;\n padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n align-items: center;\n justify-content: center;\n display: flex;\n color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n &:before {\n content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n }\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n align-self: flex-start;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n overflow: hidden;\n margin-right: 10px;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-items: center;\n `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)<FramerMotionBugFix>`\n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n $isOpen: boolean;\n $isWrapped: boolean;\n $color?: CSSProperties['color'];\n $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n grid-area: header;\n height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n transform-origin: top left;\n user-select: none;\n color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n will-change: unset !important;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-content: center;\n `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n margin-left: 8px;\n min-width: 0;\n`;\n\nexport const StyledRightWrapper = styled.div`\n display: flex;\n flex: 0 0 auto;\n gap: 8px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n\n will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n background-color: transparent;\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n 0.45\n );\n color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n grid-area: header;\n padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var
|
|
8
|
-
var
|
|
7
|
+
var _react = require("motion/react");
|
|
8
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _amountControl = require("../../utils/amountControl");
|
|
10
10
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
11
11
|
var _AmountControl = require("./AmountControl.styles");
|
|
@@ -26,16 +26,16 @@ const AmountControl = ({
|
|
|
26
26
|
shouldShowWideInput = false,
|
|
27
27
|
step: stepProp = 1
|
|
28
28
|
}) => {
|
|
29
|
-
const [amountValue, setAmountValue] = (0,
|
|
30
|
-
const [inputValue, setInputValue] = (0,
|
|
31
|
-
const [displayState, setDisplayState] = (0,
|
|
32
|
-
const step = (0,
|
|
33
|
-
const inputRef = (0,
|
|
29
|
+
const [amountValue, setAmountValue] = (0, _react2.useState)(minAmount);
|
|
30
|
+
const [inputValue, setInputValue] = (0, _react2.useState)(minAmount.toString());
|
|
31
|
+
const [displayState, setDisplayState] = (0, _react2.useState)('default');
|
|
32
|
+
const step = (0, _react2.useMemo)(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
|
|
33
|
+
const inputRef = (0, _react2.useRef)(null);
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
36
|
* This function controls the displayState
|
|
37
37
|
*/
|
|
38
|
-
(0,
|
|
38
|
+
(0, _react2.useEffect)(() => {
|
|
39
39
|
switch (true) {
|
|
40
40
|
case maxAmount === 1 && amountValue === 1:
|
|
41
41
|
setDisplayState('delete');
|
|
@@ -53,13 +53,13 @@ const AmountControl = ({
|
|
|
53
53
|
setDisplayState('default');
|
|
54
54
|
}
|
|
55
55
|
}, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);
|
|
56
|
-
const hasFocus = (0,
|
|
56
|
+
const hasFocus = (0, _react2.useMemo)(() => displayState !== 'default', [displayState]);
|
|
57
57
|
|
|
58
58
|
/**
|
|
59
59
|
* Function that sets the amountValue to the amount
|
|
60
60
|
*/
|
|
61
|
-
(0,
|
|
62
|
-
if (typeof amount !==
|
|
61
|
+
(0, _react2.useEffect)(() => {
|
|
62
|
+
if (typeof amount !== 'number') {
|
|
63
63
|
return;
|
|
64
64
|
}
|
|
65
65
|
setAmountValue((0, _amountControl.checkForValidAmount)({
|
|
@@ -73,7 +73,7 @@ const AmountControl = ({
|
|
|
73
73
|
minAmount
|
|
74
74
|
}).toString());
|
|
75
75
|
}, [amount, maxAmount, minAmount]);
|
|
76
|
-
const handleAmountAdd = (0,
|
|
76
|
+
const handleAmountAdd = (0, _react2.useCallback)(() => {
|
|
77
77
|
setAmountValue(prevState => {
|
|
78
78
|
const newAmount = (0, _amountControl.checkForValidAmount)({
|
|
79
79
|
amount: prevState + step,
|
|
@@ -91,7 +91,7 @@ const AmountControl = ({
|
|
|
91
91
|
maxAmount
|
|
92
92
|
}).toString());
|
|
93
93
|
}, [amount, maxAmount, minAmount, onChange, step]);
|
|
94
|
-
const handleAmountRemove = (0,
|
|
94
|
+
const handleAmountRemove = (0, _react2.useCallback)(() => {
|
|
95
95
|
if (displayState === 'default') {
|
|
96
96
|
return;
|
|
97
97
|
}
|
|
@@ -112,7 +112,7 @@ const AmountControl = ({
|
|
|
112
112
|
maxAmount
|
|
113
113
|
}).toString());
|
|
114
114
|
}, [displayState, maxAmount, minAmount, onChange, step]);
|
|
115
|
-
const handleFirstAmount = (0,
|
|
115
|
+
const handleFirstAmount = (0, _react2.useCallback)(() => {
|
|
116
116
|
if (amountValue !== minAmount) {
|
|
117
117
|
return;
|
|
118
118
|
}
|
|
@@ -122,7 +122,7 @@ const AmountControl = ({
|
|
|
122
122
|
setAmountValue(minAmount + step);
|
|
123
123
|
setInputValue((minAmount + step).toString());
|
|
124
124
|
}, [amountValue, minAmount, onChange, step]);
|
|
125
|
-
const handleDeleteIconClick = (0,
|
|
125
|
+
const handleDeleteIconClick = (0, _react2.useCallback)(() => {
|
|
126
126
|
if (inputValue === '0') {
|
|
127
127
|
window.setTimeout(() => {
|
|
128
128
|
var _inputRef$current;
|
|
@@ -132,7 +132,7 @@ const AmountControl = ({
|
|
|
132
132
|
handleAmountRemove();
|
|
133
133
|
}
|
|
134
134
|
}, [handleAmountRemove, inputValue]);
|
|
135
|
-
const handleInputBlur = (0,
|
|
135
|
+
const handleInputBlur = (0, _react2.useCallback)(() => {
|
|
136
136
|
const checkedValue = (0, _amountControl.checkForValidAmount)({
|
|
137
137
|
minAmount,
|
|
138
138
|
maxAmount,
|
|
@@ -147,7 +147,7 @@ const AmountControl = ({
|
|
|
147
147
|
setInputValue(minAmount.toString());
|
|
148
148
|
}
|
|
149
149
|
}, [inputValue, maxAmount, minAmount, onChange, step]);
|
|
150
|
-
const handleInputChange = (0,
|
|
150
|
+
const handleInputChange = (0, _react2.useCallback)(event => {
|
|
151
151
|
const {
|
|
152
152
|
value
|
|
153
153
|
} = event.target;
|
|
@@ -158,32 +158,32 @@ const AmountControl = ({
|
|
|
158
158
|
}
|
|
159
159
|
setInputValue(valueBefore === 0 ? '' : valueBefore.toString());
|
|
160
160
|
}, [minAmount]);
|
|
161
|
-
const leftIcon = (0,
|
|
161
|
+
const leftIcon = (0, _react2.useMemo)(() => {
|
|
162
162
|
let item = null;
|
|
163
163
|
switch (displayState) {
|
|
164
164
|
case 'default':
|
|
165
|
-
item = /*#__PURE__*/
|
|
165
|
+
item = /*#__PURE__*/_react2.default.createElement(_Icon.default, {
|
|
166
166
|
icons: [icon ?? 'fa fa-cart-shopping'],
|
|
167
167
|
size: 15,
|
|
168
168
|
color: iconColor
|
|
169
169
|
});
|
|
170
170
|
break;
|
|
171
171
|
case 'delete':
|
|
172
|
-
item = /*#__PURE__*/
|
|
172
|
+
item = /*#__PURE__*/_react2.default.createElement(_Icon.default, {
|
|
173
173
|
icons: ['fa ts-check'],
|
|
174
174
|
size: 20,
|
|
175
175
|
color: "white"
|
|
176
176
|
});
|
|
177
177
|
break;
|
|
178
178
|
case 'normal':
|
|
179
|
-
item = /*#__PURE__*/
|
|
179
|
+
item = /*#__PURE__*/_react2.default.createElement(_Icon.default, {
|
|
180
180
|
icons: ['fa fa-minus'],
|
|
181
181
|
size: 15,
|
|
182
182
|
color: "red"
|
|
183
183
|
});
|
|
184
184
|
break;
|
|
185
185
|
case 'maxAmount':
|
|
186
|
-
item = /*#__PURE__*/
|
|
186
|
+
item = /*#__PURE__*/_react2.default.createElement(_Icon.default, {
|
|
187
187
|
icons: ['fa fa-minus'],
|
|
188
188
|
size: 15,
|
|
189
189
|
color: "red"
|
|
@@ -194,7 +194,7 @@ const AmountControl = ({
|
|
|
194
194
|
}
|
|
195
195
|
return item;
|
|
196
196
|
}, [displayState, icon, iconColor]);
|
|
197
|
-
const shouldShowLeftIcon = (0,
|
|
197
|
+
const shouldShowLeftIcon = (0, _react2.useMemo)(() => {
|
|
198
198
|
if (shouldShowAddIconOnMinAmount && displayState === 'minAmount') {
|
|
199
199
|
return false;
|
|
200
200
|
}
|
|
@@ -203,12 +203,12 @@ const AmountControl = ({
|
|
|
203
203
|
}
|
|
204
204
|
return !((displayState === 'default' || displayState === 'minAmount') && !shouldShowIcon);
|
|
205
205
|
}, [displayState, shouldShowAddIconOnMinAmount, shouldShowIcon]);
|
|
206
|
-
return (0,
|
|
206
|
+
return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledAmountControl, {
|
|
207
207
|
onClick: handleFirstAmount,
|
|
208
208
|
$isDisabled: isDisabled
|
|
209
|
-
}, /*#__PURE__*/
|
|
209
|
+
}, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
210
210
|
initial: false
|
|
211
|
-
}, shouldShowLeftIcon && /*#__PURE__*/
|
|
211
|
+
}, shouldShowLeftIcon && /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
|
|
212
212
|
key: "right_button",
|
|
213
213
|
initial: {
|
|
214
214
|
width: 0,
|
|
@@ -234,10 +234,10 @@ const AmountControl = ({
|
|
|
234
234
|
$color: displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined,
|
|
235
235
|
disabled: amountValue !== 0 && amountValue <= minAmount,
|
|
236
236
|
$isDisabled: amountValue !== 0 && amountValue <= minAmount
|
|
237
|
-
}, leftIcon)), displayState === 'delete' || inputValue === '0' ? /*#__PURE__*/
|
|
237
|
+
}, leftIcon)), displayState === 'delete' || inputValue === '0' ? /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledAmountControlPseudoInput, {
|
|
238
238
|
onClick: handleDeleteIconClick,
|
|
239
239
|
$shouldShowWideInput: shouldShowWideInput
|
|
240
|
-
}, displayState === 'default' && label ? label : inputValue) : /*#__PURE__*/
|
|
240
|
+
}, displayState === 'default' && label ? label : inputValue) : /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledAmountControlInput, {
|
|
241
241
|
ref: inputRef,
|
|
242
242
|
$displayState: displayState,
|
|
243
243
|
$shouldShowIcon: shouldShowIcon,
|
|
@@ -246,9 +246,9 @@ const AmountControl = ({
|
|
|
246
246
|
onBlur: handleInputBlur,
|
|
247
247
|
onChange: handleInputChange,
|
|
248
248
|
value: displayState === 'default' && label ? label : inputValue
|
|
249
|
-
}), /*#__PURE__*/
|
|
249
|
+
}), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
250
250
|
initial: false
|
|
251
|
-
}, (displayState === 'normal' || displayState === 'minAmount') && /*#__PURE__*/
|
|
251
|
+
}, (displayState === 'normal' || displayState === 'minAmount') && /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
|
|
252
252
|
key: "right_button",
|
|
253
253
|
initial: {
|
|
254
254
|
width: 0,
|
|
@@ -273,7 +273,7 @@ const AmountControl = ({
|
|
|
273
273
|
$isWide: true,
|
|
274
274
|
disabled: maxAmount ? amountValue >= maxAmount : false,
|
|
275
275
|
$isDisabled: maxAmount ? amountValue >= maxAmount : false
|
|
276
|
-
}, /*#__PURE__*/
|
|
276
|
+
}, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
|
|
277
277
|
icons: ['fa fa-plus'],
|
|
278
278
|
size: 15,
|
|
279
279
|
color: "green"
|