@economic/taco 1.21.1 → 1.21.2
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/components/Provider/Localization.d.ts +70 -7
- package/dist/components/Table2/Table2.d.ts +74 -9
- package/dist/components/Table2/Table2.stories.d.ts +0 -1
- package/dist/components/Table2/components/EditModeButton.d.ts +1 -0
- package/dist/components/Table2/components/filters/components/InferredControl.d.ts +1 -1
- package/dist/components/Table2/types.d.ts +7 -4
- package/dist/components/Table2/utilities/columns.d.ts +5 -4
- package/dist/esm/packages/taco/src/components/Provider/Localization.js +70 -7
- package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
- package/dist/esm/packages/taco/src/components/SearchInput/SearchInput.js +1 -0
- package/dist/esm/packages/taco/src/components/SearchInput/SearchInput.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/Select2.js +1 -1
- package/dist/esm/packages/taco/src/components/Select2/Select2.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/Table2.js +16 -5
- package/dist/esm/packages/taco/src/components/Table2/Table2.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/ColumnSettingsButton.js +24 -22
- package/dist/esm/packages/taco/src/components/Table2/components/ColumnSettingsButton.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js +23 -4
- package/dist/esm/packages/taco/src/components/Table2/components/EditModeButton.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/RowDensityButton.js +6 -2
- package/dist/esm/packages/taco/src/components/Table2/components/RowDensityButton.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/Search.js +5 -0
- package/dist/esm/packages/taco/src/components/Table2/components/Search.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/ShortcutsGuideButton.js +14 -16
- package/dist/esm/packages/taco/src/components/Table2/components/ShortcutsGuideButton.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/column/Cell.js +13 -4
- package/dist/esm/packages/taco/src/components/Table2/components/column/Cell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/column/Footer.js +6 -2
- package/dist/esm/packages/taco/src/components/Table2/components/column/Footer.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/column/Indicator.js +10 -12
- package/dist/esm/packages/taco/src/components/Table2/components/column/Indicator.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js +10 -5
- package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/ColumnFilter.js +5 -5
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/ColumnFilter.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Comparator.js +20 -12
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Comparator.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/InferredControl.js +3 -0
- package/dist/esm/packages/taco/src/components/Table2/components/filters/components/InferredControl.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/components/row/Row.js +4 -3
- package/dist/esm/packages/taco/src/components/Table2/components/row/Row.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js +8 -4
- package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/hooks/useGridTemplate.js +1 -5
- package/dist/esm/packages/taco/src/components/Table2/hooks/useGridTemplate.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/types.js +2 -0
- package/dist/esm/packages/taco/src/components/Table2/types.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/utilities/cell.js +1 -1
- package/dist/esm/packages/taco/src/components/Table2/utilities/cell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js +31 -37
- package/dist/esm/packages/taco/src/components/Table2/utilities/columns.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table2/utilities/filterFn.js +4 -0
- package/dist/esm/packages/taco/src/components/Table2/utilities/filterFn.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Collection/components/Root.js +2 -1
- package/dist/esm/packages/taco/src/primitives/Collection/components/Root.js.map +1 -1
- package/dist/taco.cjs.development.js +272 -148
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
- package/types.json +316 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Indicator.js","sources":["../../../../../../../../../src/components/Table2/components/column/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Icon } from '../../../Icon/Icon';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { useRowContext } from '../row/Context';\n\nexport enum IndicatorReason {\n SEARCH = 'SEARCH',\n SORTING = 'SORTING',\n FILTER = 'FILTER',\n}\n\nexport const useIndicatorText = reason => {\n let title = '';\n let description = '';\n\n const {
|
|
1
|
+
{"version":3,"file":"Indicator.js","sources":["../../../../../../../../../src/components/Table2/components/column/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Icon } from '../../../Icon/Icon';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { useRowContext } from '../row/Context';\n\nexport enum IndicatorReason {\n SEARCH = 'SEARCH',\n SORTING = 'SORTING',\n FILTER = 'FILTER',\n}\n\nexport const useIndicatorText = reason => {\n let title = '';\n let description = '';\n\n const { texts } = useLocalization();\n\n switch (reason) {\n case IndicatorReason.FILTER:\n title = texts.table2.editing.rowIndicator.rowWillBeHidden;\n description = texts.table2.editing.rowIndicator.rowWillMoveReasonFilter;\n break;\n case IndicatorReason.SEARCH:\n title = texts.table2.editing.rowIndicator.rowWillBeHidden;\n description = texts.table2.editing.rowIndicator.rowWillMoveReasonSearch;\n break;\n case IndicatorReason.SORTING:\n title = texts.table2.editing.rowIndicator.rowWillMove;\n description = texts.table2.editing.rowIndicator.rowWillMoveReasonSorting;\n break;\n }\n\n return { title, description };\n};\n\nexport type IndicatorProps = {\n reason: IndicatorReason;\n columnName: string;\n mountNode: Element | null;\n};\nexport const Indicator = ({ reason, columnName, mountNode }: IndicatorProps) => {\n const container = React.useMemo(() => {\n const element = document.createElement('div');\n element.className +=\n 'z-[3] rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';\n\n return element;\n }, []);\n\n const indicatorText = useIndicatorText(reason);\n\n const { validationErrors } = useRowContext();\n const hasValidationErrorsInRow = !!validationErrors;\n\n React.useEffect(() => {\n // mountNode could be null when rows are filtered\n mountNode?.classList.add('relative');\n mountNode?.appendChild(container);\n\n return () => {\n mountNode?.classList.remove('relative');\n mountNode?.removeChild(container);\n };\n }, [hasValidationErrorsInRow]);\n\n // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring\n // and being able to use Taco Tooltip component in side the visual indicator, portal is used.\n return ReactDOM.createPortal(\n <Tooltip title={indicatorText.description.replace('[COLUMN]', columnName)}>\n <span className=\"flex gap-1 hover:cursor-pointer\">\n <Icon name=\"info\" className=\"!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n {indicatorText.title}\n </span>\n </Tooltip>,\n container\n );\n};\n"],"names":["IndicatorReason","useIndicatorText","reason","title","description","texts","useLocalization","FILTER","table2","editing","rowIndicator","rowWillBeHidden","rowWillMoveReasonFilter","SEARCH","rowWillMoveReasonSearch","SORTING","rowWillMove","rowWillMoveReasonSorting","Indicator","columnName","mountNode","container","React","useMemo","element","document","createElement","className","indicatorText","validationErrors","useRowContext","hasValidationErrorsInRow","useEffect","classList","add","appendChild","remove","removeChild","ReactDOM","createPortal","Tooltip","replace","Icon","name"],"mappings":";;;;;;;IAQYA;AAAZ,WAAYA,eAAe;EACvBA,oCAAiB;EACjBA,sCAAmB;EACnBA,oCAAiB;AACrB,CAAC,EAJWA,eAAe,KAAfA,eAAe;MAMdC,gBAAgB,GAAGC,MAAM;EAClC,IAAIC,KAAK,GAAG,EAAE;EACd,IAAIC,WAAW,GAAG,EAAE;EAEpB,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAEnC,QAAQJ,MAAM;IACV,KAAKF,eAAe,CAACO,MAAM;MACvBJ,KAAK,GAAGE,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACC,eAAe;MACzDP,WAAW,GAAGC,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACE,uBAAuB;MACvE;IACJ,KAAKZ,eAAe,CAACa,MAAM;MACvBV,KAAK,GAAGE,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACC,eAAe;MACzDP,WAAW,GAAGC,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACI,uBAAuB;MACvE;IACJ,KAAKd,eAAe,CAACe,OAAO;MACxBZ,KAAK,GAAGE,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACM,WAAW;MACrDZ,WAAW,GAAGC,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACO,wBAAwB;MACxE;;EAGR,OAAO;IAAEd,KAAK;IAAEC;GAAa;AACjC;MAOac,SAAS,GAAG,CAAC;EAAEhB,MAAM;EAAEiB,UAAU;EAAEC;CAA2B;EACvE,MAAMC,SAAS,GAAGC,cAAK,CAACC,OAAO,CAAC;IAC5B,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC7CF,OAAO,CAACG,SAAS,IACb,uIAAuI;IAE3I,OAAOH,OAAO;GACjB,EAAE,EAAE,CAAC;EAEN,MAAMI,aAAa,GAAG3B,gBAAgB,CAACC,MAAM,CAAC;EAE9C,MAAM;IAAE2B;GAAkB,GAAGC,aAAa,EAAE;EAC5C,MAAMC,wBAAwB,GAAG,CAAC,CAACF,gBAAgB;EAEnDP,cAAK,CAACU,SAAS,CAAC;;IAEZZ,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEa,SAAS,CAACC,GAAG,CAAC,UAAU,CAAC;IACpCd,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEe,WAAW,CAACd,SAAS,CAAC;IAEjC,OAAO;MACHD,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEa,SAAS,CAACG,MAAM,CAAC,UAAU,CAAC;MACvChB,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEiB,WAAW,CAAChB,SAAS,CAAC;KACpC;GACJ,EAAE,CAACU,wBAAwB,CAAC,CAAC;;;EAI9B,oBAAOO,QAAQ,CAACC,YAAY,eACxBjB,6BAACkB,OAAO;IAACrC,KAAK,EAAEyB,aAAa,CAACxB,WAAW,CAACqC,OAAO,CAAC,UAAU,EAAEtB,UAAU;kBACpEG;IAAMK,SAAS,EAAC;kBACZL,6BAACoB,IAAI;IAACC,IAAI,EAAC,MAAM;IAAChB,SAAS,EAAC;IAAuD,EAClFC,aAAa,CAACzB,KAAK,CACjB,CACD,EACVkB,SAAS,CACZ;AACL;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
import { Icon } from '../../../Icon/Icon.js';
|
|
4
|
+
import { useLocalization } from '../../../Provider/Localization.js';
|
|
4
5
|
import { Button } from '../../../Button/Button.js';
|
|
5
6
|
import { Popover } from '../../../Popover/Popover.js';
|
|
6
7
|
import { Group } from '../../../Group/Group.js';
|
|
@@ -13,6 +14,9 @@ const FiltersButton = ({
|
|
|
13
14
|
length,
|
|
14
15
|
table
|
|
15
16
|
}) => {
|
|
17
|
+
const {
|
|
18
|
+
texts
|
|
19
|
+
} = useLocalization();
|
|
16
20
|
const ref = React__default.useRef(null);
|
|
17
21
|
const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));
|
|
18
22
|
const {
|
|
@@ -46,6 +50,7 @@ const FiltersButton = ({
|
|
|
46
50
|
}
|
|
47
51
|
});
|
|
48
52
|
return /*#__PURE__*/React__default.createElement(Button, {
|
|
53
|
+
"aria-label": texts.table2.filters.tooltip,
|
|
49
54
|
appearance: columnFilters.length ? 'primary' : 'default',
|
|
50
55
|
className: cn({
|
|
51
56
|
'!wcag-blue-100': columnFilters.length
|
|
@@ -59,7 +64,7 @@ const FiltersButton = ({
|
|
|
59
64
|
className: "mb-0 inline-flex"
|
|
60
65
|
}, "Filter"), /*#__PURE__*/React__default.createElement("p", {
|
|
61
66
|
className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
|
|
62
|
-
},
|
|
67
|
+
}, texts.table2.filters.total.replace('[CURRENT]', String(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', String(length)))), /*#__PURE__*/React__default.createElement("div", {
|
|
63
68
|
className: "flex flex-col gap-2"
|
|
64
69
|
}, filteredColumns.map((column, index) => /*#__PURE__*/React__default.createElement(ColumnFilter, {
|
|
65
70
|
key: `${column.id}_${index}`,
|
|
@@ -72,17 +77,17 @@ const FiltersButton = ({
|
|
|
72
77
|
}, /*#__PURE__*/React__default.createElement(Button, {
|
|
73
78
|
appearance: "discrete",
|
|
74
79
|
onClick: handleAdd
|
|
75
|
-
}, "+
|
|
80
|
+
}, "+ ", texts.table2.filters.buttons.addFilter), columnFilters.length ? /*#__PURE__*/React__default.createElement(Button, {
|
|
76
81
|
onClick: handleReset
|
|
77
|
-
},
|
|
82
|
+
}, texts.table2.filters.buttons.clearFilters) : null)))),
|
|
78
83
|
ref: ref,
|
|
79
|
-
tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null,
|
|
84
|
+
tooltip: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table2.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
|
|
80
85
|
className: "ml-2",
|
|
81
86
|
keys: ['Ctrl', 'Shift', 'F']
|
|
82
87
|
}))
|
|
83
88
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
84
89
|
name: columnFilters.length ? 'filter-solid' : 'filter'
|
|
85
|
-
}), columnFilters.length ? `
|
|
90
|
+
}), texts.table2.filters.button, " ", columnFilters.length ? `(${columnFilters.length})` : '');
|
|
86
91
|
};
|
|
87
92
|
|
|
88
93
|
export { FiltersButton };
|
package/dist/esm/packages/taco/src/components/Table2/components/filters/FiltersButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FiltersButton.js","sources":["../../../../../../../../../src/components/Table2/components/filters/FiltersButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTTable, Column as RTColumn, TableMeta } from '@tanstack/react-table';\nimport { Button } from '../../../Button/Button';\nimport { Icon } from '../../../Icon/Icon';\nimport { Popover } from '../../../Popover/Popover';\nimport { Table2Filter } from '../../types';\nimport { isInternalColumn } from '../../utilities/columns';\nimport { ColumnFilter } from './components/ColumnFilter';\nimport { Group } from '../../../Group/Group';\nimport { Shortcut } from '../../../Shortcut/Shortcut';\nimport { useGlobalKeyboardShortcut } from '../../../../hooks/useGlobalKeyboardShortcut';\n\nexport type FiltersButtonProps = {\n length: number;\n table: RTTable<any>;\n};\n\nexport const FiltersButton = ({ length, table }: FiltersButtonProps) => {\n const ref = React.useRef<HTMLButtonElement>(null);\n const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));\n const { shouldDisableTableActions } = table.options.meta as TableMeta<any>;\n\n const columnFilters = table.getState().columnFilters;\n\n const filteredColumns = columnFilters.reduce((columns: RTColumn<any, any>[], columnFilter) => {\n const column = allColumns.find(c => c.id === columnFilter.id);\n\n if (column) {\n return [...columns, column];\n }\n\n return columns;\n }, []);\n\n const handleAdd = () => {\n const firstFilterableColumn = allColumns.find(c => c.getCanFilter() && !columnFilters.find(f => f.id === c.id));\n\n if (firstFilterableColumn) {\n firstFilterableColumn.setFilterValue({\n comparator: undefined,\n value: undefined,\n } as Table2Filter);\n }\n };\n\n const handleReset = () => {\n table.resetColumnFilters();\n };\n\n useGlobalKeyboardShortcut((event: KeyboardEvent) => {\n if (event.key === 'f' && (event.ctrlKey || event.metaKey) && event.shiftKey) {\n event.preventDefault();\n ref.current?.click();\n }\n });\n\n return (\n <Button\n appearance={columnFilters.length ? 'primary' : 'default'}\n className={cn({\n '!wcag-blue-100': columnFilters.length,\n })}\n disabled={shouldDisableTableActions}\n popover={popoverProps => (\n <Popover {...popoverProps}>\n <Popover.Content>\n <div className=\"flex w-[40rem] flex-col gap-4\">\n <div className=\"flex w-full items-center gap-2\">\n <h4 className=\"mb-0 inline-flex\">Filter</h4>\n <p className=\"text-grey-700 mb-0 mr-auto mt-px inline-flex\">\n
|
|
1
|
+
{"version":3,"file":"FiltersButton.js","sources":["../../../../../../../../../src/components/Table2/components/filters/FiltersButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTTable, Column as RTColumn, TableMeta } from '@tanstack/react-table';\nimport { Button } from '../../../Button/Button';\nimport { Icon } from '../../../Icon/Icon';\nimport { Popover } from '../../../Popover/Popover';\nimport { Table2Filter } from '../../types';\nimport { isInternalColumn } from '../../utilities/columns';\nimport { ColumnFilter } from './components/ColumnFilter';\nimport { Group } from '../../../Group/Group';\nimport { Shortcut } from '../../../Shortcut/Shortcut';\nimport { useGlobalKeyboardShortcut } from '../../../../hooks/useGlobalKeyboardShortcut';\nimport { useLocalization } from '../../../Provider/Localization';\n\nexport type FiltersButtonProps = {\n length: number;\n table: RTTable<any>;\n};\n\nexport const FiltersButton = ({ length, table }: FiltersButtonProps) => {\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLButtonElement>(null);\n const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id));\n const { shouldDisableTableActions } = table.options.meta as TableMeta<any>;\n\n const columnFilters = table.getState().columnFilters;\n\n const filteredColumns = columnFilters.reduce((columns: RTColumn<any, any>[], columnFilter) => {\n const column = allColumns.find(c => c.id === columnFilter.id);\n\n if (column) {\n return [...columns, column];\n }\n\n return columns;\n }, []);\n\n const handleAdd = () => {\n const firstFilterableColumn = allColumns.find(c => c.getCanFilter() && !columnFilters.find(f => f.id === c.id));\n\n if (firstFilterableColumn) {\n firstFilterableColumn.setFilterValue({\n comparator: undefined,\n value: undefined,\n } as Table2Filter);\n }\n };\n\n const handleReset = () => {\n table.resetColumnFilters();\n };\n\n useGlobalKeyboardShortcut((event: KeyboardEvent) => {\n if (event.key === 'f' && (event.ctrlKey || event.metaKey) && event.shiftKey) {\n event.preventDefault();\n ref.current?.click();\n }\n });\n\n return (\n <Button\n aria-label={texts.table2.filters.tooltip}\n appearance={columnFilters.length ? 'primary' : 'default'}\n className={cn({\n '!wcag-blue-100': columnFilters.length,\n })}\n disabled={shouldDisableTableActions}\n popover={popoverProps => (\n <Popover {...popoverProps}>\n <Popover.Content>\n <div className=\"flex w-[40rem] flex-col gap-4\">\n <div className=\"flex w-full items-center gap-2\">\n <h4 className=\"mb-0 inline-flex\">Filter</h4>\n <p className=\"text-grey-700 mb-0 mr-auto mt-px inline-flex\">\n {texts.table2.filters.total\n .replace('[CURRENT]', String(table.getFilteredRowModel().rows.length))\n .replace('[TOTAL]', String(length))}\n </p>\n </div>\n <div className=\"flex flex-col gap-2\">\n {filteredColumns.map((column, index) => (\n <ColumnFilter\n key={`${column.id}_${index}`}\n allColumns={allColumns}\n index={index}\n column={column}\n table={table}\n />\n ))}\n </div>\n <Group className=\"justify-between\">\n <Button appearance=\"discrete\" onClick={handleAdd}>\n + {texts.table2.filters.buttons.addFilter}\n </Button>\n {columnFilters.length ? (\n <Button onClick={handleReset}>{texts.table2.filters.buttons.clearFilters}</Button>\n ) : null}\n </Group>\n </div>\n </Popover.Content>\n </Popover>\n )}\n ref={ref}\n tooltip={\n <>\n {texts.table2.filters.tooltip}\n <Shortcut className=\"ml-2\" keys={['Ctrl', 'Shift', 'F']} />\n </>\n }>\n <Icon name={columnFilters.length ? 'filter-solid' : 'filter'} />\n {texts.table2.filters.button} {columnFilters.length ? `(${columnFilters.length})` : ''}\n </Button>\n );\n};\n"],"names":["FiltersButton","length","table","texts","useLocalization","ref","React","useRef","allColumns","getAllLeafColumns","filter","column","isInternalColumn","id","shouldDisableTableActions","options","meta","columnFilters","getState","filteredColumns","reduce","columns","columnFilter","find","c","handleAdd","firstFilterableColumn","getCanFilter","f","setFilterValue","comparator","undefined","value","handleReset","resetColumnFilters","useGlobalKeyboardShortcut","event","key","ctrlKey","metaKey","shiftKey","preventDefault","current","click","Button","table2","filters","tooltip","appearance","className","cn","disabled","popover","popoverProps","Popover","Content","total","replace","String","getFilteredRowModel","rows","map","index","ColumnFilter","Group","onClick","buttons","addFilter","clearFilters","Shortcut","keys","Icon","name","button"],"mappings":"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"}
|
package/dist/esm/packages/taco/src/components/Table2/components/filters/components/ColumnFilter.js
CHANGED
|
@@ -9,7 +9,7 @@ import { Comparator } from './Comparator.js';
|
|
|
9
9
|
import { InferredControl } from './InferredControl.js';
|
|
10
10
|
|
|
11
11
|
const ColumnFilter = props => {
|
|
12
|
-
var _column$columnDef$hea, _column$columnDef$met,
|
|
12
|
+
var _column$columnDef$hea, _column$columnDef$met, _control;
|
|
13
13
|
const {
|
|
14
14
|
allColumns,
|
|
15
15
|
column,
|
|
@@ -23,7 +23,7 @@ const ColumnFilter = props => {
|
|
|
23
23
|
const ariaLabel = String((_column$columnDef$hea = column.columnDef.header) !== null && _column$columnDef$hea !== void 0 ? _column$columnDef$hea : '');
|
|
24
24
|
const ref = React__default.useRef(null);
|
|
25
25
|
let control;
|
|
26
|
-
const controlType = (_column$columnDef$met =
|
|
26
|
+
const controlType = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
|
|
27
27
|
if (typeof controlType === 'function') {
|
|
28
28
|
control = controlType({
|
|
29
29
|
onBlur: () => Promise.resolve(),
|
|
@@ -66,7 +66,7 @@ const ColumnFilter = props => {
|
|
|
66
66
|
});
|
|
67
67
|
}
|
|
68
68
|
const handleRemove = () => column.setFilterValue(undefined);
|
|
69
|
-
const comparators = guessComparatorsBasedOnControl(
|
|
69
|
+
const comparators = guessComparatorsBasedOnControl(control, controlType);
|
|
70
70
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
71
71
|
className: "mb-2 flex gap-2"
|
|
72
72
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -94,7 +94,7 @@ const ColumnFilter = props => {
|
|
|
94
94
|
onClick: handleRemove
|
|
95
95
|
}));
|
|
96
96
|
};
|
|
97
|
-
const guessComparatorsBasedOnControl = (
|
|
97
|
+
const guessComparatorsBasedOnControl = (instance, control) => {
|
|
98
98
|
if ( /*#__PURE__*/React__default.isValidElement(instance)) {
|
|
99
99
|
const {
|
|
100
100
|
props,
|
|
@@ -113,7 +113,7 @@ const guessComparatorsBasedOnControl = (control, instance) => {
|
|
|
113
113
|
case 'switch':
|
|
114
114
|
return [Table2FilterComparator.IsEqualTo];
|
|
115
115
|
default:
|
|
116
|
-
return [Table2FilterComparator.Contains, Table2FilterComparator.DoesNotContain, Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo, Table2FilterComparator.IsGreaterThan, Table2FilterComparator.IsLessThan, Table2FilterComparator.IsBetween];
|
|
116
|
+
return [Table2FilterComparator.Contains, Table2FilterComparator.DoesNotContain, Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo, Table2FilterComparator.IsEmpty, Table2FilterComparator.IsNotEmpty, Table2FilterComparator.IsGreaterThan, Table2FilterComparator.IsLessThan, Table2FilterComparator.IsBetween];
|
|
117
117
|
}
|
|
118
118
|
};
|
|
119
119
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColumnFilter.js","sources":["../../../../../../../../../../src/components/Table2/components/filters/components/ColumnFilter.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn, Table as RTTable } from '@tanstack/react-table';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Input } from '../../../../Input/Input';\nimport { Table2ColumnControlRenderer, Table2Filter, Table2FilterComparator } from '../../../types';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Column } from './Column';\nimport { Comparator } from './Comparator';\nimport { InferredControl } from './InferredControl';\n\nexport type ColumnFilterProps = {\n allColumns: RTColumn<any, any>[];\n column: RTColumn<any, any>;\n index: number;\n table: RTTable<any>;\n};\n\nexport const ColumnFilter = (props: ColumnFilterProps) => {\n const { allColumns, column, index, table } = props;\n const { comparator, value } = column.getFilterValue() as Table2Filter;\n const ariaLabel = String(column.columnDef.header ?? '');\n const ref = React.useRef(null);\n\n let control;\n const controlType = column.columnDef.meta?.control
|
|
1
|
+
{"version":3,"file":"ColumnFilter.js","sources":["../../../../../../../../../../src/components/Table2/components/filters/components/ColumnFilter.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn, Table as RTTable } from '@tanstack/react-table';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Input } from '../../../../Input/Input';\nimport { Table2ColumnControlRenderer, Table2Filter, Table2FilterComparator } from '../../../types';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Column } from './Column';\nimport { Comparator } from './Comparator';\nimport { InferredControl } from './InferredControl';\n\nexport type ColumnFilterProps = {\n allColumns: RTColumn<any, any>[];\n column: RTColumn<any, any>;\n index: number;\n table: RTTable<any>;\n};\n\nexport const ColumnFilter = (props: ColumnFilterProps) => {\n const { allColumns, column, index, table } = props;\n const { comparator, value } = column.getFilterValue() as Table2Filter;\n const ariaLabel = String(column.columnDef.header ?? '');\n const ref = React.useRef(null);\n\n let control;\n const controlType = column.columnDef.meta?.control;\n\n if (typeof controlType === 'function') {\n control = controlType({\n onBlur: () => Promise.resolve(),\n onFocus: () => Promise.resolve(),\n ref,\n setValue: value => column.setFilterValue(currentValue => ({ ...currentValue, value })),\n value,\n disabled: false,\n readOnly: false,\n });\n } else if (controlType === 'input') {\n control = (\n <Input\n aria-label={ariaLabel}\n onChange={event => column.setFilterValue(currentValue => ({ ...currentValue, value: event.target.value }))}\n value={String(value ?? '')}\n />\n );\n } else if (controlType === 'datepicker') {\n control = (\n <Datepicker\n aria-label={ariaLabel}\n onChange={event => column.setFilterValue(currentValue => ({ ...currentValue, value: (event as any).detail }))}\n value={value as Date}\n />\n );\n } else if (controlType === 'switch') {\n control = (\n <Switch\n aria-label={ariaLabel}\n checked={Boolean(value)}\n onChange={checked => column.setFilterValue(currentValue => ({ ...currentValue, value: checked }))}\n />\n );\n }\n\n const handleRemove = () => column.setFilterValue(undefined);\n const comparators = guessComparatorsBasedOnControl(control, controlType);\n\n return (\n <div className=\"mb-2 flex gap-2\">\n <div className=\"flex w-14 flex-shrink-0 items-center justify-end pr-2 text-right\">\n {index === 0 ? 'Where' : 'And'}\n </div>\n <Column className=\"!w-32 flex-shrink-0\" allColumns={allColumns} column={column} index={index} table={table} />\n <Comparator className=\"!w-32 flex-shrink-0\" column={column} comparator={comparator} validComparators={comparators} />\n {comparator !== undefined ? (\n <div className=\"flex flex-grow items-center\">\n {control ?? <InferredControl column={column} comparator={comparator} value={value} />}\n </div>\n ) : null}\n <IconButton appearance=\"discrete\" icon=\"close\" onClick={handleRemove} />\n </div>\n );\n};\n\nconst guessComparatorsBasedOnControl = (instance: JSX.Element, control?: Table2ColumnControlRenderer) => {\n if (React.isValidElement(instance)) {\n const { props, type } = instance as any;\n\n if (type.displayName === 'Select2') {\n if (props.multiple) {\n return [Table2FilterComparator.IsOneOf, Table2FilterComparator.IsNoneOf, Table2FilterComparator.IsAllOf];\n }\n\n return [Table2FilterComparator.IsEqualTo, Table2FilterComparator.IsNotEqualTo];\n }\n }\n\n switch (control) {\n case 'datepicker':\n return [\n Table2FilterComparator.IsEqualTo,\n Table2FilterComparator.IsNotEqualTo,\n Table2FilterComparator.IsGreaterThan,\n Table2FilterComparator.IsLessThan,\n Table2FilterComparator.IsBetween,\n ];\n\n case 'switch':\n return [Table2FilterComparator.IsEqualTo];\n\n default:\n return [\n Table2FilterComparator.Contains,\n Table2FilterComparator.DoesNotContain,\n Table2FilterComparator.IsEqualTo,\n Table2FilterComparator.IsNotEqualTo,\n Table2FilterComparator.IsEmpty,\n Table2FilterComparator.IsNotEmpty,\n Table2FilterComparator.IsGreaterThan,\n Table2FilterComparator.IsLessThan,\n Table2FilterComparator.IsBetween,\n ];\n }\n};\n"],"names":["ColumnFilter","props","allColumns","column","index","table","comparator","value","getFilterValue","ariaLabel","String","columnDef","header","ref","React","useRef","control","controlType","meta","onBlur","Promise","resolve","onFocus","setValue","setFilterValue","currentValue","disabled","readOnly","Input","onChange","event","target","Datepicker","detail","Switch","checked","Boolean","handleRemove","undefined","comparators","guessComparatorsBasedOnControl","className","Column","Comparator","validComparators","InferredControl","IconButton","appearance","icon","onClick","instance","isValidElement","type","displayName","multiple","Table2FilterComparator","IsOneOf","IsNoneOf","IsAllOf","IsEqualTo","IsNotEqualTo","IsGreaterThan","IsLessThan","IsBetween","Contains","DoesNotContain","IsEmpty","IsNotEmpty"],"mappings":"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"}
|
package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Comparator.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
+
import { useLocalization } from '../../../../Provider/Localization.js';
|
|
2
3
|
import { Select2 } from '../../../../Select2/Select2.js';
|
|
3
4
|
import { Table2FilterComparator } from '../../../types.js';
|
|
4
5
|
|
|
@@ -8,6 +9,9 @@ const Comparator = ({
|
|
|
8
9
|
validComparators,
|
|
9
10
|
...props
|
|
10
11
|
}) => {
|
|
12
|
+
const {
|
|
13
|
+
texts
|
|
14
|
+
} = useLocalization();
|
|
11
15
|
const handleChange = comparator => {
|
|
12
16
|
column.setFilterValue(currentFilterValue => ({
|
|
13
17
|
comparator,
|
|
@@ -29,30 +33,34 @@ const Comparator = ({
|
|
|
29
33
|
}), validComparators.map(comp => /*#__PURE__*/React__default.createElement(Select2.Option, {
|
|
30
34
|
key: comp,
|
|
31
35
|
value: comp
|
|
32
|
-
}, getComparatorText(comp))));
|
|
36
|
+
}, getComparatorText(comp, texts))));
|
|
33
37
|
};
|
|
34
|
-
const getComparatorText = comparator => {
|
|
38
|
+
const getComparatorText = (comparator, texts) => {
|
|
35
39
|
switch (comparator) {
|
|
36
40
|
case Table2FilterComparator.Contains:
|
|
37
|
-
return
|
|
41
|
+
return texts.table2.filters.comparators.contains;
|
|
38
42
|
case Table2FilterComparator.DoesNotContain:
|
|
39
|
-
return
|
|
43
|
+
return texts.table2.filters.comparators.doesNotContain;
|
|
40
44
|
case Table2FilterComparator.IsEqualTo:
|
|
41
|
-
return
|
|
45
|
+
return texts.table2.filters.comparators.isEqualTo;
|
|
42
46
|
case Table2FilterComparator.IsNotEqualTo:
|
|
43
|
-
return
|
|
47
|
+
return texts.table2.filters.comparators.isNotEqualTo;
|
|
44
48
|
case Table2FilterComparator.IsGreaterThan:
|
|
45
|
-
return
|
|
49
|
+
return texts.table2.filters.comparators.isGreaterThan;
|
|
46
50
|
case Table2FilterComparator.IsLessThan:
|
|
47
|
-
return
|
|
51
|
+
return texts.table2.filters.comparators.isLessThan;
|
|
48
52
|
case Table2FilterComparator.IsBetween:
|
|
49
|
-
return
|
|
53
|
+
return texts.table2.filters.comparators.isBetween;
|
|
50
54
|
case Table2FilterComparator.IsOneOf:
|
|
51
|
-
return
|
|
55
|
+
return texts.table2.filters.comparators.isOneOf;
|
|
52
56
|
case Table2FilterComparator.IsNoneOf:
|
|
53
|
-
return
|
|
57
|
+
return texts.table2.filters.comparators.isNoneOf;
|
|
54
58
|
case Table2FilterComparator.IsAllOf:
|
|
55
|
-
return
|
|
59
|
+
return texts.table2.filters.comparators.isAllOf;
|
|
60
|
+
case Table2FilterComparator.IsEmpty:
|
|
61
|
+
return texts.table2.filters.comparators.isEmpty;
|
|
62
|
+
case Table2FilterComparator.IsNotEmpty:
|
|
63
|
+
return texts.table2.filters.comparators.isNotEmpty;
|
|
56
64
|
}
|
|
57
65
|
};
|
|
58
66
|
|
package/dist/esm/packages/taco/src/components/Table2/components/filters/components/Comparator.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Comparator.js","sources":["../../../../../../../../../../src/components/Table2/components/filters/components/Comparator.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Select2, Select2Props } from '../../../../Select2/Select2';\nimport { Table2FilterComparator } from '../../../types';\n\ntype ComparatorProps = Omit<Select2Props, 'children'> & {\n column: RTColumn<any, any>;\n comparator?: Table2FilterComparator;\n validComparators: Table2FilterComparator[];\n};\n\nexport const Comparator = ({ column, comparator, validComparators, ...props }: ComparatorProps) => {\n const handleChange = comparator => {\n column.setFilterValue(currentFilterValue => ({\n comparator,\n value: comparator === Table2FilterComparator.IsBetween ? [] : currentFilterValue.value,\n }));\n };\n\n React.useEffect(() => {\n if (comparator === undefined) {\n const initialComparator = validComparators[0];\n column.setFilterValue(currentFilterValue => ({\n comparator: initialComparator,\n value:\n initialComparator === Table2FilterComparator.IsBetween && !Array.isArray(currentFilterValue.value)\n ? []\n : currentFilterValue.value,\n }));\n }\n }, []);\n\n return (\n <Select2 {...props} onChange={handleChange} value={comparator}>\n {validComparators.map(comp => (\n <Select2.Option key={comp} value={comp}>\n {getComparatorText(comp)}\n </Select2.Option>\n ))}\n </Select2>\n );\n};\n\nconst getComparatorText = (comparator: Table2FilterComparator) => {\n switch (comparator) {\n case Table2FilterComparator.Contains:\n return
|
|
1
|
+
{"version":3,"file":"Comparator.js","sources":["../../../../../../../../../../src/components/Table2/components/filters/components/Comparator.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Select2, Select2Props } from '../../../../Select2/Select2';\nimport { Table2FilterComparator } from '../../../types';\nimport { LocalizationTexts, useLocalization } from '../../../../Provider/Localization';\n\ntype ComparatorProps = Omit<Select2Props, 'children'> & {\n column: RTColumn<any, any>;\n comparator?: Table2FilterComparator;\n validComparators: Table2FilterComparator[];\n};\n\nexport const Comparator = ({ column, comparator, validComparators, ...props }: ComparatorProps) => {\n const { texts } = useLocalization();\n const handleChange = comparator => {\n column.setFilterValue(currentFilterValue => ({\n comparator,\n value: comparator === Table2FilterComparator.IsBetween ? [] : currentFilterValue.value,\n }));\n };\n\n React.useEffect(() => {\n if (comparator === undefined) {\n const initialComparator = validComparators[0];\n column.setFilterValue(currentFilterValue => ({\n comparator: initialComparator,\n value:\n initialComparator === Table2FilterComparator.IsBetween && !Array.isArray(currentFilterValue.value)\n ? []\n : currentFilterValue.value,\n }));\n }\n }, []);\n\n return (\n <Select2 {...props} onChange={handleChange} value={comparator}>\n {validComparators.map(comp => (\n <Select2.Option key={comp} value={comp}>\n {getComparatorText(comp, texts)}\n </Select2.Option>\n ))}\n </Select2>\n );\n};\n\nconst getComparatorText = (comparator: Table2FilterComparator, texts: LocalizationTexts) => {\n switch (comparator) {\n case Table2FilterComparator.Contains:\n return texts.table2.filters.comparators.contains;\n case Table2FilterComparator.DoesNotContain:\n return texts.table2.filters.comparators.doesNotContain;\n case Table2FilterComparator.IsEqualTo:\n return texts.table2.filters.comparators.isEqualTo;\n case Table2FilterComparator.IsNotEqualTo:\n return texts.table2.filters.comparators.isNotEqualTo;\n case Table2FilterComparator.IsGreaterThan:\n return texts.table2.filters.comparators.isGreaterThan;\n case Table2FilterComparator.IsLessThan:\n return texts.table2.filters.comparators.isLessThan;\n case Table2FilterComparator.IsBetween:\n return texts.table2.filters.comparators.isBetween;\n case Table2FilterComparator.IsOneOf:\n return texts.table2.filters.comparators.isOneOf;\n case Table2FilterComparator.IsNoneOf:\n return texts.table2.filters.comparators.isNoneOf;\n case Table2FilterComparator.IsAllOf:\n return texts.table2.filters.comparators.isAllOf;\n case Table2FilterComparator.IsEmpty:\n return texts.table2.filters.comparators.isEmpty;\n case Table2FilterComparator.IsNotEmpty:\n return texts.table2.filters.comparators.isNotEmpty;\n }\n};\n"],"names":["Comparator","column","comparator","validComparators","props","texts","useLocalization","handleChange","setFilterValue","currentFilterValue","value","Table2FilterComparator","IsBetween","React","useEffect","undefined","initialComparator","Array","isArray","Select2","onChange","map","comp","Option","key","getComparatorText","Contains","table2","filters","comparators","contains","DoesNotContain","doesNotContain","IsEqualTo","isEqualTo","IsNotEqualTo","isNotEqualTo","IsGreaterThan","isGreaterThan","IsLessThan","isLessThan","isBetween","IsOneOf","isOneOf","IsNoneOf","isNoneOf","IsAllOf","isAllOf","IsEmpty","isEmpty","IsNotEmpty","isNotEmpty"],"mappings":"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"}
|
|
@@ -11,6 +11,9 @@ const InferredControl = ({
|
|
|
11
11
|
}) => {
|
|
12
12
|
var _column$columnDef$met2, _column$columnDef$met3;
|
|
13
13
|
const ariaLabel = column.columnDef.header;
|
|
14
|
+
if (comparator === Table2FilterComparator.IsEmpty || comparator === Table2FilterComparator.IsNotEmpty) {
|
|
15
|
+
return null;
|
|
16
|
+
}
|
|
14
17
|
if (comparator === Table2FilterComparator.IsBetween) {
|
|
15
18
|
var _column$columnDef$met;
|
|
16
19
|
const fromValue = Array.isArray(value) ? value[0] : undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InferredControl.js","sources":["../../../../../../../../../../src/components/Table2/components/filters/components/InferredControl.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Input } from '../../../../Input/Input';\nimport { Table2FilterComparator } from '../../../types';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\n\ntype InferredControlProps = {\n column: RTColumn<any, any>;\n comparator: Table2FilterComparator;\n value: any | any[];\n};\n\nexport const InferredControl = ({ column, comparator, value }: InferredControlProps) => {\n const ariaLabel = column.columnDef.header as string | undefined;\n\n if (comparator === Table2FilterComparator.IsBetween) {\n const fromValue = Array.isArray(value) ? value[0] : undefined;\n const toValue = Array.isArray(value) ? value[1] : undefined;\n\n if (column.columnDef.meta?.dataType === 'datetime') {\n return (\n <div className=\"flex flex-grow items-center gap-2\">\n <Datepicker\n aria-label={ariaLabel}\n onChange={event =>\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: [(event as any).detail, toValue],\n }))\n }\n value={fromValue}\n />\n <Datepicker\n aria-label={ariaLabel}\n onChange={event =>\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: [fromValue, (event as any).detail],\n }))\n }\n value={toValue}\n />\n </div>\n );\n }\n\n return (\n <div className=\"flex flex-grow items-center gap-2\">\n <Input\n aria-label={ariaLabel}\n className=\"flex-grow\"\n placeholder=\"from\"\n onChange={event => {\n const value = parseInt(event.target.value);\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: [isNaN(value) ? undefined : value, toValue],\n }));\n }}\n value={fromValue ?? ''}\n />\n <Input\n className=\"flex-grow\"\n placeholder=\"to\"\n onChange={event => {\n const value = parseInt(event.target.value);\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: [fromValue, isNaN(value) ? undefined : value],\n }));\n }}\n value={toValue ?? ''}\n />\n </div>\n );\n }\n\n if (column.columnDef.meta?.dataType === 'datetime') {\n return (\n <Datepicker\n aria-label={ariaLabel}\n onChange={event =>\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: (event as any).detail,\n }))\n }\n value={value}\n />\n );\n } else if (column.columnDef.meta?.dataType === 'boolean') {\n return (\n <Switch\n aria-label={ariaLabel}\n onChange={checked =>\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: checked,\n }))\n }\n checked={value}\n />\n );\n }\n\n return (\n <Input\n aria-label={ariaLabel}\n className=\"flex-grow\"\n onChange={event =>\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: event.target.value,\n }))\n }\n required\n value={value ?? ''}\n />\n );\n};\n"],"names":["InferredControl","column","comparator","value","ariaLabel","columnDef","header","Table2FilterComparator","IsBetween","fromValue","Array","isArray","undefined","toValue","meta","dataType","React","className","Datepicker","onChange","event","setFilterValue","currentValue","detail","Input","placeholder","parseInt","target","isNaN","Switch","checked","required"],"mappings":";;;;;;MAaaA,eAAe,GAAG,CAAC;EAAEC,MAAM;EAAEC,UAAU;EAAEC;CAA6B;;EAC/E,MAAMC,SAAS,GAAGH,MAAM,CAACI,SAAS,CAACC,MAA4B;EAE/D,IAAIJ,UAAU,KAAKK,sBAAsB,CAACC,SAAS,EAAE;IAAA;IACjD,MAAMC,SAAS,GAAGC,KAAK,CAACC,OAAO,
|
|
1
|
+
{"version":3,"file":"InferredControl.js","sources":["../../../../../../../../../../src/components/Table2/components/filters/components/InferredControl.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Input } from '../../../../Input/Input';\nimport { Table2FilterComparator } from '../../../types';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\n\ntype InferredControlProps = {\n column: RTColumn<any, any>;\n comparator: Table2FilterComparator;\n value: any | any[];\n};\n\nexport const InferredControl = ({ column, comparator, value }: InferredControlProps) => {\n const ariaLabel = column.columnDef.header as string | undefined;\n\n if (comparator === Table2FilterComparator.IsEmpty || comparator === Table2FilterComparator.IsNotEmpty) {\n return null;\n }\n\n if (comparator === Table2FilterComparator.IsBetween) {\n const fromValue = Array.isArray(value) ? value[0] : undefined;\n const toValue = Array.isArray(value) ? value[1] : undefined;\n\n if (column.columnDef.meta?.dataType === 'datetime') {\n return (\n <div className=\"flex flex-grow items-center gap-2\">\n <Datepicker\n aria-label={ariaLabel}\n onChange={event =>\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: [(event as any).detail, toValue],\n }))\n }\n value={fromValue}\n />\n <Datepicker\n aria-label={ariaLabel}\n onChange={event =>\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: [fromValue, (event as any).detail],\n }))\n }\n value={toValue}\n />\n </div>\n );\n }\n\n return (\n <div className=\"flex flex-grow items-center gap-2\">\n <Input\n aria-label={ariaLabel}\n className=\"flex-grow\"\n placeholder=\"from\"\n onChange={event => {\n const value = parseInt(event.target.value);\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: [isNaN(value) ? undefined : value, toValue],\n }));\n }}\n value={fromValue ?? ''}\n />\n <Input\n className=\"flex-grow\"\n placeholder=\"to\"\n onChange={event => {\n const value = parseInt(event.target.value);\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: [fromValue, isNaN(value) ? undefined : value],\n }));\n }}\n value={toValue ?? ''}\n />\n </div>\n );\n }\n\n if (column.columnDef.meta?.dataType === 'datetime') {\n return (\n <Datepicker\n aria-label={ariaLabel}\n onChange={event =>\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: (event as any).detail,\n }))\n }\n value={value}\n />\n );\n } else if (column.columnDef.meta?.dataType === 'boolean') {\n return (\n <Switch\n aria-label={ariaLabel}\n onChange={checked =>\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: checked,\n }))\n }\n checked={value}\n />\n );\n }\n\n return (\n <Input\n aria-label={ariaLabel}\n className=\"flex-grow\"\n onChange={event =>\n column.setFilterValue(currentValue => ({\n ...currentValue,\n value: event.target.value,\n }))\n }\n required\n value={value ?? ''}\n />\n );\n};\n"],"names":["InferredControl","column","comparator","value","ariaLabel","columnDef","header","Table2FilterComparator","IsEmpty","IsNotEmpty","IsBetween","fromValue","Array","isArray","undefined","toValue","meta","dataType","React","className","Datepicker","onChange","event","setFilterValue","currentValue","detail","Input","placeholder","parseInt","target","isNaN","Switch","checked","required"],"mappings":"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"}
|
|
@@ -45,12 +45,13 @@ const Row = ({
|
|
|
45
45
|
rowMoveReason: rowMoveReason,
|
|
46
46
|
setRowMoveReason: setRowMoveReason
|
|
47
47
|
}, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
|
|
48
|
-
role: "row",
|
|
49
|
-
draggable: true,
|
|
50
48
|
"aria-current": isActiveRow ? 'true' : undefined,
|
|
51
49
|
"aria-grabbed": isDragging ? 'true' : undefined,
|
|
50
|
+
"data-row-index": rowIndex,
|
|
51
|
+
draggable: true,
|
|
52
52
|
onMouseEnter: handleEnter,
|
|
53
|
-
onMouseLeave: handleLeave
|
|
53
|
+
onMouseLeave: handleLeave,
|
|
54
|
+
role: "row"
|
|
54
55
|
})));
|
|
55
56
|
};
|
|
56
57
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Row.js","sources":["../../../../../../../../../src/components/Table2/components/row/Row.tsx"],"sourcesContent":["import { TableMeta } from '@tanstack/react-table';\nimport React from 'react';\nimport { SaveHandlerErrorResponse } from '../../types';\nimport { IndicatorReason } from '../column/Indicator';\nimport { RowProvider } from './Context';\n\nconst HOVER_THRESHOLD_MS = 50;\n\nexport const Row = ({ row, rowIndex, table, ...props }) => {\n const meta = table.options.meta as TableMeta<any>;\n const isActiveRow = meta.activeRowIndex === rowIndex;\n const isDragging = meta.dragging[row.id];\n\n const [validationErrors, setValidationErrors] = React.useState<SaveHandlerErrorResponse | null>(null);\n const [rowMoveReason, setRowMoveReason] = React.useState<Record<string, IndicatorReason | null>>({});\n\n // This effect aims to focus the first focussable cell when edit mode is turned on.\n React.useEffect(() => {\n const isFocusInsideTable = meta.tableRef.current?.contains(document.activeElement);\n\n // If the foucs is outside the table i.e., table action popups, search etc., then don't focus the first cell.\n if (meta.editMode.isEditing && isActiveRow && isFocusInsideTable) {\n meta.editMode.moveToFirstColumn(meta.focussableColumnIndexes);\n }\n // We are intentionally not adding activeRow to the depency variable so that everytime active row is changed,\n // first focussable cell is not focussed.\n }, [meta.editMode.isEditing, meta.focussableColumnIndexes]);\n\n const handleSetValidationErrors = (errors: React.SetStateAction<SaveHandlerErrorResponse>) => {\n if (errors !== null) {\n meta.setShouldDisableTableActions(true);\n }\n\n setValidationErrors(errors);\n };\n\n const hoverTimerRef = React.useRef<ReturnType<typeof setTimeout>>();\n\n const handleEnter = () => {\n hoverTimerRef.current = setTimeout(() => meta.setHoveredRowIndex(rowIndex), HOVER_THRESHOLD_MS);\n };\n const handleLeave = () => {\n clearTimeout(hoverTimerRef.current);\n hoverTimerRef.current = undefined;\n meta.setHoveredRowIndex(undefined);\n };\n\n return (\n <RowProvider\n validationErrors={validationErrors}\n setValidationErrors={handleSetValidationErrors}\n rowMoveReason={rowMoveReason}\n setRowMoveReason={setRowMoveReason}>\n <div\n {...props}\n
|
|
1
|
+
{"version":3,"file":"Row.js","sources":["../../../../../../../../../src/components/Table2/components/row/Row.tsx"],"sourcesContent":["import { TableMeta } from '@tanstack/react-table';\nimport React from 'react';\nimport { SaveHandlerErrorResponse } from '../../types';\nimport { IndicatorReason } from '../column/Indicator';\nimport { RowProvider } from './Context';\n\nconst HOVER_THRESHOLD_MS = 50;\n\nexport const Row = ({ row, rowIndex, table, ...props }) => {\n const meta = table.options.meta as TableMeta<any>;\n const isActiveRow = meta.activeRowIndex === rowIndex;\n const isDragging = meta.dragging[row.id];\n\n const [validationErrors, setValidationErrors] = React.useState<SaveHandlerErrorResponse | null>(null);\n const [rowMoveReason, setRowMoveReason] = React.useState<Record<string, IndicatorReason | null>>({});\n\n // This effect aims to focus the first focussable cell when edit mode is turned on.\n React.useEffect(() => {\n const isFocusInsideTable = meta.tableRef.current?.contains(document.activeElement);\n\n // If the foucs is outside the table i.e., table action popups, search etc., then don't focus the first cell.\n if (meta.editMode.isEditing && isActiveRow && isFocusInsideTable) {\n meta.editMode.moveToFirstColumn(meta.focussableColumnIndexes);\n }\n // We are intentionally not adding activeRow to the depency variable so that everytime active row is changed,\n // first focussable cell is not focussed.\n }, [meta.editMode.isEditing, meta.focussableColumnIndexes]);\n\n const handleSetValidationErrors = (errors: React.SetStateAction<SaveHandlerErrorResponse>) => {\n if (errors !== null) {\n meta.setShouldDisableTableActions(true);\n }\n\n setValidationErrors(errors);\n };\n\n const hoverTimerRef = React.useRef<ReturnType<typeof setTimeout>>();\n\n const handleEnter = () => {\n hoverTimerRef.current = setTimeout(() => meta.setHoveredRowIndex(rowIndex), HOVER_THRESHOLD_MS);\n };\n const handleLeave = () => {\n clearTimeout(hoverTimerRef.current);\n hoverTimerRef.current = undefined;\n meta.setHoveredRowIndex(undefined);\n };\n\n return (\n <RowProvider\n validationErrors={validationErrors}\n setValidationErrors={handleSetValidationErrors}\n rowMoveReason={rowMoveReason}\n setRowMoveReason={setRowMoveReason}>\n <div\n {...props}\n aria-current={isActiveRow ? 'true' : undefined}\n aria-grabbed={isDragging ? 'true' : undefined}\n data-row-index={rowIndex}\n draggable\n onMouseEnter={handleEnter}\n onMouseLeave={handleLeave}\n role=\"row\"\n />\n </RowProvider>\n );\n};\n"],"names":["HOVER_THRESHOLD_MS","Row","row","rowIndex","table","props","meta","options","isActiveRow","activeRowIndex","isDragging","dragging","id","validationErrors","setValidationErrors","React","useState","rowMoveReason","setRowMoveReason","useEffect","isFocusInsideTable","tableRef","current","contains","document","activeElement","editMode","isEditing","moveToFirstColumn","focussableColumnIndexes","handleSetValidationErrors","errors","setShouldDisableTableActions","hoverTimerRef","useRef","handleEnter","setTimeout","setHoveredRowIndex","handleLeave","clearTimeout","undefined","RowProvider","draggable","onMouseEnter","onMouseLeave","role"],"mappings":";;;AAMA,MAAMA,kBAAkB,GAAG,EAAE;MAEhBC,GAAG,GAAG,CAAC;EAAEC,GAAG;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;CAAO;EAClD,MAAMC,IAAI,GAAGF,KAAK,CAACG,OAAO,CAACD,IAAsB;EACjD,MAAME,WAAW,GAAGF,IAAI,CAACG,cAAc,KAAKN,QAAQ;EACpD,MAAMO,UAAU,GAAGJ,IAAI,CAACK,QAAQ,CAACT,GAAG,CAACU,EAAE,CAAC;EAExC,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAkC,IAAI,CAAC;EACrG,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGH,cAAK,CAACC,QAAQ,CAAyC,EAAE,CAAC;;EAGpGD,cAAK,CAACI,SAAS,CAAC;;IACZ,MAAMC,kBAAkB,4BAAGd,IAAI,CAACe,QAAQ,CAACC,OAAO,0DAArB,sBAAuBC,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC;;IAGlF,IAAInB,IAAI,CAACoB,QAAQ,CAACC,SAAS,IAAInB,WAAW,IAAIY,kBAAkB,EAAE;MAC9Dd,IAAI,CAACoB,QAAQ,CAACE,iBAAiB,CAACtB,IAAI,CAACuB,uBAAuB,CAAC;;;;GAIpE,EAAE,CAACvB,IAAI,CAACoB,QAAQ,CAACC,SAAS,EAAErB,IAAI,CAACuB,uBAAuB,CAAC,CAAC;EAE3D,MAAMC,yBAAyB,GAAIC,MAAsD;IACrF,IAAIA,MAAM,KAAK,IAAI,EAAE;MACjBzB,IAAI,CAAC0B,4BAA4B,CAAC,IAAI,CAAC;;IAG3ClB,mBAAmB,CAACiB,MAAM,CAAC;GAC9B;EAED,MAAME,aAAa,GAAGlB,cAAK,CAACmB,MAAM,EAAiC;EAEnE,MAAMC,WAAW,GAAG;IAChBF,aAAa,CAACX,OAAO,GAAGc,UAAU,CAAC,MAAM9B,IAAI,CAAC+B,kBAAkB,CAAClC,QAAQ,CAAC,EAAEH,kBAAkB,CAAC;GAClG;EACD,MAAMsC,WAAW,GAAG;IAChBC,YAAY,CAACN,aAAa,CAACX,OAAO,CAAC;IACnCW,aAAa,CAACX,OAAO,GAAGkB,SAAS;IACjClC,IAAI,CAAC+B,kBAAkB,CAACG,SAAS,CAAC;GACrC;EAED,oBACIzB,6BAAC0B,WAAW;IACR5B,gBAAgB,EAAEA,gBAAgB;IAClCC,mBAAmB,EAAEgB,yBAAyB;IAC9Cb,aAAa,EAAEA,aAAa;IAC5BC,gBAAgB,EAAEA;kBAClBH,sDACQV,KAAK;oBACKG,WAAW,GAAG,MAAM,GAAGgC,SAAS;oBAChC9B,UAAU,GAAG,MAAM,GAAG8B,SAAS;sBAC7BrC,QAAQ;IACxBuC,SAAS;IACTC,YAAY,EAAER,WAAW;IACzBS,YAAY,EAAEN,WAAW;IACzBO,IAAI,EAAC;KACP,CACQ;AAEtB;;;;"}
|
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
+
import { useLocalization } from '../../Provider/Localization.js';
|
|
2
3
|
import { createColumnHelper } from '@tanstack/react-table';
|
|
3
4
|
import { createRowExpansionColumn, createRowSelectionColumn, createRowDraggableColumn, createRowActionsColumn, MIN_COLUMN_SIZE, COLUMN_ID_FOR_EXPANSION, COLUMN_ID_FOR_SELECTION, COLUMN_ID_FOR_DRAGGABLE } from '../utilities/columns.js';
|
|
4
5
|
|
|
5
6
|
function useColumnDefinitions(children, options, tableRef) {
|
|
7
|
+
const {
|
|
8
|
+
texts
|
|
9
|
+
} = useLocalization();
|
|
6
10
|
const lastSelectedRowIndex = React__default.useRef();
|
|
7
11
|
const columnHelper = createColumnHelper();
|
|
8
12
|
return React__default.useMemo(() => {
|
|
@@ -74,19 +78,19 @@ function useColumnDefinitions(children, options, tableRef) {
|
|
|
74
78
|
}
|
|
75
79
|
});
|
|
76
80
|
if (options.enableRowExpansion) {
|
|
77
|
-
columns.unshift(columnHelper.display(createRowExpansionColumn()));
|
|
81
|
+
columns.unshift(columnHelper.display(createRowExpansionColumn(texts)));
|
|
78
82
|
defaultColumnPinning.unshift(COLUMN_ID_FOR_EXPANSION);
|
|
79
83
|
}
|
|
80
84
|
if (options.enableRowSelection) {
|
|
81
|
-
columns.unshift(columnHelper.display(createRowSelectionColumn(options.enableMultipleRowSelection, lastSelectedRowIndex, options.onRowDrag, tableRef)));
|
|
85
|
+
columns.unshift(columnHelper.display(createRowSelectionColumn(options.enableMultipleRowSelection, lastSelectedRowIndex, options.onRowDrag, tableRef, texts)));
|
|
82
86
|
defaultColumnPinning.unshift(COLUMN_ID_FOR_SELECTION);
|
|
83
87
|
}
|
|
84
88
|
if (options.onRowDrag) {
|
|
85
|
-
columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag)));
|
|
89
|
+
columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag, texts)));
|
|
86
90
|
defaultColumnPinning.unshift(COLUMN_ID_FOR_DRAGGABLE);
|
|
87
91
|
}
|
|
88
92
|
if ((_options$actionsForRo = options.actionsForRow) !== null && _options$actionsForRo !== void 0 && _options$actionsForRo.length) {
|
|
89
|
-
columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow)));
|
|
93
|
+
columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, texts)));
|
|
90
94
|
}
|
|
91
95
|
return {
|
|
92
96
|
columns,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColumnDefinitions.js","sources":["../../../../../../../../src/components/Table2/hooks/useColumnDefinitions.ts"],"sourcesContent":["import React from 'react';\nimport {\n createColumnHelper,\n ColumnSort,\n ColumnSizingState,\n Row,\n RowData,\n VisibilityState,\n SortingFnOption,\n} from '@tanstack/react-table';\nimport {\n CellAlignment,\n ColumnDataType,\n RowDragHandler,\n Table2ColumnControlRenderer,\n Table2ColumnFooterRenderer,\n Table2ColumnHeaderMenu,\n Table2ColumnProps,\n Table2RowActionProps,\n} from '../types';\nimport {\n COLUMN_ID_FOR_DRAGGABLE,\n COLUMN_ID_FOR_EXPANSION,\n COLUMN_ID_FOR_SELECTION,\n createRowActionsColumn,\n createRowDraggableColumn,\n createRowExpansionColumn,\n createRowSelectionColumn,\n MIN_COLUMN_SIZE,\n} from '../utilities/columns';\n\ndeclare module '@tanstack/table-core' {\n interface ColumnMeta<TData extends RowData, TValue> {\n align?: CellAlignment;\n className?: string | ((row: Row<TData>) => string);\n control?: Table2ColumnControlRenderer;\n dataType?: ColumnDataType;\n disableReordering?: boolean;\n disableTruncation?: boolean;\n defaultWidth?: number;\n headerClassName?: string;\n menu?: Table2ColumnHeaderMenu;\n tooltip?: string;\n }\n}\n\ntype useColumnDefinitionsOptions<TType> = {\n actionsForRow: Table2RowActionProps<TType>[];\n enableColumnFiltering: boolean;\n enableColumnHiding: boolean;\n enableColumnPinning: boolean;\n enableRowExpansion: boolean;\n enableRowSelection: boolean;\n enableMultipleRowSelection: boolean;\n onRowDrag?: RowDragHandler<TType>;\n};\n\nexport function useColumnDefinitions<TType = any>(\n children: React.ReactElement<Table2ColumnProps<TType>>[],\n options: useColumnDefinitionsOptions<TType>,\n tableRef: React.RefObject<HTMLDivElement>\n) {\n const lastSelectedRowIndex = React.useRef<number>();\n const columnHelper = createColumnHelper<TType>();\n\n return React.useMemo(() => {\n // cannot be typed correctly until https://github.com/TanStack/table/discussions/4530 is resolved\n const columns: any[] = [];\n const defaultColumnPinning: string[] = [];\n const defaultColumnSizing: ColumnSizingState = {};\n const defaultColumnVisibility: VisibilityState = {};\n const defaultSorting: ColumnSort[] = [];\n const footers: Record<string, Table2ColumnFooterRenderer> = {};\n\n (React.Children.toArray(children) as React.ReactElement<Table2ColumnProps<TType>>[]).forEach(child => {\n if (React.isValidElement(child)) {\n if (child.props.defaultPinned && options.enableColumnPinning) {\n defaultColumnPinning.push(child.props.accessor);\n }\n\n if (child.props.defaultWidth) {\n defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;\n }\n\n if (child.props.defaultHidden && options.enableColumnHiding) {\n defaultColumnVisibility[child.props.accessor] = false;\n }\n\n if (child.props.sort !== undefined) {\n defaultSorting.push({\n id: child.props.accessor,\n desc: child.props.sort === 'desc',\n });\n }\n\n if (child.props.footer) {\n footers[child.props.accessor] = child.props.footer;\n }\n\n columns.push({\n accessorKey: child.props.accessor,\n id: child.props.accessor,\n cell: props => {\n if (typeof child.props.renderer === 'function') {\n return child.props.renderer(props.getValue(), props.row.original);\n }\n\n // If value is undefined then return null because cell is a react component, and undefined is not\n // a valid child value.\n return props.getValue() ?? null;\n },\n header: child.props.header,\n meta: {\n align: child.props.align,\n className: child.props.className,\n control: child.props.control,\n dataType: child.props.dataType,\n defaultWidth: child.props.defaultWidth,\n disableReordering: child.props.disableReordering,\n disableTruncation: child.props.disableTruncation,\n menu: child.props.menu,\n tooltip: child.props.tooltip,\n },\n enableHiding: !child.props.disableHiding,\n // filtering\n enableColumnFilter: !child.props.disableFiltering,\n filterFn: options.enableColumnFiltering && !child.props.disableFiltering ? ('tacoFilter' as any) : undefined,\n // sizing\n enableResizing: !child.props.disableResizing,\n minSize: child.props.minWidth ?? MIN_COLUMN_SIZE,\n size: child.props.defaultWidth,\n // sorting\n enableSorting: !child.props.disableSorting,\n sortingFn: getSortingFn(child.props.dataType),\n });\n }\n });\n\n if (options.enableRowExpansion) {\n columns.unshift(columnHelper.display(createRowExpansionColumn()));\n defaultColumnPinning.unshift(COLUMN_ID_FOR_EXPANSION);\n }\n\n if (options.enableRowSelection) {\n columns.unshift(\n columnHelper.display(\n createRowSelectionColumn(\n options.enableMultipleRowSelection,\n lastSelectedRowIndex,\n options.onRowDrag,\n tableRef\n )\n )\n );\n defaultColumnPinning.unshift(COLUMN_ID_FOR_SELECTION);\n }\n\n if (options.onRowDrag) {\n columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag)));\n defaultColumnPinning.unshift(COLUMN_ID_FOR_DRAGGABLE);\n }\n\n if (options.actionsForRow?.length) {\n columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow)));\n }\n\n return { columns, defaultColumnPinning, defaultColumnSizing, defaultColumnVisibility, defaultSorting, footers };\n }, [children]);\n}\n\nconst getSortingFn = (dataType?: ColumnDataType): SortingFnOption<any> => {\n if (dataType && dataType !== 'boolean') {\n return dataType;\n }\n\n return 'auto';\n};\n"],"names":["useColumnDefinitions","children","options","tableRef","lastSelectedRowIndex","React","useRef","columnHelper","createColumnHelper","useMemo","columns","defaultColumnPinning","defaultColumnSizing","defaultColumnVisibility","defaultSorting","footers","Children","toArray","forEach","child","isValidElement","props","defaultPinned","enableColumnPinning","push","accessor","defaultWidth","defaultHidden","enableColumnHiding","sort","undefined","id","desc","footer","accessorKey","cell","renderer","getValue","row","original","header","meta","align","className","control","dataType","disableReordering","disableTruncation","menu","tooltip","enableHiding","disableHiding","enableColumnFilter","disableFiltering","filterFn","enableColumnFiltering","enableResizing","disableResizing","minSize","minWidth","MIN_COLUMN_SIZE","size","enableSorting","disableSorting","sortingFn","getSortingFn","enableRowExpansion","unshift","display","createRowExpansionColumn","COLUMN_ID_FOR_EXPANSION","enableRowSelection","createRowSelectionColumn","enableMultipleRowSelection","onRowDrag","COLUMN_ID_FOR_SELECTION","createRowDraggableColumn","COLUMN_ID_FOR_DRAGGABLE","actionsForRow","length","createRowActionsColumn"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useColumnDefinitions.js","sources":["../../../../../../../../src/components/Table2/hooks/useColumnDefinitions.ts"],"sourcesContent":["import React from 'react';\nimport {\n createColumnHelper,\n ColumnSort,\n ColumnSizingState,\n Row,\n RowData,\n VisibilityState,\n SortingFnOption,\n} from '@tanstack/react-table';\nimport {\n CellAlignment,\n ColumnDataType,\n RowDragHandler,\n Table2ColumnControlRenderer,\n Table2ColumnFooterRenderer,\n Table2ColumnHeaderMenu,\n Table2ColumnProps,\n Table2RowActionProps,\n} from '../types';\nimport {\n COLUMN_ID_FOR_DRAGGABLE,\n COLUMN_ID_FOR_EXPANSION,\n COLUMN_ID_FOR_SELECTION,\n createRowActionsColumn,\n createRowDraggableColumn,\n createRowExpansionColumn,\n createRowSelectionColumn,\n MIN_COLUMN_SIZE,\n} from '../utilities/columns';\nimport { useLocalization } from '../../Provider/Localization';\n\ndeclare module '@tanstack/table-core' {\n interface ColumnMeta<TData extends RowData, TValue> {\n align?: CellAlignment;\n className?: string | ((row: Row<TData>) => string);\n control?: Table2ColumnControlRenderer;\n dataType?: ColumnDataType;\n disableReordering?: boolean;\n disableTruncation?: boolean;\n defaultWidth?: number;\n headerClassName?: string;\n menu?: Table2ColumnHeaderMenu;\n tooltip?: string;\n }\n}\n\ntype useColumnDefinitionsOptions<TType> = {\n actionsForRow: Table2RowActionProps<TType>[];\n enableColumnFiltering: boolean;\n enableColumnHiding: boolean;\n enableColumnPinning: boolean;\n enableRowExpansion: boolean;\n enableRowSelection: boolean;\n enableMultipleRowSelection: boolean;\n onRowDrag?: RowDragHandler<TType>;\n};\n\nexport function useColumnDefinitions<TType = any>(\n children: React.ReactElement<Table2ColumnProps<TType>>[],\n options: useColumnDefinitionsOptions<TType>,\n tableRef: React.RefObject<HTMLDivElement>\n) {\n const { texts } = useLocalization();\n const lastSelectedRowIndex = React.useRef<number>();\n const columnHelper = createColumnHelper<TType>();\n\n return React.useMemo(() => {\n // cannot be typed correctly until https://github.com/TanStack/table/discussions/4530 is resolved\n const columns: any[] = [];\n const defaultColumnPinning: string[] = [];\n const defaultColumnSizing: ColumnSizingState = {};\n const defaultColumnVisibility: VisibilityState = {};\n const defaultSorting: ColumnSort[] = [];\n const footers: Record<string, Table2ColumnFooterRenderer> = {};\n\n (React.Children.toArray(children) as React.ReactElement<Table2ColumnProps<TType>>[]).forEach(child => {\n if (React.isValidElement(child)) {\n if (child.props.defaultPinned && options.enableColumnPinning) {\n defaultColumnPinning.push(child.props.accessor);\n }\n\n if (child.props.defaultWidth) {\n defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;\n }\n\n if (child.props.defaultHidden && options.enableColumnHiding) {\n defaultColumnVisibility[child.props.accessor] = false;\n }\n\n if (child.props.sort !== undefined) {\n defaultSorting.push({\n id: child.props.accessor,\n desc: child.props.sort === 'desc',\n });\n }\n\n if (child.props.footer) {\n footers[child.props.accessor] = child.props.footer;\n }\n\n columns.push({\n accessorKey: child.props.accessor,\n id: child.props.accessor,\n cell: props => {\n if (typeof child.props.renderer === 'function') {\n return child.props.renderer(props.getValue(), props.row.original);\n }\n\n // If value is undefined then return null because cell is a react component, and undefined is not\n // a valid child value.\n return props.getValue() ?? null;\n },\n header: child.props.header,\n meta: {\n align: child.props.align,\n className: child.props.className,\n control: child.props.control,\n dataType: child.props.dataType,\n defaultWidth: child.props.defaultWidth,\n disableReordering: child.props.disableReordering,\n disableTruncation: child.props.disableTruncation,\n menu: child.props.menu,\n tooltip: child.props.tooltip,\n },\n enableHiding: !child.props.disableHiding,\n // filtering\n enableColumnFilter: !child.props.disableFiltering,\n filterFn: options.enableColumnFiltering && !child.props.disableFiltering ? ('tacoFilter' as any) : undefined,\n // sizing\n enableResizing: !child.props.disableResizing,\n minSize: child.props.minWidth ?? MIN_COLUMN_SIZE,\n size: child.props.defaultWidth,\n // sorting\n enableSorting: !child.props.disableSorting,\n sortingFn: getSortingFn(child.props.dataType),\n });\n }\n });\n\n if (options.enableRowExpansion) {\n columns.unshift(columnHelper.display(createRowExpansionColumn(texts)));\n defaultColumnPinning.unshift(COLUMN_ID_FOR_EXPANSION);\n }\n\n if (options.enableRowSelection) {\n columns.unshift(\n columnHelper.display(\n createRowSelectionColumn(\n options.enableMultipleRowSelection,\n lastSelectedRowIndex,\n options.onRowDrag,\n tableRef,\n texts\n )\n )\n );\n defaultColumnPinning.unshift(COLUMN_ID_FOR_SELECTION);\n }\n\n if (options.onRowDrag) {\n columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag, texts)));\n defaultColumnPinning.unshift(COLUMN_ID_FOR_DRAGGABLE);\n }\n\n if (options.actionsForRow?.length) {\n columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, texts)));\n }\n\n return { columns, defaultColumnPinning, defaultColumnSizing, defaultColumnVisibility, defaultSorting, footers };\n }, [children]);\n}\n\nconst getSortingFn = (dataType?: ColumnDataType): SortingFnOption<any> => {\n if (dataType && dataType !== 'boolean') {\n return dataType;\n }\n\n return 'auto';\n};\n"],"names":["useColumnDefinitions","children","options","tableRef","texts","useLocalization","lastSelectedRowIndex","React","useRef","columnHelper","createColumnHelper","useMemo","columns","defaultColumnPinning","defaultColumnSizing","defaultColumnVisibility","defaultSorting","footers","Children","toArray","forEach","child","isValidElement","props","defaultPinned","enableColumnPinning","push","accessor","defaultWidth","defaultHidden","enableColumnHiding","sort","undefined","id","desc","footer","accessorKey","cell","renderer","getValue","row","original","header","meta","align","className","control","dataType","disableReordering","disableTruncation","menu","tooltip","enableHiding","disableHiding","enableColumnFilter","disableFiltering","filterFn","enableColumnFiltering","enableResizing","disableResizing","minSize","minWidth","MIN_COLUMN_SIZE","size","enableSorting","disableSorting","sortingFn","getSortingFn","enableRowExpansion","unshift","display","createRowExpansionColumn","COLUMN_ID_FOR_EXPANSION","enableRowSelection","createRowSelectionColumn","enableMultipleRowSelection","onRowDrag","COLUMN_ID_FOR_SELECTION","createRowDraggableColumn","COLUMN_ID_FOR_DRAGGABLE","actionsForRow","length","createRowActionsColumn"],"mappings":"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"}
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import { COLUMN_ID_FOR_ACTIONS, isInternalColumn } from '../utilities/columns.js';
|
|
2
2
|
|
|
3
3
|
const useGridTemplate = table => {
|
|
4
|
-
var _table$options$meta$t, _table$options$meta, _table$options$meta$t2, _table$options$meta$t3, _table$options$meta2, _table$options$meta2$;
|
|
5
4
|
const allVisibleColumns = table.getVisibleLeafColumns();
|
|
6
|
-
let scrollbarWidth = ((_table$options$meta$t = (_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : (_table$options$meta$t2 = _table$options$meta.tableRef.current) === null || _table$options$meta$t2 === void 0 ? void 0 : _table$options$meta$t2.offsetWidth) !== null && _table$options$meta$t !== void 0 ? _table$options$meta$t : 0) - ((_table$options$meta$t3 = (_table$options$meta2 = table.options.meta) === null || _table$options$meta2 === void 0 ? void 0 : (_table$options$meta2$ = _table$options$meta2.tableRef.current) === null || _table$options$meta2$ === void 0 ? void 0 : _table$options$meta2$.clientWidth) !== null && _table$options$meta$t3 !== void 0 ? _table$options$meta$t3 : 0);
|
|
7
|
-
scrollbarWidth = scrollbarWidth < 0 ? 0 : scrollbarWidth;
|
|
8
5
|
return allVisibleColumns.reduce((accum, column, index) => {
|
|
9
6
|
let size;
|
|
10
7
|
const isLastColumn = index === allVisibleColumns.length - 1;
|
|
@@ -15,8 +12,7 @@ const useGridTemplate = table => {
|
|
|
15
12
|
size = `${column.getSize()}px`;
|
|
16
13
|
} else if (width) {
|
|
17
14
|
if (isLastColumn) {
|
|
18
|
-
|
|
19
|
-
size = `minmax(${width - scrollbarWidth}px, auto)`;
|
|
15
|
+
size = `minmax(${width}px, auto)`;
|
|
20
16
|
} else if (column.columnDef.minSize && width < column.columnDef.minSize) {
|
|
21
17
|
// react-table is supposed to handle minSize itself but it is really buggy
|
|
22
18
|
size = `${column.columnDef.minSize}px`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGridTemplate.js","sources":["../../../../../../../../src/components/Table2/hooks/useGridTemplate.ts"],"sourcesContent":["import { Table } from '@tanstack/react-table';\nimport { COLUMN_ID_FOR_ACTIONS, isInternalColumn } from '../utilities/columns';\n\nexport const useGridTemplate = (table: Table<any>) => {\n const allVisibleColumns = table.getVisibleLeafColumns();\n\n
|
|
1
|
+
{"version":3,"file":"useGridTemplate.js","sources":["../../../../../../../../src/components/Table2/hooks/useGridTemplate.ts"],"sourcesContent":["import { Table } from '@tanstack/react-table';\nimport { COLUMN_ID_FOR_ACTIONS, isInternalColumn } from '../utilities/columns';\n\nexport const useGridTemplate = (table: Table<any>) => {\n const allVisibleColumns = table.getVisibleLeafColumns();\n\n return allVisibleColumns.reduce((accum, column, index) => {\n let size;\n const isLastColumn = index === allVisibleColumns.length - 1;\n const width = table.getState().columnSizing[column.id];\n\n if (column.id === COLUMN_ID_FOR_ACTIONS) {\n size = `minmax(max-content, auto)`;\n } else if (isInternalColumn(column.id)) {\n size = `${column.getSize()}px`;\n } else if (width) {\n if (isLastColumn) {\n size = `minmax(${width}px, auto)`;\n } else if (column.columnDef.minSize && width < column.columnDef.minSize) {\n // react-table is supposed to handle minSize itself but it is really buggy\n size = `${column.columnDef.minSize}px`;\n } else {\n size = `${width}px`;\n }\n } else if (column.getCanResize()) {\n size = 'minmax(max-content, auto)';\n } else {\n size = 'max-content';\n }\n\n return `${accum} ${size}`;\n }, '');\n};\n"],"names":["useGridTemplate","table","allVisibleColumns","getVisibleLeafColumns","reduce","accum","column","index","size","isLastColumn","length","width","getState","columnSizing","id","COLUMN_ID_FOR_ACTIONS","isInternalColumn","getSize","columnDef","minSize","getCanResize"],"mappings":";;MAGaA,eAAe,GAAIC,KAAiB;EAC7C,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EAEvD,OAAOD,iBAAiB,CAACE,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;IACjD,IAAIC,IAAI;IACR,MAAMC,YAAY,GAAGF,KAAK,KAAKL,iBAAiB,CAACQ,MAAM,GAAG,CAAC;IAC3D,MAAMC,KAAK,GAAGV,KAAK,CAACW,QAAQ,EAAE,CAACC,YAAY,CAACP,MAAM,CAACQ,EAAE,CAAC;IAEtD,IAAIR,MAAM,CAACQ,EAAE,KAAKC,qBAAqB,EAAE;MACrCP,IAAI,8BAA8B;KACrC,MAAM,IAAIQ,gBAAgB,CAACV,MAAM,CAACQ,EAAE,CAAC,EAAE;MACpCN,IAAI,MAAMF,MAAM,CAACW,OAAO,MAAM;KACjC,MAAM,IAAIN,KAAK,EAAE;MACd,IAAIF,YAAY,EAAE;QACdD,IAAI,aAAaG,gBAAgB;OACpC,MAAM,IAAIL,MAAM,CAACY,SAAS,CAACC,OAAO,IAAIR,KAAK,GAAGL,MAAM,CAACY,SAAS,CAACC,OAAO,EAAE;;QAErEX,IAAI,MAAMF,MAAM,CAACY,SAAS,CAACC,WAAW;OACzC,MAAM;QACHX,IAAI,MAAMG,SAAS;;KAE1B,MAAM,IAAIL,MAAM,CAACc,YAAY,EAAE,EAAE;MAC9BZ,IAAI,GAAG,2BAA2B;KACrC,MAAM;MACHA,IAAI,GAAG,aAAa;;IAGxB,UAAUH,SAASG,MAAM;GAC5B,EAAE,EAAE,CAAC;AACV;;;;"}
|
|
@@ -10,6 +10,8 @@ var Table2FilterComparator;
|
|
|
10
10
|
Table2FilterComparator[Table2FilterComparator["IsOneOf"] = 7] = "IsOneOf";
|
|
11
11
|
Table2FilterComparator[Table2FilterComparator["IsNoneOf"] = 8] = "IsNoneOf";
|
|
12
12
|
Table2FilterComparator[Table2FilterComparator["IsAllOf"] = 9] = "IsAllOf";
|
|
13
|
+
Table2FilterComparator[Table2FilterComparator["IsEmpty"] = 10] = "IsEmpty";
|
|
14
|
+
Table2FilterComparator[Table2FilterComparator["IsNotEmpty"] = 11] = "IsNotEmpty";
|
|
13
15
|
})(Table2FilterComparator || (Table2FilterComparator = {}));
|
|
14
16
|
|
|
15
17
|
export { Table2FilterComparator };
|