@elliemae/ds-data-table 3.5.0-rc.7 → 3.5.0-rc.8
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/addons/Filters/Components/CurrencyRangeFilter/index.js +12 -3
- package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/NumberRangeFilter/index.js +12 -3
- package/dist/cjs/addons/Filters/Components/NumberRangeFilter/index.js.map +2 -2
- package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +12 -3
- package/dist/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js +13 -4
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js.map +2 -2
- package/dist/esm/addons/Filters/Components/NumberRangeFilter/index.js +13 -4
- package/dist/esm/addons/Filters/Components/NumberRangeFilter/index.js.map +2 -2
- package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +13 -4
- package/dist/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js.map +2 -2
- package/package.json +18 -18
|
@@ -47,6 +47,7 @@ const opts = {
|
|
|
47
47
|
const CurrencyRangeFilter = (props) => {
|
|
48
48
|
const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;
|
|
49
49
|
const ref = (0, import_react.useRef)();
|
|
50
|
+
const shouldFocus = (0, import_react.useRef)();
|
|
50
51
|
const handleFromChange = (e) => {
|
|
51
52
|
const nextValue = {
|
|
52
53
|
...filterValue,
|
|
@@ -71,12 +72,20 @@ const CurrencyRangeFilter = (props) => {
|
|
|
71
72
|
(newRef) => {
|
|
72
73
|
if (ref.current)
|
|
73
74
|
ref.current = newRef;
|
|
74
|
-
if (
|
|
75
|
-
setTimeout(() =>
|
|
75
|
+
if (shouldFocus.current) {
|
|
76
|
+
setTimeout(() => {
|
|
77
|
+
newRef?.focus();
|
|
78
|
+
shouldFocus.current = false;
|
|
79
|
+
});
|
|
76
80
|
}
|
|
77
81
|
},
|
|
78
|
-
[
|
|
82
|
+
[shouldFocus]
|
|
79
83
|
);
|
|
84
|
+
(0, import_react.useEffect)(() => {
|
|
85
|
+
if (reduxHeader?.hideFilterMenu) {
|
|
86
|
+
shouldFocus.current = true;
|
|
87
|
+
}
|
|
88
|
+
}, [reduxHeader?.hideFilterMenu]);
|
|
80
89
|
const idPreffix = "datatable-currency-range";
|
|
81
90
|
return /* @__PURE__ */ import_react.default.createElement(import_exported_related.FilterPopover, {
|
|
82
91
|
reduxHeader,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nconst opts = {\n prefix: '',\n suffix: '',\n allowDecimal: true,\n decimalLimit: 2,\n includeThousandsSeparator: false,\n requireDecimal: true,\n allowNegative: true,\n};\n\nexport const CurrencyRangeFilter: React.ComponentType<FilterProps> = (props) => {\n const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n const ref = useRef();\n const handleFromChange = (e) => {\n const nextValue = {\n ...filterValue,\n from: e.target.value,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n const handleToChange = (e) => {\n const nextValue = {\n ...filterValue,\n to: e.target.value,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n\n // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n const closePopover = (e) => {\n if (e.code === 'Escape') {\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current.focus();\n }\n };\n\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nconst opts = {\n prefix: '',\n suffix: '',\n allowDecimal: true,\n decimalLimit: 2,\n includeThousandsSeparator: false,\n requireDecimal: true,\n allowNegative: true,\n};\n\nexport const CurrencyRangeFilter: React.ComponentType<FilterProps> = (props) => {\n const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n const ref = useRef();\n const shouldFocus = useRef();\n const handleFromChange = (e) => {\n const nextValue = {\n ...filterValue,\n from: e.target.value,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n const handleToChange = (e) => {\n const nextValue = {\n ...filterValue,\n to: e.target.value,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n\n // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n const closePopover = (e) => {\n if (e.code === 'Escape') {\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current.focus();\n }\n };\n\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n newRef?.focus();\n shouldFocus.current = false;\n });\n }\n },\n [shouldFocus],\n );\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n const idPreffix = 'datatable-currency-range';\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={\n <Grid\n data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n gutter=\"xxxs\"\n padding=\"xxs\"\n cols={['auto', 'auto']}\n style={{ background: 'white' }}\n >\n <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}`}>\n <DSInputMask\n containerProps={{ style: { textAlign: 'right' } }}\n id={`${idPreffix}-min-${column.id}`}\n value={`${filterValue?.from ?? ''}`}\n onChange={handleFromChange}\n placeholder=\"0.00\"\n mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n innerRef={handleRef}\n onKeyDown={(e) => {\n closePopover(e);\n }}\n />\n </DSFormLayoutBlockItem>\n <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}`}>\n <DSInputMask\n containerProps={{ style: { textAlign: 'right' } }}\n id={`${idPreffix}-max-${column.id}`}\n value={`${filterValue?.to ?? ''}`}\n onChange={handleToChange}\n placeholder=\"0.00\"\n mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n onKeyDown={(e) => {\n closePopover(e);\n }}\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n innerRef={innerRef}\n ariaLabel=\"Open Currency Range Filter\"\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -69,16 +69,25 @@ const NumberRangeFilter = (props) => {
|
|
|
69
69
|
};
|
|
70
70
|
const idPreffix = "datatable-number-range";
|
|
71
71
|
const ref = (0, import_react.useRef)();
|
|
72
|
+
const shouldFocus = (0, import_react.useRef)(true);
|
|
72
73
|
const handleRef = (0, import_react.useCallback)(
|
|
73
74
|
(newRef) => {
|
|
74
75
|
if (ref.current)
|
|
75
76
|
ref.current = newRef;
|
|
76
|
-
if (
|
|
77
|
-
setTimeout(() =>
|
|
77
|
+
if (shouldFocus.current) {
|
|
78
|
+
setTimeout(() => {
|
|
79
|
+
newRef?.focus();
|
|
80
|
+
shouldFocus.current = false;
|
|
81
|
+
});
|
|
78
82
|
}
|
|
79
83
|
},
|
|
80
|
-
[
|
|
84
|
+
[shouldFocus]
|
|
81
85
|
);
|
|
86
|
+
(0, import_react.useEffect)(() => {
|
|
87
|
+
if (reduxHeader?.hideFilterMenu) {
|
|
88
|
+
shouldFocus.current = true;
|
|
89
|
+
}
|
|
90
|
+
}, [reduxHeader?.hideFilterMenu]);
|
|
82
91
|
return /* @__PURE__ */ import_react.default.createElement(import_exported_related.FilterPopover, {
|
|
83
92
|
reduxHeader,
|
|
84
93
|
column,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/NumberRangeFilter/index.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nconst opts = {\n prefix: '',\n suffix: '',\n allowDecimal: false,\n includeThousandsSeparator: false,\n requireDecimal: false,\n allowNegative: true,\n};\n\nexport const NumberRangeFilter: React.ComponentType<FilterProps> = (props) => {\n const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n const handleFromChange = (e) => {\n const from = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n from,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n const handleToChange = (e) => {\n const to = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n to,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n\n // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n const closePopover = (e) => {\n if (e.code === 'Escape') {\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current.focus();\n }\n };\n const idPreffix = 'datatable-number-range';\n\n const ref = useRef();\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nconst opts = {\n prefix: '',\n suffix: '',\n allowDecimal: false,\n includeThousandsSeparator: false,\n requireDecimal: false,\n allowNegative: true,\n};\n\nexport const NumberRangeFilter: React.ComponentType<FilterProps> = (props) => {\n const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n const handleFromChange = (e) => {\n const from = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n from,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n const handleToChange = (e) => {\n const to = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n to,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n\n // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n const closePopover = (e) => {\n if (e.code === 'Escape') {\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current.focus();\n }\n };\n const idPreffix = 'datatable-number-range';\n\n const ref = useRef();\n const shouldFocus = useRef(true);\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n newRef?.focus();\n shouldFocus.current = false;\n });\n }\n },\n [shouldFocus],\n );\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={\n <Grid\n data-testid={DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER}\n gutter=\"xxxs\"\n padding=\"xxs\"\n cols={['auto', 'auto']}\n style={{ background: 'white' }}\n >\n <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}`}>\n <DSInputMask\n containerProps={{ style: { textAlign: 'right' } }}\n id={`${idPreffix}-low-${column.id}`}\n value={`${filterValue?.from ?? ''}`}\n onChange={handleFromChange}\n placeholder=\"0\"\n mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n innerRef={handleRef}\n onKeyDown={(e) => {\n closePopover(e);\n }}\n />\n </DSFormLayoutBlockItem>\n <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}`}>\n <DSInputMask\n containerProps={{ style: { textAlign: 'right' } }}\n id={`${idPreffix}-high-${column.id}`}\n value={`${filterValue?.to ?? ''}`}\n onChange={handleToChange}\n placeholder=\"0\"\n mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n onKeyDown={(e) => {\n closePopover(e);\n }}\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n innerRef={innerRef}\n ariaLabel=\"Open Number Range Filter\"\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -52,6 +52,7 @@ const BaseSelectFilter = (props) => {
|
|
|
52
52
|
onValueChange
|
|
53
53
|
} = props;
|
|
54
54
|
const ref = (0, import_react.useRef)();
|
|
55
|
+
const shouldFocus = (0, import_react.useRef)(true);
|
|
55
56
|
const filterOptions = (0, import_react.useMemo)(() => {
|
|
56
57
|
if (!userFilterOptions) {
|
|
57
58
|
const automaticFilters = [
|
|
@@ -96,12 +97,20 @@ const BaseSelectFilter = (props) => {
|
|
|
96
97
|
(newRef) => {
|
|
97
98
|
if (ref.current)
|
|
98
99
|
ref.current = newRef;
|
|
99
|
-
if (
|
|
100
|
-
setTimeout(() =>
|
|
100
|
+
if (shouldFocus.current) {
|
|
101
|
+
setTimeout(() => {
|
|
102
|
+
newRef?.focus();
|
|
103
|
+
shouldFocus.current = false;
|
|
104
|
+
});
|
|
101
105
|
}
|
|
102
106
|
},
|
|
103
|
-
[
|
|
107
|
+
[shouldFocus]
|
|
104
108
|
);
|
|
109
|
+
(0, import_react.useEffect)(() => {
|
|
110
|
+
if (reduxHeader?.hideFilterMenu) {
|
|
111
|
+
shouldFocus.current = true;
|
|
112
|
+
}
|
|
113
|
+
}, [reduxHeader?.hideFilterMenu]);
|
|
105
114
|
const Select = /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
|
|
106
115
|
"data-testid": isMulti ? import_configs.DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : import_configs.DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
|
|
107
116
|
style: { background: "#fff", position: "relative", width: filterMinWidth ?? column.ref?.current?.offsetWidth }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilter.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isMulti?: boolean;\n creatable?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems = null,\n creatable = false,\n column,\n type,\n column: { id, filterOptions: userFilterOptions, filterMinWidth },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n patchHeaderFilterButtonAndMenu,\n innerRef,\n onValueChange,\n } = props;\n\n const ref = useRef();\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [\n ...new Set(data.map((datum) => datum?.[id]?.toString()).filter((val) => val !== undefined)),\n ].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\n }\n\n // If user provided the array itself, use it\n if (Array.isArray(userFilterOptions)) return userFilterOptions;\n // Otherwise, it is a function\n return userFilterOptions();\n }, [data, id, userFilterOptions]);\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n const handleOnChange = (value) => {\n onValueChange(type, value);\n if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);\n };\n\n const handleOnCreate = (label: string) => {\n if (label.trim() === '') {\n return;\n }\n if (filterOptions.some((item) => item.label === label)) {\n return;\n }\n const newId = uid();\n const newItem = {\n dsId: newId,\n value: newId,\n label,\n type: 'option',\n };\n filterOptions.unshift(newItem);\n handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n setFilteredOptions(filterOptions);\n };\n\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyE;AACzE,qBAAqB;AACrB,gCAA2B;AAC3B,sBAA6B;AAC7B,iBAAoB;AACpB,8BAA8B;AAE9B,qBAA4B;AAgBrB,MAAM,mBAAuE,CAAC,UAAU;AAC7F,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,QAAQ,EAAE,IAAI,eAAe,mBAAmB,eAAe;AAAA,IAC/D,KAAK;AAAA,MACH,YAAY,EAAE,KAAK;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,UAAM,qBAAO;AACnB,QAAM,oBAAiC,sBAAQ,MAAM;AAEnD,QAAI,CAAC,mBAAmB;AACtB,YAAM,mBAAmB;AAAA,QACvB,GAAG,IAAI,IAAI,KAAK,IAAI,CAAC,UAAU,QAAQ,KAAK,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,QAAQ,MAAS,CAAC;AAAA,MAC5F,EAAE,IAAI,CAAC,UAAU;AAAA,QACf,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,MACT,EAAE;AAEF,aAAO;AAAA,IACT;AAGA,QAAI,MAAM,QAAQ,iBAAiB;AAAG,aAAO;AAE7C,WAAO,kBAAkB;AAAA,EAC3B,GAAG,CAAC,MAAM,IAAI,iBAAiB,CAAC;AAEhC,QAAM,CAAC,SAAS,kBAAkB,QAAI,uBAAS,aAAa;AAE5D,QAAM,iBAAiB,CAAC,UAAU;AAChC,kBAAc,MAAM,KAAK;AACzB,QAAI,CAAC;AAAS,qCAA+B,OAAO,IAAI,IAAI;AAAA,EAC9D;AAEA,QAAM,iBAAiB,CAAC,UAAkB;AACxC,QAAI,MAAM,KAAK,MAAM,IAAI;AACvB;AAAA,IACF;AACA,QAAI,cAAc,KAAK,CAAC,SAAS,KAAK,UAAU,KAAK,GAAG;AACtD;AAAA,IACF;AACA,UAAM,YAAQ,gBAAI;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,MACA,MAAM;AAAA,IACR;AACA,kBAAc,QAAQ,OAAO;AAC7B,mBAAe,MAAM,QAAQ,aAAa,IAAI,CAAC,GAAG,eAAe,OAAO,IAAI,OAAO;AACnF,uBAAmB,aAAa;AAAA,EAClC;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,WAAW;AACV,UAAI,IAAI;AAAS,YAAI,UAAU;AAC/B,UAAI,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isMulti?: boolean;\n creatable?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems = null,\n creatable = false,\n column,\n type,\n column: { id, filterOptions: userFilterOptions, filterMinWidth },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n patchHeaderFilterButtonAndMenu,\n innerRef,\n onValueChange,\n } = props;\n\n const ref = useRef();\n const shouldFocus = useRef(true);\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [\n ...new Set(data.map((datum) => datum?.[id]?.toString()).filter((val) => val !== undefined)),\n ].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\n }\n\n // If user provided the array itself, use it\n if (Array.isArray(userFilterOptions)) return userFilterOptions;\n // Otherwise, it is a function\n return userFilterOptions();\n }, [data, id, userFilterOptions]);\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n const handleOnChange = (value) => {\n onValueChange(type, value);\n if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);\n };\n\n const handleOnCreate = (label: string) => {\n if (label.trim() === '') {\n return;\n }\n if (filterOptions.some((item) => item.label === label)) {\n return;\n }\n const newId = uid();\n const newItem = {\n dsId: newId,\n value: newId,\n label,\n type: 'option',\n };\n filterOptions.unshift(newItem);\n handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n setFilteredOptions(filterOptions);\n };\n\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n newRef?.focus();\n shouldFocus.current = false;\n });\n }\n },\n [shouldFocus],\n );\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n const Select = (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n style={{ background: '#fff', position: 'relative', width: filterMinWidth ?? column.ref?.current?.offsetWidth }}\n >\n <DSComboBox\n inline\n innerRef={handleRef}\n allOptions={filters}\n onCreate={creatable ? handleOnCreate : undefined}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n menuMaxHeight={300}\n />\n </Grid>\n );\n\n const handleOnClickOutside = () => {\n setFilteredOptions(filterOptions);\n };\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={Select}\n triggerIcon={<SearchXsmall />}\n innerRef={innerRef}\n ariaLabel=\"Open Selection Filter\"\n onClickOutsideMenu={handleOnClickOutside}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import React2, { useRef, useCallback } from "react";
|
|
2
|
+
import React2, { useRef, useEffect, useCallback } from "react";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { DSInputMask, MASK_TYPES } from "@elliemae/ds-form";
|
|
5
5
|
import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
|
|
@@ -18,6 +18,7 @@ const opts = {
|
|
|
18
18
|
const CurrencyRangeFilter = (props) => {
|
|
19
19
|
const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;
|
|
20
20
|
const ref = useRef();
|
|
21
|
+
const shouldFocus = useRef();
|
|
21
22
|
const handleFromChange = (e) => {
|
|
22
23
|
const nextValue = {
|
|
23
24
|
...filterValue,
|
|
@@ -42,12 +43,20 @@ const CurrencyRangeFilter = (props) => {
|
|
|
42
43
|
(newRef) => {
|
|
43
44
|
if (ref.current)
|
|
44
45
|
ref.current = newRef;
|
|
45
|
-
if (
|
|
46
|
-
setTimeout(() =>
|
|
46
|
+
if (shouldFocus.current) {
|
|
47
|
+
setTimeout(() => {
|
|
48
|
+
newRef?.focus();
|
|
49
|
+
shouldFocus.current = false;
|
|
50
|
+
});
|
|
47
51
|
}
|
|
48
52
|
},
|
|
49
|
-
[
|
|
53
|
+
[shouldFocus]
|
|
50
54
|
);
|
|
55
|
+
useEffect(() => {
|
|
56
|
+
if (reduxHeader?.hideFilterMenu) {
|
|
57
|
+
shouldFocus.current = true;
|
|
58
|
+
}
|
|
59
|
+
}, [reduxHeader?.hideFilterMenu]);
|
|
51
60
|
const idPreffix = "datatable-currency-range";
|
|
52
61
|
return /* @__PURE__ */ React2.createElement(FilterPopover, {
|
|
53
62
|
reduxHeader,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nconst opts = {\n prefix: '',\n suffix: '',\n allowDecimal: true,\n decimalLimit: 2,\n includeThousandsSeparator: false,\n requireDecimal: true,\n allowNegative: true,\n};\n\nexport const CurrencyRangeFilter: React.ComponentType<FilterProps> = (props) => {\n const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n const ref = useRef();\n const handleFromChange = (e) => {\n const nextValue = {\n ...filterValue,\n from: e.target.value,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n const handleToChange = (e) => {\n const nextValue = {\n ...filterValue,\n to: e.target.value,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n\n // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n const closePopover = (e) => {\n if (e.code === 'Escape') {\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current.focus();\n }\n };\n\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,QAAQ,mBAAmB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nconst opts = {\n prefix: '',\n suffix: '',\n allowDecimal: true,\n decimalLimit: 2,\n includeThousandsSeparator: false,\n requireDecimal: true,\n allowNegative: true,\n};\n\nexport const CurrencyRangeFilter: React.ComponentType<FilterProps> = (props) => {\n const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n const ref = useRef();\n const shouldFocus = useRef();\n const handleFromChange = (e) => {\n const nextValue = {\n ...filterValue,\n from: e.target.value,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n const handleToChange = (e) => {\n const nextValue = {\n ...filterValue,\n to: e.target.value,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n\n // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n const closePopover = (e) => {\n if (e.code === 'Escape') {\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current.focus();\n }\n };\n\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n newRef?.focus();\n shouldFocus.current = false;\n });\n }\n },\n [shouldFocus],\n );\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n const idPreffix = 'datatable-currency-range';\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={\n <Grid\n data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n gutter=\"xxxs\"\n padding=\"xxs\"\n cols={['auto', 'auto']}\n style={{ background: 'white' }}\n >\n <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}`}>\n <DSInputMask\n containerProps={{ style: { textAlign: 'right' } }}\n id={`${idPreffix}-min-${column.id}`}\n value={`${filterValue?.from ?? ''}`}\n onChange={handleFromChange}\n placeholder=\"0.00\"\n mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n innerRef={handleRef}\n onKeyDown={(e) => {\n closePopover(e);\n }}\n />\n </DSFormLayoutBlockItem>\n <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}`}>\n <DSInputMask\n containerProps={{ style: { textAlign: 'right' } }}\n id={`${idPreffix}-max-${column.id}`}\n value={`${filterValue?.to ?? ''}`}\n onChange={handleToChange}\n placeholder=\"0.00\"\n mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n onKeyDown={(e) => {\n closePopover(e);\n }}\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n innerRef={innerRef}\n ariaLabel=\"Open Currency Range Filter\"\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import React2, { useRef, useCallback } from "react";
|
|
2
|
+
import React2, { useRef, useEffect, useCallback } from "react";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { DSInputMask, MASK_TYPES } from "@elliemae/ds-form";
|
|
5
5
|
import { DSFormLayoutBlockItem } from "@elliemae/ds-form-layout-blocks";
|
|
@@ -40,16 +40,25 @@ const NumberRangeFilter = (props) => {
|
|
|
40
40
|
};
|
|
41
41
|
const idPreffix = "datatable-number-range";
|
|
42
42
|
const ref = useRef();
|
|
43
|
+
const shouldFocus = useRef(true);
|
|
43
44
|
const handleRef = useCallback(
|
|
44
45
|
(newRef) => {
|
|
45
46
|
if (ref.current)
|
|
46
47
|
ref.current = newRef;
|
|
47
|
-
if (
|
|
48
|
-
setTimeout(() =>
|
|
48
|
+
if (shouldFocus.current) {
|
|
49
|
+
setTimeout(() => {
|
|
50
|
+
newRef?.focus();
|
|
51
|
+
shouldFocus.current = false;
|
|
52
|
+
});
|
|
49
53
|
}
|
|
50
54
|
},
|
|
51
|
-
[
|
|
55
|
+
[shouldFocus]
|
|
52
56
|
);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
if (reduxHeader?.hideFilterMenu) {
|
|
59
|
+
shouldFocus.current = true;
|
|
60
|
+
}
|
|
61
|
+
}, [reduxHeader?.hideFilterMenu]);
|
|
53
62
|
return /* @__PURE__ */ React2.createElement(FilterPopover, {
|
|
54
63
|
reduxHeader,
|
|
55
64
|
column,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/NumberRangeFilter/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nconst opts = {\n prefix: '',\n suffix: '',\n allowDecimal: false,\n includeThousandsSeparator: false,\n requireDecimal: false,\n allowNegative: true,\n};\n\nexport const NumberRangeFilter: React.ComponentType<FilterProps> = (props) => {\n const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n const handleFromChange = (e) => {\n const from = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n from,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n const handleToChange = (e) => {\n const to = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n to,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n\n // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n const closePopover = (e) => {\n if (e.code === 'Escape') {\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current.focus();\n }\n };\n const idPreffix = 'datatable-number-range';\n\n const ref = useRef();\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,QAAQ,mBAAmB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect, useCallback } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputMask, MASK_TYPES } from '@elliemae/ds-form';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs/constants';\n\nconst opts = {\n prefix: '',\n suffix: '',\n allowDecimal: false,\n includeThousandsSeparator: false,\n requireDecimal: false,\n allowNegative: true,\n};\n\nexport const NumberRangeFilter: React.ComponentType<FilterProps> = (props) => {\n const { column, filterValue = { from: null, to: null }, reduxHeader, patchHeader, onValueChange, innerRef } = props;\n\n const handleFromChange = (e) => {\n const from = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n from,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n const handleToChange = (e) => {\n const to = e.target.value !== '' ? parseInt(e.target.value, 10) : '';\n const nextValue = {\n ...filterValue,\n to,\n };\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);\n };\n\n // workaround to close menu with esc key since DSInputMask has stoppropagation on key down\n const closePopover = (e) => {\n if (e.code === 'Escape') {\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current.focus();\n }\n };\n const idPreffix = 'datatable-number-range';\n\n const ref = useRef();\n const shouldFocus = useRef(true);\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n newRef?.focus();\n shouldFocus.current = false;\n });\n }\n },\n [shouldFocus],\n );\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={\n <Grid\n data-testid={DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER}\n gutter=\"xxxs\"\n padding=\"xxs\"\n cols={['auto', 'auto']}\n style={{ background: 'white' }}\n >\n <DSFormLayoutBlockItem label=\"Low\" inputID={`${idPreffix}-low-${column.id}`}>\n <DSInputMask\n containerProps={{ style: { textAlign: 'right' } }}\n id={`${idPreffix}-low-${column.id}`}\n value={`${filterValue?.from ?? ''}`}\n onChange={handleFromChange}\n placeholder=\"0\"\n mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n innerRef={handleRef}\n onKeyDown={(e) => {\n closePopover(e);\n }}\n />\n </DSFormLayoutBlockItem>\n <DSFormLayoutBlockItem label=\"High\" inputID={`${idPreffix}-high-${column.id}`}>\n <DSInputMask\n containerProps={{ style: { textAlign: 'right' } }}\n id={`${idPreffix}-high-${column.id}`}\n value={`${filterValue?.to ?? ''}`}\n onChange={handleToChange}\n placeholder=\"0\"\n mask={(number) => MASK_TYPES.NUMBER(opts)(number)}\n onKeyDown={(e) => {\n closePopover(e);\n }}\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n innerRef={innerRef}\n ariaLabel=\"Open Number Range Filter\"\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import React2, { useState, useRef, useCallback, useMemo } from "react";
|
|
2
|
+
import React2, { useState, useRef, useCallback, useEffect, useMemo } from "react";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { DSComboBox } from "@elliemae/ds-controlled-form";
|
|
5
5
|
import { SearchXsmall } from "@elliemae/ds-icons";
|
|
@@ -23,6 +23,7 @@ const BaseSelectFilter = (props) => {
|
|
|
23
23
|
onValueChange
|
|
24
24
|
} = props;
|
|
25
25
|
const ref = useRef();
|
|
26
|
+
const shouldFocus = useRef(true);
|
|
26
27
|
const filterOptions = useMemo(() => {
|
|
27
28
|
if (!userFilterOptions) {
|
|
28
29
|
const automaticFilters = [
|
|
@@ -67,12 +68,20 @@ const BaseSelectFilter = (props) => {
|
|
|
67
68
|
(newRef) => {
|
|
68
69
|
if (ref.current)
|
|
69
70
|
ref.current = newRef;
|
|
70
|
-
if (
|
|
71
|
-
setTimeout(() =>
|
|
71
|
+
if (shouldFocus.current) {
|
|
72
|
+
setTimeout(() => {
|
|
73
|
+
newRef?.focus();
|
|
74
|
+
shouldFocus.current = false;
|
|
75
|
+
});
|
|
72
76
|
}
|
|
73
77
|
},
|
|
74
|
-
[
|
|
78
|
+
[shouldFocus]
|
|
75
79
|
);
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
if (reduxHeader?.hideFilterMenu) {
|
|
82
|
+
shouldFocus.current = true;
|
|
83
|
+
}
|
|
84
|
+
}, [reduxHeader?.hideFilterMenu]);
|
|
76
85
|
const Select = /* @__PURE__ */ React2.createElement(Grid, {
|
|
77
86
|
"data-testid": isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
|
|
78
87
|
style: { background: "#fff", position: "relative", width: filterMinWidth ?? column.ref?.current?.offsetWidth }
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/addons/Filters/Components/SelectFilter/BaseSelectFilter.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isMulti?: boolean;\n creatable?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems = null,\n creatable = false,\n column,\n type,\n column: { id, filterOptions: userFilterOptions, filterMinWidth },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n patchHeaderFilterButtonAndMenu,\n innerRef,\n onValueChange,\n } = props;\n\n const ref = useRef();\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [\n ...new Set(data.map((datum) => datum?.[id]?.toString()).filter((val) => val !== undefined)),\n ].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\n }\n\n // If user provided the array itself, use it\n if (Array.isArray(userFilterOptions)) return userFilterOptions;\n // Otherwise, it is a function\n return userFilterOptions();\n }, [data, id, userFilterOptions]);\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n const handleOnChange = (value) => {\n onValueChange(type, value);\n if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);\n };\n\n const handleOnCreate = (label: string) => {\n if (label.trim() === '') {\n return;\n }\n if (filterOptions.some((item) => item.label === label)) {\n return;\n }\n const newId = uid();\n const newItem = {\n dsId: newId,\n value: newId,\n label,\n type: 'option',\n };\n filterOptions.unshift(newItem);\n handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n setFilteredOptions(filterOptions);\n };\n\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,UAAU,QAAQ,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover } from '../../../../exported-related';\nimport { FilterProps } from '../../../../types/props';\nimport { DATA_TESTID } from '../../../../configs';\n\ninterface FilterOptionT {\n dsId: string;\n type: string;\n value: string;\n label: string;\n}\n\ninterface BaseSelectProps {\n isMulti?: boolean;\n creatable?: boolean;\n selectedItems?: FilterOptionT[] | FilterOptionT;\n type: string;\n}\n\nexport const BaseSelectFilter: React.ComponentType<FilterProps & BaseSelectProps> = (props) => {\n const {\n isMulti = false,\n selectedItems = null,\n creatable = false,\n column,\n type,\n column: { id, filterOptions: userFilterOptions, filterMinWidth },\n ctx: {\n tableProps: { data },\n },\n reduxHeader,\n patchHeaderFilterButtonAndMenu,\n innerRef,\n onValueChange,\n } = props;\n\n const ref = useRef();\n const shouldFocus = useRef(true);\n const filterOptions: FilterOptionT[] = useMemo(() => {\n // If the user didn't provide options, use the available ones\n if (!userFilterOptions) {\n const automaticFilters = [\n ...new Set(data.map((datum) => datum?.[id]?.toString()).filter((val) => val !== undefined)),\n ].map((item) => ({\n type: 'option',\n dsId: item,\n value: item,\n label: item,\n }));\n\n return automaticFilters;\n }\n\n // If user provided the array itself, use it\n if (Array.isArray(userFilterOptions)) return userFilterOptions;\n // Otherwise, it is a function\n return userFilterOptions();\n }, [data, id, userFilterOptions]);\n\n const [filters, setFilteredOptions] = useState(filterOptions);\n\n const handleOnChange = (value) => {\n onValueChange(type, value);\n if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);\n };\n\n const handleOnCreate = (label: string) => {\n if (label.trim() === '') {\n return;\n }\n if (filterOptions.some((item) => item.label === label)) {\n return;\n }\n const newId = uid();\n const newItem = {\n dsId: newId,\n value: newId,\n label,\n type: 'option',\n };\n filterOptions.unshift(newItem);\n handleOnChange(Array.isArray(selectedItems) ? [...selectedItems, newItem] : newItem);\n setFilteredOptions(filterOptions);\n };\n\n const handleRef = useCallback(\n (newRef) => {\n if (ref.current) ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n newRef?.focus();\n shouldFocus.current = false;\n });\n }\n },\n [shouldFocus],\n );\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n const Select = (\n <Grid\n data-testid={\n isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER\n }\n style={{ background: '#fff', position: 'relative', width: filterMinWidth ?? column.ref?.current?.offsetWidth }}\n >\n <DSComboBox\n inline\n innerRef={handleRef}\n allOptions={filters}\n onCreate={creatable ? handleOnCreate : undefined}\n onChange={handleOnChange}\n selectedValues={selectedItems}\n menuMaxHeight={300}\n />\n </Grid>\n );\n\n const handleOnClickOutside = () => {\n setFilteredOptions(filterOptions);\n };\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={Select}\n triggerIcon={<SearchXsmall />}\n innerRef={innerRef}\n ariaLabel=\"Open Selection Filter\"\n onClickOutsideMenu={handleOnClickOutside}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "3.5.0-rc.
|
|
3
|
+
"version": "3.5.0-rc.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -571,23 +571,23 @@
|
|
|
571
571
|
"indent": 4
|
|
572
572
|
},
|
|
573
573
|
"dependencies": {
|
|
574
|
-
"@elliemae/ds-button": "3.5.0-rc.
|
|
575
|
-
"@elliemae/ds-circular-progress-indicator": "3.5.0-rc.
|
|
576
|
-
"@elliemae/ds-controlled-form": "3.5.0-rc.
|
|
577
|
-
"@elliemae/ds-drag-and-drop": "3.5.0-rc.
|
|
578
|
-
"@elliemae/ds-dropdownmenu": "3.5.0-rc.
|
|
579
|
-
"@elliemae/ds-form": "3.5.0-rc.
|
|
580
|
-
"@elliemae/ds-form-layout-blocks": "3.5.0-rc.
|
|
581
|
-
"@elliemae/ds-grid": "3.5.0-rc.
|
|
582
|
-
"@elliemae/ds-icons": "3.5.0-rc.
|
|
583
|
-
"@elliemae/ds-pagination": "3.5.0-rc.
|
|
584
|
-
"@elliemae/ds-pills": "3.5.0-rc.
|
|
585
|
-
"@elliemae/ds-popperjs": "3.5.0-rc.
|
|
586
|
-
"@elliemae/ds-skeleton": "3.5.0-rc.
|
|
587
|
-
"@elliemae/ds-system": "3.5.0-rc.
|
|
588
|
-
"@elliemae/ds-toolbar": "3.5.0-rc.
|
|
589
|
-
"@elliemae/ds-truncated-tooltip-text": "3.5.0-rc.
|
|
590
|
-
"@elliemae/ds-utilities": "3.5.0-rc.
|
|
574
|
+
"@elliemae/ds-button": "3.5.0-rc.8",
|
|
575
|
+
"@elliemae/ds-circular-progress-indicator": "3.5.0-rc.8",
|
|
576
|
+
"@elliemae/ds-controlled-form": "3.5.0-rc.8",
|
|
577
|
+
"@elliemae/ds-drag-and-drop": "3.5.0-rc.8",
|
|
578
|
+
"@elliemae/ds-dropdownmenu": "3.5.0-rc.8",
|
|
579
|
+
"@elliemae/ds-form": "3.5.0-rc.8",
|
|
580
|
+
"@elliemae/ds-form-layout-blocks": "3.5.0-rc.8",
|
|
581
|
+
"@elliemae/ds-grid": "3.5.0-rc.8",
|
|
582
|
+
"@elliemae/ds-icons": "3.5.0-rc.8",
|
|
583
|
+
"@elliemae/ds-pagination": "3.5.0-rc.8",
|
|
584
|
+
"@elliemae/ds-pills": "3.5.0-rc.8",
|
|
585
|
+
"@elliemae/ds-popperjs": "3.5.0-rc.8",
|
|
586
|
+
"@elliemae/ds-skeleton": "3.5.0-rc.8",
|
|
587
|
+
"@elliemae/ds-system": "3.5.0-rc.8",
|
|
588
|
+
"@elliemae/ds-toolbar": "3.5.0-rc.8",
|
|
589
|
+
"@elliemae/ds-truncated-tooltip-text": "3.5.0-rc.8",
|
|
590
|
+
"@elliemae/ds-utilities": "3.5.0-rc.8",
|
|
591
591
|
"react-virtual": "~2.10.4",
|
|
592
592
|
"uid": "~2.0.0"
|
|
593
593
|
},
|