@activecollab/components 1.0.187 → 1.0.188
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/dist/cjs/components/Filter/Filter.js +5 -0
- package/dist/cjs/components/Filter/Filter.js.map +1 -1
- package/dist/esm/components/Filter/Filter.d.ts.map +1 -1
- package/dist/esm/components/Filter/Filter.js +6 -1
- package/dist/esm/components/Filter/Filter.js.map +1 -1
- package/dist/index.js +5 -0
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -98,6 +98,11 @@ var Filter = function Filter(_ref) {
|
|
|
98
98
|
filter = _useState12[0],
|
|
99
99
|
setFilter = _useState12[1];
|
|
100
100
|
|
|
101
|
+
(0, _react.useEffect)(function () {
|
|
102
|
+
if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {
|
|
103
|
+
setFilter(selected);
|
|
104
|
+
}
|
|
105
|
+
}, [selected, filter]);
|
|
101
106
|
var handleOpen = (0, _react.useCallback)(function () {
|
|
102
107
|
setOpen(true);
|
|
103
108
|
}, []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Filter/Filter.tsx"],"names":["Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","handleOpen","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","length","handleClearAll","event","stopPropagation","handleReset","count","c","Object","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","Boolean"],"mappings":"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","sourcesContent":["import React, { FC, useCallback, useMemo, useState } from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Submenu } from \"./Submenu\";\nimport { StartMenu } from \"./StartMenu\";\nimport { FilterIcon } from \"../Icons\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { CounterButton } from \"../CounterButton\";\nimport { Button } from \"../Button\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\n\nexport type DataType = {\n id: number | string;\n title: string;\n searchPlaceholder?: string;\n disableInternalSort?: boolean;\n submenu: Array<IOptionGroupProps | IOptionItemProps>;\n};\n\nexport type SelectedType = {\n [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n /** Data rendered in submenus */\n data: Array<DataType>;\n /** Selected data inside submenus */\n selected?: SelectedType;\n /** Main filter label */\n label: string;\n /** Filter width */\n width?: number;\n /** Text displayed for the tooltip of clear all button */\n clearAllText: string;\n /** Handler for changes on the filter */\n onChange: (selected: SelectedType) => void;\n /** Label for reset button inside submenu */\n resetLabel?: string;\n /** Text to show when search results are empty */\n noResultText: string;\n /** Text to show when there are no submenus to display */\n emptyFilterText?: string;\n}\n\nexport const Filter: FC<FilterProps> = ({\n data,\n selected = {},\n label,\n clearAllText,\n resetLabel = \"Reset\",\n onChange,\n width = 260,\n noResultText,\n emptyFilterText,\n children,\n}) => {\n const [open, setOpen] = useState(false);\n const [menu, setMenu] = useState<number | string>(\"index\");\n const [isLeft, setIsLeft] = useState(true);\n const [height, setHeight] = useState(0);\n const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n const handleOpen = useCallback(() => {\n setOpen(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n setMenu(\"index\");\n setHeight(0);\n }, []);\n\n const handleHeight = useCallback((element) => {\n setHeight(element?.offsetHeight ?? 0);\n }, []);\n\n const handleItemClick = useCallback((value) => {\n setMenu(value);\n setIsLeft(true);\n }, []);\n\n const setIndex = useCallback(() => {\n setMenu(\"index\");\n setIsLeft(false);\n }, []);\n\n const handleChange = useCallback(\n (selectedArray) => {\n let newFilters = {};\n if (selectedArray.length) {\n newFilters = {\n ...filter,\n [menu]: selectedArray,\n };\n } else {\n newFilters = { ...filter };\n delete newFilters[menu];\n }\n\n setFilter(newFilters);\n onChange(newFilters);\n },\n [filter, menu, onChange]\n );\n\n const handleClearAll = useCallback(\n (event) => {\n event.stopPropagation();\n setFilter({});\n onChange({});\n },\n [onChange]\n );\n\n const handleReset = useCallback(() => {\n const newFilters = { ...filter };\n delete newFilters[menu];\n setFilter(newFilters);\n onChange(newFilters);\n }, [filter, menu, onChange]);\n\n const count = useMemo(() => {\n let c = 0;\n Object.values(filter).forEach((entry) => (c += entry.length));\n return c;\n }, [filter]);\n\n const shouldRenderSubmenus = useMemo(() => {\n if (data.length === 0) {\n return false;\n }\n\n for (const entry of data) {\n if (entry.submenu?.length > 1) {\n return true;\n }\n }\n\n return false;\n }, [data]);\n\n return (\n <StyledMenu\n open={open}\n onOpen={handleOpen}\n onClose={handleClose}\n position=\"bottom-end\"\n target={\n <CounterButton\n active={open}\n label={label}\n icon={<FilterIcon />}\n counter={count}\n tooltipText={clearAllText}\n onClearAll={handleClearAll}\n />\n }\n >\n <ResizeTransition in>\n <div style={{ height, width }}>\n <SlideLeftRightTransition\n in={menu === \"index\"}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(\"index\")}\n >\n <MoveFocusInside>\n <StartMenu\n data={data}\n selected={filter}\n style={{ width }}\n onHeightChange={setHeight}\n onItemClick={handleItemClick}\n shouldRenderSubmenus={shouldRenderSubmenus}\n emptyFilterText={emptyFilterText}\n >\n {children}\n </StartMenu>\n </MoveFocusInside>\n </SlideLeftRightTransition>\n {shouldRenderSubmenus &&\n data.map(\n (\n {\n id,\n title,\n submenu,\n searchPlaceholder,\n disableInternalSort,\n }: DataType,\n index: number\n ) => (\n <SlideLeftRightTransition\n key={`filter-submenu-${index}`}\n in={menu === id}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(id)}\n >\n <Submenu\n title={title}\n onBack={setIndex}\n onHeightChange={setHeight}\n style={{ width }}\n >\n <MoveFocusInside disabled={enteredMenu !== id}>\n <Select\n options={submenu}\n selected={filter[id]}\n onChange={handleChange}\n type=\"multiple\"\n autoHeightMax={255}\n placeholder={searchPlaceholder}\n noResultText={noResultText}\n keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n disableSearch={Boolean(submenu.length <= 7)}\n disabledInternalSort={disableInternalSort}\n />\n {filter[id]?.length ? (\n <StyledMenuFooter>\n <Button\n variant=\"text colored\"\n size=\"small\"\n onClick={handleReset}\n >\n {resetLabel}\n </Button>\n </StyledMenuFooter>\n ) : null}\n </MoveFocusInside>\n </Submenu>\n </SlideLeftRightTransition>\n )\n )}\n </div>\n </ResizeTransition>\n </StyledMenu>\n );\n};\n"],"file":"Filter.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Filter/Filter.tsx"],"names":["Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","Object","keys","length","handleOpen","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","c","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","Boolean"],"mappings":"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","sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Submenu } from \"./Submenu\";\nimport { StartMenu } from \"./StartMenu\";\nimport { FilterIcon } from \"../Icons\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { CounterButton } from \"../CounterButton\";\nimport { Button } from \"../Button\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\n\nexport type DataType = {\n id: number | string;\n title: string;\n searchPlaceholder?: string;\n disableInternalSort?: boolean;\n submenu: Array<IOptionGroupProps | IOptionItemProps>;\n};\n\nexport type SelectedType = {\n [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n /** Data rendered in submenus */\n data: Array<DataType>;\n /** Selected data inside submenus */\n selected?: SelectedType;\n /** Main filter label */\n label: string;\n /** Filter width */\n width?: number;\n /** Text displayed for the tooltip of clear all button */\n clearAllText: string;\n /** Handler for changes on the filter */\n onChange: (selected: SelectedType) => void;\n /** Label for reset button inside submenu */\n resetLabel?: string;\n /** Text to show when search results are empty */\n noResultText: string;\n /** Text to show when there are no submenus to display */\n emptyFilterText?: string;\n}\n\nexport const Filter: FC<FilterProps> = ({\n data,\n selected = {},\n label,\n clearAllText,\n resetLabel = \"Reset\",\n onChange,\n width = 260,\n noResultText,\n emptyFilterText,\n children,\n}) => {\n const [open, setOpen] = useState(false);\n const [menu, setMenu] = useState<number | string>(\"index\");\n const [isLeft, setIsLeft] = useState(true);\n const [height, setHeight] = useState(0);\n const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n useEffect(() => {\n if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n setFilter(selected);\n }\n }, [selected, filter]);\n\n const handleOpen = useCallback(() => {\n setOpen(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n setMenu(\"index\");\n setHeight(0);\n }, []);\n\n const handleHeight = useCallback((element) => {\n setHeight(element?.offsetHeight ?? 0);\n }, []);\n\n const handleItemClick = useCallback((value) => {\n setMenu(value);\n setIsLeft(true);\n }, []);\n\n const setIndex = useCallback(() => {\n setMenu(\"index\");\n setIsLeft(false);\n }, []);\n\n const handleChange = useCallback(\n (selectedArray) => {\n let newFilters = {};\n if (selectedArray.length) {\n newFilters = {\n ...filter,\n [menu]: selectedArray,\n };\n } else {\n newFilters = { ...filter };\n delete newFilters[menu];\n }\n\n setFilter(newFilters);\n onChange(newFilters);\n },\n [filter, menu, onChange]\n );\n\n const handleClearAll = useCallback(\n (event) => {\n event.stopPropagation();\n setFilter({});\n onChange({});\n },\n [onChange]\n );\n\n const handleReset = useCallback(() => {\n const newFilters = { ...filter };\n delete newFilters[menu];\n setFilter(newFilters);\n onChange(newFilters);\n }, [filter, menu, onChange]);\n\n const count = useMemo(() => {\n let c = 0;\n Object.values(filter).forEach((entry) => (c += entry.length));\n return c;\n }, [filter]);\n\n const shouldRenderSubmenus = useMemo(() => {\n if (data.length === 0) {\n return false;\n }\n\n for (const entry of data) {\n if (entry.submenu?.length > 1) {\n return true;\n }\n }\n\n return false;\n }, [data]);\n\n return (\n <StyledMenu\n open={open}\n onOpen={handleOpen}\n onClose={handleClose}\n position=\"bottom-end\"\n target={\n <CounterButton\n active={open}\n label={label}\n icon={<FilterIcon />}\n counter={count}\n tooltipText={clearAllText}\n onClearAll={handleClearAll}\n />\n }\n >\n <ResizeTransition in>\n <div style={{ height, width }}>\n <SlideLeftRightTransition\n in={menu === \"index\"}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(\"index\")}\n >\n <MoveFocusInside>\n <StartMenu\n data={data}\n selected={filter}\n style={{ width }}\n onHeightChange={setHeight}\n onItemClick={handleItemClick}\n shouldRenderSubmenus={shouldRenderSubmenus}\n emptyFilterText={emptyFilterText}\n >\n {children}\n </StartMenu>\n </MoveFocusInside>\n </SlideLeftRightTransition>\n {shouldRenderSubmenus &&\n data.map(\n (\n {\n id,\n title,\n submenu,\n searchPlaceholder,\n disableInternalSort,\n }: DataType,\n index: number\n ) => (\n <SlideLeftRightTransition\n key={`filter-submenu-${index}`}\n in={menu === id}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(id)}\n >\n <Submenu\n title={title}\n onBack={setIndex}\n onHeightChange={setHeight}\n style={{ width }}\n >\n <MoveFocusInside disabled={enteredMenu !== id}>\n <Select\n options={submenu}\n selected={filter[id]}\n onChange={handleChange}\n type=\"multiple\"\n autoHeightMax={255}\n placeholder={searchPlaceholder}\n noResultText={noResultText}\n keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n disableSearch={Boolean(submenu.length <= 7)}\n disabledInternalSort={disableInternalSort}\n />\n {filter[id]?.length ? (\n <StyledMenuFooter>\n <Button\n variant=\"text colored\"\n size=\"small\"\n onClick={handleReset}\n >\n {resetLabel}\n </Button>\n </StyledMenuFooter>\n ) : null}\n </MoveFocusInside>\n </Submenu>\n </SlideLeftRightTransition>\n )\n )}\n </div>\n </ResizeTransition>\n </StyledMenu>\n );\n};\n"],"file":"Filter.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"Filter.d.ts","sourceRoot":"","sources":["../../../../src/components/Filter/Filter.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAA6C,MAAM,OAAO,CAAC;AAM7E,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAU,MAAM,WAAW,CAAC;AAKxE,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAC;CACtD,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;CACvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAE1B,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEtB,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,YAAY,EAAE,MAAM,CAAC;IAErB,QAAQ,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,IAAI,CAAC;IAE3C,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,YAAY,EAAE,MAAM,CAAC;IAErB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAyMlC,CAAC"}
|
|
@@ -6,7 +6,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
6
6
|
|
|
7
7
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
8
|
|
|
9
|
-
import React, { useCallback, useMemo, useState } from "react";
|
|
9
|
+
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
10
10
|
import { MoveFocusInside } from "react-focus-lock";
|
|
11
11
|
import { Submenu } from "./Submenu";
|
|
12
12
|
import { StartMenu } from "./StartMenu";
|
|
@@ -57,6 +57,11 @@ export var Filter = function Filter(_ref) {
|
|
|
57
57
|
filter = _useState6[0],
|
|
58
58
|
setFilter = _useState6[1];
|
|
59
59
|
|
|
60
|
+
useEffect(function () {
|
|
61
|
+
if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {
|
|
62
|
+
setFilter(selected);
|
|
63
|
+
}
|
|
64
|
+
}, [selected, filter]);
|
|
60
65
|
var handleOpen = useCallback(function () {
|
|
61
66
|
setOpen(true);
|
|
62
67
|
}, []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Filter/Filter.tsx"],"names":["React","useCallback","useMemo","useState","MoveFocusInside","Submenu","StartMenu","FilterIcon","ResizeTransition","SlideLeftRightTransition","Select","CounterButton","Button","StyledMenu","StyledMenuFooter","Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","handleOpen","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","length","handleClearAll","event","stopPropagation","handleReset","count","c","Object","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","Boolean"],"mappings":"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","sourcesContent":["import React, { FC, useCallback, useMemo, useState } from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Submenu } from \"./Submenu\";\nimport { StartMenu } from \"./StartMenu\";\nimport { FilterIcon } from \"../Icons\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { CounterButton } from \"../CounterButton\";\nimport { Button } from \"../Button\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\n\nexport type DataType = {\n id: number | string;\n title: string;\n searchPlaceholder?: string;\n disableInternalSort?: boolean;\n submenu: Array<IOptionGroupProps | IOptionItemProps>;\n};\n\nexport type SelectedType = {\n [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n /** Data rendered in submenus */\n data: Array<DataType>;\n /** Selected data inside submenus */\n selected?: SelectedType;\n /** Main filter label */\n label: string;\n /** Filter width */\n width?: number;\n /** Text displayed for the tooltip of clear all button */\n clearAllText: string;\n /** Handler for changes on the filter */\n onChange: (selected: SelectedType) => void;\n /** Label for reset button inside submenu */\n resetLabel?: string;\n /** Text to show when search results are empty */\n noResultText: string;\n /** Text to show when there are no submenus to display */\n emptyFilterText?: string;\n}\n\nexport const Filter: FC<FilterProps> = ({\n data,\n selected = {},\n label,\n clearAllText,\n resetLabel = \"Reset\",\n onChange,\n width = 260,\n noResultText,\n emptyFilterText,\n children,\n}) => {\n const [open, setOpen] = useState(false);\n const [menu, setMenu] = useState<number | string>(\"index\");\n const [isLeft, setIsLeft] = useState(true);\n const [height, setHeight] = useState(0);\n const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n const handleOpen = useCallback(() => {\n setOpen(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n setMenu(\"index\");\n setHeight(0);\n }, []);\n\n const handleHeight = useCallback((element) => {\n setHeight(element?.offsetHeight ?? 0);\n }, []);\n\n const handleItemClick = useCallback((value) => {\n setMenu(value);\n setIsLeft(true);\n }, []);\n\n const setIndex = useCallback(() => {\n setMenu(\"index\");\n setIsLeft(false);\n }, []);\n\n const handleChange = useCallback(\n (selectedArray) => {\n let newFilters = {};\n if (selectedArray.length) {\n newFilters = {\n ...filter,\n [menu]: selectedArray,\n };\n } else {\n newFilters = { ...filter };\n delete newFilters[menu];\n }\n\n setFilter(newFilters);\n onChange(newFilters);\n },\n [filter, menu, onChange]\n );\n\n const handleClearAll = useCallback(\n (event) => {\n event.stopPropagation();\n setFilter({});\n onChange({});\n },\n [onChange]\n );\n\n const handleReset = useCallback(() => {\n const newFilters = { ...filter };\n delete newFilters[menu];\n setFilter(newFilters);\n onChange(newFilters);\n }, [filter, menu, onChange]);\n\n const count = useMemo(() => {\n let c = 0;\n Object.values(filter).forEach((entry) => (c += entry.length));\n return c;\n }, [filter]);\n\n const shouldRenderSubmenus = useMemo(() => {\n if (data.length === 0) {\n return false;\n }\n\n for (const entry of data) {\n if (entry.submenu?.length > 1) {\n return true;\n }\n }\n\n return false;\n }, [data]);\n\n return (\n <StyledMenu\n open={open}\n onOpen={handleOpen}\n onClose={handleClose}\n position=\"bottom-end\"\n target={\n <CounterButton\n active={open}\n label={label}\n icon={<FilterIcon />}\n counter={count}\n tooltipText={clearAllText}\n onClearAll={handleClearAll}\n />\n }\n >\n <ResizeTransition in>\n <div style={{ height, width }}>\n <SlideLeftRightTransition\n in={menu === \"index\"}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(\"index\")}\n >\n <MoveFocusInside>\n <StartMenu\n data={data}\n selected={filter}\n style={{ width }}\n onHeightChange={setHeight}\n onItemClick={handleItemClick}\n shouldRenderSubmenus={shouldRenderSubmenus}\n emptyFilterText={emptyFilterText}\n >\n {children}\n </StartMenu>\n </MoveFocusInside>\n </SlideLeftRightTransition>\n {shouldRenderSubmenus &&\n data.map(\n (\n {\n id,\n title,\n submenu,\n searchPlaceholder,\n disableInternalSort,\n }: DataType,\n index: number\n ) => (\n <SlideLeftRightTransition\n key={`filter-submenu-${index}`}\n in={menu === id}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(id)}\n >\n <Submenu\n title={title}\n onBack={setIndex}\n onHeightChange={setHeight}\n style={{ width }}\n >\n <MoveFocusInside disabled={enteredMenu !== id}>\n <Select\n options={submenu}\n selected={filter[id]}\n onChange={handleChange}\n type=\"multiple\"\n autoHeightMax={255}\n placeholder={searchPlaceholder}\n noResultText={noResultText}\n keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n disableSearch={Boolean(submenu.length <= 7)}\n disabledInternalSort={disableInternalSort}\n />\n {filter[id]?.length ? (\n <StyledMenuFooter>\n <Button\n variant=\"text colored\"\n size=\"small\"\n onClick={handleReset}\n >\n {resetLabel}\n </Button>\n </StyledMenuFooter>\n ) : null}\n </MoveFocusInside>\n </Submenu>\n </SlideLeftRightTransition>\n )\n )}\n </div>\n </ResizeTransition>\n </StyledMenu>\n );\n};\n"],"file":"Filter.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Filter/Filter.tsx"],"names":["React","useCallback","useEffect","useMemo","useState","MoveFocusInside","Submenu","StartMenu","FilterIcon","ResizeTransition","SlideLeftRightTransition","Select","CounterButton","Button","StyledMenu","StyledMenuFooter","Filter","data","selected","label","clearAllText","resetLabel","onChange","width","noResultText","emptyFilterText","children","open","setOpen","menu","setMenu","isLeft","setIsLeft","height","setHeight","enteredMenu","setEnteredMenu","filter","setFilter","Object","keys","length","handleOpen","handleClose","handleHeight","element","offsetHeight","handleItemClick","value","setIndex","handleChange","selectedArray","newFilters","handleClearAll","event","stopPropagation","handleReset","count","c","values","forEach","entry","shouldRenderSubmenus","submenu","map","index","id","title","searchPlaceholder","disableInternalSort","Boolean"],"mappings":"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","sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { MoveFocusInside } from \"react-focus-lock\";\nimport { Submenu } from \"./Submenu\";\nimport { StartMenu } from \"./StartMenu\";\nimport { FilterIcon } from \"../Icons\";\nimport { ResizeTransition, SlideLeftRightTransition } from \"../Transitions\";\nimport { IOptionGroupProps, IOptionItemProps, Select } from \"../Select\";\nimport { CounterButton } from \"../CounterButton\";\nimport { Button } from \"../Button\";\nimport { StyledMenu, StyledMenuFooter } from \"./Styles\";\n\nexport type DataType = {\n id: number | string;\n title: string;\n searchPlaceholder?: string;\n disableInternalSort?: boolean;\n submenu: Array<IOptionGroupProps | IOptionItemProps>;\n};\n\nexport type SelectedType = {\n [key: number | string]: Array<string>;\n};\n\nexport interface FilterProps {\n /** Data rendered in submenus */\n data: Array<DataType>;\n /** Selected data inside submenus */\n selected?: SelectedType;\n /** Main filter label */\n label: string;\n /** Filter width */\n width?: number;\n /** Text displayed for the tooltip of clear all button */\n clearAllText: string;\n /** Handler for changes on the filter */\n onChange: (selected: SelectedType) => void;\n /** Label for reset button inside submenu */\n resetLabel?: string;\n /** Text to show when search results are empty */\n noResultText: string;\n /** Text to show when there are no submenus to display */\n emptyFilterText?: string;\n}\n\nexport const Filter: FC<FilterProps> = ({\n data,\n selected = {},\n label,\n clearAllText,\n resetLabel = \"Reset\",\n onChange,\n width = 260,\n noResultText,\n emptyFilterText,\n children,\n}) => {\n const [open, setOpen] = useState(false);\n const [menu, setMenu] = useState<number | string>(\"index\");\n const [isLeft, setIsLeft] = useState(true);\n const [height, setHeight] = useState(0);\n const [enteredMenu, setEnteredMenu] = useState<number | string>(\"index\");\n const [filter, setFilter] = useState<SelectedType>(() => selected);\n\n useEffect(() => {\n if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {\n setFilter(selected);\n }\n }, [selected, filter]);\n\n const handleOpen = useCallback(() => {\n setOpen(true);\n }, []);\n\n const handleClose = useCallback(() => {\n setOpen(false);\n setMenu(\"index\");\n setHeight(0);\n }, []);\n\n const handleHeight = useCallback((element) => {\n setHeight(element?.offsetHeight ?? 0);\n }, []);\n\n const handleItemClick = useCallback((value) => {\n setMenu(value);\n setIsLeft(true);\n }, []);\n\n const setIndex = useCallback(() => {\n setMenu(\"index\");\n setIsLeft(false);\n }, []);\n\n const handleChange = useCallback(\n (selectedArray) => {\n let newFilters = {};\n if (selectedArray.length) {\n newFilters = {\n ...filter,\n [menu]: selectedArray,\n };\n } else {\n newFilters = { ...filter };\n delete newFilters[menu];\n }\n\n setFilter(newFilters);\n onChange(newFilters);\n },\n [filter, menu, onChange]\n );\n\n const handleClearAll = useCallback(\n (event) => {\n event.stopPropagation();\n setFilter({});\n onChange({});\n },\n [onChange]\n );\n\n const handleReset = useCallback(() => {\n const newFilters = { ...filter };\n delete newFilters[menu];\n setFilter(newFilters);\n onChange(newFilters);\n }, [filter, menu, onChange]);\n\n const count = useMemo(() => {\n let c = 0;\n Object.values(filter).forEach((entry) => (c += entry.length));\n return c;\n }, [filter]);\n\n const shouldRenderSubmenus = useMemo(() => {\n if (data.length === 0) {\n return false;\n }\n\n for (const entry of data) {\n if (entry.submenu?.length > 1) {\n return true;\n }\n }\n\n return false;\n }, [data]);\n\n return (\n <StyledMenu\n open={open}\n onOpen={handleOpen}\n onClose={handleClose}\n position=\"bottom-end\"\n target={\n <CounterButton\n active={open}\n label={label}\n icon={<FilterIcon />}\n counter={count}\n tooltipText={clearAllText}\n onClearAll={handleClearAll}\n />\n }\n >\n <ResizeTransition in>\n <div style={{ height, width }}>\n <SlideLeftRightTransition\n in={menu === \"index\"}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(\"index\")}\n >\n <MoveFocusInside>\n <StartMenu\n data={data}\n selected={filter}\n style={{ width }}\n onHeightChange={setHeight}\n onItemClick={handleItemClick}\n shouldRenderSubmenus={shouldRenderSubmenus}\n emptyFilterText={emptyFilterText}\n >\n {children}\n </StartMenu>\n </MoveFocusInside>\n </SlideLeftRightTransition>\n {shouldRenderSubmenus &&\n data.map(\n (\n {\n id,\n title,\n submenu,\n searchPlaceholder,\n disableInternalSort,\n }: DataType,\n index: number\n ) => (\n <SlideLeftRightTransition\n key={`filter-submenu-${index}`}\n in={menu === id}\n direction={isLeft ? \"left\" : \"right\"}\n onEnter={handleHeight}\n onEntered={() => setEnteredMenu(id)}\n >\n <Submenu\n title={title}\n onBack={setIndex}\n onHeightChange={setHeight}\n style={{ width }}\n >\n <MoveFocusInside disabled={enteredMenu !== id}>\n <Select\n options={submenu}\n selected={filter[id]}\n onChange={handleChange}\n type=\"multiple\"\n autoHeightMax={255}\n placeholder={searchPlaceholder}\n noResultText={noResultText}\n keepSameOptionsOrder={Boolean(submenu.length <= 7)}\n disableSearch={Boolean(submenu.length <= 7)}\n disabledInternalSort={disableInternalSort}\n />\n {filter[id]?.length ? (\n <StyledMenuFooter>\n <Button\n variant=\"text colored\"\n size=\"small\"\n onClick={handleReset}\n >\n {resetLabel}\n </Button>\n </StyledMenuFooter>\n ) : null}\n </MoveFocusInside>\n </Submenu>\n </SlideLeftRightTransition>\n )\n )}\n </div>\n </ResizeTransition>\n </StyledMenu>\n );\n};\n"],"file":"Filter.js"}
|
package/dist/index.js
CHANGED
|
@@ -12469,6 +12469,11 @@
|
|
|
12469
12469
|
filter = _useState12[0],
|
|
12470
12470
|
setFilter = _useState12[1];
|
|
12471
12471
|
|
|
12472
|
+
React.useEffect(function () {
|
|
12473
|
+
if (Object.keys(selected).length > 0 || Object.keys(filter).length > 0) {
|
|
12474
|
+
setFilter(selected);
|
|
12475
|
+
}
|
|
12476
|
+
}, [selected, filter]);
|
|
12472
12477
|
var handleOpen = React.useCallback(function () {
|
|
12473
12478
|
setOpen(true);
|
|
12474
12479
|
}, []);
|