@chayns-components/core 5.0.47 → 5.0.49
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/AGENTS.md +60 -0
- package/lib/cjs/components/filter/Filter.js +24 -8
- package/lib/cjs/components/filter/Filter.js.map +1 -1
- package/lib/cjs/components/filter/filter-content/FIlterContent.js +6 -2
- package/lib/cjs/components/filter/filter-content/FIlterContent.js.map +1 -1
- package/lib/cjs/components/filter/filter-content/FilterContent.styles.js +19 -3
- package/lib/cjs/components/filter/filter-content/FilterContent.styles.js.map +1 -1
- package/lib/cjs/types/filter.js +2 -1
- package/lib/cjs/types/filter.js.map +1 -1
- package/lib/esm/components/filter/Filter.js +24 -8
- package/lib/esm/components/filter/Filter.js.map +1 -1
- package/lib/esm/components/filter/filter-content/FIlterContent.js +7 -3
- package/lib/esm/components/filter/filter-content/FIlterContent.js.map +1 -1
- package/lib/esm/components/filter/filter-content/FilterContent.styles.js +18 -2
- package/lib/esm/components/filter/filter-content/FilterContent.styles.js.map +1 -1
- package/lib/esm/types/filter.js +2 -1
- package/lib/esm/types/filter.js.map +1 -1
- package/lib/types/components/filter/Filter.d.ts +2 -1
- package/lib/types/components/filter/filter-content/FIlterContent.d.ts +2 -1
- package/lib/types/components/filter/filter-content/FilterContent.styles.d.ts +3 -0
- package/lib/types/types/filter.d.ts +6 -1
- package/package.json +2 -2
package/AGENTS.md
CHANGED
|
@@ -1698,6 +1698,32 @@ import { Filter } from '@chayns-components/core';
|
|
|
1698
1698
|
selectedItem: { text: 'alphanumerisch', id: 'alphanumerisch' },
|
|
1699
1699
|
onSortChange: () => {},
|
|
1700
1700
|
}}
|
|
1701
|
+
comboboxConfig={{
|
|
1702
|
+
label: 'Kategorie wählen',
|
|
1703
|
+
placeholder: 'Keine Kategorie gewählt',
|
|
1704
|
+
lists: [
|
|
1705
|
+
{
|
|
1706
|
+
list: [
|
|
1707
|
+
{ text: 'Alle Kategorien', value: 'all', icons: ['fa fa-list'] },
|
|
1708
|
+
{
|
|
1709
|
+
text: 'Lebensmittel',
|
|
1710
|
+
value: 'food',
|
|
1711
|
+
icons: ['fa fa-burger'],
|
|
1712
|
+
subtext: 'Frisch & regional',
|
|
1713
|
+
},
|
|
1714
|
+
{ text: 'Getränke', value: 'drinks', icons: ['fa fa-bottle-water'] },
|
|
1715
|
+
{ text: 'Haushalt', value: 'household', icons: ['fa fa-soap'] },
|
|
1716
|
+
{
|
|
1717
|
+
text: 'Elektronik',
|
|
1718
|
+
value: 'electronics',
|
|
1719
|
+
icons: ['fa fa-bolt'],
|
|
1720
|
+
subtext: 'Smartphones, TV & mehr',
|
|
1721
|
+
},
|
|
1722
|
+
{ text: 'Bekleidung', value: 'clothing', icons: ['fa fa-tshirt'] },
|
|
1723
|
+
],
|
|
1724
|
+
},
|
|
1725
|
+
],
|
|
1726
|
+
}}
|
|
1701
1727
|
/>
|
|
1702
1728
|
```
|
|
1703
1729
|
|
|
@@ -1782,6 +1808,40 @@ import { Filter } from '@chayns-components/core';
|
|
|
1782
1808
|
/>
|
|
1783
1809
|
```
|
|
1784
1810
|
|
|
1811
|
+
#### Only Combobox
|
|
1812
|
+
|
|
1813
|
+
```tsx
|
|
1814
|
+
<Filter
|
|
1815
|
+
headline={'Combobox'}
|
|
1816
|
+
comboboxConfig={{
|
|
1817
|
+
label: 'Kategorie wählen',
|
|
1818
|
+
placeholder: 'Keine Kategorie gewählt',
|
|
1819
|
+
lists: [
|
|
1820
|
+
{
|
|
1821
|
+
list: [
|
|
1822
|
+
{ text: 'Alle Kategorien', value: 'all', icons: ['fa fa-list'] },
|
|
1823
|
+
{
|
|
1824
|
+
text: 'Lebensmittel',
|
|
1825
|
+
value: 'food',
|
|
1826
|
+
icons: ['fa fa-burger'],
|
|
1827
|
+
subtext: 'Frisch & regional',
|
|
1828
|
+
},
|
|
1829
|
+
{ text: 'Getränke', value: 'drinks', icons: ['fa fa-bottle-water'] },
|
|
1830
|
+
{ text: 'Haushalt', value: 'household', icons: ['fa fa-soap'] },
|
|
1831
|
+
{
|
|
1832
|
+
text: 'Elektronik',
|
|
1833
|
+
value: 'electronics',
|
|
1834
|
+
icons: ['fa fa-bolt'],
|
|
1835
|
+
subtext: 'Smartphones, TV & mehr',
|
|
1836
|
+
},
|
|
1837
|
+
{ text: 'Bekleidung', value: 'clothing', icons: ['fa fa-tshirt'] },
|
|
1838
|
+
],
|
|
1839
|
+
},
|
|
1840
|
+
],
|
|
1841
|
+
}}
|
|
1842
|
+
/>
|
|
1843
|
+
```
|
|
1844
|
+
|
|
1785
1845
|
### Props
|
|
1786
1846
|
|
|
1787
1847
|
No prop documentation available.
|
|
@@ -9,6 +9,7 @@ var _Filter = require("./Filter.styles");
|
|
|
9
9
|
var _ExpandableContent = _interopRequireDefault(require("../expandable-content/ExpandableContent"));
|
|
10
10
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
11
11
|
var _FIlterContent = _interopRequireDefault(require("./filter-content/FIlterContent"));
|
|
12
|
+
var _ComboBox = _interopRequireDefault(require("../combobox/ComboBox"));
|
|
12
13
|
var _filter = require("../../types/filter");
|
|
13
14
|
var _SearchInput = _interopRequireDefault(require("../search-input/SearchInput"));
|
|
14
15
|
var _ContextMenu = _interopRequireDefault(require("../context-menu/ContextMenu"));
|
|
@@ -25,6 +26,7 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
25
26
|
shouldShowRoundedHoverEffect = false,
|
|
26
27
|
filterButtonConfig,
|
|
27
28
|
checkboxConfig,
|
|
29
|
+
comboboxConfig,
|
|
28
30
|
onActiveChange,
|
|
29
31
|
rightIcons
|
|
30
32
|
}, ref) => {
|
|
@@ -42,20 +44,23 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
42
44
|
const searchRef = (0, _react.useRef)(null);
|
|
43
45
|
const contextMenuRef = (0, _react.useRef)(null);
|
|
44
46
|
const type = (0, _react.useMemo)(() => {
|
|
45
|
-
if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig) {
|
|
47
|
+
if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig && !comboboxConfig) {
|
|
46
48
|
return _filter.FilterType.ONLY_FILTER;
|
|
47
49
|
}
|
|
48
|
-
if (!filterButtonConfig && !searchConfig && sortConfig && !checkboxConfig) {
|
|
50
|
+
if (!filterButtonConfig && !searchConfig && sortConfig && !checkboxConfig && !comboboxConfig) {
|
|
49
51
|
return _filter.FilterType.ONLY_SORT;
|
|
50
52
|
}
|
|
51
|
-
if (!filterButtonConfig && searchConfig && !sortConfig && !checkboxConfig) {
|
|
53
|
+
if (!filterButtonConfig && searchConfig && !sortConfig && !checkboxConfig && !comboboxConfig) {
|
|
52
54
|
return _filter.FilterType.ONLY_SEARCH;
|
|
53
55
|
}
|
|
54
|
-
if (!filterButtonConfig && !searchConfig && !sortConfig && checkboxConfig) {
|
|
56
|
+
if (!filterButtonConfig && !searchConfig && !sortConfig && checkboxConfig && !comboboxConfig) {
|
|
55
57
|
return _filter.FilterType.ONLY_CHECKBOX;
|
|
56
58
|
}
|
|
59
|
+
if (!filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig && comboboxConfig) {
|
|
60
|
+
return _filter.FilterType.ONLY_COMBOBOX;
|
|
61
|
+
}
|
|
57
62
|
return _filter.FilterType.MULTIPLE;
|
|
58
|
-
}, [checkboxConfig, filterButtonConfig, searchConfig, sortConfig]);
|
|
63
|
+
}, [checkboxConfig, comboboxConfig, filterButtonConfig, searchConfig, sortConfig]);
|
|
59
64
|
const icons = (0, _react.useMemo)(() => {
|
|
60
65
|
switch (type) {
|
|
61
66
|
case _filter.FilterType.ONLY_FILTER:
|
|
@@ -174,6 +179,16 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
174
179
|
})
|
|
175
180
|
}));
|
|
176
181
|
}, [sortConfig]);
|
|
182
|
+
const comboboxElement = (0, _react.useMemo)(() => {
|
|
183
|
+
if (!comboboxConfig) {
|
|
184
|
+
return null;
|
|
185
|
+
}
|
|
186
|
+
return (
|
|
187
|
+
/*#__PURE__*/
|
|
188
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
189
|
+
_react.default.createElement(_ComboBox.default, comboboxConfig)
|
|
190
|
+
);
|
|
191
|
+
}, [comboboxConfig]);
|
|
177
192
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Filter.StyledFilter, {
|
|
178
193
|
ref: filterRef
|
|
179
194
|
}, /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterHead, null, ! /*#__PURE__*/(0, _react.isValidElement)(headline) ? /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterHeadline, {
|
|
@@ -205,7 +220,7 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
205
220
|
}, iconElement), type === _filter.FilterType.ONLY_CHECKBOX && checkboxConfig &&
|
|
206
221
|
/*#__PURE__*/
|
|
207
222
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
208
|
-
_react.default.createElement(_Checkbox.default, checkboxConfig)), [_filter.FilterType.MULTIPLE, _filter.FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterContentWrapper, {
|
|
223
|
+
_react.default.createElement(_Checkbox.default, checkboxConfig), type === _filter.FilterType.ONLY_COMBOBOX && comboboxElement), [_filter.FilterType.MULTIPLE, _filter.FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterContentWrapper, {
|
|
209
224
|
ref: contentRef
|
|
210
225
|
}, /*#__PURE__*/_react.default.createElement(_ExpandableContent.default, {
|
|
211
226
|
isOpen: isOpen,
|
|
@@ -215,8 +230,9 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
215
230
|
searchConfig: searchConfig,
|
|
216
231
|
filterButtonConfig: filterButtonConfig,
|
|
217
232
|
sortConfig: sortConfig,
|
|
218
|
-
checkboxConfig: checkboxConfig
|
|
219
|
-
|
|
233
|
+
checkboxConfig: checkboxConfig,
|
|
234
|
+
comboboxConfig: comboboxConfig
|
|
235
|
+
})))), [headline, isSearchActive, type, rightIcons, iconElement, backgroundDistance, backgroundElement, searchConfig, sortConfig, sortItems, checkboxConfig, isOpen, shouldFocus, filterButtonConfig, comboboxConfig, comboboxElement, shouldShowRoundedHoverEffect]);
|
|
220
236
|
});
|
|
221
237
|
Filter.displayName = 'Filter';
|
|
222
238
|
var _default = exports.default = Filter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.js","names":["_react","_interopRequireWildcard","require","_Filter","_ExpandableContent","_interopRequireDefault","_Icon","_FIlterContent","_filter","_SearchInput","_ContextMenu","_Checkbox","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Filter","forwardRef","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","onActiveChange","rightIcons","ref","isOpen","setIsOpen","useState","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","backgroundDistance","setBackgroundDistance","backgroundCoordinates","setBackgroundCoordinates","top","left","contentRef","useRef","iconRef","filterRef","searchRef","contextMenuRef","type","useMemo","FilterType","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","MULTIPLE","icons","useEffect","handleHide","useCallback","current","hide","_searchRef$current","focus","window","setTimeout","handleShow","useImperativeHandle","show","handleIconClick","iconRect","getBoundingClientRect","filterRect","contentRect","relativeTop","bottom","relativeLeft","iconElement","createElement","StyledFilterIcon","onClick","$isOpen","$shouldShowRoundedHoverEffect","size","backgroundElement","StyledMotionFilterBackground","$top","$left","animate","height","transition","duration","delay","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","StyledFilter","StyledFilterHead","isValidElement","StyledFilterHeadline","$isSearchActive","StyledFilterHeadlineElement","includes","Fragment","StyledFilterIconWrapper","rIcons","StyledFilterSearch","isActive","value","searchValue","onChange","ev","onSearchChange","target","StyledFilterContentWrapper","startDelay","displayName","_default","exports"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n forwardRef,\n isValidElement,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledFilter,\n StyledFilterContentWrapper,\n StyledFilterHead,\n StyledFilterHeadline,\n StyledFilterHeadlineElement,\n StyledFilterIcon,\n StyledFilterIconWrapper,\n StyledFilterSearch,\n StyledMotionFilterBackground,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FIlterContent';\nimport {\n CheckboxConfig,\n FilterButtonConfig,\n FilterRef,\n FilterType,\n SearchConfig,\n SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Checkbox from '../checkbox/Checkbox';\nimport { InputRef } from '../input/Input';\nimport type { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport interface FilterRightIcon {\n icons: string[];\n onClick: VoidFunction;\n}\n\n//\nexport type FilterProps = {\n headline: ReactNode;\n searchConfig?: SearchConfig;\n filterButtonConfig?: FilterButtonConfig;\n sortConfig?: SortConfig;\n checkboxConfig?: CheckboxConfig;\n onActiveChange?: (isActive: boolean) => void;\n shouldShowRoundedHoverEffect?: boolean;\n rightIcons?: FilterRightIcon[];\n shouldAutoFocus?: boolean;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n (\n {\n headline,\n searchConfig,\n sortConfig,\n shouldAutoFocus = false,\n shouldShowRoundedHoverEffect = false,\n filterButtonConfig,\n checkboxConfig,\n onActiveChange,\n rightIcons,\n },\n ref,\n ) => {\n const [isOpen, setIsOpen] = useState(false);\n const [isSearchActive, setIsSearchActive] = useState(false);\n const [shouldFocus, setShouldFocus] = useState(false);\n const [backgroundDistance, setBackgroundDistance] = useState(0);\n const [backgroundCoordinates, setBackgroundCoordinates] = useState({ top: 0, left: 0 });\n\n const contentRef = useRef<HTMLDivElement | null>(null);\n const iconRef = useRef<HTMLDivElement | null>(null);\n const filterRef = useRef<HTMLDivElement | null>(null);\n const searchRef = useRef<InputRef | null>(null);\n\n const contextMenuRef = useRef<ContextMenuRef>(null);\n\n const type = useMemo(() => {\n if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig) {\n return FilterType.ONLY_FILTER;\n }\n\n if (!filterButtonConfig && !searchConfig && sortConfig && !checkboxConfig) {\n return FilterType.ONLY_SORT;\n }\n\n if (!filterButtonConfig && searchConfig && !sortConfig && !checkboxConfig) {\n return FilterType.ONLY_SEARCH;\n }\n\n if (!filterButtonConfig && !searchConfig && !sortConfig && checkboxConfig) {\n return FilterType.ONLY_CHECKBOX;\n }\n\n return FilterType.MULTIPLE;\n }, [checkboxConfig, filterButtonConfig, searchConfig, sortConfig]);\n\n const icons = useMemo(() => {\n switch (type) {\n case FilterType.ONLY_FILTER:\n return ['fa fa-filter'];\n case FilterType.ONLY_SORT:\n return ['fa fa-arrow-up-arrow-down'];\n default:\n return ['fa fa-search'];\n }\n }, [type]);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isOpen);\n }\n }, [isOpen, onActiveChange]);\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(false);\n }\n }, [type]);\n\n useEffect(() => {\n if (shouldFocus) {\n searchRef.current?.focus();\n\n window.setTimeout(() => {\n setShouldFocus(false);\n }, 200);\n }\n }, [shouldFocus]);\n\n const handleShow = useCallback(() => {\n setIsOpen(true);\n\n if (shouldAutoFocus) {\n setShouldFocus(true);\n }\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(true);\n }\n }, [shouldAutoFocus, type]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n const handleIconClick = useCallback(() => {\n if (isOpen) {\n handleHide();\n } else {\n handleShow();\n }\n }, [handleHide, handleShow, isOpen]);\n\n useEffect(() => {\n if (headline && iconRef.current && contentRef.current && filterRef.current) {\n const iconRect = iconRef.current.getBoundingClientRect();\n const filterRect = filterRef.current.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const relativeTop = iconRect.bottom - filterRect.top;\n const relativeLeft = iconRect.left - filterRect.left;\n\n setBackgroundDistance(contentRect.top - iconRect.bottom);\n setBackgroundCoordinates({\n top: relativeTop,\n left: relativeLeft,\n });\n } else {\n setBackgroundDistance(0);\n setBackgroundCoordinates({ top: 0, left: 0 });\n }\n }, [headline]);\n\n const iconElement = useMemo(\n () => (\n <StyledFilterIcon\n onClick={handleIconClick}\n $isOpen={isOpen}\n ref={iconRef}\n $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n >\n <Icon icons={icons} size={18} />\n </StyledFilterIcon>\n ),\n [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect],\n );\n\n const backgroundElement = useMemo(\n () => (\n <StyledMotionFilterBackground\n $top={backgroundCoordinates.top}\n $left={backgroundCoordinates.left}\n animate={{ height: isOpen ? `${backgroundDistance}px` : 0 }}\n transition={{ duration: 0.1, delay: isOpen ? 0 : 0.2 }}\n />\n ),\n [backgroundDistance, isOpen, backgroundCoordinates],\n );\n\n const sortItems: ContextMenuItem[] = useMemo(() => {\n if (!sortConfig) {\n return [];\n }\n\n const { selectedItem, onSortChange } = sortConfig;\n\n return sortConfig.items.map(({ id, text }) => ({\n text,\n key: id.toString(),\n isSelected: id === selectedItem.id,\n icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],\n onClick: () => onSortChange({ text, id }),\n }));\n }, [sortConfig]);\n\n return useMemo(\n () => (\n <StyledFilter ref={filterRef}>\n <StyledFilterHead>\n {!isValidElement(headline) ? (\n <StyledFilterHeadline $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadline>\n ) : (\n <StyledFilterHeadlineElement $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadlineElement>\n )}\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <>\n <StyledFilterIconWrapper>\n {rightIcons &&\n rightIcons.map(({ icons: rIcons, onClick }) => (\n <StyledFilterIcon\n onClick={onClick}\n $isOpen={false}\n $shouldShowRoundedHoverEffect={\n shouldShowRoundedHoverEffect\n }\n >\n <Icon icons={rIcons} size={18} />\n </StyledFilterIcon>\n ))}\n {iconElement}\n </StyledFilterIconWrapper>\n {backgroundDistance > 0 && backgroundElement}\n </>\n )}\n {type === FilterType.ONLY_SEARCH && searchConfig && (\n <StyledFilterSearch>\n <SearchInput\n onActiveChange={(isActive) => {\n setIsSearchActive(isActive);\n setIsOpen(isActive);\n }}\n ref={searchRef}\n isActive={isSearchActive}\n value={searchConfig.searchValue}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n />\n </StyledFilterSearch>\n )}\n {type === FilterType.ONLY_SORT && sortConfig && (\n <ContextMenu ref={contextMenuRef} items={sortItems}>\n {iconElement}\n </ContextMenu>\n )}\n {type === FilterType.ONLY_CHECKBOX && checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox {...checkboxConfig} />\n )}\n </StyledFilterHead>\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <StyledFilterContentWrapper ref={contentRef}>\n <ExpandableContent\n isOpen={isOpen}\n startDelay={backgroundDistance > 0 ? 0.1 : 0}\n >\n <FilterContent\n shouldAutoFocus={shouldFocus}\n searchConfig={searchConfig}\n filterButtonConfig={filterButtonConfig}\n sortConfig={sortConfig}\n checkboxConfig={checkboxConfig}\n />\n </ExpandableContent>\n </StyledFilterContentWrapper>\n )}\n </StyledFilter>\n ),\n [\n headline,\n isSearchActive,\n type,\n rightIcons,\n iconElement,\n backgroundDistance,\n backgroundElement,\n searchConfig,\n sortConfig,\n sortItems,\n checkboxConfig,\n isOpen,\n shouldFocus,\n filterButtonConfig,\n shouldShowRoundedHoverEffect,\n ],\n );\n },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Filter.js","names":["_react","_interopRequireWildcard","require","_Filter","_ExpandableContent","_interopRequireDefault","_Icon","_FIlterContent","_ComboBox","_filter","_SearchInput","_ContextMenu","_Checkbox","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Filter","forwardRef","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","comboboxConfig","onActiveChange","rightIcons","ref","isOpen","setIsOpen","useState","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","backgroundDistance","setBackgroundDistance","backgroundCoordinates","setBackgroundCoordinates","top","left","contentRef","useRef","iconRef","filterRef","searchRef","contextMenuRef","type","useMemo","FilterType","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","ONLY_COMBOBOX","MULTIPLE","icons","useEffect","handleHide","useCallback","current","hide","_searchRef$current","focus","window","setTimeout","handleShow","useImperativeHandle","show","handleIconClick","iconRect","getBoundingClientRect","filterRect","contentRect","relativeTop","bottom","relativeLeft","iconElement","createElement","StyledFilterIcon","onClick","$isOpen","$shouldShowRoundedHoverEffect","size","backgroundElement","StyledMotionFilterBackground","$top","$left","animate","height","transition","duration","delay","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","comboboxElement","StyledFilter","StyledFilterHead","isValidElement","StyledFilterHeadline","$isSearchActive","StyledFilterHeadlineElement","includes","Fragment","StyledFilterIconWrapper","rIcons","StyledFilterSearch","isActive","value","searchValue","onChange","ev","onSearchChange","target","StyledFilterContentWrapper","startDelay","displayName","_default","exports"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n forwardRef,\n isValidElement,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledFilter,\n StyledFilterContentWrapper,\n StyledFilterHead,\n StyledFilterHeadline,\n StyledFilterHeadlineElement,\n StyledFilterIcon,\n StyledFilterIconWrapper,\n StyledFilterSearch,\n StyledMotionFilterBackground,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FIlterContent';\nimport ComboBox from '../combobox/ComboBox';\nimport {\n CheckboxConfig,\n ComboboxConfig,\n FilterButtonConfig,\n FilterRef,\n FilterType,\n SearchConfig,\n SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Checkbox from '../checkbox/Checkbox';\nimport { InputRef } from '../input/Input';\nimport type { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport interface FilterRightIcon {\n icons: string[];\n onClick: VoidFunction;\n}\n\n//\nexport type FilterProps = {\n headline: ReactNode;\n searchConfig?: SearchConfig;\n filterButtonConfig?: FilterButtonConfig;\n sortConfig?: SortConfig;\n checkboxConfig?: CheckboxConfig;\n comboboxConfig?: ComboboxConfig;\n onActiveChange?: (isActive: boolean) => void;\n shouldShowRoundedHoverEffect?: boolean;\n rightIcons?: FilterRightIcon[];\n shouldAutoFocus?: boolean;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n (\n {\n headline,\n searchConfig,\n sortConfig,\n shouldAutoFocus = false,\n shouldShowRoundedHoverEffect = false,\n filterButtonConfig,\n checkboxConfig,\n comboboxConfig,\n onActiveChange,\n rightIcons,\n },\n ref,\n ) => {\n const [isOpen, setIsOpen] = useState(false);\n const [isSearchActive, setIsSearchActive] = useState(false);\n const [shouldFocus, setShouldFocus] = useState(false);\n const [backgroundDistance, setBackgroundDistance] = useState(0);\n const [backgroundCoordinates, setBackgroundCoordinates] = useState({ top: 0, left: 0 });\n\n const contentRef = useRef<HTMLDivElement | null>(null);\n const iconRef = useRef<HTMLDivElement | null>(null);\n const filterRef = useRef<HTMLDivElement | null>(null);\n const searchRef = useRef<InputRef | null>(null);\n\n const contextMenuRef = useRef<ContextMenuRef>(null);\n\n const type = useMemo(() => {\n if (\n filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_FILTER;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_SORT;\n }\n\n if (\n !filterButtonConfig &&\n searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_SEARCH;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_CHECKBOX;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n comboboxConfig\n ) {\n return FilterType.ONLY_COMBOBOX;\n }\n\n return FilterType.MULTIPLE;\n }, [checkboxConfig, comboboxConfig, filterButtonConfig, searchConfig, sortConfig]);\n\n const icons = useMemo(() => {\n switch (type) {\n case FilterType.ONLY_FILTER:\n return ['fa fa-filter'];\n case FilterType.ONLY_SORT:\n return ['fa fa-arrow-up-arrow-down'];\n default:\n return ['fa fa-search'];\n }\n }, [type]);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isOpen);\n }\n }, [isOpen, onActiveChange]);\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(false);\n }\n }, [type]);\n\n useEffect(() => {\n if (shouldFocus) {\n searchRef.current?.focus();\n\n window.setTimeout(() => {\n setShouldFocus(false);\n }, 200);\n }\n }, [shouldFocus]);\n\n const handleShow = useCallback(() => {\n setIsOpen(true);\n\n if (shouldAutoFocus) {\n setShouldFocus(true);\n }\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(true);\n }\n }, [shouldAutoFocus, type]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n const handleIconClick = useCallback(() => {\n if (isOpen) {\n handleHide();\n } else {\n handleShow();\n }\n }, [handleHide, handleShow, isOpen]);\n\n useEffect(() => {\n if (headline && iconRef.current && contentRef.current && filterRef.current) {\n const iconRect = iconRef.current.getBoundingClientRect();\n const filterRect = filterRef.current.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const relativeTop = iconRect.bottom - filterRect.top;\n const relativeLeft = iconRect.left - filterRect.left;\n\n setBackgroundDistance(contentRect.top - iconRect.bottom);\n setBackgroundCoordinates({\n top: relativeTop,\n left: relativeLeft,\n });\n } else {\n setBackgroundDistance(0);\n setBackgroundCoordinates({ top: 0, left: 0 });\n }\n }, [headline]);\n\n const iconElement = useMemo(\n () => (\n <StyledFilterIcon\n onClick={handleIconClick}\n $isOpen={isOpen}\n ref={iconRef}\n $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n >\n <Icon icons={icons} size={18} />\n </StyledFilterIcon>\n ),\n [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect],\n );\n\n const backgroundElement = useMemo(\n () => (\n <StyledMotionFilterBackground\n $top={backgroundCoordinates.top}\n $left={backgroundCoordinates.left}\n animate={{ height: isOpen ? `${backgroundDistance}px` : 0 }}\n transition={{ duration: 0.1, delay: isOpen ? 0 : 0.2 }}\n />\n ),\n [backgroundDistance, isOpen, backgroundCoordinates],\n );\n\n const sortItems: ContextMenuItem[] = useMemo(() => {\n if (!sortConfig) {\n return [];\n }\n\n const { selectedItem, onSortChange } = sortConfig;\n\n return sortConfig.items.map(({ id, text }) => ({\n text,\n key: id.toString(),\n isSelected: id === selectedItem.id,\n icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],\n onClick: () => onSortChange({ text, id }),\n }));\n }, [sortConfig]);\n\n const comboboxElement = useMemo(() => {\n if (!comboboxConfig) {\n return null;\n }\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <ComboBox {...comboboxConfig} />\n );\n }, [comboboxConfig]);\n\n return useMemo(\n () => (\n <StyledFilter ref={filterRef}>\n <StyledFilterHead>\n {!isValidElement(headline) ? (\n <StyledFilterHeadline $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadline>\n ) : (\n <StyledFilterHeadlineElement $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadlineElement>\n )}\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <>\n <StyledFilterIconWrapper>\n {rightIcons &&\n rightIcons.map(({ icons: rIcons, onClick }) => (\n <StyledFilterIcon\n onClick={onClick}\n $isOpen={false}\n $shouldShowRoundedHoverEffect={\n shouldShowRoundedHoverEffect\n }\n >\n <Icon icons={rIcons} size={18} />\n </StyledFilterIcon>\n ))}\n {iconElement}\n </StyledFilterIconWrapper>\n {backgroundDistance > 0 && backgroundElement}\n </>\n )}\n {type === FilterType.ONLY_SEARCH && searchConfig && (\n <StyledFilterSearch>\n <SearchInput\n onActiveChange={(isActive) => {\n setIsSearchActive(isActive);\n setIsOpen(isActive);\n }}\n ref={searchRef}\n isActive={isSearchActive}\n value={searchConfig.searchValue}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n />\n </StyledFilterSearch>\n )}\n {type === FilterType.ONLY_SORT && sortConfig && (\n <ContextMenu ref={contextMenuRef} items={sortItems}>\n {iconElement}\n </ContextMenu>\n )}\n {type === FilterType.ONLY_CHECKBOX && checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox {...checkboxConfig} />\n )}\n {type === FilterType.ONLY_COMBOBOX && comboboxElement}\n </StyledFilterHead>\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <StyledFilterContentWrapper ref={contentRef}>\n <ExpandableContent\n isOpen={isOpen}\n startDelay={backgroundDistance > 0 ? 0.1 : 0}\n >\n <FilterContent\n shouldAutoFocus={shouldFocus}\n searchConfig={searchConfig}\n filterButtonConfig={filterButtonConfig}\n sortConfig={sortConfig}\n checkboxConfig={checkboxConfig}\n comboboxConfig={comboboxConfig}\n />\n </ExpandableContent>\n </StyledFilterContentWrapper>\n )}\n </StyledFilter>\n ),\n [\n headline,\n isSearchActive,\n type,\n rightIcons,\n iconElement,\n backgroundDistance,\n backgroundElement,\n searchConfig,\n sortConfig,\n sortItems,\n checkboxConfig,\n isOpen,\n shouldFocus,\n filterButtonConfig,\n comboboxConfig,\n comboboxElement,\n shouldShowRoundedHoverEffect,\n ],\n );\n },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAWA,IAAAC,OAAA,GAAAD,OAAA;AAWA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,KAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,cAAA,GAAAF,sBAAA,CAAAH,OAAA;AACA,IAAAM,SAAA,GAAAH,sBAAA,CAAAH,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AASA,IAAAQ,YAAA,GAAAL,sBAAA,CAAAH,OAAA;AACA,IAAAS,YAAA,GAAAN,sBAAA,CAAAH,OAAA;AACA,IAAAU,SAAA,GAAAP,sBAAA,CAAAH,OAAA;AAA4C,SAAAG,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAZ,wBAAAY,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAhB,uBAAA,YAAAA,CAAAY,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAS5C;;AAcA,MAAMgB,MAAM,gBAAG,IAAAC,iBAAU,EACrB,CACI;EACIC,QAAQ;EACRC,YAAY;EACZC,UAAU;EACVC,eAAe,GAAG,KAAK;EACvBC,4BAA4B,GAAG,KAAK;EACpCC,kBAAkB;EAClBC,cAAc;EACdC,cAAc;EACdC,cAAc;EACdC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAC3C,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAC3D,MAAM,CAACG,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAJ,eAAQ,EAAC,KAAK,CAAC;EACrD,MAAM,CAACK,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAN,eAAQ,EAAC,CAAC,CAAC;EAC/D,MAAM,CAACO,qBAAqB,EAAEC,wBAAwB,CAAC,GAAG,IAAAR,eAAQ,EAAC;IAAES,GAAG,EAAE,CAAC;IAAEC,IAAI,EAAE;EAAE,CAAC,CAAC;EAEvF,MAAMC,UAAU,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EACtD,MAAMC,OAAO,GAAG,IAAAD,aAAM,EAAwB,IAAI,CAAC;EACnD,MAAME,SAAS,GAAG,IAAAF,aAAM,EAAwB,IAAI,CAAC;EACrD,MAAMG,SAAS,GAAG,IAAAH,aAAM,EAAkB,IAAI,CAAC;EAE/C,MAAMI,cAAc,GAAG,IAAAJ,aAAM,EAAiB,IAAI,CAAC;EAEnD,MAAMK,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM;IACvB,IACI1B,kBAAkB,IAClB,CAACJ,YAAY,IACb,CAACC,UAAU,IACX,CAACI,cAAc,IACf,CAACC,cAAc,EACjB;MACE,OAAOyB,kBAAU,CAACC,WAAW;IACjC;IAEA,IACI,CAAC5B,kBAAkB,IACnB,CAACJ,YAAY,IACbC,UAAU,IACV,CAACI,cAAc,IACf,CAACC,cAAc,EACjB;MACE,OAAOyB,kBAAU,CAACE,SAAS;IAC/B;IAEA,IACI,CAAC7B,kBAAkB,IACnBJ,YAAY,IACZ,CAACC,UAAU,IACX,CAACI,cAAc,IACf,CAACC,cAAc,EACjB;MACE,OAAOyB,kBAAU,CAACG,WAAW;IACjC;IAEA,IACI,CAAC9B,kBAAkB,IACnB,CAACJ,YAAY,IACb,CAACC,UAAU,IACXI,cAAc,IACd,CAACC,cAAc,EACjB;MACE,OAAOyB,kBAAU,CAACI,aAAa;IACnC;IAEA,IACI,CAAC/B,kBAAkB,IACnB,CAACJ,YAAY,IACb,CAACC,UAAU,IACX,CAACI,cAAc,IACfC,cAAc,EAChB;MACE,OAAOyB,kBAAU,CAACK,aAAa;IACnC;IAEA,OAAOL,kBAAU,CAACM,QAAQ;EAC9B,CAAC,EAAE,CAAChC,cAAc,EAAEC,cAAc,EAAEF,kBAAkB,EAAEJ,YAAY,EAAEC,UAAU,CAAC,CAAC;EAElF,MAAMqC,KAAK,GAAG,IAAAR,cAAO,EAAC,MAAM;IACxB,QAAQD,IAAI;MACR,KAAKE,kBAAU,CAACC,WAAW;QACvB,OAAO,CAAC,cAAc,CAAC;MAC3B,KAAKD,kBAAU,CAACE,SAAS;QACrB,OAAO,CAAC,2BAA2B,CAAC;MACxC;QACI,OAAO,CAAC,cAAc,CAAC;IAC/B;EACJ,CAAC,EAAE,CAACJ,IAAI,CAAC,CAAC;EAEV,IAAAU,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOhC,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACG,MAAM,CAAC;IAC1B;EACJ,CAAC,EAAE,CAACA,MAAM,EAAEH,cAAc,CAAC,CAAC;EAE5B,MAAMiC,UAAU,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACjC9B,SAAS,CAAC,KAAK,CAAC;IAEhB,IAAIkB,IAAI,KAAKE,kBAAU,CAACE,SAAS,IAAIL,cAAc,CAACc,OAAO,EAAE;MACzDd,cAAc,CAACc,OAAO,CAACC,IAAI,CAAC,CAAC;IACjC;IAEA,IAAId,IAAI,KAAKE,kBAAU,CAACG,WAAW,EAAE;MACjCpB,iBAAiB,CAAC,KAAK,CAAC;IAC5B;EACJ,CAAC,EAAE,CAACe,IAAI,CAAC,CAAC;EAEV,IAAAU,gBAAS,EAAC,MAAM;IACZ,IAAIxB,WAAW,EAAE;MAAA,IAAA6B,kBAAA;MACb,CAAAA,kBAAA,GAAAjB,SAAS,CAACe,OAAO,cAAAE,kBAAA,eAAjBA,kBAAA,CAAmBC,KAAK,CAAC,CAAC;MAE1BC,MAAM,CAACC,UAAU,CAAC,MAAM;QACpB/B,cAAc,CAAC,KAAK,CAAC;MACzB,CAAC,EAAE,GAAG,CAAC;IACX;EACJ,CAAC,EAAE,CAACD,WAAW,CAAC,CAAC;EAEjB,MAAMiC,UAAU,GAAG,IAAAP,kBAAW,EAAC,MAAM;IACjC9B,SAAS,CAAC,IAAI,CAAC;IAEf,IAAIT,eAAe,EAAE;MACjBc,cAAc,CAAC,IAAI,CAAC;IACxB;IAEA,IAAIa,IAAI,KAAKE,kBAAU,CAACE,SAAS,IAAIL,cAAc,CAACc,OAAO,EAAE;MACzDd,cAAc,CAACc,OAAO,CAACC,IAAI,CAAC,CAAC;IACjC;IAEA,IAAId,IAAI,KAAKE,kBAAU,CAACG,WAAW,EAAE;MACjCpB,iBAAiB,CAAC,IAAI,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACZ,eAAe,EAAE2B,IAAI,CAAC,CAAC;EAE3B,IAAAoB,0BAAmB,EACfxC,GAAG,EACH,OAAO;IACHkC,IAAI,EAAEH,UAAU;IAChBU,IAAI,EAAEF;EACV,CAAC,CAAC,EACF,CAACR,UAAU,EAAEQ,UAAU,CAC3B,CAAC;EAED,MAAMG,eAAe,GAAG,IAAAV,kBAAW,EAAC,MAAM;IACtC,IAAI/B,MAAM,EAAE;MACR8B,UAAU,CAAC,CAAC;IAChB,CAAC,MAAM;MACHQ,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACR,UAAU,EAAEQ,UAAU,EAAEtC,MAAM,CAAC,CAAC;EAEpC,IAAA6B,gBAAS,EAAC,MAAM;IACZ,IAAIxC,QAAQ,IAAI0B,OAAO,CAACiB,OAAO,IAAInB,UAAU,CAACmB,OAAO,IAAIhB,SAAS,CAACgB,OAAO,EAAE;MACxE,MAAMU,QAAQ,GAAG3B,OAAO,CAACiB,OAAO,CAACW,qBAAqB,CAAC,CAAC;MACxD,MAAMC,UAAU,GAAG5B,SAAS,CAACgB,OAAO,CAACW,qBAAqB,CAAC,CAAC;MAC5D,MAAME,WAAW,GAAGhC,UAAU,CAACmB,OAAO,CAACW,qBAAqB,CAAC,CAAC;MAE9D,MAAMG,WAAW,GAAGJ,QAAQ,CAACK,MAAM,GAAGH,UAAU,CAACjC,GAAG;MACpD,MAAMqC,YAAY,GAAGN,QAAQ,CAAC9B,IAAI,GAAGgC,UAAU,CAAChC,IAAI;MAEpDJ,qBAAqB,CAACqC,WAAW,CAAClC,GAAG,GAAG+B,QAAQ,CAACK,MAAM,CAAC;MACxDrC,wBAAwB,CAAC;QACrBC,GAAG,EAAEmC,WAAW;QAChBlC,IAAI,EAAEoC;MACV,CAAC,CAAC;IACN,CAAC,MAAM;MACHxC,qBAAqB,CAAC,CAAC,CAAC;MACxBE,wBAAwB,CAAC;QAAEC,GAAG,EAAE,CAAC;QAAEC,IAAI,EAAE;MAAE,CAAC,CAAC;IACjD;EACJ,CAAC,EAAE,CAACvB,QAAQ,CAAC,CAAC;EAEd,MAAM4D,WAAW,GAAG,IAAA7B,cAAO,EACvB,mBACIjE,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAC5F,OAAA,CAAA6F,gBAAgB;IACbC,OAAO,EAAEX,eAAgB;IACzBY,OAAO,EAAErD,MAAO;IAChBD,GAAG,EAAEgB,OAAQ;IACbuC,6BAA6B,EAAE7D;EAA6B,gBAE5DtC,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAACzF,KAAA,CAAAS,OAAI;IAAC0D,KAAK,EAAEA,KAAM;IAAC2B,IAAI,EAAE;EAAG,CAAE,CACjB,CACrB,EACD,CAACd,eAAe,EAAEb,KAAK,EAAE5B,MAAM,EAAEP,4BAA4B,CACjE,CAAC;EAED,MAAM+D,iBAAiB,GAAG,IAAApC,cAAO,EAC7B,mBACIjE,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAC5F,OAAA,CAAAmG,4BAA4B;IACzBC,IAAI,EAAEjD,qBAAqB,CAACE,GAAI;IAChCgD,KAAK,EAAElD,qBAAqB,CAACG,IAAK;IAClCgD,OAAO,EAAE;MAAEC,MAAM,EAAE7D,MAAM,GAAG,GAAGO,kBAAkB,IAAI,GAAG;IAAE,CAAE;IAC5DuD,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,KAAK,EAAEhE,MAAM,GAAG,CAAC,GAAG;IAAI;EAAE,CAC1D,CACJ,EACD,CAACO,kBAAkB,EAAEP,MAAM,EAAES,qBAAqB,CACtD,CAAC;EAED,MAAMwD,SAA4B,GAAG,IAAA7C,cAAO,EAAC,MAAM;IAC/C,IAAI,CAAC7B,UAAU,EAAE;MACb,OAAO,EAAE;IACb;IAEA,MAAM;MAAE2E,YAAY;MAAEC;IAAa,CAAC,GAAG5E,UAAU;IAEjD,OAAOA,UAAU,CAAC6E,KAAK,CAACC,GAAG,CAAC,CAAC;MAAEC,EAAE;MAAEC;IAAK,CAAC,MAAM;MAC3CA,IAAI;MACJC,GAAG,EAAEF,EAAE,CAACG,QAAQ,CAAC,CAAC;MAClBC,UAAU,EAAEJ,EAAE,KAAKJ,YAAY,CAACI,EAAE;MAClC1C,KAAK,EAAE0C,EAAE,KAAKJ,YAAY,CAACI,EAAE,GAAG,CAAC,qBAAqB,CAAC,GAAG,EAAE;MAC5DlB,OAAO,EAAEA,CAAA,KAAMe,YAAY,CAAC;QAAEI,IAAI;QAAED;MAAG,CAAC;IAC5C,CAAC,CAAC,CAAC;EACP,CAAC,EAAE,CAAC/E,UAAU,CAAC,CAAC;EAEhB,MAAMoF,eAAe,GAAG,IAAAvD,cAAO,EAAC,MAAM;IAClC,IAAI,CAACxB,cAAc,EAAE;MACjB,OAAO,IAAI;IACf;IAEA;MAAA;MACI;MACAzC,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAACvF,SAAA,CAAAO,OAAQ,EAAK0B,cAAiB;IAAC;EAExC,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,OAAO,IAAAwB,cAAO,EACV,mBACIjE,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAC5F,OAAA,CAAAsH,YAAY;IAAC7E,GAAG,EAAEiB;EAAU,gBACzB7D,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAC5F,OAAA,CAAAuH,gBAAgB,QACZ,eAAC,IAAAC,qBAAc,EAACzF,QAAQ,CAAC,gBACtBlC,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAC5F,OAAA,CAAAyH,oBAAoB;IAACC,eAAe,EAAE7E;EAAe,GACjDd,QACiB,CAAC,gBAEvBlC,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAC5F,OAAA,CAAA2H,2BAA2B;IAACD,eAAe,EAAE7E;EAAe,GACxDd,QACwB,CAChC,EACA,CAACgC,kBAAU,CAACM,QAAQ,EAAEN,kBAAU,CAACC,WAAW,CAAC,CAAC4D,QAAQ,CAAC/D,IAAI,CAAC,iBACzDhE,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAA/F,MAAA,CAAAe,OAAA,CAAAiH,QAAA,qBACIhI,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAC5F,OAAA,CAAA8H,uBAAuB,QACnBtF,UAAU,IACPA,UAAU,CAACuE,GAAG,CAAC,CAAC;IAAEzC,KAAK,EAAEyD,MAAM;IAAEjC;EAAQ,CAAC,kBACtCjG,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAC5F,OAAA,CAAA6F,gBAAgB;IACbC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAE,KAAM;IACfC,6BAA6B,EACzB7D;EACH,gBAEDtC,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAACzF,KAAA,CAAAS,OAAI;IAAC0D,KAAK,EAAEyD,MAAO;IAAC9B,IAAI,EAAE;EAAG,CAAE,CAClB,CACrB,CAAC,EACLN,WACoB,CAAC,EACzB1C,kBAAkB,GAAG,CAAC,IAAIiD,iBAC7B,CACL,EACArC,IAAI,KAAKE,kBAAU,CAACG,WAAW,IAAIlC,YAAY,iBAC5CnC,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAC5F,OAAA,CAAAgI,kBAAkB,qBACfnI,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAACrF,YAAA,CAAAK,OAAW;IACR2B,cAAc,EAAG0F,QAAQ,IAAK;MAC1BnF,iBAAiB,CAACmF,QAAQ,CAAC;MAC3BtF,SAAS,CAACsF,QAAQ,CAAC;IACvB,CAAE;IACFxF,GAAG,EAAEkB,SAAU;IACfsE,QAAQ,EAAEpF,cAAe;IACzBqF,KAAK,EAAElG,YAAY,CAACmG,WAAY;IAChCC,QAAQ,EAAGC,EAAE,IAAKrG,YAAY,CAACsG,cAAc,CAACD,EAAE,CAACE,MAAM,CAACL,KAAK;EAAE,CAClE,CACe,CACvB,EACArE,IAAI,KAAKE,kBAAU,CAACE,SAAS,IAAIhC,UAAU,iBACxCpC,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAACpF,YAAA,CAAAI,OAAW;IAAC6B,GAAG,EAAEmB,cAAe;IAACkD,KAAK,EAAEH;EAAU,GAC9ChB,WACQ,CAChB,EACA9B,IAAI,KAAKE,kBAAU,CAACI,aAAa,IAAI9B,cAAc;EAAA;EAChD;EACAxC,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAACnF,SAAA,CAAAG,OAAQ,EAAKyB,cAAiB,CAClC,EACAwB,IAAI,KAAKE,kBAAU,CAACK,aAAa,IAAIiD,eACxB,CAAC,EAClB,CAACtD,kBAAU,CAACM,QAAQ,EAAEN,kBAAU,CAACC,WAAW,CAAC,CAAC4D,QAAQ,CAAC/D,IAAI,CAAC,iBACzDhE,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAC5F,OAAA,CAAAwI,0BAA0B;IAAC/F,GAAG,EAAEc;EAAW,gBACxC1D,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAAC3F,kBAAA,CAAAW,OAAiB;IACd8B,MAAM,EAAEA,MAAO;IACf+F,UAAU,EAAExF,kBAAkB,GAAG,CAAC,GAAG,GAAG,GAAG;EAAE,gBAE7CpD,MAAA,CAAAe,OAAA,CAAAgF,aAAA,CAACxF,cAAA,CAAAQ,OAAa;IACVsB,eAAe,EAAEa,WAAY;IAC7Bf,YAAY,EAAEA,YAAa;IAC3BI,kBAAkB,EAAEA,kBAAmB;IACvCH,UAAU,EAAEA,UAAW;IACvBI,cAAc,EAAEA,cAAe;IAC/BC,cAAc,EAAEA;EAAe,CAClC,CACc,CACK,CAEtB,CACjB,EACD,CACIP,QAAQ,EACRc,cAAc,EACdgB,IAAI,EACJrB,UAAU,EACVmD,WAAW,EACX1C,kBAAkB,EAClBiD,iBAAiB,EACjBlE,YAAY,EACZC,UAAU,EACV0E,SAAS,EACTtE,cAAc,EACdK,MAAM,EACNK,WAAW,EACXX,kBAAkB,EAClBE,cAAc,EACd+E,eAAe,EACflF,4BAA4B,CAEpC,CAAC;AACL,CACJ,CAAC;AAEDN,MAAM,CAAC6G,WAAW,GAAG,QAAQ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAhI,OAAA,GAEfiB,MAAM","ignoreList":[]}
|
|
@@ -13,11 +13,13 @@ var _ComboBox = _interopRequireDefault(require("../../combobox/ComboBox"));
|
|
|
13
13
|
var _Checkbox = _interopRequireDefault(require("../../checkbox/Checkbox"));
|
|
14
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
15
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
16
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
16
17
|
const FilterContent = ({
|
|
17
18
|
searchConfig,
|
|
18
19
|
sortConfig,
|
|
19
20
|
filterButtonConfig,
|
|
20
21
|
checkboxConfig,
|
|
22
|
+
comboboxConfig,
|
|
21
23
|
shouldAutoFocus
|
|
22
24
|
}) => {
|
|
23
25
|
const sortTextRef = (0, _react.useRef)(null);
|
|
@@ -78,10 +80,12 @@ const FilterContent = ({
|
|
|
78
80
|
value: sortConfig.selectedItem.id
|
|
79
81
|
},
|
|
80
82
|
onSelect: handleSelectSortItem
|
|
81
|
-
}))),
|
|
83
|
+
}))), comboboxConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxInline, null, /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxInlineLabel, null, comboboxConfig.label), /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxInlineComboboxWrapper, null, /*#__PURE__*/_react.default.createElement(_ComboBox.default, _extends({
|
|
84
|
+
shouldUseCurrentItemWidth: true
|
|
85
|
+
}, comboboxConfig)))), checkboxConfig &&
|
|
82
86
|
/*#__PURE__*/
|
|
83
87
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
84
|
-
_react.default.createElement(_Checkbox.default, checkboxConfig)), [checkboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, sortTextWidth]);
|
|
88
|
+
_react.default.createElement(_Checkbox.default, checkboxConfig)), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, sortTextWidth]);
|
|
85
89
|
};
|
|
86
90
|
FilterContent.displayName = 'FilterContent';
|
|
87
91
|
var _default = exports.default = FilterContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FIlterContent.js","names":["_react","_interopRequireWildcard","require","_FilterContent","_Input","_interopRequireDefault","_Icon","_FilterButtons","_ComboBox","_Checkbox","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","shouldAutoFocus","sortTextRef","useRef","searchRef","sortTextWidth","setSortTextWidth","useState","handleSelectSortItem","useCallback","item","text","value","onSortChange","id","useEffect","current","clientWidth","_searchRef$current","focus","useMemo","createElement","StyledFilterContent","ref","onChange","ev","onSearchChange","target","placeholder","searchValue","shouldShowClearIcon","length","leftElement","icons","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth","lists","list","items","map","selectedItem","onSelect","displayName","_default","exports"],"sources":["../../../../../src/components/filter/filter-content/FIlterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n StyledFilterComboboxWrapper,\n StyledFilterContent,\n StyledFilterSort,\n StyledFilterSortText,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n CheckboxConfig,\n FilterButtonConfig,\n SearchConfig,\n SortConfig,\n} from '../../../types/filter';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { IComboBoxItem } from '../../combobox/ComboBox.types';\n\nexport type FilterContentProps = {\n searchConfig?: SearchConfig;\n filterButtonConfig?: FilterButtonConfig;\n sortConfig?: SortConfig;\n checkboxConfig?: CheckboxConfig;\n shouldAutoFocus: boolean;\n};\n\nconst FilterContent: FC<FilterContentProps> = ({\n searchConfig,\n sortConfig,\n filterButtonConfig,\n checkboxConfig,\n shouldAutoFocus,\n}) => {\n const sortTextRef = useRef<HTMLDivElement>(null);\n const searchRef = useRef<InputRef>(null);\n\n const [sortTextWidth, setSortTextWidth] = useState(0);\n\n const handleSelectSortItem = useCallback(\n (item: IComboBoxItem | undefined) => {\n if (!item) {\n return;\n }\n\n const { text, value } = item;\n\n if (sortConfig) {\n sortConfig.onSortChange({ text, id: value });\n }\n },\n [sortConfig],\n );\n\n useEffect(() => {\n if (sortTextRef.current) {\n setSortTextWidth(sortTextRef.current.clientWidth + 20);\n }\n }, []);\n\n useEffect(() => {\n if (shouldAutoFocus) {\n searchRef.current?.focus();\n }\n }, [shouldAutoFocus]);\n\n return useMemo(\n () => (\n <StyledFilterContent>\n {searchConfig && (\n <Input\n ref={searchRef}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n placeholder=\"Suche\"\n value={searchConfig.searchValue}\n shouldShowClearIcon={searchConfig.searchValue.length > 0}\n leftElement={<Icon icons={['fa fa-search']} />}\n />\n )}\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n {sortConfig && (\n <StyledFilterSort>\n <StyledFilterSortText ref={sortTextRef}>Sortierung</StyledFilterSortText>\n <StyledFilterComboboxWrapper $textWidth={sortTextWidth}>\n <ComboBox\n lists={[\n {\n list: sortConfig.items.map(({ text, id }) => ({\n text,\n value: id,\n })),\n },\n ]}\n placeholder=\"\"\n selectedItem={{\n text: sortConfig.selectedItem.text,\n value: sortConfig.selectedItem.id,\n }}\n onSelect={handleSelectSortItem}\n />\n </StyledFilterComboboxWrapper>\n </StyledFilterSort>\n )}\n {checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox {...checkboxConfig} />\n )}\n </StyledFilterContent>\n ),\n [\n checkboxConfig,\n filterButtonConfig,\n handleSelectSortItem,\n searchConfig,\n sortConfig,\n sortTextWidth,\n ],\n );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FIlterContent.js","names":["_react","_interopRequireWildcard","require","_FilterContent","_Input","_interopRequireDefault","_Icon","_FilterButtons","_ComboBox","_Checkbox","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","sortTextRef","useRef","searchRef","sortTextWidth","setSortTextWidth","useState","handleSelectSortItem","useCallback","item","text","value","onSortChange","id","useEffect","current","clientWidth","_searchRef$current","focus","useMemo","createElement","StyledFilterContent","ref","onChange","ev","onSearchChange","target","placeholder","searchValue","shouldShowClearIcon","leftElement","icons","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth","lists","list","items","map","selectedItem","onSelect","StyledFilterComboboxInline","StyledFilterComboboxInlineLabel","label","StyledFilterComboboxInlineComboboxWrapper","shouldUseCurrentItemWidth","displayName","_default","exports"],"sources":["../../../../../src/components/filter/filter-content/FIlterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n StyledFilterComboboxInline,\n StyledFilterComboboxInlineComboboxWrapper,\n StyledFilterComboboxInlineLabel,\n StyledFilterComboboxWrapper,\n StyledFilterContent,\n StyledFilterSort,\n StyledFilterSortText,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n CheckboxConfig,\n ComboboxConfig,\n FilterButtonConfig,\n SearchConfig,\n SortConfig,\n} from '../../../types/filter';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { IComboBoxItem } from '../../combobox/ComboBox.types';\n\nexport type FilterContentProps = {\n searchConfig?: SearchConfig;\n filterButtonConfig?: FilterButtonConfig;\n sortConfig?: SortConfig;\n checkboxConfig?: CheckboxConfig;\n comboboxConfig?: ComboboxConfig;\n shouldAutoFocus: boolean;\n};\n\nconst FilterContent: FC<FilterContentProps> = ({\n searchConfig,\n sortConfig,\n filterButtonConfig,\n checkboxConfig,\n comboboxConfig,\n shouldAutoFocus,\n}) => {\n const sortTextRef = useRef<HTMLDivElement>(null);\n const searchRef = useRef<InputRef>(null);\n\n const [sortTextWidth, setSortTextWidth] = useState(0);\n\n const handleSelectSortItem = useCallback(\n (item: IComboBoxItem | undefined) => {\n if (!item) {\n return;\n }\n\n const { text, value } = item;\n\n if (sortConfig) {\n sortConfig.onSortChange({ text, id: value });\n }\n },\n [sortConfig],\n );\n\n useEffect(() => {\n if (sortTextRef.current) {\n setSortTextWidth(sortTextRef.current.clientWidth + 20);\n }\n }, []);\n\n useEffect(() => {\n if (shouldAutoFocus) {\n searchRef.current?.focus();\n }\n }, [shouldAutoFocus]);\n\n return useMemo(\n () => (\n <StyledFilterContent>\n {searchConfig && (\n <Input\n ref={searchRef}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n placeholder=\"Suche\"\n value={searchConfig.searchValue}\n shouldShowClearIcon={searchConfig.searchValue.length > 0}\n leftElement={<Icon icons={['fa fa-search']} />}\n />\n )}\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n {sortConfig && (\n <StyledFilterSort>\n <StyledFilterSortText ref={sortTextRef}>Sortierung</StyledFilterSortText>\n <StyledFilterComboboxWrapper $textWidth={sortTextWidth}>\n <ComboBox\n lists={[\n {\n list: sortConfig.items.map(({ text, id }) => ({\n text,\n value: id,\n })),\n },\n ]}\n placeholder=\"\"\n selectedItem={{\n text: sortConfig.selectedItem.text,\n value: sortConfig.selectedItem.id,\n }}\n onSelect={handleSelectSortItem}\n />\n </StyledFilterComboboxWrapper>\n </StyledFilterSort>\n )}\n {comboboxConfig && (\n <StyledFilterComboboxInline>\n <StyledFilterComboboxInlineLabel>\n {comboboxConfig.label}\n </StyledFilterComboboxInlineLabel>\n <StyledFilterComboboxInlineComboboxWrapper>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <ComboBox shouldUseCurrentItemWidth {...comboboxConfig} />\n </StyledFilterComboboxInlineComboboxWrapper>\n </StyledFilterComboboxInline>\n )}\n {checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox {...checkboxConfig} />\n )}\n </StyledFilterContent>\n ),\n [\n checkboxConfig,\n comboboxConfig,\n filterButtonConfig,\n handleSelectSortItem,\n searchConfig,\n sortConfig,\n sortTextWidth,\n ],\n );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.StyledFilterSortText = exports.StyledFilterSort = exports.StyledFilterContent = exports.StyledFilterComboboxWrapper = void 0;
|
|
6
|
+
exports.StyledFilterSortText = exports.StyledFilterSort = exports.StyledFilterContent = exports.StyledFilterComboboxWrapper = exports.StyledFilterComboboxInlineLabel = exports.StyledFilterComboboxInlineComboboxWrapper = exports.StyledFilterComboboxInline = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
9
|
const StyledFilterContent = exports.StyledFilterContent = _styledComponents.default.div`
|
|
@@ -15,12 +15,13 @@ const StyledFilterContent = exports.StyledFilterContent = _styledComponents.defa
|
|
|
15
15
|
|
|
16
16
|
display: flex;
|
|
17
17
|
flex-direction: column;
|
|
18
|
-
gap:
|
|
18
|
+
gap: 10px;
|
|
19
19
|
`;
|
|
20
20
|
const StyledFilterSort = exports.StyledFilterSort = _styledComponents.default.div`
|
|
21
21
|
display: flex;
|
|
22
22
|
align-items: center;
|
|
23
|
-
|
|
23
|
+
justify-content: space-between;
|
|
24
|
+
gap: 10px;
|
|
24
25
|
`;
|
|
25
26
|
const StyledFilterSortText = exports.StyledFilterSortText = _styledComponents.default.div`
|
|
26
27
|
flex: 0 0 auto;
|
|
@@ -33,4 +34,19 @@ const StyledFilterComboboxWrapper = exports.StyledFilterComboboxWrapper = _style
|
|
|
33
34
|
$textWidth
|
|
34
35
|
}) => `calc(100% - ${$textWidth}px)`}}
|
|
35
36
|
`;
|
|
37
|
+
const StyledFilterComboboxInline = exports.StyledFilterComboboxInline = _styledComponents.default.div`
|
|
38
|
+
display: flex;
|
|
39
|
+
justify-content: space-between;
|
|
40
|
+
align-items: center;
|
|
41
|
+
gap: 10px;
|
|
42
|
+
`;
|
|
43
|
+
const StyledFilterComboboxInlineLabel = exports.StyledFilterComboboxInlineLabel = _styledComponents.default.div`
|
|
44
|
+
flex: 0 0 auto;
|
|
45
|
+
`;
|
|
46
|
+
const StyledFilterComboboxInlineComboboxWrapper = exports.StyledFilterComboboxInlineComboboxWrapper = _styledComponents.default.div`
|
|
47
|
+
display: flex;
|
|
48
|
+
justify-content: end;
|
|
49
|
+
flex: 1 1 auto;
|
|
50
|
+
min-width: 0;
|
|
51
|
+
`;
|
|
36
52
|
//# sourceMappingURL=FilterContent.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFilterContent","exports","styled","div","theme","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterContentProps = WithTheme<unknown>;\n\nexport const StyledFilterContent = styled.div<StyledFilterContentProps>`\n background-color: ${({ theme }) => theme['100']};\n\n padding: 12px;\n\n display: flex;\n flex-direction: column;\n gap:
|
|
1
|
+
{"version":3,"file":"FilterContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFilterContent","exports","styled","div","theme","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth","StyledFilterComboboxInline","StyledFilterComboboxInlineLabel","StyledFilterComboboxInlineComboboxWrapper"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterContentProps = WithTheme<unknown>;\n\nexport const StyledFilterContent = styled.div<StyledFilterContentProps>`\n background-color: ${({ theme }) => theme['100']};\n\n padding: 12px;\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n`;\n\nexport const StyledFilterSort = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n`;\n\nexport const StyledFilterSortText = styled.div`\n flex: 0 0 auto;\n`;\n\ntype StyledFilterComboboxWrapperProps = WithTheme<{\n $textWidth: number;\n}>;\n\nexport const StyledFilterComboboxWrapper = styled.div<StyledFilterComboboxWrapperProps>`\n display: flex;\n justify-content: end;\n \n width: ${({ $textWidth }) => `calc(100% - ${$textWidth}px)`}}\n`;\n\nexport const StyledFilterComboboxInline = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n`;\n\nexport const StyledFilterComboboxInlineLabel = styled.div`\n flex: 0 0 auto;\n`;\n\nexport const StyledFilterComboboxInlineComboboxWrapper = styled.div`\n display: flex;\n justify-content: end;\n flex: 1 1 auto;\n min-width: 0;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,gBAAgB,GAAAJ,OAAA,CAAAI,gBAAA,GAAGH,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMG,oBAAoB,GAAAL,OAAA,CAAAK,oBAAA,GAAGJ,yBAAM,CAACC,GAAG;AAC9C;AACA,CAAC;AAMM,MAAMI,2BAA2B,GAAAN,OAAA,CAAAM,2BAAA,GAAGL,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA;AACA,aAAa,CAAC;EAAEK;AAAW,CAAC,KAAK,eAAeA,UAAU,KAAK;AAC/D,CAAC;AAEM,MAAMC,0BAA0B,GAAAR,OAAA,CAAAQ,0BAAA,GAAGP,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMO,+BAA+B,GAAAT,OAAA,CAAAS,+BAAA,GAAGR,yBAAM,CAACC,GAAG;AACzD;AACA,CAAC;AAEM,MAAMQ,yCAAyC,GAAAV,OAAA,CAAAU,yCAAA,GAAGT,yBAAM,CAACC,GAAG;AACnE;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
package/lib/cjs/types/filter.js
CHANGED
|
@@ -9,7 +9,8 @@ let FilterType = exports.FilterType = /*#__PURE__*/function (FilterType) {
|
|
|
9
9
|
FilterType[FilterType["ONLY_FILTER"] = 1] = "ONLY_FILTER";
|
|
10
10
|
FilterType[FilterType["ONLY_SORT"] = 2] = "ONLY_SORT";
|
|
11
11
|
FilterType[FilterType["ONLY_CHECKBOX"] = 3] = "ONLY_CHECKBOX";
|
|
12
|
-
FilterType[FilterType["
|
|
12
|
+
FilterType[FilterType["ONLY_COMBOBOX"] = 4] = "ONLY_COMBOBOX";
|
|
13
|
+
FilterType[FilterType["MULTIPLE"] = 5] = "MULTIPLE";
|
|
13
14
|
return FilterType;
|
|
14
15
|
}({});
|
|
15
16
|
//# sourceMappingURL=filter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter.js","names":["FilterType","exports"],"sources":["../../../src/types/filter.ts"],"sourcesContent":["import { FilterButtonsProps } from '../components/filter-buttons/FilterButtons';\nimport { CheckboxProps } from '../components/checkbox/Checkbox';\n\nexport interface SearchConfig {\n onSearchChange: (search: string) => void;\n searchValue: string;\n}\n\nexport interface SortItem {\n text: string;\n id: string | number;\n}\n\nexport interface SortConfig {\n onSortChange: (item: SortItem) => void;\n selectedItem: SortItem;\n items: SortItem[];\n}\n\nexport type CheckboxConfig = CheckboxProps;\n\nexport type FilterButtonConfig = FilterButtonsProps;\n\nexport type FilterRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\nexport enum FilterType {\n ONLY_SEARCH,\n ONLY_FILTER,\n ONLY_SORT,\n ONLY_CHECKBOX,\n MULTIPLE,\n}\n"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"filter.js","names":["FilterType","exports"],"sources":["../../../src/types/filter.ts"],"sourcesContent":["import { FilterButtonsProps } from '../components/filter-buttons/FilterButtons';\nimport { CheckboxProps } from '../components/checkbox/Checkbox';\nimport { ComboBoxProps } from '../components/combobox/ComboBox.types';\n\nexport interface SearchConfig {\n onSearchChange: (search: string) => void;\n searchValue: string;\n}\n\nexport interface SortItem {\n text: string;\n id: string | number;\n}\n\nexport interface SortConfig {\n onSortChange: (item: SortItem) => void;\n selectedItem: SortItem;\n items: SortItem[];\n}\n\nexport type CheckboxConfig = CheckboxProps;\n\nexport type FilterButtonConfig = FilterButtonsProps;\n\nexport type ComboboxConfig = ComboBoxProps & { label: string };\n\nexport type FilterRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\nexport enum FilterType {\n ONLY_SEARCH,\n ONLY_FILTER,\n ONLY_SORT,\n ONLY_CHECKBOX,\n ONLY_COMBOBOX,\n MULTIPLE,\n}\n"],"mappings":";;;;;;IA+BYA,UAAU,GAAAC,OAAA,CAAAD,UAAA,0BAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA","ignoreList":[]}
|
|
@@ -3,6 +3,7 @@ import { StyledFilter, StyledFilterContentWrapper, StyledFilterHead, StyledFilte
|
|
|
3
3
|
import ExpandableContent from '../expandable-content/ExpandableContent';
|
|
4
4
|
import Icon from '../icon/Icon';
|
|
5
5
|
import FilterContent from './filter-content/FIlterContent';
|
|
6
|
+
import ComboBox from '../combobox/ComboBox';
|
|
6
7
|
import { FilterType } from '../../types/filter';
|
|
7
8
|
import SearchInput from '../search-input/SearchInput';
|
|
8
9
|
import ContextMenu from '../context-menu/ContextMenu';
|
|
@@ -18,6 +19,7 @@ const Filter = /*#__PURE__*/forwardRef(({
|
|
|
18
19
|
shouldShowRoundedHoverEffect = false,
|
|
19
20
|
filterButtonConfig,
|
|
20
21
|
checkboxConfig,
|
|
22
|
+
comboboxConfig,
|
|
21
23
|
onActiveChange,
|
|
22
24
|
rightIcons
|
|
23
25
|
}, ref) => {
|
|
@@ -35,20 +37,23 @@ const Filter = /*#__PURE__*/forwardRef(({
|
|
|
35
37
|
const searchRef = useRef(null);
|
|
36
38
|
const contextMenuRef = useRef(null);
|
|
37
39
|
const type = useMemo(() => {
|
|
38
|
-
if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig) {
|
|
40
|
+
if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig && !comboboxConfig) {
|
|
39
41
|
return FilterType.ONLY_FILTER;
|
|
40
42
|
}
|
|
41
|
-
if (!filterButtonConfig && !searchConfig && sortConfig && !checkboxConfig) {
|
|
43
|
+
if (!filterButtonConfig && !searchConfig && sortConfig && !checkboxConfig && !comboboxConfig) {
|
|
42
44
|
return FilterType.ONLY_SORT;
|
|
43
45
|
}
|
|
44
|
-
if (!filterButtonConfig && searchConfig && !sortConfig && !checkboxConfig) {
|
|
46
|
+
if (!filterButtonConfig && searchConfig && !sortConfig && !checkboxConfig && !comboboxConfig) {
|
|
45
47
|
return FilterType.ONLY_SEARCH;
|
|
46
48
|
}
|
|
47
|
-
if (!filterButtonConfig && !searchConfig && !sortConfig && checkboxConfig) {
|
|
49
|
+
if (!filterButtonConfig && !searchConfig && !sortConfig && checkboxConfig && !comboboxConfig) {
|
|
48
50
|
return FilterType.ONLY_CHECKBOX;
|
|
49
51
|
}
|
|
52
|
+
if (!filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig && comboboxConfig) {
|
|
53
|
+
return FilterType.ONLY_COMBOBOX;
|
|
54
|
+
}
|
|
50
55
|
return FilterType.MULTIPLE;
|
|
51
|
-
}, [checkboxConfig, filterButtonConfig, searchConfig, sortConfig]);
|
|
56
|
+
}, [checkboxConfig, comboboxConfig, filterButtonConfig, searchConfig, sortConfig]);
|
|
52
57
|
const icons = useMemo(() => {
|
|
53
58
|
switch (type) {
|
|
54
59
|
case FilterType.ONLY_FILTER:
|
|
@@ -166,6 +171,16 @@ const Filter = /*#__PURE__*/forwardRef(({
|
|
|
166
171
|
})
|
|
167
172
|
}));
|
|
168
173
|
}, [sortConfig]);
|
|
174
|
+
const comboboxElement = useMemo(() => {
|
|
175
|
+
if (!comboboxConfig) {
|
|
176
|
+
return null;
|
|
177
|
+
}
|
|
178
|
+
return (
|
|
179
|
+
/*#__PURE__*/
|
|
180
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
181
|
+
React.createElement(ComboBox, comboboxConfig)
|
|
182
|
+
);
|
|
183
|
+
}, [comboboxConfig]);
|
|
169
184
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledFilter, {
|
|
170
185
|
ref: filterRef
|
|
171
186
|
}, /*#__PURE__*/React.createElement(StyledFilterHead, null, ! /*#__PURE__*/isValidElement(headline) ? /*#__PURE__*/React.createElement(StyledFilterHeadline, {
|
|
@@ -197,7 +212,7 @@ const Filter = /*#__PURE__*/forwardRef(({
|
|
|
197
212
|
}, iconElement), type === FilterType.ONLY_CHECKBOX && checkboxConfig &&
|
|
198
213
|
/*#__PURE__*/
|
|
199
214
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
200
|
-
React.createElement(Checkbox, checkboxConfig)), [FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/React.createElement(StyledFilterContentWrapper, {
|
|
215
|
+
React.createElement(Checkbox, checkboxConfig), type === FilterType.ONLY_COMBOBOX && comboboxElement), [FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/React.createElement(StyledFilterContentWrapper, {
|
|
201
216
|
ref: contentRef
|
|
202
217
|
}, /*#__PURE__*/React.createElement(ExpandableContent, {
|
|
203
218
|
isOpen: isOpen,
|
|
@@ -207,8 +222,9 @@ const Filter = /*#__PURE__*/forwardRef(({
|
|
|
207
222
|
searchConfig: searchConfig,
|
|
208
223
|
filterButtonConfig: filterButtonConfig,
|
|
209
224
|
sortConfig: sortConfig,
|
|
210
|
-
checkboxConfig: checkboxConfig
|
|
211
|
-
|
|
225
|
+
checkboxConfig: checkboxConfig,
|
|
226
|
+
comboboxConfig: comboboxConfig
|
|
227
|
+
})))), [headline, isSearchActive, type, rightIcons, iconElement, backgroundDistance, backgroundElement, searchConfig, sortConfig, sortItems, checkboxConfig, isOpen, shouldFocus, filterButtonConfig, comboboxConfig, comboboxElement, shouldShowRoundedHoverEffect]);
|
|
212
228
|
});
|
|
213
229
|
Filter.displayName = 'Filter';
|
|
214
230
|
export default Filter;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.js","names":["React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","StyledFilter","StyledFilterContentWrapper","StyledFilterHead","StyledFilterHeadline","StyledFilterHeadlineElement","StyledFilterIcon","StyledFilterIconWrapper","StyledFilterSearch","StyledMotionFilterBackground","ExpandableContent","Icon","FilterContent","FilterType","SearchInput","ContextMenu","Checkbox","Filter","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","onActiveChange","rightIcons","ref","isOpen","setIsOpen","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","backgroundDistance","setBackgroundDistance","backgroundCoordinates","setBackgroundCoordinates","top","left","contentRef","iconRef","filterRef","searchRef","contextMenuRef","type","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","MULTIPLE","icons","handleHide","current","hide","focus","window","setTimeout","handleShow","show","handleIconClick","iconRect","getBoundingClientRect","filterRect","contentRect","relativeTop","bottom","relativeLeft","iconElement","createElement","onClick","$isOpen","$shouldShowRoundedHoverEffect","size","backgroundElement","$top","$left","animate","height","transition","duration","delay","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","$isSearchActive","includes","Fragment","rIcons","isActive","value","searchValue","onChange","ev","onSearchChange","target","startDelay","displayName"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n forwardRef,\n isValidElement,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledFilter,\n StyledFilterContentWrapper,\n StyledFilterHead,\n StyledFilterHeadline,\n StyledFilterHeadlineElement,\n StyledFilterIcon,\n StyledFilterIconWrapper,\n StyledFilterSearch,\n StyledMotionFilterBackground,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FIlterContent';\nimport {\n CheckboxConfig,\n FilterButtonConfig,\n FilterRef,\n FilterType,\n SearchConfig,\n SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Checkbox from '../checkbox/Checkbox';\nimport { InputRef } from '../input/Input';\nimport type { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport interface FilterRightIcon {\n icons: string[];\n onClick: VoidFunction;\n}\n\n//\nexport type FilterProps = {\n headline: ReactNode;\n searchConfig?: SearchConfig;\n filterButtonConfig?: FilterButtonConfig;\n sortConfig?: SortConfig;\n checkboxConfig?: CheckboxConfig;\n onActiveChange?: (isActive: boolean) => void;\n shouldShowRoundedHoverEffect?: boolean;\n rightIcons?: FilterRightIcon[];\n shouldAutoFocus?: boolean;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n (\n {\n headline,\n searchConfig,\n sortConfig,\n shouldAutoFocus = false,\n shouldShowRoundedHoverEffect = false,\n filterButtonConfig,\n checkboxConfig,\n onActiveChange,\n rightIcons,\n },\n ref,\n ) => {\n const [isOpen, setIsOpen] = useState(false);\n const [isSearchActive, setIsSearchActive] = useState(false);\n const [shouldFocus, setShouldFocus] = useState(false);\n const [backgroundDistance, setBackgroundDistance] = useState(0);\n const [backgroundCoordinates, setBackgroundCoordinates] = useState({ top: 0, left: 0 });\n\n const contentRef = useRef<HTMLDivElement | null>(null);\n const iconRef = useRef<HTMLDivElement | null>(null);\n const filterRef = useRef<HTMLDivElement | null>(null);\n const searchRef = useRef<InputRef | null>(null);\n\n const contextMenuRef = useRef<ContextMenuRef>(null);\n\n const type = useMemo(() => {\n if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig) {\n return FilterType.ONLY_FILTER;\n }\n\n if (!filterButtonConfig && !searchConfig && sortConfig && !checkboxConfig) {\n return FilterType.ONLY_SORT;\n }\n\n if (!filterButtonConfig && searchConfig && !sortConfig && !checkboxConfig) {\n return FilterType.ONLY_SEARCH;\n }\n\n if (!filterButtonConfig && !searchConfig && !sortConfig && checkboxConfig) {\n return FilterType.ONLY_CHECKBOX;\n }\n\n return FilterType.MULTIPLE;\n }, [checkboxConfig, filterButtonConfig, searchConfig, sortConfig]);\n\n const icons = useMemo(() => {\n switch (type) {\n case FilterType.ONLY_FILTER:\n return ['fa fa-filter'];\n case FilterType.ONLY_SORT:\n return ['fa fa-arrow-up-arrow-down'];\n default:\n return ['fa fa-search'];\n }\n }, [type]);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isOpen);\n }\n }, [isOpen, onActiveChange]);\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(false);\n }\n }, [type]);\n\n useEffect(() => {\n if (shouldFocus) {\n searchRef.current?.focus();\n\n window.setTimeout(() => {\n setShouldFocus(false);\n }, 200);\n }\n }, [shouldFocus]);\n\n const handleShow = useCallback(() => {\n setIsOpen(true);\n\n if (shouldAutoFocus) {\n setShouldFocus(true);\n }\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(true);\n }\n }, [shouldAutoFocus, type]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n const handleIconClick = useCallback(() => {\n if (isOpen) {\n handleHide();\n } else {\n handleShow();\n }\n }, [handleHide, handleShow, isOpen]);\n\n useEffect(() => {\n if (headline && iconRef.current && contentRef.current && filterRef.current) {\n const iconRect = iconRef.current.getBoundingClientRect();\n const filterRect = filterRef.current.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const relativeTop = iconRect.bottom - filterRect.top;\n const relativeLeft = iconRect.left - filterRect.left;\n\n setBackgroundDistance(contentRect.top - iconRect.bottom);\n setBackgroundCoordinates({\n top: relativeTop,\n left: relativeLeft,\n });\n } else {\n setBackgroundDistance(0);\n setBackgroundCoordinates({ top: 0, left: 0 });\n }\n }, [headline]);\n\n const iconElement = useMemo(\n () => (\n <StyledFilterIcon\n onClick={handleIconClick}\n $isOpen={isOpen}\n ref={iconRef}\n $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n >\n <Icon icons={icons} size={18} />\n </StyledFilterIcon>\n ),\n [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect],\n );\n\n const backgroundElement = useMemo(\n () => (\n <StyledMotionFilterBackground\n $top={backgroundCoordinates.top}\n $left={backgroundCoordinates.left}\n animate={{ height: isOpen ? `${backgroundDistance}px` : 0 }}\n transition={{ duration: 0.1, delay: isOpen ? 0 : 0.2 }}\n />\n ),\n [backgroundDistance, isOpen, backgroundCoordinates],\n );\n\n const sortItems: ContextMenuItem[] = useMemo(() => {\n if (!sortConfig) {\n return [];\n }\n\n const { selectedItem, onSortChange } = sortConfig;\n\n return sortConfig.items.map(({ id, text }) => ({\n text,\n key: id.toString(),\n isSelected: id === selectedItem.id,\n icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],\n onClick: () => onSortChange({ text, id }),\n }));\n }, [sortConfig]);\n\n return useMemo(\n () => (\n <StyledFilter ref={filterRef}>\n <StyledFilterHead>\n {!isValidElement(headline) ? (\n <StyledFilterHeadline $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadline>\n ) : (\n <StyledFilterHeadlineElement $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadlineElement>\n )}\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <>\n <StyledFilterIconWrapper>\n {rightIcons &&\n rightIcons.map(({ icons: rIcons, onClick }) => (\n <StyledFilterIcon\n onClick={onClick}\n $isOpen={false}\n $shouldShowRoundedHoverEffect={\n shouldShowRoundedHoverEffect\n }\n >\n <Icon icons={rIcons} size={18} />\n </StyledFilterIcon>\n ))}\n {iconElement}\n </StyledFilterIconWrapper>\n {backgroundDistance > 0 && backgroundElement}\n </>\n )}\n {type === FilterType.ONLY_SEARCH && searchConfig && (\n <StyledFilterSearch>\n <SearchInput\n onActiveChange={(isActive) => {\n setIsSearchActive(isActive);\n setIsOpen(isActive);\n }}\n ref={searchRef}\n isActive={isSearchActive}\n value={searchConfig.searchValue}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n />\n </StyledFilterSearch>\n )}\n {type === FilterType.ONLY_SORT && sortConfig && (\n <ContextMenu ref={contextMenuRef} items={sortItems}>\n {iconElement}\n </ContextMenu>\n )}\n {type === FilterType.ONLY_CHECKBOX && checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox {...checkboxConfig} />\n )}\n </StyledFilterHead>\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <StyledFilterContentWrapper ref={contentRef}>\n <ExpandableContent\n isOpen={isOpen}\n startDelay={backgroundDistance > 0 ? 0.1 : 0}\n >\n <FilterContent\n shouldAutoFocus={shouldFocus}\n searchConfig={searchConfig}\n filterButtonConfig={filterButtonConfig}\n sortConfig={sortConfig}\n checkboxConfig={checkboxConfig}\n />\n </ExpandableContent>\n </StyledFilterContentWrapper>\n )}\n </StyledFilter>\n ),\n [\n headline,\n isSearchActive,\n type,\n rightIcons,\n iconElement,\n backgroundDistance,\n backgroundElement,\n searchConfig,\n sortConfig,\n sortItems,\n checkboxConfig,\n isOpen,\n shouldFocus,\n filterButtonConfig,\n shouldShowRoundedHoverEffect,\n ],\n );\n },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"AAAA,OAAOA,KAAK,IACRC,UAAU,EACVC,cAAc,EAEdC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SACIC,YAAY,EACZC,0BAA0B,EAC1BC,gBAAgB,EAChBC,oBAAoB,EACpBC,2BAA2B,EAC3BC,gBAAgB,EAChBC,uBAAuB,EACvBC,kBAAkB,EAClBC,4BAA4B,QACzB,iBAAiB;AACxB,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,SAIIC,UAAU,QAGP,oBAAoB;AAC3B,OAAOC,WAAW,MAAM,6BAA6B;AACrD,OAAOC,WAAW,MAAM,6BAA6B;AACrD,OAAOC,QAAQ,MAAM,sBAAsB;;AAS3C;;AAaA,MAAMC,MAAM,gBAAGxB,UAAU,CACrB,CACI;EACIyB,QAAQ;EACRC,YAAY;EACZC,UAAU;EACVC,eAAe,GAAG,KAAK;EACvBC,4BAA4B,GAAG,KAAK;EACpCC,kBAAkB;EAClBC,cAAc;EACdC,cAAc;EACdC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG7B,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAM,CAAC8B,cAAc,EAAEC,iBAAiB,CAAC,GAAG/B,QAAQ,CAAC,KAAK,CAAC;EAC3D,MAAM,CAACgC,WAAW,EAAEC,cAAc,CAAC,GAAGjC,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAACkC,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGnC,QAAQ,CAAC,CAAC,CAAC;EAC/D,MAAM,CAACoC,qBAAqB,EAAEC,wBAAwB,CAAC,GAAGrC,QAAQ,CAAC;IAAEsC,GAAG,EAAE,CAAC;IAAEC,IAAI,EAAE;EAAE,CAAC,CAAC;EAEvF,MAAMC,UAAU,GAAGzC,MAAM,CAAwB,IAAI,CAAC;EACtD,MAAM0C,OAAO,GAAG1C,MAAM,CAAwB,IAAI,CAAC;EACnD,MAAM2C,SAAS,GAAG3C,MAAM,CAAwB,IAAI,CAAC;EACrD,MAAM4C,SAAS,GAAG5C,MAAM,CAAkB,IAAI,CAAC;EAE/C,MAAM6C,cAAc,GAAG7C,MAAM,CAAiB,IAAI,CAAC;EAEnD,MAAM8C,IAAI,GAAG/C,OAAO,CAAC,MAAM;IACvB,IAAIyB,kBAAkB,IAAI,CAACJ,YAAY,IAAI,CAACC,UAAU,IAAI,CAACI,cAAc,EAAE;MACvE,OAAOX,UAAU,CAACiC,WAAW;IACjC;IAEA,IAAI,CAACvB,kBAAkB,IAAI,CAACJ,YAAY,IAAIC,UAAU,IAAI,CAACI,cAAc,EAAE;MACvE,OAAOX,UAAU,CAACkC,SAAS;IAC/B;IAEA,IAAI,CAACxB,kBAAkB,IAAIJ,YAAY,IAAI,CAACC,UAAU,IAAI,CAACI,cAAc,EAAE;MACvE,OAAOX,UAAU,CAACmC,WAAW;IACjC;IAEA,IAAI,CAACzB,kBAAkB,IAAI,CAACJ,YAAY,IAAI,CAACC,UAAU,IAAII,cAAc,EAAE;MACvE,OAAOX,UAAU,CAACoC,aAAa;IACnC;IAEA,OAAOpC,UAAU,CAACqC,QAAQ;EAC9B,CAAC,EAAE,CAAC1B,cAAc,EAAED,kBAAkB,EAAEJ,YAAY,EAAEC,UAAU,CAAC,CAAC;EAElE,MAAM+B,KAAK,GAAGrD,OAAO,CAAC,MAAM;IACxB,QAAQ+C,IAAI;MACR,KAAKhC,UAAU,CAACiC,WAAW;QACvB,OAAO,CAAC,cAAc,CAAC;MAC3B,KAAKjC,UAAU,CAACkC,SAAS;QACrB,OAAO,CAAC,2BAA2B,CAAC;MACxC;QACI,OAAO,CAAC,cAAc,CAAC;IAC/B;EACJ,CAAC,EAAE,CAACF,IAAI,CAAC,CAAC;EAEVjD,SAAS,CAAC,MAAM;IACZ,IAAI,OAAO6B,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACG,MAAM,CAAC;IAC1B;EACJ,CAAC,EAAE,CAACA,MAAM,EAAEH,cAAc,CAAC,CAAC;EAE5B,MAAM2B,UAAU,GAAGzD,WAAW,CAAC,MAAM;IACjCkC,SAAS,CAAC,KAAK,CAAC;IAEhB,IAAIgB,IAAI,KAAKhC,UAAU,CAACkC,SAAS,IAAIH,cAAc,CAACS,OAAO,EAAE;MACzDT,cAAc,CAACS,OAAO,CAACC,IAAI,CAAC,CAAC;IACjC;IAEA,IAAIT,IAAI,KAAKhC,UAAU,CAACmC,WAAW,EAAE;MACjCjB,iBAAiB,CAAC,KAAK,CAAC;IAC5B;EACJ,CAAC,EAAE,CAACc,IAAI,CAAC,CAAC;EAEVjD,SAAS,CAAC,MAAM;IACZ,IAAIoC,WAAW,EAAE;MACbW,SAAS,CAACU,OAAO,EAAEE,KAAK,CAAC,CAAC;MAE1BC,MAAM,CAACC,UAAU,CAAC,MAAM;QACpBxB,cAAc,CAAC,KAAK,CAAC;MACzB,CAAC,EAAE,GAAG,CAAC;IACX;EACJ,CAAC,EAAE,CAACD,WAAW,CAAC,CAAC;EAEjB,MAAM0B,UAAU,GAAG/D,WAAW,CAAC,MAAM;IACjCkC,SAAS,CAAC,IAAI,CAAC;IAEf,IAAIR,eAAe,EAAE;MACjBY,cAAc,CAAC,IAAI,CAAC;IACxB;IAEA,IAAIY,IAAI,KAAKhC,UAAU,CAACkC,SAAS,IAAIH,cAAc,CAACS,OAAO,EAAE;MACzDT,cAAc,CAACS,OAAO,CAACC,IAAI,CAAC,CAAC;IACjC;IAEA,IAAIT,IAAI,KAAKhC,UAAU,CAACmC,WAAW,EAAE;MACjCjB,iBAAiB,CAAC,IAAI,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACV,eAAe,EAAEwB,IAAI,CAAC,CAAC;EAE3BhD,mBAAmB,CACf8B,GAAG,EACH,OAAO;IACH2B,IAAI,EAAEF,UAAU;IAChBO,IAAI,EAAED;EACV,CAAC,CAAC,EACF,CAACN,UAAU,EAAEM,UAAU,CAC3B,CAAC;EAED,MAAME,eAAe,GAAGjE,WAAW,CAAC,MAAM;IACtC,IAAIiC,MAAM,EAAE;MACRwB,UAAU,CAAC,CAAC;IAChB,CAAC,MAAM;MACHM,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACN,UAAU,EAAEM,UAAU,EAAE9B,MAAM,CAAC,CAAC;EAEpChC,SAAS,CAAC,MAAM;IACZ,IAAIsB,QAAQ,IAAIuB,OAAO,CAACY,OAAO,IAAIb,UAAU,CAACa,OAAO,IAAIX,SAAS,CAACW,OAAO,EAAE;MACxE,MAAMQ,QAAQ,GAAGpB,OAAO,CAACY,OAAO,CAACS,qBAAqB,CAAC,CAAC;MACxD,MAAMC,UAAU,GAAGrB,SAAS,CAACW,OAAO,CAACS,qBAAqB,CAAC,CAAC;MAC5D,MAAME,WAAW,GAAGxB,UAAU,CAACa,OAAO,CAACS,qBAAqB,CAAC,CAAC;MAE9D,MAAMG,WAAW,GAAGJ,QAAQ,CAACK,MAAM,GAAGH,UAAU,CAACzB,GAAG;MACpD,MAAM6B,YAAY,GAAGN,QAAQ,CAACtB,IAAI,GAAGwB,UAAU,CAACxB,IAAI;MAEpDJ,qBAAqB,CAAC6B,WAAW,CAAC1B,GAAG,GAAGuB,QAAQ,CAACK,MAAM,CAAC;MACxD7B,wBAAwB,CAAC;QACrBC,GAAG,EAAE2B,WAAW;QAChB1B,IAAI,EAAE4B;MACV,CAAC,CAAC;IACN,CAAC,MAAM;MACHhC,qBAAqB,CAAC,CAAC,CAAC;MACxBE,wBAAwB,CAAC;QAAEC,GAAG,EAAE,CAAC;QAAEC,IAAI,EAAE;MAAE,CAAC,CAAC;IACjD;EACJ,CAAC,EAAE,CAACrB,QAAQ,CAAC,CAAC;EAEd,MAAMkD,WAAW,GAAGtE,OAAO,CACvB,mBACIN,KAAA,CAAA6E,aAAA,CAAC/D,gBAAgB;IACbgE,OAAO,EAAEV,eAAgB;IACzBW,OAAO,EAAE3C,MAAO;IAChBD,GAAG,EAAEc,OAAQ;IACb+B,6BAA6B,EAAElD;EAA6B,gBAE5D9B,KAAA,CAAA6E,aAAA,CAAC1D,IAAI;IAACwC,KAAK,EAAEA,KAAM;IAACsB,IAAI,EAAE;EAAG,CAAE,CACjB,CACrB,EACD,CAACb,eAAe,EAAET,KAAK,EAAEvB,MAAM,EAAEN,4BAA4B,CACjE,CAAC;EAED,MAAMoD,iBAAiB,GAAG5E,OAAO,CAC7B,mBACIN,KAAA,CAAA6E,aAAA,CAAC5D,4BAA4B;IACzBkE,IAAI,EAAEvC,qBAAqB,CAACE,GAAI;IAChCsC,KAAK,EAAExC,qBAAqB,CAACG,IAAK;IAClCsC,OAAO,EAAE;MAAEC,MAAM,EAAElD,MAAM,GAAG,GAAGM,kBAAkB,IAAI,GAAG;IAAE,CAAE;IAC5D6C,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,KAAK,EAAErD,MAAM,GAAG,CAAC,GAAG;IAAI;EAAE,CAC1D,CACJ,EACD,CAACM,kBAAkB,EAAEN,MAAM,EAAEQ,qBAAqB,CACtD,CAAC;EAED,MAAM8C,SAA4B,GAAGpF,OAAO,CAAC,MAAM;IAC/C,IAAI,CAACsB,UAAU,EAAE;MACb,OAAO,EAAE;IACb;IAEA,MAAM;MAAE+D,YAAY;MAAEC;IAAa,CAAC,GAAGhE,UAAU;IAEjD,OAAOA,UAAU,CAACiE,KAAK,CAACC,GAAG,CAAC,CAAC;MAAEC,EAAE;MAAEC;IAAK,CAAC,MAAM;MAC3CA,IAAI;MACJC,GAAG,EAAEF,EAAE,CAACG,QAAQ,CAAC,CAAC;MAClBC,UAAU,EAAEJ,EAAE,KAAKJ,YAAY,CAACI,EAAE;MAClCpC,KAAK,EAAEoC,EAAE,KAAKJ,YAAY,CAACI,EAAE,GAAG,CAAC,qBAAqB,CAAC,GAAG,EAAE;MAC5DjB,OAAO,EAAEA,CAAA,KAAMc,YAAY,CAAC;QAAEI,IAAI;QAAED;MAAG,CAAC;IAC5C,CAAC,CAAC,CAAC;EACP,CAAC,EAAE,CAACnE,UAAU,CAAC,CAAC;EAEhB,OAAOtB,OAAO,CACV,mBACIN,KAAA,CAAA6E,aAAA,CAACpE,YAAY;IAAC0B,GAAG,EAAEe;EAAU,gBACzBlD,KAAA,CAAA6E,aAAA,CAAClE,gBAAgB,QACZ,eAACT,cAAc,CAACwB,QAAQ,CAAC,gBACtB1B,KAAA,CAAA6E,aAAA,CAACjE,oBAAoB;IAACwF,eAAe,EAAE9D;EAAe,GACjDZ,QACiB,CAAC,gBAEvB1B,KAAA,CAAA6E,aAAA,CAAChE,2BAA2B;IAACuF,eAAe,EAAE9D;EAAe,GACxDZ,QACwB,CAChC,EACA,CAACL,UAAU,CAACqC,QAAQ,EAAErC,UAAU,CAACiC,WAAW,CAAC,CAAC+C,QAAQ,CAAChD,IAAI,CAAC,iBACzDrD,KAAA,CAAA6E,aAAA,CAAA7E,KAAA,CAAAsG,QAAA,qBACItG,KAAA,CAAA6E,aAAA,CAAC9D,uBAAuB,QACnBmB,UAAU,IACPA,UAAU,CAAC4D,GAAG,CAAC,CAAC;IAAEnC,KAAK,EAAE4C,MAAM;IAAEzB;EAAQ,CAAC,kBACtC9E,KAAA,CAAA6E,aAAA,CAAC/D,gBAAgB;IACbgE,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAE,KAAM;IACfC,6BAA6B,EACzBlD;EACH,gBAED9B,KAAA,CAAA6E,aAAA,CAAC1D,IAAI;IAACwC,KAAK,EAAE4C,MAAO;IAACtB,IAAI,EAAE;EAAG,CAAE,CAClB,CACrB,CAAC,EACLL,WACoB,CAAC,EACzBlC,kBAAkB,GAAG,CAAC,IAAIwC,iBAC7B,CACL,EACA7B,IAAI,KAAKhC,UAAU,CAACmC,WAAW,IAAI7B,YAAY,iBAC5C3B,KAAA,CAAA6E,aAAA,CAAC7D,kBAAkB,qBACfhB,KAAA,CAAA6E,aAAA,CAACvD,WAAW;IACRW,cAAc,EAAGuE,QAAQ,IAAK;MAC1BjE,iBAAiB,CAACiE,QAAQ,CAAC;MAC3BnE,SAAS,CAACmE,QAAQ,CAAC;IACvB,CAAE;IACFrE,GAAG,EAAEgB,SAAU;IACfqD,QAAQ,EAAElE,cAAe;IACzBmE,KAAK,EAAE9E,YAAY,CAAC+E,WAAY;IAChCC,QAAQ,EAAGC,EAAE,IAAKjF,YAAY,CAACkF,cAAc,CAACD,EAAE,CAACE,MAAM,CAACL,KAAK;EAAE,CAClE,CACe,CACvB,EACApD,IAAI,KAAKhC,UAAU,CAACkC,SAAS,IAAI3B,UAAU,iBACxC5B,KAAA,CAAA6E,aAAA,CAACtD,WAAW;IAACY,GAAG,EAAEiB,cAAe;IAACyC,KAAK,EAAEH;EAAU,GAC9Cd,WACQ,CAChB,EACAvB,IAAI,KAAKhC,UAAU,CAACoC,aAAa,IAAIzB,cAAc;EAAA;EAChD;EACAhC,KAAA,CAAA6E,aAAA,CAACrD,QAAQ,EAAKQ,cAAiB,CAErB,CAAC,EAClB,CAACX,UAAU,CAACqC,QAAQ,EAAErC,UAAU,CAACiC,WAAW,CAAC,CAAC+C,QAAQ,CAAChD,IAAI,CAAC,iBACzDrD,KAAA,CAAA6E,aAAA,CAACnE,0BAA0B;IAACyB,GAAG,EAAEa;EAAW,gBACxChD,KAAA,CAAA6E,aAAA,CAAC3D,iBAAiB;IACdkB,MAAM,EAAEA,MAAO;IACf2E,UAAU,EAAErE,kBAAkB,GAAG,CAAC,GAAG,GAAG,GAAG;EAAE,gBAE7C1C,KAAA,CAAA6E,aAAA,CAACzD,aAAa;IACVS,eAAe,EAAEW,WAAY;IAC7Bb,YAAY,EAAEA,YAAa;IAC3BI,kBAAkB,EAAEA,kBAAmB;IACvCH,UAAU,EAAEA,UAAW;IACvBI,cAAc,EAAEA;EAAe,CAClC,CACc,CACK,CAEtB,CACjB,EACD,CACIN,QAAQ,EACRY,cAAc,EACde,IAAI,EACJnB,UAAU,EACV0C,WAAW,EACXlC,kBAAkB,EAClBwC,iBAAiB,EACjBvD,YAAY,EACZC,UAAU,EACV8D,SAAS,EACT1D,cAAc,EACdI,MAAM,EACNI,WAAW,EACXT,kBAAkB,EAClBD,4BAA4B,CAEpC,CAAC;AACL,CACJ,CAAC;AAEDL,MAAM,CAACuF,WAAW,GAAG,QAAQ;AAE7B,eAAevF,MAAM","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Filter.js","names":["React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","StyledFilter","StyledFilterContentWrapper","StyledFilterHead","StyledFilterHeadline","StyledFilterHeadlineElement","StyledFilterIcon","StyledFilterIconWrapper","StyledFilterSearch","StyledMotionFilterBackground","ExpandableContent","Icon","FilterContent","ComboBox","FilterType","SearchInput","ContextMenu","Checkbox","Filter","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","comboboxConfig","onActiveChange","rightIcons","ref","isOpen","setIsOpen","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","backgroundDistance","setBackgroundDistance","backgroundCoordinates","setBackgroundCoordinates","top","left","contentRef","iconRef","filterRef","searchRef","contextMenuRef","type","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","ONLY_COMBOBOX","MULTIPLE","icons","handleHide","current","hide","focus","window","setTimeout","handleShow","show","handleIconClick","iconRect","getBoundingClientRect","filterRect","contentRect","relativeTop","bottom","relativeLeft","iconElement","createElement","onClick","$isOpen","$shouldShowRoundedHoverEffect","size","backgroundElement","$top","$left","animate","height","transition","duration","delay","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","comboboxElement","$isSearchActive","includes","Fragment","rIcons","isActive","value","searchValue","onChange","ev","onSearchChange","target","startDelay","displayName"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n forwardRef,\n isValidElement,\n ReactNode,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledFilter,\n StyledFilterContentWrapper,\n StyledFilterHead,\n StyledFilterHeadline,\n StyledFilterHeadlineElement,\n StyledFilterIcon,\n StyledFilterIconWrapper,\n StyledFilterSearch,\n StyledMotionFilterBackground,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FIlterContent';\nimport ComboBox from '../combobox/ComboBox';\nimport {\n CheckboxConfig,\n ComboboxConfig,\n FilterButtonConfig,\n FilterRef,\n FilterType,\n SearchConfig,\n SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Checkbox from '../checkbox/Checkbox';\nimport { InputRef } from '../input/Input';\nimport type { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport interface FilterRightIcon {\n icons: string[];\n onClick: VoidFunction;\n}\n\n//\nexport type FilterProps = {\n headline: ReactNode;\n searchConfig?: SearchConfig;\n filterButtonConfig?: FilterButtonConfig;\n sortConfig?: SortConfig;\n checkboxConfig?: CheckboxConfig;\n comboboxConfig?: ComboboxConfig;\n onActiveChange?: (isActive: boolean) => void;\n shouldShowRoundedHoverEffect?: boolean;\n rightIcons?: FilterRightIcon[];\n shouldAutoFocus?: boolean;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n (\n {\n headline,\n searchConfig,\n sortConfig,\n shouldAutoFocus = false,\n shouldShowRoundedHoverEffect = false,\n filterButtonConfig,\n checkboxConfig,\n comboboxConfig,\n onActiveChange,\n rightIcons,\n },\n ref,\n ) => {\n const [isOpen, setIsOpen] = useState(false);\n const [isSearchActive, setIsSearchActive] = useState(false);\n const [shouldFocus, setShouldFocus] = useState(false);\n const [backgroundDistance, setBackgroundDistance] = useState(0);\n const [backgroundCoordinates, setBackgroundCoordinates] = useState({ top: 0, left: 0 });\n\n const contentRef = useRef<HTMLDivElement | null>(null);\n const iconRef = useRef<HTMLDivElement | null>(null);\n const filterRef = useRef<HTMLDivElement | null>(null);\n const searchRef = useRef<InputRef | null>(null);\n\n const contextMenuRef = useRef<ContextMenuRef>(null);\n\n const type = useMemo(() => {\n if (\n filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_FILTER;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_SORT;\n }\n\n if (\n !filterButtonConfig &&\n searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_SEARCH;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n checkboxConfig &&\n !comboboxConfig\n ) {\n return FilterType.ONLY_CHECKBOX;\n }\n\n if (\n !filterButtonConfig &&\n !searchConfig &&\n !sortConfig &&\n !checkboxConfig &&\n comboboxConfig\n ) {\n return FilterType.ONLY_COMBOBOX;\n }\n\n return FilterType.MULTIPLE;\n }, [checkboxConfig, comboboxConfig, filterButtonConfig, searchConfig, sortConfig]);\n\n const icons = useMemo(() => {\n switch (type) {\n case FilterType.ONLY_FILTER:\n return ['fa fa-filter'];\n case FilterType.ONLY_SORT:\n return ['fa fa-arrow-up-arrow-down'];\n default:\n return ['fa fa-search'];\n }\n }, [type]);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isOpen);\n }\n }, [isOpen, onActiveChange]);\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(false);\n }\n }, [type]);\n\n useEffect(() => {\n if (shouldFocus) {\n searchRef.current?.focus();\n\n window.setTimeout(() => {\n setShouldFocus(false);\n }, 200);\n }\n }, [shouldFocus]);\n\n const handleShow = useCallback(() => {\n setIsOpen(true);\n\n if (shouldAutoFocus) {\n setShouldFocus(true);\n }\n\n if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n contextMenuRef.current.hide();\n }\n\n if (type === FilterType.ONLY_SEARCH) {\n setIsSearchActive(true);\n }\n }, [shouldAutoFocus, type]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n const handleIconClick = useCallback(() => {\n if (isOpen) {\n handleHide();\n } else {\n handleShow();\n }\n }, [handleHide, handleShow, isOpen]);\n\n useEffect(() => {\n if (headline && iconRef.current && contentRef.current && filterRef.current) {\n const iconRect = iconRef.current.getBoundingClientRect();\n const filterRect = filterRef.current.getBoundingClientRect();\n const contentRect = contentRef.current.getBoundingClientRect();\n\n const relativeTop = iconRect.bottom - filterRect.top;\n const relativeLeft = iconRect.left - filterRect.left;\n\n setBackgroundDistance(contentRect.top - iconRect.bottom);\n setBackgroundCoordinates({\n top: relativeTop,\n left: relativeLeft,\n });\n } else {\n setBackgroundDistance(0);\n setBackgroundCoordinates({ top: 0, left: 0 });\n }\n }, [headline]);\n\n const iconElement = useMemo(\n () => (\n <StyledFilterIcon\n onClick={handleIconClick}\n $isOpen={isOpen}\n ref={iconRef}\n $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n >\n <Icon icons={icons} size={18} />\n </StyledFilterIcon>\n ),\n [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect],\n );\n\n const backgroundElement = useMemo(\n () => (\n <StyledMotionFilterBackground\n $top={backgroundCoordinates.top}\n $left={backgroundCoordinates.left}\n animate={{ height: isOpen ? `${backgroundDistance}px` : 0 }}\n transition={{ duration: 0.1, delay: isOpen ? 0 : 0.2 }}\n />\n ),\n [backgroundDistance, isOpen, backgroundCoordinates],\n );\n\n const sortItems: ContextMenuItem[] = useMemo(() => {\n if (!sortConfig) {\n return [];\n }\n\n const { selectedItem, onSortChange } = sortConfig;\n\n return sortConfig.items.map(({ id, text }) => ({\n text,\n key: id.toString(),\n isSelected: id === selectedItem.id,\n icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],\n onClick: () => onSortChange({ text, id }),\n }));\n }, [sortConfig]);\n\n const comboboxElement = useMemo(() => {\n if (!comboboxConfig) {\n return null;\n }\n\n return (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <ComboBox {...comboboxConfig} />\n );\n }, [comboboxConfig]);\n\n return useMemo(\n () => (\n <StyledFilter ref={filterRef}>\n <StyledFilterHead>\n {!isValidElement(headline) ? (\n <StyledFilterHeadline $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadline>\n ) : (\n <StyledFilterHeadlineElement $isSearchActive={isSearchActive}>\n {headline}\n </StyledFilterHeadlineElement>\n )}\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <>\n <StyledFilterIconWrapper>\n {rightIcons &&\n rightIcons.map(({ icons: rIcons, onClick }) => (\n <StyledFilterIcon\n onClick={onClick}\n $isOpen={false}\n $shouldShowRoundedHoverEffect={\n shouldShowRoundedHoverEffect\n }\n >\n <Icon icons={rIcons} size={18} />\n </StyledFilterIcon>\n ))}\n {iconElement}\n </StyledFilterIconWrapper>\n {backgroundDistance > 0 && backgroundElement}\n </>\n )}\n {type === FilterType.ONLY_SEARCH && searchConfig && (\n <StyledFilterSearch>\n <SearchInput\n onActiveChange={(isActive) => {\n setIsSearchActive(isActive);\n setIsOpen(isActive);\n }}\n ref={searchRef}\n isActive={isSearchActive}\n value={searchConfig.searchValue}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n />\n </StyledFilterSearch>\n )}\n {type === FilterType.ONLY_SORT && sortConfig && (\n <ContextMenu ref={contextMenuRef} items={sortItems}>\n {iconElement}\n </ContextMenu>\n )}\n {type === FilterType.ONLY_CHECKBOX && checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox {...checkboxConfig} />\n )}\n {type === FilterType.ONLY_COMBOBOX && comboboxElement}\n </StyledFilterHead>\n {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n <StyledFilterContentWrapper ref={contentRef}>\n <ExpandableContent\n isOpen={isOpen}\n startDelay={backgroundDistance > 0 ? 0.1 : 0}\n >\n <FilterContent\n shouldAutoFocus={shouldFocus}\n searchConfig={searchConfig}\n filterButtonConfig={filterButtonConfig}\n sortConfig={sortConfig}\n checkboxConfig={checkboxConfig}\n comboboxConfig={comboboxConfig}\n />\n </ExpandableContent>\n </StyledFilterContentWrapper>\n )}\n </StyledFilter>\n ),\n [\n headline,\n isSearchActive,\n type,\n rightIcons,\n iconElement,\n backgroundDistance,\n backgroundElement,\n searchConfig,\n sortConfig,\n sortItems,\n checkboxConfig,\n isOpen,\n shouldFocus,\n filterButtonConfig,\n comboboxConfig,\n comboboxElement,\n shouldShowRoundedHoverEffect,\n ],\n );\n },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
1
2
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
-
import { StyledFilterComboboxWrapper, StyledFilterContent, StyledFilterSort, StyledFilterSortText } from './FilterContent.styles';
|
|
3
|
+
import { StyledFilterComboboxInline, StyledFilterComboboxInlineComboboxWrapper, StyledFilterComboboxInlineLabel, StyledFilterComboboxWrapper, StyledFilterContent, StyledFilterSort, StyledFilterSortText } from './FilterContent.styles';
|
|
3
4
|
import Input from '../../input/Input';
|
|
4
5
|
import Icon from '../../icon/Icon';
|
|
5
6
|
import FilterButtons from '../../filter-buttons/FilterButtons';
|
|
@@ -10,6 +11,7 @@ const FilterContent = ({
|
|
|
10
11
|
sortConfig,
|
|
11
12
|
filterButtonConfig,
|
|
12
13
|
checkboxConfig,
|
|
14
|
+
comboboxConfig,
|
|
13
15
|
shouldAutoFocus
|
|
14
16
|
}) => {
|
|
15
17
|
const sortTextRef = useRef(null);
|
|
@@ -69,10 +71,12 @@ const FilterContent = ({
|
|
|
69
71
|
value: sortConfig.selectedItem.id
|
|
70
72
|
},
|
|
71
73
|
onSelect: handleSelectSortItem
|
|
72
|
-
}))),
|
|
74
|
+
}))), comboboxConfig && /*#__PURE__*/React.createElement(StyledFilterComboboxInline, null, /*#__PURE__*/React.createElement(StyledFilterComboboxInlineLabel, null, comboboxConfig.label), /*#__PURE__*/React.createElement(StyledFilterComboboxInlineComboboxWrapper, null, /*#__PURE__*/React.createElement(ComboBox, _extends({
|
|
75
|
+
shouldUseCurrentItemWidth: true
|
|
76
|
+
}, comboboxConfig)))), checkboxConfig &&
|
|
73
77
|
/*#__PURE__*/
|
|
74
78
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
75
|
-
React.createElement(Checkbox, checkboxConfig)), [checkboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, sortTextWidth]);
|
|
79
|
+
React.createElement(Checkbox, checkboxConfig)), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, sortTextWidth]);
|
|
76
80
|
};
|
|
77
81
|
FilterContent.displayName = 'FilterContent';
|
|
78
82
|
export default FilterContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FIlterContent.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","StyledFilterComboboxWrapper","StyledFilterContent","StyledFilterSort","StyledFilterSortText","Input","Icon","FilterButtons","ComboBox","Checkbox","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","shouldAutoFocus","sortTextRef","searchRef","sortTextWidth","setSortTextWidth","handleSelectSortItem","item","text","value","onSortChange","id","current","clientWidth","focus","createElement","ref","onChange","ev","onSearchChange","target","placeholder","searchValue","shouldShowClearIcon","length","leftElement","icons","$textWidth","lists","list","items","map","selectedItem","onSelect","displayName"],"sources":["../../../../../src/components/filter/filter-content/FIlterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n StyledFilterComboboxWrapper,\n StyledFilterContent,\n StyledFilterSort,\n StyledFilterSortText,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n CheckboxConfig,\n FilterButtonConfig,\n SearchConfig,\n SortConfig,\n} from '../../../types/filter';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { IComboBoxItem } from '../../combobox/ComboBox.types';\n\nexport type FilterContentProps = {\n searchConfig?: SearchConfig;\n filterButtonConfig?: FilterButtonConfig;\n sortConfig?: SortConfig;\n checkboxConfig?: CheckboxConfig;\n shouldAutoFocus: boolean;\n};\n\nconst FilterContent: FC<FilterContentProps> = ({\n searchConfig,\n sortConfig,\n filterButtonConfig,\n checkboxConfig,\n shouldAutoFocus,\n}) => {\n const sortTextRef = useRef<HTMLDivElement>(null);\n const searchRef = useRef<InputRef>(null);\n\n const [sortTextWidth, setSortTextWidth] = useState(0);\n\n const handleSelectSortItem = useCallback(\n (item: IComboBoxItem | undefined) => {\n if (!item) {\n return;\n }\n\n const { text, value } = item;\n\n if (sortConfig) {\n sortConfig.onSortChange({ text, id: value });\n }\n },\n [sortConfig],\n );\n\n useEffect(() => {\n if (sortTextRef.current) {\n setSortTextWidth(sortTextRef.current.clientWidth + 20);\n }\n }, []);\n\n useEffect(() => {\n if (shouldAutoFocus) {\n searchRef.current?.focus();\n }\n }, [shouldAutoFocus]);\n\n return useMemo(\n () => (\n <StyledFilterContent>\n {searchConfig && (\n <Input\n ref={searchRef}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n placeholder=\"Suche\"\n value={searchConfig.searchValue}\n shouldShowClearIcon={searchConfig.searchValue.length > 0}\n leftElement={<Icon icons={['fa fa-search']} />}\n />\n )}\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n {sortConfig && (\n <StyledFilterSort>\n <StyledFilterSortText ref={sortTextRef}>Sortierung</StyledFilterSortText>\n <StyledFilterComboboxWrapper $textWidth={sortTextWidth}>\n <ComboBox\n lists={[\n {\n list: sortConfig.items.map(({ text, id }) => ({\n text,\n value: id,\n })),\n },\n ]}\n placeholder=\"\"\n selectedItem={{\n text: sortConfig.selectedItem.text,\n value: sortConfig.selectedItem.id,\n }}\n onSelect={handleSelectSortItem}\n />\n </StyledFilterComboboxWrapper>\n </StyledFilterSort>\n )}\n {checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox {...checkboxConfig} />\n )}\n </StyledFilterContent>\n ),\n [\n checkboxConfig,\n filterButtonConfig,\n handleSelectSortItem,\n searchConfig,\n sortConfig,\n sortTextWidth,\n ],\n );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACpF,SACIC,2BAA2B,EAC3BC,mBAAmB,EACnBC,gBAAgB,EAChBC,oBAAoB,QACjB,wBAAwB;AAC/B,OAAOC,KAAK,MAAoB,mBAAmB;AACnD,OAAOC,IAAI,MAAM,iBAAiB;AAClC,OAAOC,aAAa,MAAM,oCAAoC;
|
|
1
|
+
{"version":3,"file":"FIlterContent.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","StyledFilterComboboxInline","StyledFilterComboboxInlineComboboxWrapper","StyledFilterComboboxInlineLabel","StyledFilterComboboxWrapper","StyledFilterContent","StyledFilterSort","StyledFilterSortText","Input","Icon","FilterButtons","ComboBox","Checkbox","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","sortTextRef","searchRef","sortTextWidth","setSortTextWidth","handleSelectSortItem","item","text","value","onSortChange","id","current","clientWidth","focus","createElement","ref","onChange","ev","onSearchChange","target","placeholder","searchValue","shouldShowClearIcon","length","leftElement","icons","$textWidth","lists","list","items","map","selectedItem","onSelect","label","_extends","shouldUseCurrentItemWidth","displayName"],"sources":["../../../../../src/components/filter/filter-content/FIlterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n StyledFilterComboboxInline,\n StyledFilterComboboxInlineComboboxWrapper,\n StyledFilterComboboxInlineLabel,\n StyledFilterComboboxWrapper,\n StyledFilterContent,\n StyledFilterSort,\n StyledFilterSortText,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n CheckboxConfig,\n ComboboxConfig,\n FilterButtonConfig,\n SearchConfig,\n SortConfig,\n} from '../../../types/filter';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { IComboBoxItem } from '../../combobox/ComboBox.types';\n\nexport type FilterContentProps = {\n searchConfig?: SearchConfig;\n filterButtonConfig?: FilterButtonConfig;\n sortConfig?: SortConfig;\n checkboxConfig?: CheckboxConfig;\n comboboxConfig?: ComboboxConfig;\n shouldAutoFocus: boolean;\n};\n\nconst FilterContent: FC<FilterContentProps> = ({\n searchConfig,\n sortConfig,\n filterButtonConfig,\n checkboxConfig,\n comboboxConfig,\n shouldAutoFocus,\n}) => {\n const sortTextRef = useRef<HTMLDivElement>(null);\n const searchRef = useRef<InputRef>(null);\n\n const [sortTextWidth, setSortTextWidth] = useState(0);\n\n const handleSelectSortItem = useCallback(\n (item: IComboBoxItem | undefined) => {\n if (!item) {\n return;\n }\n\n const { text, value } = item;\n\n if (sortConfig) {\n sortConfig.onSortChange({ text, id: value });\n }\n },\n [sortConfig],\n );\n\n useEffect(() => {\n if (sortTextRef.current) {\n setSortTextWidth(sortTextRef.current.clientWidth + 20);\n }\n }, []);\n\n useEffect(() => {\n if (shouldAutoFocus) {\n searchRef.current?.focus();\n }\n }, [shouldAutoFocus]);\n\n return useMemo(\n () => (\n <StyledFilterContent>\n {searchConfig && (\n <Input\n ref={searchRef}\n onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n placeholder=\"Suche\"\n value={searchConfig.searchValue}\n shouldShowClearIcon={searchConfig.searchValue.length > 0}\n leftElement={<Icon icons={['fa fa-search']} />}\n />\n )}\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n {sortConfig && (\n <StyledFilterSort>\n <StyledFilterSortText ref={sortTextRef}>Sortierung</StyledFilterSortText>\n <StyledFilterComboboxWrapper $textWidth={sortTextWidth}>\n <ComboBox\n lists={[\n {\n list: sortConfig.items.map(({ text, id }) => ({\n text,\n value: id,\n })),\n },\n ]}\n placeholder=\"\"\n selectedItem={{\n text: sortConfig.selectedItem.text,\n value: sortConfig.selectedItem.id,\n }}\n onSelect={handleSelectSortItem}\n />\n </StyledFilterComboboxWrapper>\n </StyledFilterSort>\n )}\n {comboboxConfig && (\n <StyledFilterComboboxInline>\n <StyledFilterComboboxInlineLabel>\n {comboboxConfig.label}\n </StyledFilterComboboxInlineLabel>\n <StyledFilterComboboxInlineComboboxWrapper>\n {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n <ComboBox shouldUseCurrentItemWidth {...comboboxConfig} />\n </StyledFilterComboboxInlineComboboxWrapper>\n </StyledFilterComboboxInline>\n )}\n {checkboxConfig && (\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Checkbox {...checkboxConfig} />\n )}\n </StyledFilterContent>\n ),\n [\n checkboxConfig,\n comboboxConfig,\n filterButtonConfig,\n handleSelectSortItem,\n searchConfig,\n sortConfig,\n sortTextWidth,\n ],\n );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,12 +8,13 @@ export const StyledFilterContent = styled.div`
|
|
|
8
8
|
|
|
9
9
|
display: flex;
|
|
10
10
|
flex-direction: column;
|
|
11
|
-
gap:
|
|
11
|
+
gap: 10px;
|
|
12
12
|
`;
|
|
13
13
|
export const StyledFilterSort = styled.div`
|
|
14
14
|
display: flex;
|
|
15
15
|
align-items: center;
|
|
16
|
-
|
|
16
|
+
justify-content: space-between;
|
|
17
|
+
gap: 10px;
|
|
17
18
|
`;
|
|
18
19
|
export const StyledFilterSortText = styled.div`
|
|
19
20
|
flex: 0 0 auto;
|
|
@@ -26,4 +27,19 @@ export const StyledFilterComboboxWrapper = styled.div`
|
|
|
26
27
|
$textWidth
|
|
27
28
|
}) => `calc(100% - ${$textWidth}px)`}}
|
|
28
29
|
`;
|
|
30
|
+
export const StyledFilterComboboxInline = styled.div`
|
|
31
|
+
display: flex;
|
|
32
|
+
justify-content: space-between;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 10px;
|
|
35
|
+
`;
|
|
36
|
+
export const StyledFilterComboboxInlineLabel = styled.div`
|
|
37
|
+
flex: 0 0 auto;
|
|
38
|
+
`;
|
|
39
|
+
export const StyledFilterComboboxInlineComboboxWrapper = styled.div`
|
|
40
|
+
display: flex;
|
|
41
|
+
justify-content: end;
|
|
42
|
+
flex: 1 1 auto;
|
|
43
|
+
min-width: 0;
|
|
44
|
+
`;
|
|
29
45
|
//# sourceMappingURL=FilterContent.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterContent.styles.js","names":["styled","StyledFilterContent","div","theme","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterContentProps = WithTheme<unknown>;\n\nexport const StyledFilterContent = styled.div<StyledFilterContentProps>`\n background-color: ${({ theme }) => theme['100']};\n\n padding: 12px;\n\n display: flex;\n flex-direction: column;\n gap:
|
|
1
|
+
{"version":3,"file":"FilterContent.styles.js","names":["styled","StyledFilterContent","div","theme","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth","StyledFilterComboboxInline","StyledFilterComboboxInlineLabel","StyledFilterComboboxInlineComboboxWrapper"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterContentProps = WithTheme<unknown>;\n\nexport const StyledFilterContent = styled.div<StyledFilterContentProps>`\n background-color: ${({ theme }) => theme['100']};\n\n padding: 12px;\n\n display: flex;\n flex-direction: column;\n gap: 10px;\n`;\n\nexport const StyledFilterSort = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 10px;\n`;\n\nexport const StyledFilterSortText = styled.div`\n flex: 0 0 auto;\n`;\n\ntype StyledFilterComboboxWrapperProps = WithTheme<{\n $textWidth: number;\n}>;\n\nexport const StyledFilterComboboxWrapper = styled.div<StyledFilterComboboxWrapperProps>`\n display: flex;\n justify-content: end;\n \n width: ${({ $textWidth }) => `calc(100% - ${$textWidth}px)`}}\n`;\n\nexport const StyledFilterComboboxInline = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n`;\n\nexport const StyledFilterComboboxInlineLabel = styled.div`\n flex: 0 0 auto;\n`;\n\nexport const StyledFilterComboboxInlineComboboxWrapper = styled.div`\n display: flex;\n justify-content: end;\n flex: 1 1 auto;\n min-width: 0;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,mBAAmB,GAAGD,MAAM,CAACE,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,gBAAgB,GAAGJ,MAAM,CAACE,GAAG;AAC1C;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,oBAAoB,GAAGL,MAAM,CAACE,GAAG;AAC9C;AACA,CAAC;AAMD,OAAO,MAAMI,2BAA2B,GAAGN,MAAM,CAACE,GAAqC;AACvF;AACA;AACA;AACA,aAAa,CAAC;EAAEK;AAAW,CAAC,KAAK,eAAeA,UAAU,KAAK;AAC/D,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGR,MAAM,CAACE,GAAG;AACpD;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMO,+BAA+B,GAAGT,MAAM,CAACE,GAAG;AACzD;AACA,CAAC;AAED,OAAO,MAAMQ,yCAAyC,GAAGV,MAAM,CAACE,GAAG;AACnE;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
package/lib/esm/types/filter.js
CHANGED
|
@@ -3,7 +3,8 @@ export let FilterType = /*#__PURE__*/function (FilterType) {
|
|
|
3
3
|
FilterType[FilterType["ONLY_FILTER"] = 1] = "ONLY_FILTER";
|
|
4
4
|
FilterType[FilterType["ONLY_SORT"] = 2] = "ONLY_SORT";
|
|
5
5
|
FilterType[FilterType["ONLY_CHECKBOX"] = 3] = "ONLY_CHECKBOX";
|
|
6
|
-
FilterType[FilterType["
|
|
6
|
+
FilterType[FilterType["ONLY_COMBOBOX"] = 4] = "ONLY_COMBOBOX";
|
|
7
|
+
FilterType[FilterType["MULTIPLE"] = 5] = "MULTIPLE";
|
|
7
8
|
return FilterType;
|
|
8
9
|
}({});
|
|
9
10
|
//# sourceMappingURL=filter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter.js","names":["FilterType"],"sources":["../../../src/types/filter.ts"],"sourcesContent":["import { FilterButtonsProps } from '../components/filter-buttons/FilterButtons';\nimport { CheckboxProps } from '../components/checkbox/Checkbox';\n\nexport interface SearchConfig {\n onSearchChange: (search: string) => void;\n searchValue: string;\n}\n\nexport interface SortItem {\n text: string;\n id: string | number;\n}\n\nexport interface SortConfig {\n onSortChange: (item: SortItem) => void;\n selectedItem: SortItem;\n items: SortItem[];\n}\n\nexport type CheckboxConfig = CheckboxProps;\n\nexport type FilterButtonConfig = FilterButtonsProps;\n\nexport type FilterRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\nexport enum FilterType {\n ONLY_SEARCH,\n ONLY_FILTER,\n ONLY_SORT,\n ONLY_CHECKBOX,\n MULTIPLE,\n}\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"filter.js","names":["FilterType"],"sources":["../../../src/types/filter.ts"],"sourcesContent":["import { FilterButtonsProps } from '../components/filter-buttons/FilterButtons';\nimport { CheckboxProps } from '../components/checkbox/Checkbox';\nimport { ComboBoxProps } from '../components/combobox/ComboBox.types';\n\nexport interface SearchConfig {\n onSearchChange: (search: string) => void;\n searchValue: string;\n}\n\nexport interface SortItem {\n text: string;\n id: string | number;\n}\n\nexport interface SortConfig {\n onSortChange: (item: SortItem) => void;\n selectedItem: SortItem;\n items: SortItem[];\n}\n\nexport type CheckboxConfig = CheckboxProps;\n\nexport type FilterButtonConfig = FilterButtonsProps;\n\nexport type ComboboxConfig = ComboBoxProps & { label: string };\n\nexport type FilterRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\nexport enum FilterType {\n ONLY_SEARCH,\n ONLY_FILTER,\n ONLY_SORT,\n ONLY_CHECKBOX,\n ONLY_COMBOBOX,\n MULTIPLE,\n}\n"],"mappings":"AA+BA,WAAYA,UAAU,0BAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA","ignoreList":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
import { CheckboxConfig, FilterButtonConfig, FilterRef, SearchConfig, SortConfig } from '../../types/filter';
|
|
2
|
+
import { CheckboxConfig, ComboboxConfig, FilterButtonConfig, FilterRef, SearchConfig, SortConfig } from '../../types/filter';
|
|
3
3
|
export interface FilterRightIcon {
|
|
4
4
|
icons: string[];
|
|
5
5
|
onClick: VoidFunction;
|
|
@@ -10,6 +10,7 @@ export type FilterProps = {
|
|
|
10
10
|
filterButtonConfig?: FilterButtonConfig;
|
|
11
11
|
sortConfig?: SortConfig;
|
|
12
12
|
checkboxConfig?: CheckboxConfig;
|
|
13
|
+
comboboxConfig?: ComboboxConfig;
|
|
13
14
|
onActiveChange?: (isActive: boolean) => void;
|
|
14
15
|
shouldShowRoundedHoverEffect?: boolean;
|
|
15
16
|
rightIcons?: FilterRightIcon[];
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { CheckboxConfig, FilterButtonConfig, SearchConfig, SortConfig } from '../../../types/filter';
|
|
2
|
+
import { CheckboxConfig, ComboboxConfig, FilterButtonConfig, SearchConfig, SortConfig } from '../../../types/filter';
|
|
3
3
|
export type FilterContentProps = {
|
|
4
4
|
searchConfig?: SearchConfig;
|
|
5
5
|
filterButtonConfig?: FilterButtonConfig;
|
|
6
6
|
sortConfig?: SortConfig;
|
|
7
7
|
checkboxConfig?: CheckboxConfig;
|
|
8
|
+
comboboxConfig?: ComboboxConfig;
|
|
8
9
|
shouldAutoFocus: boolean;
|
|
9
10
|
};
|
|
10
11
|
declare const FilterContent: FC<FilterContentProps>;
|
|
@@ -8,4 +8,7 @@ type StyledFilterComboboxWrapperProps = WithTheme<{
|
|
|
8
8
|
$textWidth: number;
|
|
9
9
|
}>;
|
|
10
10
|
export declare const StyledFilterComboboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFilterComboboxWrapperProps>> & string;
|
|
11
|
+
export declare const StyledFilterComboboxInline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
12
|
+
export declare const StyledFilterComboboxInlineLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
13
|
+
export declare const StyledFilterComboboxInlineComboboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
11
14
|
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FilterButtonsProps } from '../components/filter-buttons/FilterButtons';
|
|
2
2
|
import { CheckboxProps } from '../components/checkbox/Checkbox';
|
|
3
|
+
import { ComboBoxProps } from '../components/combobox/ComboBox.types';
|
|
3
4
|
export interface SearchConfig {
|
|
4
5
|
onSearchChange: (search: string) => void;
|
|
5
6
|
searchValue: string;
|
|
@@ -15,6 +16,9 @@ export interface SortConfig {
|
|
|
15
16
|
}
|
|
16
17
|
export type CheckboxConfig = CheckboxProps;
|
|
17
18
|
export type FilterButtonConfig = FilterButtonsProps;
|
|
19
|
+
export type ComboboxConfig = ComboBoxProps & {
|
|
20
|
+
label: string;
|
|
21
|
+
};
|
|
18
22
|
export type FilterRef = {
|
|
19
23
|
hide: VoidFunction;
|
|
20
24
|
show: VoidFunction;
|
|
@@ -24,5 +28,6 @@ export declare enum FilterType {
|
|
|
24
28
|
ONLY_FILTER = 1,
|
|
25
29
|
ONLY_SORT = 2,
|
|
26
30
|
ONLY_CHECKBOX = 3,
|
|
27
|
-
|
|
31
|
+
ONLY_COMBOBOX = 4,
|
|
32
|
+
MULTIPLE = 5
|
|
28
33
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.49",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "15973764e3241195e661613e7e557af0671ca314"
|
|
91
91
|
}
|