@coveord/plasma-mantine 49.3.5 → 49.4.0
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/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +29 -29
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/table/Table.js +8 -10
- package/dist/cjs/components/table/Table.js.map +1 -1
- package/dist/cjs/components/table/Table.types.js +6 -0
- package/dist/cjs/components/table/Table.types.js.map +1 -0
- package/dist/cjs/components/table/TableActions.js +3 -3
- package/dist/cjs/components/table/TableActions.js.map +1 -1
- package/dist/cjs/components/table/TableContext.js +18 -3
- package/dist/cjs/components/table/TableContext.js.map +1 -1
- package/dist/cjs/components/table/TableDateRangePicker.js +2 -2
- package/dist/cjs/components/table/TableDateRangePicker.js.map +1 -1
- package/dist/cjs/components/table/TableFilter.js +2 -2
- package/dist/cjs/components/table/TableFilter.js.map +1 -1
- package/dist/cjs/components/table/TableHeader.js +2 -2
- package/dist/cjs/components/table/TableHeader.js.map +1 -1
- package/dist/cjs/components/table/TablePagination.js +2 -2
- package/dist/cjs/components/table/TablePagination.js.map +1 -1
- package/dist/cjs/components/table/TablePerPage.js +2 -2
- package/dist/cjs/components/table/TablePerPage.js.map +1 -1
- package/dist/cjs/components/table/TablePredicate.js +2 -2
- package/dist/cjs/components/table/TablePredicate.js.map +1 -1
- package/dist/cjs/components/table/index.js +7 -1
- package/dist/cjs/components/table/index.js.map +1 -1
- package/dist/cjs/components/table/useRowSelection.js +27 -17
- package/dist/cjs/components/table/useRowSelection.js.map +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/definitions/components/table/Table.d.ts +1 -98
- package/dist/definitions/components/table/Table.d.ts.map +1 -1
- package/dist/definitions/components/table/Table.types.d.ts +177 -0
- package/dist/definitions/components/table/Table.types.d.ts.map +1 -0
- package/dist/definitions/components/table/TableActions.d.ts.map +1 -1
- package/dist/definitions/components/table/TableContext.d.ts +4 -71
- package/dist/definitions/components/table/TableContext.d.ts.map +1 -1
- package/dist/definitions/components/table/TableFilter.d.ts.map +1 -1
- package/dist/definitions/components/table/TablePagination.d.ts.map +1 -1
- package/dist/definitions/components/table/TablePerPage.d.ts.map +1 -1
- package/dist/definitions/components/table/TablePredicate.d.ts.map +1 -1
- package/dist/definitions/components/table/index.d.ts +2 -2
- package/dist/definitions/components/table/index.d.ts.map +1 -1
- package/dist/definitions/components/table/useRowSelection.d.ts +4 -1
- package/dist/definitions/components/table/useRowSelection.d.ts.map +1 -1
- package/dist/definitions/index.d.ts +1 -1
- package/dist/definitions/index.d.ts.map +1 -1
- package/dist/esm/components/table/Table.js +9 -11
- package/dist/esm/components/table/Table.js.map +1 -1
- package/dist/esm/components/table/Table.types.js +3 -0
- package/dist/esm/components/table/Table.types.js.map +1 -0
- package/dist/esm/components/table/TableActions.js +2 -2
- package/dist/esm/components/table/TableActions.js.map +1 -1
- package/dist/esm/components/table/TableContext.js +8 -1
- package/dist/esm/components/table/TableContext.js.map +1 -1
- package/dist/esm/components/table/TableDateRangePicker.js +1 -1
- package/dist/esm/components/table/TableDateRangePicker.js.map +1 -1
- package/dist/esm/components/table/TableFilter.js +1 -1
- package/dist/esm/components/table/TableFilter.js.map +1 -1
- package/dist/esm/components/table/TableHeader.js +1 -1
- package/dist/esm/components/table/TableHeader.js.map +1 -1
- package/dist/esm/components/table/TablePagination.js +1 -1
- package/dist/esm/components/table/TablePagination.js.map +1 -1
- package/dist/esm/components/table/TablePerPage.js +1 -1
- package/dist/esm/components/table/TablePerPage.js.map +1 -1
- package/dist/esm/components/table/TablePredicate.js +2 -2
- package/dist/esm/components/table/TablePredicate.js.map +1 -1
- package/dist/esm/components/table/index.js +1 -1
- package/dist/esm/components/table/index.js.map +1 -1
- package/dist/esm/components/table/useRowSelection.js +26 -17
- package/dist/esm/components/table/useRowSelection.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/package.json +5 -4
- package/src/components/table/Table.tsx +16 -117
- package/src/components/table/Table.types.ts +203 -0
- package/src/components/table/TableActions.tsx +10 -3
- package/src/components/table/TableContext.tsx +9 -70
- package/src/components/table/TableDateRangePicker.tsx +1 -1
- package/src/components/table/TableFilter.tsx +2 -3
- package/src/components/table/TableHeader.tsx +1 -1
- package/src/components/table/TablePagination.tsx +3 -3
- package/src/components/table/TablePerPage.tsx +2 -3
- package/src/components/table/TablePredicate.tsx +3 -2
- package/src/components/table/__tests__/Table.spec.tsx +59 -22
- package/src/components/table/index.ts +2 -2
- package/src/components/table/useRowSelection.ts +36 -21
- package/src/index.ts +2 -0
- package/dist/cjs/components/table/useTable.js +0 -21
- package/dist/cjs/components/table/useTable.js.map +0 -1
- package/dist/definitions/components/table/useTable.d.ts +0 -16
- package/dist/definitions/components/table/useTable.d.ts.map +0 -1
- package/dist/esm/components/table/useTable.js +0 -11
- package/dist/esm/components/table/useTable.js.map +0 -1
- package/src/components/table/useTable.tsx +0 -11
|
@@ -91,7 +91,9 @@ var Table = function(param) {
|
|
|
91
91
|
onStateChange: setState
|
|
92
92
|
});
|
|
93
93
|
});
|
|
94
|
-
var _useRowSelection1 = (0, _useRowSelection.useRowSelection)(table
|
|
94
|
+
var _useRowSelection1 = (0, _useRowSelection.useRowSelection)(table, {
|
|
95
|
+
multiRowSelectionEnabled: multiRowSelectionEnabled
|
|
96
|
+
}), clearSelection = _useRowSelection1.clearSelection, getSelectedRow = _useRowSelection1.getSelectedRow, getSelectedRows = _useRowSelection1.getSelectedRows, outsideClickRef = _useRowSelection1.outsideClickRef;
|
|
95
97
|
var _form_values_predicates;
|
|
96
98
|
var isFiltered = !!state.globalFilter || Object.keys((_form_values_predicates = (_form_values = form.values) === null || _form_values === void 0 ? void 0 : _form_values.predicates) !== null && _form_values_predicates !== void 0 ? _form_values_predicates : {}).some(function(predicate) {
|
|
97
99
|
return !!form.values.predicates[predicate];
|
|
@@ -125,11 +127,6 @@ var Table = function(param) {
|
|
|
125
127
|
});
|
|
126
128
|
});
|
|
127
129
|
}, []);
|
|
128
|
-
var outsideClickRef = (0, _hooks.useClickOutside)(function() {
|
|
129
|
-
if (!multiRowSelectionEnabled) {
|
|
130
|
-
clearSelection();
|
|
131
|
-
}
|
|
132
|
-
});
|
|
133
130
|
if (!data) {
|
|
134
131
|
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Center, {
|
|
135
132
|
sx: {
|
|
@@ -141,6 +138,7 @@ var Table = function(param) {
|
|
|
141
138
|
var rows = table.getRowModel().rows.map(function(row) {
|
|
142
139
|
var _getExpandChildren;
|
|
143
140
|
var rowChildren = (_getExpandChildren = getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original)) !== null && _getExpandChildren !== void 0 ? _getExpandChildren : null;
|
|
141
|
+
var isSelected = !!row.getIsSelected();
|
|
144
142
|
return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
145
143
|
children: [
|
|
146
144
|
/*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
|
|
@@ -150,8 +148,8 @@ var Table = function(param) {
|
|
|
150
148
|
onDoubleClick: function() {
|
|
151
149
|
return doubleClickAction === null || doubleClickAction === void 0 ? void 0 : doubleClickAction(row.original);
|
|
152
150
|
},
|
|
153
|
-
className: cx(classes.row, _defineProperty({}, classes.rowSelected,
|
|
154
|
-
"aria-selected":
|
|
151
|
+
className: cx(classes.row, _defineProperty({}, classes.rowSelected, isSelected)),
|
|
152
|
+
"aria-selected": isSelected,
|
|
155
153
|
children: row.getVisibleCells().map(function(cell) {
|
|
156
154
|
var size = cell.column.getSize();
|
|
157
155
|
var width = size !== _reactTable.defaultColumnSizing.size ? size : undefined;
|
|
@@ -172,7 +170,7 @@ var Table = function(param) {
|
|
|
172
170
|
}),
|
|
173
171
|
rowChildren ? /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
|
|
174
172
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
|
|
175
|
-
colSpan:
|
|
173
|
+
colSpan: table.getAllColumns().length,
|
|
176
174
|
style: {
|
|
177
175
|
padding: 0,
|
|
178
176
|
borderTop: row.getIsExpanded() ? undefined : "none",
|
|
@@ -232,7 +230,7 @@ var Table = function(param) {
|
|
|
232
230
|
/*#__PURE__*/ (0, _jsxRuntime.jsx)("tbody", {
|
|
233
231
|
children: rows.length ? rows : /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
|
|
234
232
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
|
|
235
|
-
colSpan:
|
|
233
|
+
colSpan: table.getAllColumns().length,
|
|
236
234
|
children: noDataChildren
|
|
237
235
|
})
|
|
238
236
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport useStyles from './Table.styles';\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\nexport interface TableProps<T> {\n /**\n * Data to display in the table\n */\n data: T[];\n /**\n * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n */\n getRowId?: CoreOptions<T>['getRowId'];\n /**\n * Columns to display in the table.\n *\n * @see https://tanstack.com/table/v8/docs/guide/column-defs\n */\n columns: Array<ColumnDef<T>>;\n /**\n * Function called when the table mounts\n *\n * @param state the state of the table\n */\n onMount?: onTableChangeEvent;\n /**\n * Function called when the table should update\n *\n * @param state the state of the table\n */\n onChange?: onTableChangeEvent;\n /**\n * Function that generates the expandable content of a row\n * Return null for rows that don't need to be expandable\n *\n * @param datum the row for which the children should be generated.\n */\n getExpandChildren?: (datum: T) => ReactNode;\n /**\n * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n */\n noDataChildren?: ReactNode;\n /**\n * Whether the table is loading or not\n *\n * @default false\n */\n loading?: boolean;\n /**\n * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n *\n * @example\n * <Table ...>\n * <Table.Header>\n * <div>Hello</div>\n * </Table.Header>\n * </Table>\n */\n children?: ReactNode;\n\n /**\n * Initial state of the table\n */\n initialState?: InitialTableState & Partial<TableFormType>;\n /**\n * Action passed when user double clicks on a row\n */\n doubleClickAction?: (datum: T) => void;\n /**\n * Whether the user can select multiple rows in order to perform actions in bulk\n *\n * @default false\n */\n multiRowSelectionEnabled?: boolean;\n\n options?: Omit<\n Partial<TableOptions<T>>,\n | 'initialState'\n | 'data'\n | 'columns'\n | 'manualPagination'\n | 'enableMultiRowSelection'\n | 'getRowId'\n | 'getRowCanExpand'\n | 'enableRowSelection'\n >;\n}\n\ninterface TableType {\n <T>(props: TableProps<T>): ReactElement;\n Actions: typeof TableActions;\n Filter: typeof TableFilter;\n Footer: typeof TableFooter;\n Header: typeof TableHeader;\n Pagination: typeof TablePagination;\n PerPage: typeof TablePerPage;\n Predicate: typeof TablePredicate;\n DateRangePicker: typeof TableDateRangePicker;\n CollapsibleColumn: typeof TableCollapsibleColumn;\n AccordionColumn: typeof TableAccordionColumn;\n}\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n });\n const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n enableRowSelection: !loading,\n ...options,\n });\n const [state, setState] = useState<TableState>(table.initialState);\n table.setOptions((prev) => ({\n ...prev,\n state,\n onStateChange: setState,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n const isFiltered =\n !!state.globalFilter ||\n Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n !!form.values.dateRange?.[0] ||\n !!form.values.dateRange?.[1];\n\n const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n return () => {\n triggerChange.cancel();\n };\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.pagination, state.sorting, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', initialState.predicates ?? {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n const outsideClickRef = useClickOutside(() => {\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n });\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => row.toggleSelected()}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n aria-selected={row.getIsSelected()}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={columns.length + 1}\n style={{\n padding: 0,\n borderTop: row.getIsExpanded() ? undefined : 'none',\n borderBottom: row.getIsExpanded() ? undefined : 'none',\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n isFiltered,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n }}\n >\n {!rows.length && !isFiltered && !loading ? (\n noDataChildren\n ) : (\n <>\n {header}\n <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n <thead className={classes.header}>\n {table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ))}\n </thead>\n <tbody>\n {rows.length ? (\n rows\n ) : (\n <tr>\n <td colSpan={columns.length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\n </>\n )}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","multiRowSelectionEnabled","options","form","convertedChildren","Children","toArray","header","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","useForm","initialValues","useStyles","hasHeader","cx","classes","table","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","undefined","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","isFiltered","globalFilter","Object","keys","values","some","predicate","triggerChange","debounce","useEffect","cancel","useDidUpdate","sorting","clearFilters","useCallback","setFieldValue","prevState","outsideClickRef","useClickOutside","Center","sx","flexGrow","Loader","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","rowSelected","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","width","defaultColumnSizing","td","style","rowCollapsibleButtonCell","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","padding","borderTop","getIsExpanded","borderBottom","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","getPageCount","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {\n ColumnDef,\n defaultColumnSizing,\n flexRender,\n getCoreRowModel,\n Row,\n TableState as TanstackTableState,\n useReactTable,\n} from '@tanstack/react-table';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Dispatch, Fragment, ReactElement, useCallback, useEffect, useState} from 'react';\n\nimport useStyles from './Table.styles';\nimport {TableFormType, TableProps, TableState, TableType} from './Table.types';\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {TableContext} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\nexport const Table: TableType = <T,>({\n data,\n getRowId,\n noDataChildren,\n getExpandChildren,\n initialState = {},\n columns,\n onMount,\n onChange,\n children,\n loading = false,\n doubleClickAction,\n multiRowSelectionEnabled,\n options = {},\n}: TableProps<T>) => {\n const convertedChildren = Children.toArray(children) as ReactElement[];\n const header = convertedChildren.find((child) => child.type === TableHeader);\n const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n const form = useForm<TableFormType>({\n initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n });\n const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n const table = useReactTable({\n initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n data,\n columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n getCoreRowModel: getCoreRowModel(),\n manualPagination: options?.getPaginationRowModel === undefined,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n enableRowSelection: !loading,\n ...options,\n });\n const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);\n table.setOptions((prev) => ({\n ...prev,\n state: state as TanstackTableState,\n onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,\n }));\n const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {\n multiRowSelectionEnabled,\n });\n const isFiltered =\n !!state.globalFilter ||\n Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n !!form.values.dateRange?.[0] ||\n !!form.values.dateRange?.[1];\n\n const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n return () => {\n triggerChange.cancel();\n };\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.pagination, state.sorting, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('predicates', initialState.predicates ?? {});\n setState((prevState) => ({...prevState, globalFilter: ''}));\n }, []);\n\n if (!data) {\n return (\n <Center sx={{flexGrow: 1}}>\n <Loader />\n </Center>\n );\n }\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n const isSelected = !!row.getIsSelected();\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => row.toggleSelected()}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {[classes.rowSelected]: isSelected})}\n aria-selected={isSelected}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Skeleton>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={table.getAllColumns().length}\n style={{\n padding: 0,\n borderTop: row.getIsExpanded() ? undefined : 'none',\n borderBottom: row.getIsExpanded() ? undefined : 'none',\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return (\n <Box ref={outsideClickRef}>\n <TableContext.Provider\n value={{\n onChange: triggerChange,\n state,\n isFiltered,\n setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\n getPageCount: table.getPageCount,\n }}\n >\n {!rows.length && !isFiltered && !loading ? (\n noDataChildren\n ) : (\n <>\n {header}\n <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n <thead className={classes.header}>\n {table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ))}\n </thead>\n <tbody>\n {rows.length ? (\n rows\n ) : (\n <tr>\n <td colSpan={table.getAllColumns().length}>{noDataChildren}</td>\n </tr>\n )}\n </tbody>\n </MantineTable>\n {footer}\n </>\n )}\n </TableContext.Provider>\n </Box>\n );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","multiRowSelectionEnabled","options","form","convertedChildren","Children","toArray","header","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","useForm","initialValues","useStyles","hasHeader","cx","classes","table","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","getPaginationRowModel","undefined","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","outsideClickRef","isFiltered","globalFilter","Object","keys","values","some","predicate","triggerChange","debounce","useEffect","cancel","useDidUpdate","sorting","clearFilters","useCallback","setFieldValue","prevState","Center","sx","flexGrow","Loader","rows","getRowModel","map","rowChildren","isSelected","getIsSelected","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","rowSelected","aria-selected","getVisibleCells","cell","size","column","getSize","width","defaultColumnSizing","td","style","rowCollapsibleButtonCell","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","getAllColumns","length","padding","borderTop","getIsExpanded","borderBottom","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","getPageCount","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","AccordionColumn","TableAccordionColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Table.types.ts"],"names":[],"mappings":""}
|
|
@@ -10,17 +10,17 @@ Object.defineProperty(exports, "TableActions", {
|
|
|
10
10
|
});
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
12
|
var _core = require("@mantine/core");
|
|
13
|
-
var
|
|
13
|
+
var _tableContext = require("./TableContext");
|
|
14
14
|
var TableActions = function(param) {
|
|
15
15
|
var children = param.children;
|
|
16
|
-
var
|
|
16
|
+
var _useTable = (0, _tableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled;
|
|
17
17
|
var selectedRows = getSelectedRows();
|
|
18
18
|
if (selectedRows.length <= 0) {
|
|
19
19
|
return null;
|
|
20
20
|
}
|
|
21
21
|
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Group, {
|
|
22
22
|
spacing: "xs",
|
|
23
|
-
children:
|
|
23
|
+
children: multiRowSelectionEnabled ? children(selectedRows) : children(selectedRows[0])
|
|
24
24
|
});
|
|
25
25
|
};
|
|
26
26
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\nimport {useTable} from './
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TableActionsProps<T> {\n /**\n * Function that return components for the selected row or selected rows when multi row selection is enabled\n *\n * @param datum the data of the selected row(s)\n * @example\n * <Table.Actions<MyType>>\n * {(datum: MyType) => (\n * <Button\n * component={Link}\n * to={`edit/${datum.id}`}\n * leftIcon={<EditSize24Px />}\n * variant=\"subtle\"\n * color=\"navyBlue.8\"\n * >\n * Edit\n * </Button>\n * )}\n * </Table.Actions>\n */\n children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n const selectedRows = getSelectedRows();\n\n if (selectedRows.length <= 0) {\n return null;\n }\n\n return (\n <Group spacing=\"xs\">\n {multiRowSelectionEnabled\n ? (children as (data: T[]) => ReactNode)(selectedRows)\n : (children as (datum: T) => ReactNode)(selectedRows[0])}\n </Group>\n );\n};\n"],"names":["TableActions","children","useTable","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Group","spacing"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;oBA5BO;4BAGG;AAyBhB,IAAMA,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDC,YAAAA,IAAAA,sBAAQ,KAArDC,kBAA6CD,UAA7CC,iBAAiBC,2BAA4BF,UAA5BE;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBACI,qBAACC,WAAK;QAACC,SAAQ;kBACVJ,2BACK,AAACH,SAAsCI,gBACvC,AAACJ,SAAqCI,YAAY,CAAC,EAAE,CAAC;;AAGxE"}
|
|
@@ -2,13 +2,28 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
TableContext: function() {
|
|
8
13
|
return TableContext;
|
|
14
|
+
},
|
|
15
|
+
useTable: function() {
|
|
16
|
+
return useTable;
|
|
9
17
|
}
|
|
10
18
|
});
|
|
11
19
|
var _react = require("react");
|
|
12
20
|
var TableContext = /*#__PURE__*/ (0, _react.createContext)(null);
|
|
21
|
+
var useTable = function() {
|
|
22
|
+
var ctx = (0, _react.useContext)(TableContext);
|
|
23
|
+
if (ctx === null) {
|
|
24
|
+
throw new Error("useTable must be used inside of a TableContext.Provider");
|
|
25
|
+
}
|
|
26
|
+
return ctx;
|
|
27
|
+
};
|
|
13
28
|
|
|
14
29
|
//# sourceMappingURL=TableContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {createContext, useContext} from 'react';\n\nimport {TableContextType} from './Table.types';\n\nexport const TableContext = createContext<TableContextType<any> | null>(null);\n\nexport const useTable = <T,>(): TableContextType<T> => {\n const ctx = useContext(TableContext);\n if (ctx === null) {\n throw new Error('useTable must be used inside of a TableContext.Provider');\n }\n\n return ctx;\n};\n"],"names":["TableContext","useTable","createContext","ctx","useContext","Error"],"mappings":";;;;;;;;;;;IAIaA,YAAY;eAAZA;;IAEAC,QAAQ;eAARA;;;qBAN2B;AAIjC,IAAMD,6BAAeE,IAAAA,oBAAa,EAA+B,IAAI;AAErE,IAAMD,WAAW,WAA+B;IACnD,IAAME,MAAMC,IAAAA,iBAAU,EAACJ;IACvB,IAAIG,QAAQ,IAAI,EAAE;QACd,MAAM,IAAIE,MAAM,2DAA2D;IAC/E,CAAC;IAED,OAAOF;AACX"}
|
|
@@ -17,11 +17,11 @@ var _dayjs = /*#__PURE__*/ _interopRequireDefault(require("dayjs"));
|
|
|
17
17
|
var _react = require("react");
|
|
18
18
|
var _button = require("../button");
|
|
19
19
|
var _dateRangePicker = require("../date-range-picker");
|
|
20
|
-
var
|
|
20
|
+
var _tableContext = require("./TableContext");
|
|
21
21
|
var TableDateRangePicker = function(param) {
|
|
22
22
|
var _param_presets = param.presets, presets = _param_presets === void 0 ? {} : _param_presets, rangeCalendarProps = param.rangeCalendarProps;
|
|
23
23
|
var _useState = _slicedToArray((0, _react.useState)(false), 2), opened = _useState[0], setOpened = _useState[1];
|
|
24
|
-
var form = (0,
|
|
24
|
+
var form = (0, _tableContext.useTable)().form;
|
|
25
25
|
var onApply = function(dates) {
|
|
26
26
|
form.setFieldValue("dateRange", dates);
|
|
27
27
|
setOpened(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover} from '@mantine/core';\nimport {DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';\nimport {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';\nimport {useTable} from './
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover} from '@mantine/core';\nimport {DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\n\nimport {Button} from '../button';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';\nimport {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';\nimport {useTable} from './TableContext';\n\ninterface TableDateRangePickerProps\n extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n /**\n * An object containing date presets.\n * If empty the preset dropdown won't be shown\n *\n * @example\n * {\n * january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n * february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n * }\n * @default {}\n */\n presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n presets = {},\n rangeCalendarProps,\n}) => {\n const [opened, setOpened] = useState(false);\n const {form} = useTable();\n\n const onApply = (dates: DateRangePickerValue) => {\n form.setFieldValue('dateRange', dates);\n setOpened(false);\n };\n const onCancel = () => {\n setOpened(false);\n };\n\n const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n return (\n <>\n {formatedRange}\n <Popover opened={opened} onChange={setOpened}>\n <Popover.Target>\n <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n <CalendarSize24Px width={24} height={24} />\n </Button>\n </Popover.Target>\n <Popover.Dropdown p={0}>\n <DateRangePickerInlineCalendar\n initialRange={form.values.dateRange}\n onApply={onApply}\n onCancel={onCancel}\n presets={presets}\n rangeCalendarProps={rangeCalendarProps}\n />\n </Popover.Dropdown>\n </Popover>\n </>\n );\n};\n"],"names":["TableDateRangePicker","presets","rangeCalendarProps","useState","opened","setOpened","form","useTable","onApply","dates","setFieldValue","onCancel","formatDate","date","dayjs","format","formatedRange","values","dateRange","Popover","onChange","Target","Button","variant","color","onClick","px","CalendarSize24Px","width","height","Dropdown","p","DateRangePickerInlineCalendar","initialRange"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;gCA3BkB;oBACT;0DAEJ;qBACwB;sBAErB;+BAC2D;4BAEzD;AAkBhB,IAAMA,uBAAqE,gBAG5E;+BAFFC,SAAAA,sCAAU,CAAC,oBACXC,2BAAAA;IAEA,IAA4BC,2BAAAA,IAAAA,eAAQ,EAAC,KAAK,OAAnCC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAM,AAACG,OAAQC,IAAAA,sBAAQ,IAAhBD;IAEP,IAAME,UAAU,SAACC,OAAgC;QAC7CH,KAAKI,aAAa,CAAC,aAAaD;QAChCJ,UAAU,KAAK;IACnB;IACA,IAAMM,WAAW,WAAM;QACnBN,UAAU,KAAK;IACnB;IAEA,IAAMO,aAAa,SAACC;eAAeC,IAAAA,cAAK,EAACD,MAAME,MAAM,CAAC;;IACtD,IAAMC,gBAAgB,AAAC,GAA4CJ,OAA1CA,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE,GAAE,OAA0C,OAArCN,WAAWN,KAAKW,MAAM,CAACC,SAAS,CAAC,EAAE;IAEtG,qBACI;;YACKF;0BACD,sBAACG,aAAO;gBAACf,QAAQA;gBAAQgB,UAAUf;;kCAC/B,qBAACc,aAAO,CAACE,MAAM;kCACX,cAAA,qBAACC,cAAM;4BAACC,SAAQ;4BAAUC,OAAM;4BAAOC,SAAS;uCAAMpB,UAAU,IAAI;;4BAAGqB,IAAG;sCACtE,cAAA,qBAACC,kCAAgB;gCAACC,OAAO;gCAAIC,QAAQ;;;;kCAG7C,qBAACV,aAAO,CAACW,QAAQ;wBAACC,GAAG;kCACjB,cAAA,qBAACC,8CAA6B;4BAC1BC,cAAc3B,KAAKW,MAAM,CAACC,SAAS;4BACnCV,SAASA;4BACTG,UAAUA;4BACVV,SAASA;4BACTC,oBAAoBA;;;;;;;AAM5C"}
|
|
@@ -14,7 +14,7 @@ var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_propert
|
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
15
|
var _plasmaReactIcons = require("@coveord/plasma-react-icons");
|
|
16
16
|
var _core = require("@mantine/core");
|
|
17
|
-
var
|
|
17
|
+
var _tableContext = require("./TableContext");
|
|
18
18
|
var useStyles = (0, _core.createStyles)(function(theme) {
|
|
19
19
|
return {
|
|
20
20
|
wrapper: {
|
|
@@ -38,7 +38,7 @@ var TableFilter = function(_param) {
|
|
|
38
38
|
styles: styles,
|
|
39
39
|
unstyled: unstyled
|
|
40
40
|
}).classes;
|
|
41
|
-
var
|
|
41
|
+
var _useTable = (0, _tableContext.useTable)(), state = _useTable.state, setState = _useTable.setState;
|
|
42
42
|
var changeFilterValue = function(value) {
|
|
43
43
|
setState(function(prevState) {
|
|
44
44
|
return _objectSpreadProps(_objectSpread({}, prevState), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\n\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n wrapper: {\n marginBottom: '0 !important',\n },\n empty: {\n color: theme.colors.gray[4],\n },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n /**\n * The placeholder for the filter input\n *\n * @default \"Search by any field\"\n */\n placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n placeholder = 'Search by any field',\n classNames,\n styles,\n unstyled,\n ...others\n}) => {\n const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const {state, setState} = useTable();\n\n const changeFilterValue = (value: string) => {\n setState((prevState) => ({\n ...prevState,\n pagination: prevState.pagination\n ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n : prevState.pagination,\n globalFilter: value,\n }));\n };\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const {value} = event.currentTarget;\n changeFilterValue(value);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n changeFilterValue('');\n };\n\n return (\n <TextInput\n className={classes.wrapper}\n placeholder={placeholder}\n mb=\"md\"\n rightSection={\n state.globalFilter ? (\n <ActionIcon onClick={handleClear}>\n <CrossSize16Px height={16} />\n </ActionIcon>\n ) : (\n <SearchSize16Px height={14} className={classes.empty} />\n )\n }\n value={state.globalFilter}\n onChange={handleChange}\n {...others}\n />\n );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","classes","name","useTable","state","setState","changeFilterValue","value","prevState","pagination","pageIndex","pageSize","globalFilter","handleChange","event","currentTarget","handleClear","TextInput","className","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","onChange"],"mappings":";;;;+BAyBaA;;;eAAAA;;;;;;;gCAzB+B;oBAC+B;4BAGpD;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWd,UAAU,IAAI,EAAE;QAACe,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BE,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IAEd,IAAMC,oBAAoB,SAACC,OAAkB;QACzCF,SAAS,SAACG;mBAAe,qCAClBA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcL;;;IAEtB;IAEA,IAAMM,eAAqD,SAACC,OAAU;QAClE,IAAM,AAACP,QAASO,MAAMC,aAAa,CAA5BR;QACPD,kBAAkBC;IACtB;IAEA,IAAMS,cAAoD,WAAM;QAC5DV,kBAAkB;IACtB;IAEA,qBACI,qBAACW,eAAS;QACNC,WAAWjB,QAAQX,OAAO;QAC1BM,aAAaA;QACbuB,IAAG;QACHC,cACIhB,MAAMQ,YAAY,iBACd,qBAACS,gBAAU;YAACC,SAASN;sBACjB,cAAA,qBAACO,+BAAa;gBAACC,QAAQ;;2BAG3B,qBAACC,gCAAc;YAACD,QAAQ;YAAIN,WAAWjB,QAAQT,KAAK;UACvD;QAELe,OAAOH,MAAMQ,YAAY;QACzBc,UAAUb;OACNb;AAGhB"}
|
|
@@ -15,7 +15,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
15
15
|
var _plasmaReactIcons = require("@coveord/plasma-react-icons");
|
|
16
16
|
var _core = require("@mantine/core");
|
|
17
17
|
var _button = require("../button");
|
|
18
|
-
var
|
|
18
|
+
var _tableContext = require("./TableContext");
|
|
19
19
|
var useStyles = (0, _core.createStyles)(function(theme) {
|
|
20
20
|
return {
|
|
21
21
|
root: {
|
|
@@ -34,7 +34,7 @@ var TableHeader = function(_param) {
|
|
|
34
34
|
"unstyled",
|
|
35
35
|
"children"
|
|
36
36
|
]);
|
|
37
|
-
var
|
|
37
|
+
var _useTable = (0, _tableContext.useTable)(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, clearSelection = _useTable.clearSelection;
|
|
38
38
|
var classes = useStyles(null, {
|
|
39
39
|
name: "TableHeader",
|
|
40
40
|
classNames: classNames,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport {useTable} from './
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {Button} from '../button';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n position: 'sticky',\n top: 0,\n zIndex: 13, // skeleton is 11\n backgroundColor: theme.colors.gray[1],\n borderBottom: `1px solid ${theme.colors.gray[3]}`,\n },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n /* Children of header (ie: actions, datepicker, etc.) */\n children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n classNames,\n styles,\n unstyled,\n children,\n ...others\n}) => {\n const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();\n const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const selectedRows = getSelectedRows();\n return multiRowSelectionEnabled ? (\n <Group position=\"apart\" className={classes.root}>\n {selectedRows.length > 0 ? (\n <Tooltip label=\"Unselect all\">\n <Button onClick={clearSelection} ml=\"lg\" variant=\"subtle\" leftIcon={<CrossSize16Px height={16} />}>\n {selectedRows.length} selected\n </Button>\n </Tooltip>\n ) : (\n <Space />\n )}\n <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" {...others}>\n {children}\n </Group>\n </Group>\n ) : (\n <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" className={classes.root} {...others}>\n {children}\n </Group>\n );\n};\n"],"names":["TableHeader","useStyles","createStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","classNames","styles","unstyled","children","others","useTable","getSelectedRows","multiRowSelectionEnabled","clearSelection","classes","name","selectedRows","Group","className","length","Tooltip","label","Button","onClick","ml","variant","leftIcon","CrossSize16Px","height","Space","spacing","px","py"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;gCAtBe;oBAC+C;sBAGtD;4BACE;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,MAAM;YACFC,UAAU;YACVC,KAAK;YACLC,QAAQ;YACRC,iBAAiBL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;YACrCC,cAAc,AAAC,aAAiC,OAArBR,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;QACnD;IACJ;;AAOO,IAAMV,cAAmD,iBAM1D;QALFY,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAoEE,YAAAA,IAAAA,sBAAQ,KAArEC,kBAA6DD,UAA7DC,iBAAiBC,2BAA4CF,UAA5CE,0BAA0BC,iBAAkBH,UAAlBG;IAClD,IAAM,AAACC,UAAWpB,UAAU,IAAI,EAAE;QAACqB,MAAM;QAAeV,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EO;IACP,IAAME,eAAeL;IACrB,OAAOC,yCACH,sBAACK,WAAK;QAACnB,UAAS;QAAQoB,WAAWJ,QAAQjB,IAAI;;YAC1CmB,aAAaG,MAAM,GAAG,kBACnB,qBAACC,aAAO;gBAACC,OAAM;0BACX,cAAA,sBAACC,cAAM;oBAACC,SAASV;oBAAgBW,IAAG;oBAAKC,SAAQ;oBAASC,wBAAU,qBAACC,+BAAa;wBAACC,QAAQ;;;wBACtFZ,aAAaG,MAAM;wBAAC;;;+BAI7B,qBAACU,WAAK,KACT;0BACD,qBAACZ,WAAK;gBAACnB,UAAS;gBAAQgC,SAAQ;gBAAKC,IAAG;gBAAKC,IAAG;eAASvB;0BACpDD;;;uBAIT,qBAACS,WAAK;QAACnB,UAAS;QAAQgC,SAAQ;QAAKC,IAAG;QAAKC,IAAG;QAAKd,WAAWJ,QAAQjB,IAAI;OAAMY;kBAC7ED;OAER;AACL"}
|
|
@@ -12,10 +12,10 @@ var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
|
|
|
12
12
|
var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
|
|
13
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
14
|
var _core = require("@mantine/core");
|
|
15
|
-
var
|
|
15
|
+
var _tableContext = require("./TableContext");
|
|
16
16
|
var TablePagination = function(param) {
|
|
17
17
|
var totalPages = param.totalPages;
|
|
18
|
-
var
|
|
18
|
+
var _useTable = (0, _tableContext.useTable)(), state = _useTable.state, setState = _useTable.setState, containerRef = _useTable.containerRef, getPageCount = _useTable.getPageCount;
|
|
19
19
|
var updatePage = function(newPage) {
|
|
20
20
|
setState(function(prevState) {
|
|
21
21
|
return _objectSpreadProps(_objectSpread({}, prevState), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import {Pagination} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TablePaginationProps {\n /**\n * The total number of page. Use null only if your table is paginated client side\n */\n totalPages: number | null;\n}\n\nexport const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {\n const {state, setState, containerRef, getPageCount} = useTable();\n const updatePage = (newPage: number) => {\n setState((prevState) => ({\n ...prevState,\n pagination: {...prevState.pagination, pageIndex: newPage - 1},\n }));\n containerRef.current.scrollIntoView({behavior: 'smooth'});\n };\n\n const total = totalPages === null ? getPageCount() : totalPages;\n\n return (\n <Pagination\n page={state.pagination.pageIndex + 1}\n onChange={updatePage}\n total={total}\n boundaries={0}\n size=\"md\"\n getItemAriaLabel={(label) => {\n switch (label) {\n case 'prev':\n return 'previous page';\n case 'next':\n return 'next page';\n default:\n return `${label}`;\n }\n }}\n />\n );\n};\n"],"names":["TablePagination","totalPages","useTable","state","setState","containerRef","getPageCount","updatePage","newPage","prevState","pagination","pageIndex","current","scrollIntoView","behavior","total","Pagination","page","onChange","boundaries","size","getItemAriaLabel","label"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;oBAZY;4BAGF;AAShB,IAAMA,kBAA2D,gBAAkB;QAAhBC,mBAAAA;IACtE,IAAsDC,YAAAA,IAAAA,sBAAQ,KAAvDC,QAA+CD,UAA/CC,OAAOC,WAAwCF,UAAxCE,UAAUC,eAA8BH,UAA9BG,cAAcC,eAAgBJ,UAAhBI;IACtC,IAAMC,aAAa,SAACC,SAAoB;QACpCJ,SAAS,SAACK;mBAAe,qCAClBA;gBACHC,YAAY,qCAAID,UAAUC,UAAU;oBAAEC,WAAWH,UAAU;;;;QAE/DH,aAAaO,OAAO,CAACC,cAAc,CAAC;YAACC,UAAU;QAAQ;IAC3D;IAEA,IAAMC,QAAQd,eAAe,IAAI,GAAGK,iBAAiBL,UAAU;IAE/D,qBACI,qBAACe,gBAAU;QACPC,MAAMd,MAAMO,UAAU,CAACC,SAAS,GAAG;QACnCO,UAAUX;QACVQ,OAAOA;QACPI,YAAY;QACZC,MAAK;QACLC,kBAAkB,SAACC,OAAU;YACzB,OAAQA;gBACJ,KAAK;oBACD,OAAO;gBACX,KAAK;oBACD,OAAO;gBACX;oBACI,OAAO,AAAC,GAAQ,OAANA;YAClB;QACJ;;AAGZ"}
|
|
@@ -12,14 +12,14 @@ var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
|
|
|
12
12
|
var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
|
|
13
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
14
|
var _core = require("@mantine/core");
|
|
15
|
-
var
|
|
15
|
+
var _tableContext = require("./TableContext");
|
|
16
16
|
var TablePerPage = function(param) {
|
|
17
17
|
var _param_label = param.label, label = _param_label === void 0 ? "Results per page" : _param_label, _param_values = param.values, values = _param_values === void 0 ? [
|
|
18
18
|
25,
|
|
19
19
|
50,
|
|
20
20
|
100
|
|
21
21
|
] : _param_values;
|
|
22
|
-
var
|
|
22
|
+
var _useTable = (0, _tableContext.useTable)(), state = _useTable.state, setState = _useTable.setState;
|
|
23
23
|
var updatePerPage = function(newPerPage) {
|
|
24
24
|
setState(function(prevState) {
|
|
25
25
|
return _objectSpreadProps(_objectSpread({}, prevState), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TablePerPageProps {\n /**\n * The label displayed before the control\n *\n * @default Results per page\n */\n label?: string;\n /**\n * The per page choices to display\n *\n * @default [25, 50, 100]\n */\n values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n label = 'Results per page',\n values = [25, 50, 100],\n}) => {\n const {state, setState} = useTable();\n\n const updatePerPage = (newPerPage: string) => {\n setState((prevState) => ({\n ...prevState,\n pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n }));\n };\n\n return (\n <Group>\n <Text>{label}</Text>\n <SegmentedControl\n value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n onChange={updatePerPage}\n data={values.map((value) => value.toString())}\n color=\"action\"\n size=\"md\"\n />\n </Group>\n );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["TablePerPage","label","values","useTable","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","Group","Text","SegmentedControl","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;oBApB+B;4BAGrB;AAiBhB,IAAMA,eAA8E,gBAGrF;6BAFFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;IAEtB,IAA0BC,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IAEd,IAAMC,gBAAgB,SAACC,YAAuB;QAC1CF,SAAS,SAACG;mBAAe,qCAClBA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASL,YAAY;gBAAG;;;IAErE;QAMmBH;IAJnB,qBACI,sBAACS,WAAK;;0BACF,qBAACC,UAAI;0BAAEb;;0BACP,qBAACc,sBAAgB;gBACbC,OAAOZ,CAAAA,sCAAAA,MAAMK,UAAU,CAACE,QAAQ,CAACM,QAAQ,gBAAlCb,iDAAAA,sCAAwCF,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,CAACe,QAAQ,EAAE;gBACrEC,UAAUZ;gBACVa,MAAMjB,OAAOkB,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB;AAEAtB,aAAauB,YAAY,GAAG"}
|
|
@@ -13,10 +13,10 @@ var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
|
|
|
13
13
|
var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
15
|
var _core = require("@mantine/core");
|
|
16
|
-
var
|
|
16
|
+
var _tableContext = require("./TableContext");
|
|
17
17
|
var TablePredicate = function(param) {
|
|
18
18
|
var id = param.id, data = param.data, label = param.label;
|
|
19
|
-
var
|
|
19
|
+
var _useTable = (0, _tableContext.useTable)(), onChange = _useTable.onChange, form = _useTable.form;
|
|
20
20
|
var onUpdate = function(newValue) {
|
|
21
21
|
form.setFieldValue("predicates", _objectSpreadProps(_objectSpread({}, form.values.predicates), _defineProperty({}, id, newValue)));
|
|
22
22
|
onChange === null || onChange === void 0 ? void 0 : onChange();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {Select, SelectItem,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TablePredicate.tsx"],"sourcesContent":["import {Group, Select, SelectItem, Text} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TablePredicateProps {\n /**\n * Unique identifier for this predicate. Will be used to access the selected value in the table state\n */\n id: string;\n /**\n * The values to display in the predicate\n */\n data: SelectItem[];\n /**\n * Input label (not displayed for now)\n *\n * @default default to the predicate id\n */\n label?: string;\n}\n\nexport const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data, label}) => {\n const {onChange, form} = useTable();\n\n const onUpdate = (newValue: string) => {\n form.setFieldValue('predicates', {...form.values.predicates, [id]: newValue});\n onChange?.();\n };\n\n return (\n <Group spacing=\"xs\">\n {label ? <Text>{label}:</Text> : null}\n <Select\n withinPortal\n value={form.values.predicates[id]}\n onChange={onUpdate}\n data={data}\n aria-label={label ?? id}\n searchable={data.length > 7}\n />\n </Group>\n );\n};\n"],"names":["TablePredicate","id","data","label","useTable","onChange","form","onUpdate","newValue","setFieldValue","values","predicates","Group","spacing","Text","Select","withinPortal","value","aria-label","searchable","length"],"mappings":";;;;+BAsBaA;;;eAAAA;;;;;;;oBAtBiC;4BAGvB;AAmBhB,IAAMA,iBAAyD,gBAAuB;QAArBC,WAAAA,IAAIC,aAAAA,MAAMC,cAAAA;IAC9E,IAAyBC,YAAAA,IAAAA,sBAAQ,KAA1BC,WAAkBD,UAAlBC,UAAUC,OAAQF,UAARE;IAEjB,IAAMC,WAAW,SAACC,UAAqB;QACnCF,KAAKG,aAAa,CAAC,cAAc,qCAAIH,KAAKI,MAAM,CAACC,UAAU,GAAE,oBAACV,IAAKO;QACnEH,qBAAAA,sBAAAA,KAAAA,IAAAA;IACJ;IAEA,qBACI,sBAACO,WAAK;QAACC,SAAQ;;YACVV,sBAAQ,sBAACW,UAAI;;oBAAEX;oBAAM;;iBAAW,IAAI;0BACrC,qBAACY,YAAM;gBACHC,YAAY;gBACZC,OAAOX,KAAKI,MAAM,CAACC,UAAU,CAACV,GAAG;gBACjCI,UAAUE;gBACVL,MAAMA;gBACNgB,cAAYf,kBAAAA,mBAAAA,QAASF,EAAE;gBACvBkB,YAAYjB,KAAKkB,MAAM,GAAG;;;;AAI1C"}
|
|
@@ -2,8 +2,14 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
+
Object.defineProperty(exports, "useTable", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return _tableContext.useTable;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
5
11
|
var _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
|
6
12
|
_exportStar(require("./Table"), exports);
|
|
7
|
-
|
|
13
|
+
var _tableContext = require("./TableContext");
|
|
8
14
|
|
|
9
15
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export * from './Table';\nexport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/index.ts"],"sourcesContent":["export * from './Table';\nexport {useTable} from './TableContext';\nexport {type onTableChangeEvent, type InitialTableState, type TableState, type TableProps} from './Table.types';\n"],"names":["useTable"],"mappings":";;;;+BACQA;;;eAAAA,sBAAQ;;;;oBADF;4BACS"}
|
|
@@ -8,31 +8,40 @@ Object.defineProperty(exports, "useRowSelection", {
|
|
|
8
8
|
return useRowSelection;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
|
+
var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
|
|
11
12
|
var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
|
|
12
13
|
var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
|
|
13
|
-
var
|
|
14
|
+
var _hooks = require("@mantine/hooks");
|
|
14
15
|
var _tableCore = require("@tanstack/table-core");
|
|
15
|
-
var
|
|
16
|
-
var useRowSelection = function(table) {
|
|
17
|
-
var
|
|
16
|
+
var _fastDeepEqual = /*#__PURE__*/ _interopRequireDefault(require("fast-deep-equal"));
|
|
17
|
+
var useRowSelection = function(table, param) {
|
|
18
|
+
var multiRowSelectionEnabled = param.multiRowSelectionEnabled;
|
|
19
|
+
var outsideClickRef = (0, _hooks.useClickOutside)(function() {
|
|
20
|
+
if (!multiRowSelectionEnabled) {
|
|
21
|
+
clearSelection();
|
|
22
|
+
}
|
|
23
|
+
});
|
|
18
24
|
table.setOptions(function(prev) {
|
|
19
25
|
return _objectSpreadProps(_objectSpread({}, prev), {
|
|
20
26
|
onRowSelectionChange: function(rowSelectionUpdater) {
|
|
21
27
|
table.setState(function(old) {
|
|
22
|
-
var
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
var newRowSelection = (0, _tableCore.functionalUpdate)(rowSelectionUpdater, old["rowSelection"]);
|
|
29
|
+
if ((0, _fastDeepEqual.default)(old["rowSelection"], newRowSelection)) {
|
|
30
|
+
return old;
|
|
31
|
+
}
|
|
32
|
+
var rows = table.getRowModel().rowsById;
|
|
33
|
+
Object.keys(newRowSelection).forEach(function(rowId) {
|
|
34
|
+
if (newRowSelection[rowId] === true) {
|
|
35
|
+
var _rows_rowId;
|
|
36
|
+
if (!rows[rowId]) {
|
|
37
|
+
console.error("The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.");
|
|
30
38
|
}
|
|
31
|
-
|
|
32
|
-
|
|
39
|
+
var _rows_rowId_original;
|
|
40
|
+
newRowSelection[rowId] = (_rows_rowId_original = (_rows_rowId = rows[rowId]) === null || _rows_rowId === void 0 ? void 0 : _rows_rowId.original) !== null && _rows_rowId_original !== void 0 ? _rows_rowId_original : true;
|
|
41
|
+
}
|
|
33
42
|
});
|
|
34
43
|
return _objectSpreadProps(_objectSpread({}, old), {
|
|
35
|
-
rowSelection:
|
|
44
|
+
rowSelection: newRowSelection
|
|
36
45
|
});
|
|
37
46
|
});
|
|
38
47
|
}
|
|
@@ -42,7 +51,7 @@ var useRowSelection = function(table) {
|
|
|
42
51
|
table.resetRowSelection(true);
|
|
43
52
|
};
|
|
44
53
|
var getSelectedRows = function() {
|
|
45
|
-
return Object.values(rowSelection);
|
|
54
|
+
return Object.values(table.getState().rowSelection);
|
|
46
55
|
};
|
|
47
56
|
var _getSelectedRows_;
|
|
48
57
|
var getSelectedRow = function() {
|
|
@@ -51,7 +60,8 @@ var useRowSelection = function(table) {
|
|
|
51
60
|
return {
|
|
52
61
|
clearSelection: clearSelection,
|
|
53
62
|
getSelectedRow: getSelectedRow,
|
|
54
|
-
getSelectedRows: getSelectedRows
|
|
63
|
+
getSelectedRows: getSelectedRows,
|
|
64
|
+
outsideClickRef: outsideClickRef
|
|
55
65
|
};
|
|
56
66
|
};
|
|
57
67
|
|