@coveord/plasma-mantine 48.23.1 → 48.24.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 +8 -8
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/table/Table.js +8 -7
- package/dist/cjs/components/table/Table.js.map +1 -1
- package/dist/cjs/components/table/TableActions.js +3 -1
- package/dist/cjs/components/table/TableActions.js.map +1 -1
- package/dist/cjs/components/table/TableCollapsibleColumn.js +3 -2
- package/dist/cjs/components/table/TableCollapsibleColumn.js.map +1 -1
- package/dist/cjs/components/table/Th.js +2 -0
- package/dist/cjs/components/table/Th.js.map +1 -1
- package/dist/definitions/components/table/Table.d.ts.map +1 -1
- package/dist/definitions/components/table/TableActions.d.ts.map +1 -1
- package/dist/definitions/components/table/TableCollapsibleColumn.d.ts.map +1 -1
- package/dist/definitions/components/table/Th.d.ts.map +1 -1
- package/dist/esm/components/table/Table.js +8 -7
- package/dist/esm/components/table/Table.js.map +1 -1
- package/dist/esm/components/table/TableActions.js +4 -2
- package/dist/esm/components/table/TableActions.js.map +1 -1
- package/dist/esm/components/table/TableCollapsibleColumn.js +4 -3
- package/dist/esm/components/table/TableCollapsibleColumn.js.map +1 -1
- package/dist/esm/components/table/Th.js +2 -0
- package/dist/esm/components/table/Th.js.map +1 -1
- package/package.json +3 -3
- package/src/components/table/Table.tsx +9 -6
- package/src/components/table/TableActions.tsx +2 -1
- package/src/components/table/TableCollapsibleColumn.tsx +4 -3
- package/src/components/table/Th.tsx +3 -1
|
@@ -42,6 +42,9 @@ var useStyles = (0, _core.createStyles)(function(theme, param) {
|
|
|
42
42
|
width: "100%",
|
|
43
43
|
"& td:first-of-type, th:first-of-type > *": {
|
|
44
44
|
paddingLeft: theme.spacing.xl
|
|
45
|
+
},
|
|
46
|
+
"& tbody td": {
|
|
47
|
+
verticalAlign: "top"
|
|
45
48
|
}
|
|
46
49
|
},
|
|
47
50
|
header: {
|
|
@@ -62,11 +65,9 @@ var useStyles = (0, _core.createStyles)(function(theme, param) {
|
|
|
62
65
|
rowSelected: {
|
|
63
66
|
backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor
|
|
64
67
|
},
|
|
65
|
-
rowSelectionCheckboxCell: {
|
|
66
|
-
verticalAlign: "middle"
|
|
67
|
-
},
|
|
68
68
|
rowCollapsibleButtonCell: {
|
|
69
|
-
textAlign: "right"
|
|
69
|
+
textAlign: "right",
|
|
70
|
+
padding: "".concat(theme.spacing.xs / 2, "px ").concat(theme.spacing.sm, "px !important")
|
|
70
71
|
},
|
|
71
72
|
row: {
|
|
72
73
|
"&:hover": {
|
|
@@ -184,12 +185,11 @@ var Table = function(param) {
|
|
|
184
185
|
children: row.getVisibleCells().map(function(cell) {
|
|
185
186
|
var size = cell.column.getSize();
|
|
186
187
|
var width = size !== _reactTable.defaultColumnSizing.size ? size : undefined;
|
|
187
|
-
var _obj;
|
|
188
188
|
return /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
|
|
189
189
|
style: {
|
|
190
190
|
width: width
|
|
191
191
|
},
|
|
192
|
-
className: cx((
|
|
192
|
+
className: cx(_defineProperty({}, classes.rowCollapsibleButtonCell, cell.column.id === _tableCollapsibleColumn.TableCollapsibleColumn.id)),
|
|
193
193
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Skeleton, {
|
|
194
194
|
visible: loading,
|
|
195
195
|
sx: !loading ? {
|
|
@@ -205,7 +205,8 @@ var Table = function(param) {
|
|
|
205
205
|
colSpan: columns.length + 1,
|
|
206
206
|
style: {
|
|
207
207
|
padding: 0,
|
|
208
|
-
borderTop: row.getIsExpanded() ? undefined : "none"
|
|
208
|
+
borderTop: row.getIsExpanded() ? undefined : "none",
|
|
209
|
+
borderBottom: row.getIsExpanded() ? undefined : "none"
|
|
209
210
|
},
|
|
210
211
|
children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Collapse, {
|
|
211
212
|
in: row.getIsExpanded(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, 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} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {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\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowSelectionCheckboxCell: {\n verticalAlign: 'middle',\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\ninterface 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\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}\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}: 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: true,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\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\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('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.rowSelectionCheckboxCell]: cell.column.id === TableSelectableColumn.id,\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={{padding: 0, borderTop: row.getIsExpanded() ? undefined : 'none'}}\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 setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\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 </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.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","useStyles","createStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowSelectionCheckboxCell","verticalAlign","rowCollapsibleButtonCell","textAlign","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","convertedChildren","Children","toArray","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","form","useForm","initialValues","cx","classes","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","enableMultiRowSelection","getRowCanExpand","original","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","useEffect","useDidUpdate","globalFilter","sorting","clearFilters","useCallback","setFieldValue","prevState","outsideClickRef","useClickOutside","Center","sx","flexGrow","Loader","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","defaultColumnSizing","td","style","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","padding","borderTop","getIsExpanded","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, 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} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {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\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n '& tbody td': {\n verticalAlign: 'top',\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\ninterface 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\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}\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}: 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: true,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\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\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('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 setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\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 </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.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","useStyles","createStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","convertedChildren","Children","toArray","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","form","useForm","initialValues","cx","classes","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","enableMultiRowSelection","getRowCanExpand","original","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","useEffect","useDidUpdate","globalFilter","sorting","clearFilters","useCallback","setFieldValue","prevState","outsideClickRef","useClickOutside","Center","sx","flexGrow","Loader","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","defaultColumnSizing","td","style","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}
|
|
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "TableActions", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
var _core = require("@mantine/core");
|
|
12
13
|
var _useTable = require("./useTable");
|
|
13
14
|
var TableActions = function(param) {
|
|
14
15
|
var children = param.children;
|
|
@@ -17,7 +18,8 @@ var TableActions = function(param) {
|
|
|
17
18
|
if (selectedRows.length <= 0) {
|
|
18
19
|
return null;
|
|
19
20
|
}
|
|
20
|
-
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(
|
|
21
|
+
return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Group, {
|
|
22
|
+
spacing: "xs",
|
|
21
23
|
children: children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])
|
|
22
24
|
});
|
|
23
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\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();\n const selectedRows = getSelectedRows();\n\n if (selectedRows.length <= 0) {\n return null;\n }\n\n return
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\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();\n const selectedRows = getSelectedRows();\n\n if (selectedRows.length <= 0) {\n return null;\n }\n\n return <Group spacing=\"xs\">{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</Group>;\n};\n"],"names":["TableActions","children","useTable","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Group","spacing"],"mappings":"AAAA;;;;+BA2BaA;;;eAAAA;;;;oBA3BO;wBAEG;AAyBhB,IAAMA,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDC,aAAAA,IAAAA,kBAAQ,KAArDC,kBAA6CD,WAA7CC,iBAAiBC,2BAA4BF,WAA5BE;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBAAO,qBAACC,WAAK;QAACC,SAAQ;kBAAMP,SAASG,2BAA2BC,eAAeA,YAAY,CAAC,EAAE;;AAClG"}
|
|
@@ -15,16 +15,17 @@ var TableCollapsibleColumn = {
|
|
|
15
15
|
id: "collapsible",
|
|
16
16
|
enableSorting: false,
|
|
17
17
|
header: "",
|
|
18
|
+
size: 62,
|
|
18
19
|
cell: function(info) {
|
|
19
20
|
var handler = info.row.getToggleExpandedHandler();
|
|
20
21
|
var onClick = function(e) {
|
|
21
22
|
e.stopPropagation();
|
|
22
23
|
handler();
|
|
23
24
|
};
|
|
24
|
-
return info.row.getCanExpand() ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.
|
|
25
|
+
return info.row.getCanExpand() ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.ActionIcon, {
|
|
25
26
|
onClick: onClick,
|
|
26
27
|
variant: "subtle",
|
|
27
|
-
|
|
28
|
+
radius: "sm",
|
|
28
29
|
children: info.row.getIsExpanded() ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.ArrowHeadUpSize24Px, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.ArrowHeadDownSize24Px, {})
|
|
29
30
|
}) : null;
|
|
30
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent} from 'react';\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n id: 'collapsible',\n enableSorting: false,\n header: '',\n size: 62,\n cell: (info) => {\n const handler = info.row.getToggleExpandedHandler();\n const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handler();\n };\n\n return info.row.getCanExpand() ? (\n <ActionIcon onClick={onClick} variant=\"subtle\" radius=\"sm\">\n {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n </ActionIcon>\n ) : null;\n },\n};\n"],"names":["TableCollapsibleColumn","id","enableSorting","header","size","cell","info","handler","row","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","ActionIcon","variant","radius","getIsExpanded","ArrowHeadUpSize24Px","ArrowHeadDownSize24Px"],"mappings":"AAAA;;;;+BAQaA;;;eAAAA;;;;gCAR4C;oBAChC;AAOlB,IAAMA,yBAA6C;IACtDC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ;IACRC,MAAM;IACNC,MAAM,SAACC,MAAS;QACZ,IAAMC,UAAUD,KAAKE,GAAG,CAACC,wBAAwB;QACjD,IAAMC,UAAU,SAACC,GAA0C;YACvDA,EAAEC,eAAe;YACjBL;QACJ;QAEA,OAAOD,KAAKE,GAAG,CAACK,YAAY,mBACxB,qBAACC,gBAAU;YAACJ,SAASA;YAASK,SAAQ;YAASC,QAAO;sBACjDV,KAAKE,GAAG,CAACS,aAAa,mBAAK,qBAACC,qCAAmB,sBAAM,qBAACC,uCAAqB,KAAG;aAEnF,IAAI;IACZ;AACJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n th: {\n fontWeight: '400 !important' as any,\n padding: '0 !important',\n color: theme.black + '!important',\n verticalAlign: 'middle',\n },\n\n control: {\n width: '100%',\n padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n whiteSpace: 'nowrap',\n\n '&:hover': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n },\n },\n}));\n\ninterface ThProps<T> {\n header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n asc: ArrowHeadDownSize16Px,\n desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n asc: 'ascending',\n desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n const {classes} = useStyles();\n const size = header.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return (\n <th className={classes.th} style={{width}}>\n <Text size=\"xs\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n th: {\n fontWeight: '400 !important' as any,\n padding: '0 !important',\n color: theme.black + '!important',\n verticalAlign: 'middle',\n },\n\n control: {\n width: '100%',\n padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n whiteSpace: 'nowrap',\n\n '&:hover': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n },\n },\n}));\n\ninterface ThProps<T> {\n header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n asc: ArrowHeadDownSize16Px,\n desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n asc: 'ascending',\n desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n const {classes} = useStyles();\n const size = header.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return (\n <th className={classes.th} style={{width}}>\n <Text size=\"xs\" py=\"xs\" px=\"sm\">\n {flexRender(header.column.columnDef.header, header.getContext())}\n </Text>\n </th>\n );\n }\n\n const onSort = header.column.getToggleSortingHandler();\n const sortingOrder = header.column.getIsSorted();\n const Icon = SortingIcons[sortingOrder || header.column.getFirstSortDir()];\n\n return (\n <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n <UnstyledButton onClick={onSort} className={classes.control}>\n <Group position=\"apart\" noWrap>\n <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n <Icon height={14} />\n </Center>\n </Group>\n </UnstyledButton>\n </th>\n );\n};\n"],"names":["Th","useStyles","createStyles","theme","th","fontWeight","padding","color","black","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","ArrowHeadDownSize16Px","desc","ArrowHeadUpSize16Px","SortingLabels","header","classes","size","column","getSize","defaultColumnSizing","undefined","isPlaceholder","getCanSort","className","style","Text","py","px","flexRender","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","UnstyledButton","onClick","Group","position","noWrap","Center","sx","action","height"],"mappings":"AAAA;;;;+BAqCaA;;;eAAAA;;;;gCArC4C;oBACO;0BACV;AAEtD,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,OAAOJ,MAAMK,KAAK,GAAG;YACrBC,eAAe;QACnB;QAEAC,SAAS;YACLC,OAAO;YACPL,SAAS,AAAC,GAAwBH,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;YACnDC,YAAY;YAEZ,WAAW;gBACPC,iBAAiBb,MAAMc,WAAW,KAAK,SAASd,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGhB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMC,eAAe;IACjBC,KAAKC,uCAAqB;IAC1BC,MAAMC,qCAAmB;AAC7B;AAEA,IAAMC,gBAAgB;IAClBJ,KAAK;IACLE,MAAM;AACV;AAEO,IAAMvB,KAAK,gBAA8B;QAAxB0B,eAAAA;IACpB,IAAM,AAACC,UAAW1B,YAAX0B;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMnB,QAAQiB,SAASG,+BAAmB,CAACH,IAAI,GAAGA,OAAOI,SAAS;IAElE,IAAIN,OAAOO,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACP,OAAOG,MAAM,CAACK,UAAU,IAAI;QAC7B,qBACI,qBAAC9B;YAAG+B,WAAWR,QAAQvB,EAAE;YAAEgC,OAAO;gBAACzB,OAAAA;YAAK;sBACpC,cAAA,qBAAC0B,UAAI;gBAACT,MAAK;gBAAKU,IAAG;gBAAKC,IAAG;0BACtBC,IAAAA,sBAAU,EAACd,OAAOG,MAAM,CAACY,SAAS,CAACf,MAAM,EAAEA,OAAOgB,UAAU;;;IAI7E,CAAC;IAED,IAAMC,SAASjB,OAAOG,MAAM,CAACe,uBAAuB;IACpD,IAAMC,eAAenB,OAAOG,MAAM,CAACiB,WAAW;IAC9C,IAAMC,OAAO3B,YAAY,CAACyB,gBAAgBnB,OAAOG,MAAM,CAACmB,eAAe,GAAG;IAE1E,qBACI,qBAAC5C;QAAG+B,WAAWR,QAAQvB,EAAE;QAAEgC,OAAO;YAACzB,OAAAA;QAAK;QAAGsC,aAAWJ,eAAepB,aAAa,CAACoB,aAAa,GAAG,MAAM;kBACrG,cAAA,qBAACK,oBAAc;YAACC,SAASR;YAAQR,WAAWR,QAAQjB,OAAO;sBACvD,cAAA,sBAAC0C,WAAK;gBAACC,UAAS;gBAAQC,MAAM;;kCAC1B,qBAACjB,UAAI;wBAACT,MAAK;kCAAMY,IAAAA,sBAAU,EAACd,OAAOG,MAAM,CAACY,SAAS,CAACf,MAAM,EAAEA,OAAOgB,UAAU;;kCAC7E,qBAACa,YAAM;wBAACC,IAAI,SAACrD;mCAAW;gCAACI,OAAOsC,eAAe1C,MAAMe,MAAM,CAACuC,MAAM,CAAC,EAAE,GAAGzB,SAAS;4BAAA;;kCAC7E,cAAA,qBAACe;4BAAKW,QAAQ;;;;;;;AAMtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EACH,SAAS,EAOZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,WAAW,EAAE,iBAAiB,EAAC,MAAM,sBAAsB,CAAC;AAEpE,OAAO,EAAqB,YAAY,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAEpG,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAC,kBAAkB,EAAgB,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC/E,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AA4DhD,UAAU,UAAU,CAAC,CAAC;IAClB;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IACtC;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC;IAC5C;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IAC1D;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACtC;AAED,UAAU,SAAS;IACf,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC;IACxC,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,UAAU,EAAE,OAAO,eAAe,CAAC;IACnC,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,SAAS,EAAE,OAAO,cAAc,CAAC;IACjC,eAAe,EAAE,OAAO,oBAAoB,CAAC;IAC7C,iBAAiB,EAAE,OAAO,sBAAsB,CAAC;CACpD;AAED,eAAO,MAAM,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EACH,SAAS,EAOZ,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAC,WAAW,EAAE,iBAAiB,EAAC,MAAM,sBAAsB,CAAC;AAEpE,OAAO,EAAqB,YAAY,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAEpG,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,sBAAsB,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAC,kBAAkB,EAAgB,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAC/E,OAAO,EAAC,oBAAoB,EAAC,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AA4DhD,UAAU,UAAU,CAAC,CAAC;IAClB;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IACtC;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC;IAC5C;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;IAC1D;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACtC;AAED,UAAU,SAAS;IACf,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC;IACxC,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,UAAU,EAAE,OAAO,eAAe,CAAC;IACnC,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,SAAS,EAAE,OAAO,cAAc,CAAC;IACjC,eAAe,EAAE,OAAO,oBAAoB,CAAC;IAC7C,iBAAiB,EAAE,OAAO,sBAAsB,CAAC;CACpD;AAED,eAAO,MAAM,KAAK,EAAE,SAsKnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableActions.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableActions.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableActions.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableActions.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAG9C,UAAU,iBAAiB,CAAC,CAAC;IACzB;;;;;;;;;;;;;;;;;;OAkBG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,YAAY,6CAA2C,YASnE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCollapsibleColumn.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAG/C;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,SAAS,CAAC,OAAO,
|
|
1
|
+
{"version":3,"file":"TableCollapsibleColumn.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAG/C;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,SAAS,CAAC,OAAO,CAkBrD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Th.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAqB9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;AAYD,eAAO,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"Th.d.ts","sourceRoot":"","sources":["../../../../src/components/table/Th.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAkC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAqB9E,UAAU,OAAO,CAAC,CAAC;IACf,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CAC9B;AAYD,eAAO,MAAM,EAAE,4CAmCd,CAAC"}
|
|
@@ -31,6 +31,9 @@ var useStyles = createStyles(function(theme, param) {
|
|
|
31
31
|
width: "100%",
|
|
32
32
|
"& td:first-of-type, th:first-of-type > *": {
|
|
33
33
|
paddingLeft: theme.spacing.xl
|
|
34
|
+
},
|
|
35
|
+
"& tbody td": {
|
|
36
|
+
verticalAlign: "top"
|
|
34
37
|
}
|
|
35
38
|
},
|
|
36
39
|
header: {
|
|
@@ -51,11 +54,9 @@ var useStyles = createStyles(function(theme, param) {
|
|
|
51
54
|
rowSelected: {
|
|
52
55
|
backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor
|
|
53
56
|
},
|
|
54
|
-
rowSelectionCheckboxCell: {
|
|
55
|
-
verticalAlign: "middle"
|
|
56
|
-
},
|
|
57
57
|
rowCollapsibleButtonCell: {
|
|
58
|
-
textAlign: "right"
|
|
58
|
+
textAlign: "right",
|
|
59
|
+
padding: "".concat(theme.spacing.xs / 2, "px ").concat(theme.spacing.sm, "px !important")
|
|
59
60
|
},
|
|
60
61
|
row: {
|
|
61
62
|
"&:hover": {
|
|
@@ -173,12 +174,11 @@ export var Table = function(param) {
|
|
|
173
174
|
children: row.getVisibleCells().map(function(cell) {
|
|
174
175
|
var size = cell.column.getSize();
|
|
175
176
|
var width = size !== defaultColumnSizing.size ? size : undefined;
|
|
176
|
-
var _obj;
|
|
177
177
|
return /*#__PURE__*/ _jsx("td", {
|
|
178
178
|
style: {
|
|
179
179
|
width: width
|
|
180
180
|
},
|
|
181
|
-
className: cx((
|
|
181
|
+
className: cx(_define_property({}, classes.rowCollapsibleButtonCell, cell.column.id === TableCollapsibleColumn.id)),
|
|
182
182
|
children: /*#__PURE__*/ _jsx(Skeleton, {
|
|
183
183
|
visible: loading,
|
|
184
184
|
sx: !loading ? {
|
|
@@ -194,7 +194,8 @@ export var Table = function(param) {
|
|
|
194
194
|
colSpan: columns.length + 1,
|
|
195
195
|
style: {
|
|
196
196
|
padding: 0,
|
|
197
|
-
borderTop: row.getIsExpanded() ? undefined : "none"
|
|
197
|
+
borderTop: row.getIsExpanded() ? undefined : "none",
|
|
198
|
+
borderBottom: row.getIsExpanded() ? undefined : "none"
|
|
198
199
|
},
|
|
199
200
|
children: /*#__PURE__*/ _jsx(Collapse, {
|
|
200
201
|
in: row.getIsExpanded(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, 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} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {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\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowSelectionCheckboxCell: {\n verticalAlign: 'middle',\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\ninterface 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\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}\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}: 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: true,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\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\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('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.rowSelectionCheckboxCell]: cell.column.id === TableSelectableColumn.id,\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={{padding: 0, borderTop: row.getIsExpanded() ? undefined : 'none'}}\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 setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\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 </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.DateRangePicker = TableDateRangePicker;\n"],"names":["Box","Center","Collapse","createStyles","Loader","Skeleton","Table","MantineTable","useForm","useClickOutside","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","TableActions","TableCollapsibleColumn","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","TableSelectableColumn","Th","useRowSelection","useStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowSelectionCheckboxCell","verticalAlign","rowCollapsibleButtonCell","textAlign","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","convertedChildren","toArray","find","child","type","footer","predicates","dateRange","initialStateWithoutForm","form","initialValues","cx","classes","pagination","pageSize","DEFAULT_SIZE","concat","manualPagination","enableMultiRowSelection","getRowCanExpand","original","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","globalFilter","sorting","clearFilters","setFieldValue","prevState","outsideClickRef","sx","flexGrow","rows","getRowModel","map","rowChildren","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","td","style","id","visible","borderRadius","columnDef","getContext","colSpan","length","padding","borderTop","getIsExpanded","in","px","py","ref","Provider","value","containerRef","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","DateRangePicker"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, 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} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {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\ninterface TableStylesParams {\n hasHeader: boolean;\n multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n table: {\n width: '100%',\n '& td:first-of-type, th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n '& tbody td': {\n verticalAlign: 'top',\n },\n },\n\n header: {\n position: 'sticky',\n top: hasHeader ? 69 : 0,\n backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n transition: 'box-shadow 150ms ease',\n zIndex: 12, // skeleton is 11\n\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n borderBottom: `1px solid ${theme.colors.gray[2]}`,\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\ninterface 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\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}\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}: 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: true,\n enableMultiRowSelection: !!multiRowSelectionEnabled,\n getRowId,\n getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\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\n const triggerChange = () => onChange?.({...state, ...form.values});\n\n useEffect(() => {\n onMount?.({...state, ...form.values});\n }, []);\n\n useDidUpdate(() => {\n triggerChange();\n if (!multiRowSelectionEnabled) {\n clearSelection();\n }\n }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n const clearFilters = useCallback(() => {\n form.setFieldValue('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 setState,\n clearFilters,\n getSelectedRow,\n getSelectedRows,\n clearSelection,\n form,\n containerRef: outsideClickRef,\n multiRowSelectionEnabled,\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 </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.DateRangePicker = TableDateRangePicker;\n"],"names":["Box","Center","Collapse","createStyles","Loader","Skeleton","Table","MantineTable","useForm","useClickOutside","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","TableActions","TableCollapsibleColumn","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","TableSelectableColumn","Th","useRowSelection","useStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","convertedChildren","toArray","find","child","type","footer","predicates","dateRange","initialStateWithoutForm","form","initialValues","cx","classes","pagination","pageSize","DEFAULT_SIZE","concat","manualPagination","enableMultiRowSelection","getRowCanExpand","original","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","globalFilter","sorting","clearFilters","setFieldValue","prevState","outsideClickRef","sx","flexGrow","rows","getRowModel","map","rowChildren","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","td","style","id","visible","borderRadius","columnDef","getContext","colSpan","length","borderTop","getIsExpanded","in","px","py","ref","Provider","value","containerRef","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","DateRangePicker"],"mappings":"AAAA;;;;;;AAAA,SAAQA,GAAG,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAASC,YAAY,QAAO,gBAAgB;AAC3G,SAAQC,OAAO,QAAO,gBAAgB;AACtC,SAAQC,eAAe,EAAEC,YAAY,QAAO,iBAAiB;AAC7D,SAEIC,mBAAmB,EACnBC,UAAU,EACVC,eAAe,EAGfC,aAAa,QACV,wBAAwB;AAE/B,OAAOC,kBAAkB,sBAAsB;AAC/C,SAAQC,QAAQ,EAAEC,QAAQ,EAA2BC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAEpG,SAAQC,YAAY,QAAO,iBAAiB;AAC5C,SAAQC,sBAAsB,QAAO,2BAA2B;AAChE,SAA4BC,YAAY,QAAsB,iBAAiB;AAC/E,SAAQC,oBAAoB,QAAO,yBAAyB;AAC5D,SAAQC,WAAW,QAAO,gBAAgB;AAC1C,SAAQC,WAAW,QAAO,gBAAgB;AAC1C,SAAQC,WAAW,QAAO,gBAAgB;AAC1C,SAAQC,eAAe,QAAO,oBAAoB;AAClD,SAAQC,YAAY,QAAO,iBAAiB;AAC5C,SAAQC,cAAc,QAAO,mBAAmB;AAChD,SAAQC,qBAAqB,QAAO,0BAA0B;AAC9D,SAAQC,EAAE,QAAO,OAAO;AACxB,SAAQC,eAAe,QAAO,oBAAoB;AAOlD,IAAMC,YAAY/B,aAAwC,SAACgC,cAAiD;QAAzCC,kBAAAA,WAAWC,iCAAAA;IAC1E,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAChBJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OACnDR,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE;IAC7C,OAAO;QACHC,OAAO;YACHC,OAAO;YACP,4CAA4C;gBACxCC,aAAaX,MAAMY,OAAO,CAACC,EAAE;YACjC;YACA,cAAc;gBACVC,eAAe;YACnB;QACJ;QAEAC,QAAQ;YACJC,UAAU;YACVC,KAAKhB,YAAY,KAAK,CAAC;YACvBiB,iBAAiBlB,MAAMI,WAAW,KAAK,SAASJ,MAAMmB,KAAK,GAAGnB,MAAMoB,KAAK;YACzEC,YAAY;YACZC,QAAQ;YAER,YAAY;gBACRC,SAAS;gBACTP,UAAU;gBACVQ,MAAM;gBACNC,OAAO;gBACPC,QAAQ;gBACRC,cAAc,AAAC,aAAiC,OAArB3B,MAAMO,MAAM,CAACqB,IAAI,CAAC,EAAE;YACnD;QACJ;QAEAC,aAAa;YACTX,iBAAiBhB,2BAA2B4B,YAAY3B,kBAAkB;QAC9E;QAEA4B,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,GAA4BjC,OAA1BA,MAAMY,OAAO,CAACsB,EAAE,GAAG,GAAE,OAAsB,OAAjBlC,MAAMY,OAAO,CAACuB,EAAE,EAAC;QAC3D;QAEAC,KAAK;YACD,WAAW;gBACPlB,iBAAiBf;YACrB;QACJ;IACJ;AACJ;AAuFA,OAAO,IAAMhC,QAAmB,gBAaX;QAZjBkE,aAAAA,MACAC,iBAAAA,UACAC,uBAAAA,gBACAC,0BAAAA,+CACAC,cAAAA,gDAAe,CAAC,yBAChBC,gBAAAA,SACAC,gBAAAA,SACAC,iBAAAA,UACAC,iBAAAA,iCACAC,SAAAA,sCAAU,KAAK,mBACfC,0BAAAA,mBACA7C,iCAAAA;IAEA,IAAM8C,oBAAoBnE,SAASoE,OAAO,CAACJ;IAC3C,IAAM9B,SAASiC,kBAAkBE,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAK5D;;IAChE,IAAM6D,SAASL,kBAAkBE,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAK7D;;IAEhE,IAAO+D,aAAqDb,aAArDa,YAAYC,YAAyCd,aAAzCc,WAAcC,qDAA2Bf;QAArDa;QAAYC;;QAEad,0BAA2CA;IAD3E,IAAMgB,OAAOpF,QAAuB;QAChCqF,eAAe;YAACJ,YAAYb,CAAAA,2BAAAA,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAca,UAAU,cAAxBb,sCAAAA,2BAA4B,CAAC,CAAC;YAAEc,WAAWd,CAAAA,0BAAAA,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAcc,SAAS,cAAvBd,qCAAAA,0BAA2B;gBAAC,IAAI;gBAAE,IAAI;aAAC;QAAA;IAClH;IACA,IAAsB1C,aAAAA,UAAU;QAACE,WAAW,CAAC,CAACc;QAAQb,0BAAAA;IAAwB,IAAvEyD,KAAe5D,WAAf4D,IAAIC,UAAW7D,WAAX6D;QAU2B;IARtC,IAAMnD,QAAQ9B,cAAc;QACxB8D,cAAc7D,aAAa4E,yBAAyB;YAACK,YAAY;gBAACC,UAAUpE,aAAaqE,YAAY;YAAA;QAAC;QACtG1B,MAAAA;QACAK,SAASxC,2BAA2B;YAACN;SAAsC,CAACoE,MAAM,CAACtB,WAAWA,OAAO;QACrGhE,iBAAiBA;QACjBuF,kBAAkB,IAAI;QACtBC,yBAAyB,CAAC,CAAChE;QAC3BoC,UAAAA;QACA6B,iBAAiB,SAAC/B;YAAgB,OAAA,CAAA,OAAA,CAAC,EAACI,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAoBJ,IAAIgC,QAAQ,gBAAlC,kBAAA,OAAuC,KAAK;;IAClF;IACA,IAA0BnF,6BAAAA,SAAqBwB,MAAMgC,YAAY,OAA1D4B,QAAmBpF,cAAZqF,WAAYrF;IAC1BwB,MAAM8D,UAAU,CAAC,SAACC;eAAU,wCACrBA;YACHH,OAAAA;YACAI,eAAeH;;;IAEnB,IAA0DxE,mBAAAA,gBAAgBW,QAAnEiE,iBAAmD5E,iBAAnD4E,gBAAgBC,iBAAmC7E,iBAAnC6E,gBAAgBC,kBAAmB9E,iBAAnB8E;IAEvC,IAAMC,gBAAgB;QAAMjC,OAAAA,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAW,mBAAIyB,OAAUZ,KAAKqB,MAAM;;IAEhE9F,UAAU,WAAM;QACZ2D,oBAAAA,qBAAAA,KAAAA,IAAAA,QAAU,mBAAI0B,OAAUZ,KAAKqB,MAAM;IACvC,GAAG,EAAE;IAELvG,aAAa,WAAM;QACfsG;QACA,IAAI,CAAC3E,0BAA0B;YAC3BwE;QACJ,CAAC;IACL,GAAG;QAACL,MAAMU,YAAY;QAAEV,MAAMW,OAAO;QAAEX,MAAMR,UAAU;QAAEJ,KAAKqB,MAAM;KAAC;IAErE,IAAMG,eAAelG,YAAY,WAAM;QACnC0E,KAAKyB,aAAa,CAAC,cAAc,CAAC;QAClCZ,SAAS,SAACa;mBAAe,wCAAIA;gBAAWJ,cAAc;;;IAC1D,GAAG,EAAE;IAEL,IAAMK,kBAAkB9G,gBAAgB,WAAM;QAC1C,IAAI,CAAC4B,0BAA0B;YAC3BwE;QACJ,CAAC;IACL;IAEA,IAAI,CAACrC,MAAM;QACP,qBACI,KAACvE;YAAOuH,IAAI;gBAACC,UAAU;YAAC;sBACpB,cAAA,KAACrH;;IAGb,CAAC;IAED,IAAMsH,OAAO9E,MAAM+E,WAAW,GAAGD,IAAI,CAACE,GAAG,CAAC,SAACrD,KAAQ;YAC3BI;QAApB,IAAMkD,cAAclD,CAAAA,qBAAAA,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAoBJ,IAAIgC,QAAQ,eAAhC5B,gCAAAA,qBAAqC,IAAI;QAE7D,qBACI,MAAC1D;;8BACG,KAAC6G;oBACGC,SAAS;+BAAMxD,IAAIyD,cAAc;;oBACjCC,eAAe;wBAAM/C,OAAAA,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAoBX,IAAIgC,QAAQ;;oBACrD2B,WAAWpC,GAAGC,QAAQxB,GAAG,EAAG,qBAACwB,QAAQ/B,WAAW,EAAGO,IAAI4D,aAAa;oBACpEC,iBAAe7D,IAAI4D,aAAa;8BAE/B5D,IAAI8D,eAAe,GAAGT,GAAG,CAAC,SAACU,MAAS;wBACjC,IAAMC,OAAOD,KAAKE,MAAM,CAACC,OAAO;wBAChC,IAAM5F,QAAQ0F,SAAS5H,oBAAoB4H,IAAI,GAAGA,OAAOtE,SAAS;wBAClE,qBACI,KAACyE;4BAEGC,OAAO;gCAAC9F,OAAAA;4BAAK;4BACbqF,WAAWpC,GACP,qBAACC,QAAQ7B,wBAAwB,EAAGoE,KAAKE,MAAM,CAACI,EAAE,KAAKtH,uBAAuBsH,EAAE;sCAGpF,cAAA,KAACvI;gCAASwI,SAAS5D;gCAASuC,IAAI,CAACvC,UAAU;oCAAC6D,cAAc;gCAAC,IAAI7E,SAAS;0CACnErD,WAAW0H,KAAKE,MAAM,CAACO,SAAS,CAACT,IAAI,EAAEA,KAAKU,UAAU;;2BAPtDV,KAAKM,EAAE;oBAWxB;;gBAEHf,4BACG,KAACC;8BACG,cAAA,KAACY;wBACGO,SAASpE,QAAQqE,MAAM,GAAG;wBAC1BP,OAAO;4BACHvE,SAAS;4BACT+E,WAAW5E,IAAI6E,aAAa,KAAKnF,YAAY,MAAM;4BACnDH,cAAcS,IAAI6E,aAAa,KAAKnF,YAAY,MAAM;wBAC1D;kCAEA,cAAA,KAAC/D;4BAASmJ,IAAI9E,IAAI6E,aAAa;sCAC3B,cAAA,KAACpJ;gCAAIsJ,IAAG;gCAAKC,IAAG;0CACX1B;;;;qBAKjB,IAAI;;WA1CGtD,IAAIqE,EAAE;IA6C7B;IAEA,qBACI,KAAC5I;QAAIwJ,KAAKjC;kBACN,cAAA,MAAChG,aAAakI,QAAQ;YAClBC,OAAO;gBACH3E,UAAUiC;gBACVR,OAAAA;gBACAC,UAAAA;gBACAW,cAAAA;gBACAN,gBAAAA;gBACAC,iBAAAA;gBACAF,gBAAAA;gBACAjB,MAAAA;gBACA+D,cAAcpC;gBACdlF,0BAAAA;YACJ;;gBAECa;8BACD,MAAC3C;oBAAa2H,WAAWnC,QAAQnD,KAAK;oBAAEgH,mBAAkB;oBAAKC,iBAAgB;oBAAKC,IAAG;;sCACnF,KAACC;4BAAM7B,WAAWnC,QAAQ7C,MAAM;sCAC3BN,MAAMoH,eAAe,GAAGpC,GAAG,CAAC,SAACqC;qDAC1B,KAACnC;8CACImC,YAAYC,OAAO,CAACtC,GAAG,CAAC,SAACuC;6DACtB,KAACnI;4CAAyBkB,QAAQiH;2CAAzBA,aAAavB,EAAE;;mCAFvBqB,YAAYrB,EAAE;;;sCAO/B,KAACwB;sCACI1C,KAAKwB,MAAM,GACRxB,qBAEA,KAACI;0CACG,cAAA,KAACY;oCAAGO,SAASpE,QAAQqE,MAAM;8CAAGxE;;8BAErC;;;;gBAGRc;;;;AAIjB,EAAE;AAEFlF,MAAM+J,OAAO,GAAGhJ;AAChBf,MAAMgK,MAAM,GAAG7I;AACfnB,MAAMiK,MAAM,GAAG7I;AACfpB,MAAMkK,MAAM,GAAG7I;AACfrB,MAAMmK,UAAU,GAAG7I;AACnBtB,MAAMoK,SAAS,GAAG5I;AAClBxB,MAAMqK,OAAO,GAAG9I;AAChBvB,MAAMoK,SAAS,GAAG5I;AAClBxB,MAAMsK,iBAAiB,GAAGtJ;AAC1BhB,MAAMuK,eAAe,GAAGrJ"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Group } from "@mantine/core";
|
|
2
3
|
import { useTable } from "./useTable";
|
|
3
4
|
export var TableActions = function(param) {
|
|
4
5
|
var children = param.children;
|
|
@@ -7,7 +8,8 @@ export var TableActions = function(param) {
|
|
|
7
8
|
if (selectedRows.length <= 0) {
|
|
8
9
|
return null;
|
|
9
10
|
}
|
|
10
|
-
return /*#__PURE__*/ _jsx(
|
|
11
|
+
return /*#__PURE__*/ _jsx(Group, {
|
|
12
|
+
spacing: "xs",
|
|
11
13
|
children: children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])
|
|
12
14
|
});
|
|
13
15
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\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();\n const selectedRows = getSelectedRows();\n\n if (selectedRows.length <= 0) {\n return null;\n }\n\n return
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\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();\n const selectedRows = getSelectedRows();\n\n if (selectedRows.length <= 0) {\n return null;\n }\n\n return <Group spacing=\"xs\">{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</Group>;\n};\n"],"names":["Group","useTable","TableActions","children","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","spacing"],"mappings":"AAAA;AAAA,SAAQA,KAAK,QAAO,gBAAgB;AAEpC,SAAQC,QAAQ,QAAO,aAAa;AAyBpC,OAAO,IAAMC,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDF,YAAAA,YAA7CG,kBAA6CH,UAA7CG,iBAAiBC,2BAA4BJ,UAA5BI;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBAAO,KAACP;QAAMQ,SAAQ;kBAAML,SAASE,2BAA2BC,eAAeA,YAAY,CAAC,EAAE;;AAClG,EAAE"}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { ArrowHeadDownSize24Px, ArrowHeadUpSize24Px } from "@coveord/plasma-react-icons";
|
|
3
|
-
import {
|
|
3
|
+
import { ActionIcon } from "@mantine/core";
|
|
4
4
|
/**
|
|
5
5
|
* Generic column to use when your table needs collapsible rows
|
|
6
6
|
*/ export var TableCollapsibleColumn = {
|
|
7
7
|
id: "collapsible",
|
|
8
8
|
enableSorting: false,
|
|
9
9
|
header: "",
|
|
10
|
+
size: 62,
|
|
10
11
|
cell: function(info) {
|
|
11
12
|
var handler = info.row.getToggleExpandedHandler();
|
|
12
13
|
var onClick = function(e) {
|
|
13
14
|
e.stopPropagation();
|
|
14
15
|
handler();
|
|
15
16
|
};
|
|
16
|
-
return info.row.getCanExpand() ? /*#__PURE__*/ _jsx(
|
|
17
|
+
return info.row.getCanExpand() ? /*#__PURE__*/ _jsx(ActionIcon, {
|
|
17
18
|
onClick: onClick,
|
|
18
19
|
variant: "subtle",
|
|
19
|
-
|
|
20
|
+
radius: "sm",
|
|
20
21
|
children: info.row.getIsExpanded() ? /*#__PURE__*/ _jsx(ArrowHeadUpSize24Px, {}) : /*#__PURE__*/ _jsx(ArrowHeadDownSize24Px, {})
|
|
21
22
|
}) : null;
|
|
22
23
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent} from 'react';\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n id: 'collapsible',\n enableSorting: false,\n header: '',\n size: 62,\n cell: (info) => {\n const handler = info.row.getToggleExpandedHandler();\n const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n handler();\n };\n\n return info.row.getCanExpand() ? (\n <ActionIcon onClick={onClick} variant=\"subtle\" radius=\"sm\">\n {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n </ActionIcon>\n ) : null;\n },\n};\n"],"names":["ArrowHeadDownSize24Px","ArrowHeadUpSize24Px","ActionIcon","TableCollapsibleColumn","id","enableSorting","header","size","cell","info","handler","row","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","variant","radius","getIsExpanded"],"mappings":"AAAA;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,UAAU,QAAO,gBAAgB;AAIzC;;CAEC,GACD,OAAO,IAAMC,yBAA6C;IACtDC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ;IACRC,MAAM;IACNC,MAAM,SAACC,MAAS;QACZ,IAAMC,UAAUD,KAAKE,GAAG,CAACC,wBAAwB;QACjD,IAAMC,UAAU,SAACC,GAA0C;YACvDA,EAAEC,eAAe;YACjBL;QACJ;QAEA,OAAOD,KAAKE,GAAG,CAACK,YAAY,mBACxB,KAACd;YAAWW,SAASA;YAASI,SAAQ;YAASC,QAAO;sBACjDT,KAAKE,GAAG,CAACQ,aAAa,mBAAK,KAAClB,yCAAyB,KAACD,0BAAwB;aAEnF,IAAI;IACZ;AACJ,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n th: {\n fontWeight: '400 !important' as any,\n padding: '0 !important',\n color: theme.black + '!important',\n verticalAlign: 'middle',\n },\n\n control: {\n width: '100%',\n padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n whiteSpace: 'nowrap',\n\n '&:hover': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n },\n },\n}));\n\ninterface ThProps<T> {\n header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n asc: ArrowHeadDownSize16Px,\n desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n asc: 'ascending',\n desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n const {classes} = useStyles();\n const size = header.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return (\n <th className={classes.th} style={{width}}>\n <Text size=\"xs\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n th: {\n fontWeight: '400 !important' as any,\n padding: '0 !important',\n color: theme.black + '!important',\n verticalAlign: 'middle',\n },\n\n control: {\n width: '100%',\n padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n whiteSpace: 'nowrap',\n\n '&:hover': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n },\n },\n}));\n\ninterface ThProps<T> {\n header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n asc: ArrowHeadDownSize16Px,\n desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n asc: 'ascending',\n desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n const {classes} = useStyles();\n const size = header.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return (\n <th className={classes.th} style={{width}}>\n <Text size=\"xs\" py=\"xs\" px=\"sm\">\n {flexRender(header.column.columnDef.header, header.getContext())}\n </Text>\n </th>\n );\n }\n\n const onSort = header.column.getToggleSortingHandler();\n const sortingOrder = header.column.getIsSorted();\n const Icon = SortingIcons[sortingOrder || header.column.getFirstSortDir()];\n\n return (\n <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n <UnstyledButton onClick={onSort} className={classes.control}>\n <Group position=\"apart\" noWrap>\n <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n <Icon height={14} />\n </Center>\n </Group>\n </UnstyledButton>\n </th>\n );\n};\n"],"names":["ArrowHeadDownSize16Px","ArrowHeadUpSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","fontWeight","padding","color","black","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","desc","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","py","px","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","onClick","position","noWrap","sx","action","height"],"mappings":"AAAA;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,QAAO,gBAAgB;AAChF,SAAQC,mBAAmB,EAAEC,UAAU,QAAe,wBAAwB;AAE9E,IAAMC,YAAYN,aAAa,SAACO;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,OAAOJ,MAAMK,KAAK,GAAG;YACrBC,eAAe;QACnB;QAEAC,SAAS;YACLC,OAAO;YACPL,SAAS,AAAC,GAAwBH,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;YACnDC,YAAY;YAEZ,WAAW;gBACPC,iBAAiBb,MAAMc,WAAW,KAAK,SAASd,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGhB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMC,eAAe;IACjBC,KAAK5B;IACL6B,MAAM5B;AACV;AAEA,IAAM6B,gBAAgB;IAClBF,KAAK;IACLC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK,gBAA8B;QAAxBC,eAAAA;IACpB,IAAM,AAACC,UAAWxB,YAAXwB;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMlB,QAAQgB,SAAS3B,oBAAoB2B,IAAI,GAAGA,OAAOG,SAAS;IAElE,IAAIL,OAAOM,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACN,OAAOG,MAAM,CAACI,UAAU,IAAI;QAC7B,qBACI,KAAC5B;YAAG6B,WAAWP,QAAQtB,EAAE;YAAE8B,OAAO;gBAACvB,OAAAA;YAAK;sBACpC,cAAA,KAACb;gBAAK6B,MAAK;gBAAKQ,IAAG;gBAAKC,IAAG;0BACtBnC,WAAWwB,OAAOG,MAAM,CAACS,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;;IAI7E,CAAC;IAED,IAAMC,SAASd,OAAOG,MAAM,CAACY,uBAAuB;IACpD,IAAMC,eAAehB,OAAOG,MAAM,CAACc,WAAW;IAC9C,IAAMC,OAAOvB,YAAY,CAACqB,gBAAgBhB,OAAOG,MAAM,CAACgB,eAAe,GAAG;IAE1E,qBACI,KAACxC;QAAG6B,WAAWP,QAAQtB,EAAE;QAAE8B,OAAO;YAACvB,OAAAA;QAAK;QAAGkC,aAAWJ,eAAelB,aAAa,CAACkB,aAAa,GAAG,MAAM;kBACrG,cAAA,KAAC1C;YAAe+C,SAASP;YAAQN,WAAWP,QAAQhB,OAAO;sBACvD,cAAA,MAACb;gBAAMkD,UAAS;gBAAQC,MAAM;;kCAC1B,KAAClD;wBAAK6B,MAAK;kCAAM1B,WAAWwB,OAAOG,MAAM,CAACS,SAAS,CAACZ,MAAM,EAAEA,OAAOa,UAAU;;kCAC7E,KAAC3C;wBAAOsD,IAAI,SAAC9C;mCAAW;gCAACI,OAAOkC,eAAetC,MAAMe,MAAM,CAACgC,MAAM,CAAC,EAAE,GAAGpB,SAAS;4BAAA;;kCAC7E,cAAA,KAACa;4BAAKQ,QAAQ;;;;;;;AAMtC,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coveord/plasma-mantine",
|
|
3
|
-
"version": "48.
|
|
3
|
+
"version": "48.24.0",
|
|
4
4
|
"description": "A Plasma flavoured Mantine theme",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"plasma",
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
"lodash.defaultsdeep": "4.6.1",
|
|
23
23
|
"monaco-editor": "0.34.0",
|
|
24
24
|
"react-beautiful-dnd": "13.1.1",
|
|
25
|
-
"@coveord/plasma-react-icons": "48.
|
|
26
|
-
"@coveord/plasma-tokens": "48.
|
|
25
|
+
"@coveord/plasma-react-icons": "48.24.0",
|
|
26
|
+
"@coveord/plasma-tokens": "48.24.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@emotion/react": "11.10.5",
|