@economic/taco 2.37.2 → 2.39.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/OverflowGroup/OverflowGroup.d.ts +1 -0
- package/dist/components/Select2/Select2.d.ts +6 -1
- package/dist/components/Select2/components/Context.d.ts +3 -1
- package/dist/components/Select2/types.d.ts +3 -1
- package/dist/components/Tabs/Tabs.d.ts +5 -0
- package/dist/esm/index.css +5 -1
- package/dist/esm/packages/taco/src/components/OverflowGroup/OverflowGroup.js +3 -1
- package/dist/esm/packages/taco/src/components/OverflowGroup/OverflowGroup.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/Select2.js +10 -5
- package/dist/esm/packages/taco/src/components/Select2/Select2.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Context.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Create.js +35 -12
- package/dist/esm/packages/taco/src/components/Select2/components/Create.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js +15 -17
- package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Select2/utilities.js +1 -1
- package/dist/esm/packages/taco/src/components/Select2/utilities.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Row.js +2 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Row.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js +7 -2
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Tabs/Tabs.js +12 -3
- package/dist/esm/packages/taco/src/components/Tabs/Tabs.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js +2 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Drag.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Drag.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Selection.js +8 -5
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Selection.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/Header.js +3 -0
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/Header.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/components/Resizer.js +15 -9
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/components/Resizer.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableRenderer.js +3 -4
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableRenderer.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/types.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableRowSelection.js +4 -3
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableRowSelection.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/listeners/useTableRowSelectionListener.js +7 -6
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/listeners/useTableRowSelectionListener.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/useTableManager.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/useTableManager.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/presets.js +2 -2
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/presets.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js +5 -2
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/dom.js +9 -1
- package/dist/esm/packages/taco/src/utils/dom.js.map +1 -1
- package/dist/index.css +5 -1
- package/dist/primitives/Table/Core/components/Header/Header.d.ts +1 -0
- package/dist/primitives/Table/Core/components/Header/components/Resizer.d.ts +1 -0
- package/dist/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterColumn.d.ts +1 -1
- package/dist/primitives/Table/types.d.ts +4 -3
- package/dist/taco.cjs.development.js +137 -77
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/dom.d.ts +1 -0
- package/package.json +2 -2
@@ -101,6 +101,7 @@ function Header(props) {
|
|
101
101
|
if (canResize) {
|
102
102
|
memoedProps.isResizing = header.column.getIsResizing();
|
103
103
|
memoedProps.onResize = header.getResizeHandler();
|
104
|
+
memoedProps.resetSize = header.column.resetSize;
|
104
105
|
}
|
105
106
|
if (canSort) {
|
106
107
|
const handleSortToggle = sortDirection => {
|
@@ -149,6 +150,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
|
|
149
150
|
onResize: handleResize,
|
150
151
|
onSort: handleSort,
|
151
152
|
onSortToggle: handleSortToggle,
|
153
|
+
resetSize: handleResetSize,
|
152
154
|
scrollToIndex,
|
153
155
|
setRowActiveIndex,
|
154
156
|
setColumnSizing,
|
@@ -210,6 +212,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
|
|
210
212
|
id: id,
|
211
213
|
isResizing: isResizing,
|
212
214
|
onResize: handleResize,
|
215
|
+
onResetSize: handleResetSize,
|
213
216
|
setColumnSizing: setColumnSizing,
|
214
217
|
width: width
|
215
218
|
})) : null);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport {\n TableMeta as ReactTableMeta,\n ColumnMeta as ReactTableColumnMeta,\n Header as ReactTableHeader,\n ColumnPinningPosition as ReactTableColumnPinningPosition,\n flexRender,\n} from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { freezeUptoExternalColumn, isInternalColumn, unfreezeAllExternalColumns } from '../../../useTableManager/util/columns';\nimport { Tooltip } from '../../../../../components/Tooltip/Tooltip';\nimport { SortIndicator, getSortAttributes } from './components/SortIndicator';\nimport {\n TableColumnAlignment,\n TableColumnMenu,\n TableColumnSortDirection,\n TableColumnWidth,\n TableFilterComparator,\n} from '../../../types';\nimport { Resizer } from './components/Resizer';\nimport { HeaderMenu } from './components/Menu';\nimport { getIsPinned, useSetInitialColumnSizing } from './util';\n\nexport type HeaderProps<TType = unknown> = {\n header: ReactTableHeader<TType, unknown>;\n scrollToIndex: (index: number) => void;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n const { header, scrollToIndex } = props;\n\n if (header.column.getIsGrouped()) {\n return null;\n }\n\n const { table } = header.getContext();\n\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const columnMeta = (header.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n\n const isGroup = !!header.subHeaders.length;\n const isPinned = getIsPinned(header);\n\n const canFilter = !header.isPlaceholder && header.column.getCanFilter() && !!table.options.enableColumnFilters;\n const canHide = !header.isPlaceholder && !isGroup && header.column.getCanHide();\n const canMeasureSize = !!table.getRowModel().rows.length;\n const canPin = !header.isPlaceholder && !isGroup && header.column.getCanPin();\n const canResize = !header.isPlaceholder && !isGroup && header.column.getCanResize();\n const canSort = !header.isPlaceholder && !isGroup && header.column.getCanSort();\n const canGoto = canSort && !header.isPlaceholder && !isGroup && tableMeta.rowGoto.isEnabled && !!header.column.getIsSorted();\n\n const hasMenu = !isInternalColumn(header.id) && (canHide || canGoto || canPin || canSort || !!columnMeta.menu);\n\n const sorting = table.getState().sorting;\n const filters = table.getState().columnFilters;\n const search = table.getState().globalFilter;\n\n // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n const memoedProps: MemoedHeaderProps = {\n align: columnMeta.align,\n canFilter,\n canHide,\n canGoto,\n canMeasureSize,\n canPin,\n canResize,\n canSort,\n className: cn('group/header', columnMeta.headerClassName),\n children: flexRender(header.column.columnDef.header, header.getContext()),\n colSpan: header.colSpan,\n customMenu: columnMeta.menu,\n defaultWidth: columnMeta.defaultWidth,\n hasMenu,\n id: header.id,\n isFiltered: header.column.getIsFiltered(),\n index: header.index,\n isGroup,\n isPinned,\n isPlaceholder: header.isPlaceholder,\n offset: header.column.getStart(isPinned),\n scrollToIndex,\n setRowActiveIndex: tableMeta.rowActive.setRowActiveIndex,\n setColumnSizing: table.setColumnSizing,\n tooltip: columnMeta.tooltip,\n width: table.getState().columnSizing[header.id],\n };\n\n if (header.isPlaceholder) {\n const nextHeader = header.headerGroup.headers[header.index + 1];\n memoedProps.className = cn('!bg-white before:!content-none', memoedProps.className, {\n 'after:!content-none': nextHeader?.isPlaceholder,\n });\n }\n\n if (canFilter) {\n memoedProps.onFilter = () => {\n header.column.setFilterValue({ comparator: TableFilterComparator.Contains });\n };\n }\n\n if (canGoto) {\n memoedProps.onGoto = ((query: string) => tableMeta.rowGoto.handleGoto?.(header.id, query, sorting, filters, search)) as (\n query: string\n ) => Promise<number>;\n }\n\n if (canHide) {\n memoedProps.onHide = header.column.getToggleVisibilityHandler();\n }\n\n if (canPin) {\n memoedProps.onPin = (index: number | undefined) => {\n // TODO: this can probably be moved to a feature hook\n table.setColumnPinning(pinningState => {\n return {\n ...pinningState,\n left:\n index === undefined\n ? unfreezeAllExternalColumns(pinningState.left)\n : freezeUptoExternalColumn(\n index,\n table.getAllLeafColumns().map(column => column.id)\n ),\n };\n });\n };\n }\n\n if (canResize) {\n memoedProps.isResizing = header.column.getIsResizing();\n memoedProps.onResize = header.getResizeHandler();\n }\n\n if (canSort) {\n const handleSortToggle = (sortDirection: TableColumnSortDirection | false) => {\n if (sortDirection === false) {\n header.column.clearSorting();\n } else {\n header.column.toggleSorting(sortDirection === 'desc');\n }\n };\n\n memoedProps.onSort = header.column.getToggleSortingHandler();\n memoedProps.onSortToggle = handleSortToggle;\n memoedProps.sortDirection = header.column.getIsSorted();\n }\n\n return <MemoedHeader key={header.id} {...memoedProps} />;\n}\n\nexport type MemoedHeaderProps = {\n align?: TableColumnAlignment;\n canFilter: boolean;\n canHide: boolean;\n canGoto: boolean;\n canMeasureSize: boolean;\n canPin: boolean;\n canResize: boolean;\n canSort: boolean;\n children: JSX.Element | React.ReactNode;\n className?: string;\n colSpan: number;\n customMenu?: TableColumnMenu;\n defaultWidth?: TableColumnWidth;\n hasMenu: boolean;\n id: string;\n index: number;\n isFiltered: boolean;\n isGroup: boolean;\n isPinned?: ReactTableColumnPinningPosition;\n isPlaceholder: boolean;\n isResizing?: boolean;\n offset?: number;\n onFilter?: () => void;\n onGoto?: (query: string) => Promise<number>;\n onHide?: (event: unknown) => void;\n onPin?: (index: number | undefined) => void;\n onResize?: (event: unknown) => void;\n onSort?: (event: unknown) => void;\n onSortToggle?: (sortDirection: TableColumnSortDirection | false) => void;\n scrollToIndex: (index: number) => void;\n setRowActiveIndex: (index: number) => void;\n setColumnSizing: any;\n sortDirection?: TableColumnSortDirection | false;\n tooltip?: string;\n width?: TableColumnWidth;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader(props: MemoedHeaderProps) {\n const {\n align,\n canFilter,\n canGoto,\n canHide,\n canMeasureSize,\n canPin,\n canResize,\n canSort,\n children,\n className,\n colSpan,\n customMenu,\n defaultWidth,\n hasMenu,\n id,\n index,\n isFiltered,\n isGroup,\n isPinned,\n isPlaceholder,\n isResizing,\n offset,\n onFilter: handleFilter,\n onGoto: handleGoto,\n onHide: handleHide,\n onPin: handlePin,\n onResize: handleResize,\n onSort: handleSort,\n onSortToggle: handleSortToggle,\n scrollToIndex,\n setRowActiveIndex,\n setColumnSizing,\n sortDirection,\n tooltip,\n width,\n } = props;\n const [ref, setRef] = React.useState<HTMLTableCellElement | null>(null);\n\n // save column width if none is set\n useSetInitialColumnSizing(id, defaultWidth, width, ref, canMeasureSize, setColumnSizing);\n\n // feature specific styles\n const style: React.CSSProperties = {};\n\n // column groups often span multiple columns\n if (colSpan > 1) {\n style.gridColumn = `span ${colSpan}`;\n }\n\n // pinned columns should be offset from either the left or right\n if (isPinned) {\n style[isPinned] = `${offset}px`;\n }\n\n return (\n <th\n {...getSortAttributes(canSort, handleSort, sortDirection)}\n className={className}\n data-cell-align={isGroup ? 'center' : align}\n data-cell-id={id}\n data-cell-pinned={isPinned ? isPinned : undefined}\n style={style}\n ref={setRef}>\n {isPlaceholder ? null : isInternalColumn(id) ? (\n children\n ) : (\n <Tooltip title={String(tooltip ?? children)} placement=\"top\">\n <span className=\"truncate\">{children}</span>\n </Tooltip>\n )}\n {sortDirection ? <SortIndicator direction={sortDirection} /> : null}\n {hasMenu ? (\n <HeaderMenu\n canFilter={canFilter}\n canGoto={canGoto}\n canHide={canHide}\n canPin={canPin}\n canSort={canSort}\n className={cn({\n 'ml-auto': align !== 'right',\n 'ml-0': align === 'right',\n })}\n customMenu={customMenu}\n index={index}\n isFiltered={isFiltered}\n onFilter={handleFilter}\n onGoto={handleGoto}\n onHide={handleHide}\n onPin={handlePin}\n onSortToggle={handleSortToggle}\n scrollToIndex={scrollToIndex}\n setRowActiveIndex={setRowActiveIndex}\n sortDirection={sortDirection}\n columnId={id}\n />\n ) : null}\n {canResize ? (\n <Resizer\n headerRef={ref}\n id={id}\n isResizing={isResizing as boolean}\n onResize={handleResize as (event: unknown) => void}\n setColumnSizing={setColumnSizing}\n width={width}\n />\n ) : null}\n </th>\n );\n});\n"],"names":["Header","props","header","scrollToIndex","column","getIsGrouped","table","getContext","tableMeta","options","meta","columnMeta","_header$column$column","columnDef","isGroup","subHeaders","length","isPinned","getIsPinned","canFilter","isPlaceholder","getCanFilter","enableColumnFilters","canHide","getCanHide","canMeasureSize","getRowModel","rows","canPin","getCanPin","canResize","getCanResize","canSort","getCanSort","canGoto","rowGoto","isEnabled","getIsSorted","hasMenu","isInternalColumn","id","menu","sorting","getState","filters","columnFilters","search","globalFilter","memoedProps","align","className","cn","headerClassName","children","flexRender","colSpan","customMenu","defaultWidth","isFiltered","getIsFiltered","index","offset","getStart","setRowActiveIndex","rowActive","setColumnSizing","tooltip","width","columnSizing","nextHeader","headerGroup","headers","onFilter","setFilterValue","comparator","TableFilterComparator","Contains","onGoto","query","_tableMeta$rowGoto$ha","_tableMeta$rowGoto","handleGoto","call","onHide","getToggleVisibilityHandler","onPin","setColumnPinning","pinningState","left","undefined","unfreezeAllExternalColumns","freezeUptoExternalColumn","getAllLeafColumns","map","isResizing","getIsResizing","onResize","getResizeHandler","handleSortToggle","sortDirection","clearSorting","toggleSorting","onSort","getToggleSortingHandler","onSortToggle","React","MemoedHeader","key","memo","handleFilter","handleHide","handlePin","handleResize","handleSort","ref","setRef","useState","useSetInitialColumnSizing","style","gridColumn","getSortAttributes","Tooltip","title","String","placement","SortIndicator","direction","HeaderMenu","columnId","Resizer","headerRef"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport {\n TableMeta as ReactTableMeta,\n ColumnMeta as ReactTableColumnMeta,\n Header as ReactTableHeader,\n ColumnPinningPosition as ReactTableColumnPinningPosition,\n flexRender,\n} from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { freezeUptoExternalColumn, isInternalColumn, unfreezeAllExternalColumns } from '../../../useTableManager/util/columns';\nimport { Tooltip } from '../../../../../components/Tooltip/Tooltip';\nimport { SortIndicator, getSortAttributes } from './components/SortIndicator';\nimport {\n TableColumnAlignment,\n TableColumnMenu,\n TableColumnSortDirection,\n TableColumnWidth,\n TableFilterComparator,\n} from '../../../types';\nimport { Resizer } from './components/Resizer';\nimport { HeaderMenu } from './components/Menu';\nimport { getIsPinned, useSetInitialColumnSizing } from './util';\n\nexport type HeaderProps<TType = unknown> = {\n header: ReactTableHeader<TType, unknown>;\n scrollToIndex: (index: number) => void;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n const { header, scrollToIndex } = props;\n\n if (header.column.getIsGrouped()) {\n return null;\n }\n\n const { table } = header.getContext();\n\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const columnMeta = (header.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n\n const isGroup = !!header.subHeaders.length;\n const isPinned = getIsPinned(header);\n\n const canFilter = !header.isPlaceholder && header.column.getCanFilter() && !!table.options.enableColumnFilters;\n const canHide = !header.isPlaceholder && !isGroup && header.column.getCanHide();\n const canMeasureSize = !!table.getRowModel().rows.length;\n const canPin = !header.isPlaceholder && !isGroup && header.column.getCanPin();\n const canResize = !header.isPlaceholder && !isGroup && header.column.getCanResize();\n const canSort = !header.isPlaceholder && !isGroup && header.column.getCanSort();\n const canGoto = canSort && !header.isPlaceholder && !isGroup && tableMeta.rowGoto.isEnabled && !!header.column.getIsSorted();\n\n const hasMenu = !isInternalColumn(header.id) && (canHide || canGoto || canPin || canSort || !!columnMeta.menu);\n\n const sorting = table.getState().sorting;\n const filters = table.getState().columnFilters;\n const search = table.getState().globalFilter;\n\n // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n const memoedProps: MemoedHeaderProps = {\n align: columnMeta.align,\n canFilter,\n canHide,\n canGoto,\n canMeasureSize,\n canPin,\n canResize,\n canSort,\n className: cn('group/header', columnMeta.headerClassName),\n children: flexRender(header.column.columnDef.header, header.getContext()),\n colSpan: header.colSpan,\n customMenu: columnMeta.menu,\n defaultWidth: columnMeta.defaultWidth,\n hasMenu,\n id: header.id,\n isFiltered: header.column.getIsFiltered(),\n index: header.index,\n isGroup,\n isPinned,\n isPlaceholder: header.isPlaceholder,\n offset: header.column.getStart(isPinned),\n scrollToIndex,\n setRowActiveIndex: tableMeta.rowActive.setRowActiveIndex,\n setColumnSizing: table.setColumnSizing,\n tooltip: columnMeta.tooltip,\n width: table.getState().columnSizing[header.id],\n };\n\n if (header.isPlaceholder) {\n const nextHeader = header.headerGroup.headers[header.index + 1];\n memoedProps.className = cn('!bg-white before:!content-none', memoedProps.className, {\n 'after:!content-none': nextHeader?.isPlaceholder,\n });\n }\n\n if (canFilter) {\n memoedProps.onFilter = () => {\n header.column.setFilterValue({ comparator: TableFilterComparator.Contains });\n };\n }\n\n if (canGoto) {\n memoedProps.onGoto = ((query: string) => tableMeta.rowGoto.handleGoto?.(header.id, query, sorting, filters, search)) as (\n query: string\n ) => Promise<number>;\n }\n\n if (canHide) {\n memoedProps.onHide = header.column.getToggleVisibilityHandler();\n }\n\n if (canPin) {\n memoedProps.onPin = (index: number | undefined) => {\n // TODO: this can probably be moved to a feature hook\n table.setColumnPinning(pinningState => {\n return {\n ...pinningState,\n left:\n index === undefined\n ? unfreezeAllExternalColumns(pinningState.left)\n : freezeUptoExternalColumn(\n index,\n table.getAllLeafColumns().map(column => column.id)\n ),\n };\n });\n };\n }\n\n if (canResize) {\n memoedProps.isResizing = header.column.getIsResizing();\n memoedProps.onResize = header.getResizeHandler();\n memoedProps.resetSize = header.column.resetSize;\n }\n\n if (canSort) {\n const handleSortToggle = (sortDirection: TableColumnSortDirection | false) => {\n if (sortDirection === false) {\n header.column.clearSorting();\n } else {\n header.column.toggleSorting(sortDirection === 'desc');\n }\n };\n\n memoedProps.onSort = header.column.getToggleSortingHandler();\n memoedProps.onSortToggle = handleSortToggle;\n memoedProps.sortDirection = header.column.getIsSorted();\n }\n\n return <MemoedHeader key={header.id} {...memoedProps} />;\n}\n\nexport type MemoedHeaderProps = {\n align?: TableColumnAlignment;\n canFilter: boolean;\n canHide: boolean;\n canGoto: boolean;\n canMeasureSize: boolean;\n canPin: boolean;\n canResize: boolean;\n canSort: boolean;\n children: JSX.Element | React.ReactNode;\n className?: string;\n colSpan: number;\n customMenu?: TableColumnMenu;\n defaultWidth?: TableColumnWidth;\n hasMenu: boolean;\n id: string;\n index: number;\n isFiltered: boolean;\n isGroup: boolean;\n isPinned?: ReactTableColumnPinningPosition;\n isPlaceholder: boolean;\n isResizing?: boolean;\n offset?: number;\n onFilter?: () => void;\n onGoto?: (query: string) => Promise<number>;\n onHide?: (event: unknown) => void;\n onPin?: (index: number | undefined) => void;\n onResize?: (event: unknown) => void;\n onSort?: (event: unknown) => void;\n onSortToggle?: (sortDirection: TableColumnSortDirection | false) => void;\n resetSize?: () => void;\n scrollToIndex: (index: number) => void;\n setRowActiveIndex: (index: number) => void;\n setColumnSizing: any;\n sortDirection?: TableColumnSortDirection | false;\n tooltip?: string;\n width?: TableColumnWidth;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader(props: MemoedHeaderProps) {\n const {\n align,\n canFilter,\n canGoto,\n canHide,\n canMeasureSize,\n canPin,\n canResize,\n canSort,\n children,\n className,\n colSpan,\n customMenu,\n defaultWidth,\n hasMenu,\n id,\n index,\n isFiltered,\n isGroup,\n isPinned,\n isPlaceholder,\n isResizing,\n offset,\n onFilter: handleFilter,\n onGoto: handleGoto,\n onHide: handleHide,\n onPin: handlePin,\n onResize: handleResize,\n onSort: handleSort,\n onSortToggle: handleSortToggle,\n resetSize: handleResetSize,\n scrollToIndex,\n setRowActiveIndex,\n setColumnSizing,\n sortDirection,\n tooltip,\n width,\n } = props;\n const [ref, setRef] = React.useState<HTMLTableCellElement | null>(null);\n\n // save column width if none is set\n useSetInitialColumnSizing(id, defaultWidth, width, ref, canMeasureSize, setColumnSizing);\n\n // feature specific styles\n const style: React.CSSProperties = {};\n\n // column groups often span multiple columns\n if (colSpan > 1) {\n style.gridColumn = `span ${colSpan}`;\n }\n\n // pinned columns should be offset from either the left or right\n if (isPinned) {\n style[isPinned] = `${offset}px`;\n }\n\n return (\n <th\n {...getSortAttributes(canSort, handleSort, sortDirection)}\n className={className}\n data-cell-align={isGroup ? 'center' : align}\n data-cell-id={id}\n data-cell-pinned={isPinned ? isPinned : undefined}\n style={style}\n ref={setRef}>\n {isPlaceholder ? null : isInternalColumn(id) ? (\n children\n ) : (\n <Tooltip title={String(tooltip ?? children)} placement=\"top\">\n <span className=\"truncate\">{children}</span>\n </Tooltip>\n )}\n {sortDirection ? <SortIndicator direction={sortDirection} /> : null}\n {hasMenu ? (\n <HeaderMenu\n canFilter={canFilter}\n canGoto={canGoto}\n canHide={canHide}\n canPin={canPin}\n canSort={canSort}\n className={cn({\n 'ml-auto': align !== 'right',\n 'ml-0': align === 'right',\n })}\n customMenu={customMenu}\n index={index}\n isFiltered={isFiltered}\n onFilter={handleFilter}\n onGoto={handleGoto}\n onHide={handleHide}\n onPin={handlePin}\n onSortToggle={handleSortToggle}\n scrollToIndex={scrollToIndex}\n setRowActiveIndex={setRowActiveIndex}\n sortDirection={sortDirection}\n columnId={id}\n />\n ) : null}\n {canResize ? (\n <Resizer\n headerRef={ref}\n id={id}\n isResizing={isResizing as boolean}\n onResize={handleResize as (event: unknown) => void}\n onResetSize={handleResetSize as () => void}\n setColumnSizing={setColumnSizing}\n width={width}\n />\n ) : null}\n </th>\n );\n});\n"],"names":["Header","props","header","scrollToIndex","column","getIsGrouped","table","getContext","tableMeta","options","meta","columnMeta","_header$column$column","columnDef","isGroup","subHeaders","length","isPinned","getIsPinned","canFilter","isPlaceholder","getCanFilter","enableColumnFilters","canHide","getCanHide","canMeasureSize","getRowModel","rows","canPin","getCanPin","canResize","getCanResize","canSort","getCanSort","canGoto","rowGoto","isEnabled","getIsSorted","hasMenu","isInternalColumn","id","menu","sorting","getState","filters","columnFilters","search","globalFilter","memoedProps","align","className","cn","headerClassName","children","flexRender","colSpan","customMenu","defaultWidth","isFiltered","getIsFiltered","index","offset","getStart","setRowActiveIndex","rowActive","setColumnSizing","tooltip","width","columnSizing","nextHeader","headerGroup","headers","onFilter","setFilterValue","comparator","TableFilterComparator","Contains","onGoto","query","_tableMeta$rowGoto$ha","_tableMeta$rowGoto","handleGoto","call","onHide","getToggleVisibilityHandler","onPin","setColumnPinning","pinningState","left","undefined","unfreezeAllExternalColumns","freezeUptoExternalColumn","getAllLeafColumns","map","isResizing","getIsResizing","onResize","getResizeHandler","resetSize","handleSortToggle","sortDirection","clearSorting","toggleSorting","onSort","getToggleSortingHandler","onSortToggle","React","MemoedHeader","key","memo","handleFilter","handleHide","handlePin","handleResize","handleSort","handleResetSize","ref","setRef","useState","useSetInitialColumnSizing","style","gridColumn","getSortAttributes","Tooltip","title","String","placement","SortIndicator","direction","HeaderMenu","columnId","Resizer","headerRef","onResetSize"],"mappings":"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"}
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/components/Resizer.js
CHANGED
@@ -8,6 +8,7 @@ function Resizer(props) {
|
|
8
8
|
headerRef,
|
9
9
|
id,
|
10
10
|
isResizing,
|
11
|
+
onResetSize,
|
11
12
|
onResize,
|
12
13
|
setColumnSizing,
|
13
14
|
width
|
@@ -22,16 +23,21 @@ function Resizer(props) {
|
|
22
23
|
};
|
23
24
|
// columns set to "grow" don't set a width, so if resize is being triggered on a grow column make sure to set a size first
|
24
25
|
const handleResize = event => {
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
[id]: headerRef.getBoundingClientRect().width
|
29
|
-
}));
|
30
|
-
setTimeout(() => {
|
31
|
-
onResize === null || onResize === void 0 ? void 0 : onResize(event);
|
32
|
-
}, 1);
|
26
|
+
// event.detail >= 2 means a user has clicked more than once quickly.
|
27
|
+
if (event.detail >= 2) {
|
28
|
+
onResetSize();
|
33
29
|
} else {
|
34
|
-
|
30
|
+
if (!Number.isInteger(width) && headerRef) {
|
31
|
+
setColumnSizing(sizes => ({
|
32
|
+
...sizes,
|
33
|
+
[id]: headerRef.getBoundingClientRect().width
|
34
|
+
}));
|
35
|
+
setTimeout(() => {
|
36
|
+
onResize === null || onResize === void 0 ? void 0 : onResize(event);
|
37
|
+
}, 1);
|
38
|
+
} else {
|
39
|
+
onResize === null || onResize === void 0 ? void 0 : onResize(event);
|
40
|
+
}
|
35
41
|
}
|
36
42
|
};
|
37
43
|
const handle = /*#__PURE__*/React__default.createElement("div", {
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/components/Resizer.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Resizer.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Header/components/Resizer.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Tooltip } from '../../../../../../components/Tooltip/Tooltip';\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { TableColumnWidth } from '../../../../types';\n\ntype ResizerProps = {\n headerRef: HTMLTableCellElement | null;\n id: string;\n isResizing: boolean;\n onResize: (event: unknown) => void;\n setColumnSizing: any;\n width?: TableColumnWidth;\n};\n\nexport function Resizer(props: ResizerProps) {\n const { headerRef, id, isResizing, onResize, setColumnSizing, width } = props;\n const { texts } = useLocalization();\n\n // this prevents sort handlers being activated\n const handleClick = event => {\n event.stopPropagation();\n event.preventDefault();\n };\n\n // columns set to \"grow\" don't set a width, so if resize is being triggered on a grow column make sure to set a size first\n const handleResize = event => {\n if (!Number.isInteger(width) && headerRef) {\n
|
1
|
+
{"version":3,"file":"Resizer.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Header/components/Resizer.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Tooltip } from '../../../../../../components/Tooltip/Tooltip';\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { TableColumnWidth } from '../../../../types';\n\ntype ResizerProps = {\n headerRef: HTMLTableCellElement | null;\n id: string;\n isResizing: boolean;\n onResize: (event: unknown) => void;\n onResetSize: () => void;\n setColumnSizing: any;\n width?: TableColumnWidth;\n};\n\nexport function Resizer(props: ResizerProps) {\n const { headerRef, id, isResizing, onResetSize, onResize, setColumnSizing, width } = props;\n const { texts } = useLocalization();\n\n // this prevents sort handlers being activated\n const handleClick = event => {\n event.stopPropagation();\n event.preventDefault();\n };\n\n // columns set to \"grow\" don't set a width, so if resize is being triggered on a grow column make sure to set a size first\n const handleResize = event => {\n // event.detail >= 2 means a user has clicked more than once quickly.\n if (event.detail >= 2) {\n onResetSize();\n } else {\n if (!Number.isInteger(width) && headerRef) {\n setColumnSizing(sizes => ({\n ...sizes,\n [id]: headerRef.getBoundingClientRect().width,\n }));\n setTimeout(() => {\n onResize?.(event);\n }, 1);\n } else {\n onResize?.(event);\n }\n }\n };\n\n const handle = (\n <div\n className={cn(\n 'invisible absolute right-0 top-0 z-10 -mr-2 flex h-full w-4 cursor-col-resize touch-none select-none justify-center rounded py-0.5',\n 'group-hover/header:visible',\n '[th:last-child>&]:!mr-0 [th:last-child>&]:w-2',\n {\n '!visible': isResizing,\n }\n )}\n onClick={handleClick}\n onMouseDown={handleResize}\n onTouchStart={handleResize}>\n <div\n className={cn('h-full w-1 rounded', {\n '!bg-blue-500': isResizing,\n 'bg-grey-500 hover:bg-grey-700': !isResizing,\n })}\n />\n </div>\n );\n\n if (isResizing) {\n return handle;\n }\n\n return (\n <Tooltip placement=\"top\" title={texts.table.columns.resize.tooltip}>\n {handle}\n </Tooltip>\n );\n}\n"],"names":["Resizer","props","headerRef","id","isResizing","onResetSize","onResize","setColumnSizing","width","texts","useLocalization","handleClick","event","stopPropagation","preventDefault","handleResize","detail","Number","isInteger","sizes","getBoundingClientRect","setTimeout","handle","React","className","cn","onClick","onMouseDown","onTouchStart","Tooltip","placement","title","table","columns","resize","tooltip"],"mappings":";;;;;SAgBgBA,OAAOA,CAACC,KAAmB;EACvC,MAAM;IAAEC,SAAS;IAAEC,EAAE;IAAEC,UAAU;IAAEC,WAAW;IAAEC,QAAQ;IAAEC,eAAe;IAAEC;GAAO,GAAGP,KAAK;EAC1F,MAAM;IAAEQ;GAAO,GAAGC,eAAe,EAAE;;EAGnC,MAAMC,WAAW,GAAGC,KAAK;IACrBA,KAAK,CAACC,eAAe,EAAE;IACvBD,KAAK,CAACE,cAAc,EAAE;GACzB;;EAGD,MAAMC,YAAY,GAAGH,KAAK;;IAEtB,IAAIA,KAAK,CAACI,MAAM,IAAI,CAAC,EAAE;MACnBX,WAAW,EAAE;KAChB,MAAM;MACH,IAAI,CAACY,MAAM,CAACC,SAAS,CAACV,KAAK,CAAC,IAAIN,SAAS,EAAE;QACvCK,eAAe,CAACY,KAAK,KAAK;UACtB,GAAGA,KAAK;UACR,CAAChB,EAAE,GAAGD,SAAS,CAACkB,qBAAqB,EAAE,CAACZ;SAC3C,CAAC,CAAC;QACHa,UAAU,CAAC;UACPf,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGM,KAAK,CAAC;SACpB,EAAE,CAAC,CAAC;OACR,MAAM;QACHN,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGM,KAAK,CAAC;;;GAG5B;EAED,MAAMU,MAAM,gBACRC;IACIC,SAAS,EAAEC,EAAE,CACT,oIAAoI,EACpI,4BAA4B,EAC5B,+CAA+C,EAC/C;MACI,UAAU,EAAErB;KACf,CACJ;IACDsB,OAAO,EAAEf,WAAW;IACpBgB,WAAW,EAAEZ,YAAY;IACzBa,YAAY,EAAEb;kBACdQ;IACIC,SAAS,EAAEC,EAAE,CAAC,oBAAoB,EAAE;MAChC,cAAc,EAAErB,UAAU;MAC1B,+BAA+B,EAAE,CAACA;KACrC;IACH,CAET;EAED,IAAIA,UAAU,EAAE;IACZ,OAAOkB,MAAM;;EAGjB,oBACIC,6BAACM,OAAO;IAACC,SAAS,EAAC,KAAK;IAACC,KAAK,EAAEtB,KAAK,CAACuB,KAAK,CAACC,OAAO,CAACC,MAAM,CAACC;KACtDb,MAAM,CACD;AAElB;;;;"}
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js
CHANGED
@@ -63,7 +63,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
|
|
63
63
|
attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;
|
64
64
|
}
|
65
65
|
// row selection
|
66
|
-
if (
|
66
|
+
if (row.getCanSelect()) {
|
67
67
|
attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;
|
68
68
|
}
|
69
69
|
// row expansion
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DisplayRow.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Cell } from '../../Columns/Cell/Cell';\nimport { TableRowRendererProps } from '../../../types';\nimport { TableRowWithMetaData } from '../../../../types';\nimport { isElementInteractive } from '../../../../../../utils/dom';\nimport { useDropTarget } from '../../../../../../utils/hooks/useDropTarget';\n\nexport type DisplayRowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> & TableRowRendererProps<TType>;\n\nexport const DisplayRow = React.memo(function DisplayRow<TType = unknown>(props: DisplayRowProps<TType>) {\n const { children, cellRenderer: CellRenderer, index, measureRow, row, table, ...otherAttributes } = props;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const attributes: any = {\n ...otherAttributes,\n 'data-row-id': row.id,\n 'data-row-index': index,\n tabIndex: -1,\n };\n\n const handleClick = React.useCallback(\n (event: React.MouseEvent<HTMLTableRowElement>) => {\n const clickedElement = event.target as HTMLElement;\n\n if (!event.currentTarget?.contains(event.target as HTMLElement) || isElementInteractive(clickedElement)) {\n return;\n }\n\n tableMeta.rowClick.handleClick(event, row.original);\n },\n [row.original]\n );\n const handleClickCapture = React.useCallback(() => {\n tableMeta.rowActive.setRowActiveIndex(index);\n }, [index]);\n\n // row active\n if (tableMeta.rowActive.isEnabled) {\n attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;\n // we use capture because it let's us picks up clicks on components inside the row, e.g. checkboxes\n attributes.onClickCapture = handleClickCapture;\n }\n\n // row click\n if (tableMeta.rowClick.isEnabled(row.original)) {\n attributes.onClick = handleClick;\n }\n\n // row drag\n if (tableMeta.rowDrag.isEnabled) {\n attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];\n }\n\n // row drop\n const [isDraggedOver, dropTargetProps] = useDropTarget(event => tableMeta.rowDrop.handleDrop?.(event, row.original));\n\n if (tableMeta.rowDrop.isEnabled) {\n attributes.onDragEnter = dropTargetProps?.onDragEnter;\n attributes.onDragLeave = dropTargetProps?.onDragLeave;\n attributes.onDragOver = dropTargetProps?.onDragOver;\n attributes.onDrop = dropTargetProps?.onDrop;\n attributes['data-row-dragged-over'] = isDraggedOver;\n }\n\n // row grouping\n if (table.options.enableGrouping) {\n attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;\n }\n\n // row selection\n if (table.options.enableRowSelection) {\n attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;\n }\n\n // row expansion\n let expandedRow;\n\n if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {\n attributes['data-row-expanded'] = true;\n expandedRow = tableMeta.rowExpansion.rowExpansionRenderer?.(row.original)?.();\n }\n\n const rowMeta = (row.original as TableRowWithMetaData<TType>)._meta;\n\n if (rowMeta) {\n if (rowMeta.layout) {\n attributes['data-row-meta-layout'] = rowMeta.layout;\n }\n }\n\n const ref = React.useRef<HTMLTableRowElement>(null);\n const expansionRef = React.useRef<HTMLTableRowElement>(null);\n const isExpanded = !!attributes['data-row-expanded'];\n\n useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);\n\n const className = cn('group/row', {\n 'hover:cursor-pointer': typeof attributes.onClick === 'function',\n });\n\n return (\n <>\n <tr {...attributes} className={className} ref={ref}>\n {children}\n {row.getVisibleCells().map((cell, cellIndex) => (\n <Cell key={cell.id} cell={cell} index={cellIndex} renderer={CellRenderer} />\n ))}\n </tr>\n {expandedRow ? (\n <tr data-row-parent-id={row.id} ref={expansionRef}>\n <td className=\"col-span-full\">{expandedRow}</td>\n </tr>\n ) : null}\n </>\n );\n}) as <TType = unknown>(props: TableRowRendererProps<TType>) => JSX.Element;\n\nfunction useSetVirtualisedRowHeight(\n measureRow: (size: number, expansionHeight?: number) => void,\n rowEl: HTMLTableRowElement | null,\n expansionEl: HTMLTableRowElement | null,\n isExpanded: boolean\n) {\n React.useEffect(() => {\n if (rowEl) {\n const height = rowEl.getBoundingClientRect().height;\n\n if (isExpanded && expansionEl) {\n measureRow(height, expansionEl.getBoundingClientRect().height);\n } else {\n measureRow(height);\n }\n }\n }, [isExpanded, rowEl, expansionEl]);\n}\n"],"names":["DisplayRow","React","memo","props","children","cellRenderer","CellRenderer","index","measureRow","row","table","otherAttributes","tableMeta","options","meta","attributes","id","tabIndex","handleClick","useCallback","event","clickedElement","target","_event$currentTarget","currentTarget","contains","isElementInteractive","rowClick","original","handleClickCapture","rowActive","setRowActiveIndex","isEnabled","rowActiveIndex","undefined","onClickCapture","onClick","rowDrag","dragging","isDraggedOver","dropTargetProps","useDropTarget","_tableMeta$rowDrop$ha","_tableMeta$rowDrop","rowDrop","handleDrop","call","onDragEnter","onDragLeave","onDragOver","onDrop","enableGrouping","getIsGrouped","enableRowSelection","getIsSelected","getIsAllSubRowsSelected","expandedRow","rowExpansion","getIsExpanded","_tableMeta$rowExpansi","_tableMeta$rowExpansi2","_tableMeta$rowExpansi3","rowExpansionRenderer","rowMeta","_meta","layout","ref","useRef","expansionRef","isExpanded","useSetVirtualisedRowHeight","current","className","cn","getVisibleCells","map","cell","cellIndex","Cell","key","renderer","rowEl","expansionEl","useEffect","height","getBoundingClientRect"],"mappings":";;;;;;MAWaA,UAAU,gBAAGC,cAAK,CAACC,IAAI,CAAC,SAASF,UAAUA,CAAkBG,KAA6B;EACnG,MAAM;IAAEC,QAAQ;IAAEC,YAAY,EAAEC,YAAY;IAAEC,KAAK;IAAEC,UAAU;IAAEC,GAAG;IAAEC,KAAK;IAAE,GAAGC;GAAiB,GAAGR,KAAK;EACzG,MAAMS,SAAS,GAAGF,KAAK,CAACG,OAAO,CAACC,IAA6B;EAE7D,MAAMC,UAAU,GAAQ;IACpB,GAAGJ,eAAe;IAClB,aAAa,EAAEF,GAAG,CAACO,EAAE;IACrB,gBAAgB,EAAET,KAAK;IACvBU,QAAQ,EAAE,CAAC;GACd;EAED,MAAMC,WAAW,GAAGjB,cAAK,CAACkB,WAAW,CAChCC,KAA4C;;IACzC,MAAMC,cAAc,GAAGD,KAAK,CAACE,MAAqB;IAElD,IAAI,GAAAC,oBAAA,GAACH,KAAK,CAACI,aAAa,cAAAD,oBAAA,eAAnBA,oBAAA,CAAqBE,QAAQ,CAACL,KAAK,CAACE,MAAqB,CAAC,KAAII,oBAAoB,CAACL,cAAc,CAAC,EAAE;MACrG;;IAGJT,SAAS,CAACe,QAAQ,CAACT,WAAW,CAACE,KAAK,EAAEX,GAAG,CAACmB,QAAQ,CAAC;GACtD,EACD,CAACnB,GAAG,CAACmB,QAAQ,CAAC,CACjB;EACD,MAAMC,kBAAkB,GAAG5B,cAAK,CAACkB,WAAW,CAAC;IACzCP,SAAS,CAACkB,SAAS,CAACC,iBAAiB,CAACxB,KAAK,CAAC;GAC/C,EAAE,CAACA,KAAK,CAAC,CAAC;;EAGX,IAAIK,SAAS,CAACkB,SAAS,CAACE,SAAS,EAAE;IAC/BjB,UAAU,CAAC,iBAAiB,CAAC,GAAGH,SAAS,CAACkB,SAAS,CAACG,cAAc,KAAK1B,KAAK,GAAG,IAAI,GAAG2B,SAAS;;IAE/FnB,UAAU,CAACoB,cAAc,GAAGN,kBAAkB;;;EAIlD,IAAIjB,SAAS,CAACe,QAAQ,CAACK,SAAS,CAACvB,GAAG,CAACmB,QAAQ,CAAC,EAAE;IAC5Cb,UAAU,CAACqB,OAAO,GAAGlB,WAAW;;;EAIpC,IAAIN,SAAS,CAACyB,OAAO,CAACL,SAAS,EAAE;IAC7BjB,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,CAACH,SAAS,CAACyB,OAAO,CAACC,QAAQ,CAAC7B,GAAG,CAACO,EAAE,CAAC;;;EAIrE,MAAM,CAACuB,aAAa,EAAEC,eAAe,CAAC,GAAGC,aAAa,CAACrB,KAAK;IAAA,IAAAsB,qBAAA,EAAAC,kBAAA;IAAA,QAAAD,qBAAA,GAAI,CAAAC,kBAAA,GAAA/B,SAAS,CAACgC,OAAO,EAACC,UAAU,cAAAH,qBAAA,uBAA5BA,qBAAA,CAAAI,IAAA,CAAAH,kBAAA,EAA+BvB,KAAK,EAAEX,GAAG,CAACmB,QAAQ,CAAC;IAAC;EAEpH,IAAIhB,SAAS,CAACgC,OAAO,CAACZ,SAAS,EAAE;IAC7BjB,UAAU,CAACgC,WAAW,GAAGP,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEO,WAAW;IACrDhC,UAAU,CAACiC,WAAW,GAAGR,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEQ,WAAW;IACrDjC,UAAU,CAACkC,UAAU,GAAGT,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAES,UAAU;IACnDlC,UAAU,CAACmC,MAAM,GAAGV,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEU,MAAM;IAC3CnC,UAAU,CAAC,uBAAuB,CAAC,GAAGwB,aAAa;;;EAIvD,IAAI7B,KAAK,CAACG,OAAO,CAACsC,cAAc,EAAE;IAC9BpC,UAAU,CAAC,gBAAgB,CAAC,GAAGN,GAAG,CAAC2C,YAAY,EAAE,GAAG,IAAI,GAAGlB,SAAS;;;EAIxE,IAAIxB,KAAK,CAACG,OAAO,CAACwC,kBAAkB,EAAE;IAClCtC,UAAU,CAAC,mBAAmB,CAAC,GAAGN,GAAG,CAAC6C,aAAa,EAAE,IAAI7C,GAAG,CAAC8C,uBAAuB,EAAE,GAAG,IAAI,GAAGrB,SAAS;;;EAI7G,IAAIsB,WAAW;EAEf,IAAI5C,SAAS,CAAC6C,YAAY,CAACzB,SAAS,IAAIvB,GAAG,CAACiD,aAAa,EAAE,EAAE;IAAA,IAAAC,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA;IACzD9C,UAAU,CAAC,mBAAmB,CAAC,GAAG,IAAI;IACtCyC,WAAW,IAAAG,qBAAA,GAAG,CAAAC,sBAAA,GAAAhD,SAAS,CAAC6C,YAAY,EAACK,oBAAoB,cAAAH,qBAAA,wBAAAE,sBAAA,GAA3CF,qBAAA,CAAAb,IAAA,CAAAc,sBAAA,EAA8CnD,GAAG,CAACmB,QAAQ,CAAC,cAAAiC,sBAAA,uBAA3DA,sBAAA,EAA+D;;EAGjF,MAAME,OAAO,GAAItD,GAAG,CAACmB,QAAwC,CAACoC,KAAK;EAEnE,IAAID,OAAO,EAAE;IACT,IAAIA,OAAO,CAACE,MAAM,EAAE;MAChBlD,UAAU,CAAC,sBAAsB,CAAC,GAAGgD,OAAO,CAACE,MAAM;;;EAI3D,MAAMC,GAAG,GAAGjE,cAAK,CAACkE,MAAM,CAAsB,IAAI,CAAC;EACnD,MAAMC,YAAY,GAAGnE,cAAK,CAACkE,MAAM,CAAsB,IAAI,CAAC;EAC5D,MAAME,UAAU,GAAG,CAAC,CAACtD,UAAU,CAAC,mBAAmB,CAAC;EAEpDuD,0BAA0B,CAAC9D,UAAU,EAAE0D,GAAG,CAACK,OAAO,EAAEH,YAAY,CAACG,OAAO,EAAEF,UAAU,CAAC;EAErF,MAAMG,SAAS,GAAGC,EAAE,CAAC,WAAW,EAAE;IAC9B,sBAAsB,EAAE,OAAO1D,UAAU,CAACqB,OAAO,KAAK;GACzD,CAAC;EAEF,oBACInC,yEACIA,qDAAQc,UAAU;IAAEyD,SAAS,EAAEA,SAAS;IAAEN,GAAG,EAAEA;MAC1C9D,QAAQ,EACRK,GAAG,CAACiE,eAAe,EAAE,CAACC,GAAG,CAAC,CAACC,IAAI,EAAEC,SAAS,oBACvC5E,6BAAC6E,IAAI;IAACC,GAAG,EAAEH,IAAI,CAAC5D,EAAE;IAAE4D,IAAI,EAAEA,IAAI;IAAErE,KAAK,EAAEsE,SAAS;IAAEG,QAAQ,EAAE1E;IAAgB,CAC/E,CAAC,CACD,EACJkD,WAAW,kBACRvD;0BAAwBQ,GAAG,CAACO,EAAE;IAAEkD,GAAG,EAAEE;kBACjCnE;IAAIuE,SAAS,EAAC;KAAiBhB,WAAW,CAAM,CAC/C,IACL,IAAI,CACT;AAEX,CAAC;AAED,SAASc,0BAA0BA,CAC/B9D,UAA4D,EAC5DyE,KAAiC,EACjCC,WAAuC,EACvCb,UAAmB;EAEnBpE,cAAK,CAACkF,SAAS,CAAC;IACZ,IAAIF,KAAK,EAAE;MACP,MAAMG,MAAM,GAAGH,KAAK,CAACI,qBAAqB,EAAE,CAACD,MAAM;MAEnD,IAAIf,UAAU,IAAIa,WAAW,EAAE;QAC3B1E,UAAU,CAAC4E,MAAM,EAAEF,WAAW,CAACG,qBAAqB,EAAE,CAACD,MAAM,CAAC;OACjE,MAAM;QACH5E,UAAU,CAAC4E,MAAM,CAAC;;;GAG7B,EAAE,CAACf,UAAU,EAAEY,KAAK,EAAEC,WAAW,CAAC,CAAC;AACxC;;;;"}
|
1
|
+
{"version":3,"file":"DisplayRow.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Cell } from '../../Columns/Cell/Cell';\nimport { TableRowRendererProps } from '../../../types';\nimport { TableRowWithMetaData } from '../../../../types';\nimport { isElementInteractive } from '../../../../../../utils/dom';\nimport { useDropTarget } from '../../../../../../utils/hooks/useDropTarget';\n\nexport type DisplayRowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> & TableRowRendererProps<TType>;\n\nexport const DisplayRow = React.memo(function DisplayRow<TType = unknown>(props: DisplayRowProps<TType>) {\n const { children, cellRenderer: CellRenderer, index, measureRow, row, table, ...otherAttributes } = props;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const attributes: any = {\n ...otherAttributes,\n 'data-row-id': row.id,\n 'data-row-index': index,\n tabIndex: -1,\n };\n\n const handleClick = React.useCallback(\n (event: React.MouseEvent<HTMLTableRowElement>) => {\n const clickedElement = event.target as HTMLElement;\n\n if (!event.currentTarget?.contains(event.target as HTMLElement) || isElementInteractive(clickedElement)) {\n return;\n }\n\n tableMeta.rowClick.handleClick(event, row.original);\n },\n [row.original]\n );\n const handleClickCapture = React.useCallback(() => {\n tableMeta.rowActive.setRowActiveIndex(index);\n }, [index]);\n\n // row active\n if (tableMeta.rowActive.isEnabled) {\n attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;\n // we use capture because it let's us picks up clicks on components inside the row, e.g. checkboxes\n attributes.onClickCapture = handleClickCapture;\n }\n\n // row click\n if (tableMeta.rowClick.isEnabled(row.original)) {\n attributes.onClick = handleClick;\n }\n\n // row drag\n if (tableMeta.rowDrag.isEnabled) {\n attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];\n }\n\n // row drop\n const [isDraggedOver, dropTargetProps] = useDropTarget(event => tableMeta.rowDrop.handleDrop?.(event, row.original));\n\n if (tableMeta.rowDrop.isEnabled) {\n attributes.onDragEnter = dropTargetProps?.onDragEnter;\n attributes.onDragLeave = dropTargetProps?.onDragLeave;\n attributes.onDragOver = dropTargetProps?.onDragOver;\n attributes.onDrop = dropTargetProps?.onDrop;\n attributes['data-row-dragged-over'] = isDraggedOver;\n }\n\n // row grouping\n if (table.options.enableGrouping) {\n attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;\n }\n\n // row selection\n if (row.getCanSelect()) {\n attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;\n }\n\n // row expansion\n let expandedRow;\n\n if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {\n attributes['data-row-expanded'] = true;\n expandedRow = tableMeta.rowExpansion.rowExpansionRenderer?.(row.original)?.();\n }\n\n const rowMeta = (row.original as TableRowWithMetaData<TType>)._meta;\n\n if (rowMeta) {\n if (rowMeta.layout) {\n attributes['data-row-meta-layout'] = rowMeta.layout;\n }\n }\n\n const ref = React.useRef<HTMLTableRowElement>(null);\n const expansionRef = React.useRef<HTMLTableRowElement>(null);\n const isExpanded = !!attributes['data-row-expanded'];\n\n useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);\n\n const className = cn('group/row', {\n 'hover:cursor-pointer': typeof attributes.onClick === 'function',\n });\n\n return (\n <>\n <tr {...attributes} className={className} ref={ref}>\n {children}\n {row.getVisibleCells().map((cell, cellIndex) => (\n <Cell key={cell.id} cell={cell} index={cellIndex} renderer={CellRenderer} />\n ))}\n </tr>\n {expandedRow ? (\n <tr data-row-parent-id={row.id} ref={expansionRef}>\n <td className=\"col-span-full\">{expandedRow}</td>\n </tr>\n ) : null}\n </>\n );\n}) as <TType = unknown>(props: TableRowRendererProps<TType>) => JSX.Element;\n\nfunction useSetVirtualisedRowHeight(\n measureRow: (size: number, expansionHeight?: number) => void,\n rowEl: HTMLTableRowElement | null,\n expansionEl: HTMLTableRowElement | null,\n isExpanded: boolean\n) {\n React.useEffect(() => {\n if (rowEl) {\n const height = rowEl.getBoundingClientRect().height;\n\n if (isExpanded && expansionEl) {\n measureRow(height, expansionEl.getBoundingClientRect().height);\n } else {\n measureRow(height);\n }\n }\n }, [isExpanded, rowEl, expansionEl]);\n}\n"],"names":["DisplayRow","React","memo","props","children","cellRenderer","CellRenderer","index","measureRow","row","table","otherAttributes","tableMeta","options","meta","attributes","id","tabIndex","handleClick","useCallback","event","clickedElement","target","_event$currentTarget","currentTarget","contains","isElementInteractive","rowClick","original","handleClickCapture","rowActive","setRowActiveIndex","isEnabled","rowActiveIndex","undefined","onClickCapture","onClick","rowDrag","dragging","isDraggedOver","dropTargetProps","useDropTarget","_tableMeta$rowDrop$ha","_tableMeta$rowDrop","rowDrop","handleDrop","call","onDragEnter","onDragLeave","onDragOver","onDrop","enableGrouping","getIsGrouped","getCanSelect","getIsSelected","getIsAllSubRowsSelected","expandedRow","rowExpansion","getIsExpanded","_tableMeta$rowExpansi","_tableMeta$rowExpansi2","_tableMeta$rowExpansi3","rowExpansionRenderer","rowMeta","_meta","layout","ref","useRef","expansionRef","isExpanded","useSetVirtualisedRowHeight","current","className","cn","getVisibleCells","map","cell","cellIndex","Cell","key","renderer","rowEl","expansionEl","useEffect","height","getBoundingClientRect"],"mappings":";;;;;;MAWaA,UAAU,gBAAGC,cAAK,CAACC,IAAI,CAAC,SAASF,UAAUA,CAAkBG,KAA6B;EACnG,MAAM;IAAEC,QAAQ;IAAEC,YAAY,EAAEC,YAAY;IAAEC,KAAK;IAAEC,UAAU;IAAEC,GAAG;IAAEC,KAAK;IAAE,GAAGC;GAAiB,GAAGR,KAAK;EACzG,MAAMS,SAAS,GAAGF,KAAK,CAACG,OAAO,CAACC,IAA6B;EAE7D,MAAMC,UAAU,GAAQ;IACpB,GAAGJ,eAAe;IAClB,aAAa,EAAEF,GAAG,CAACO,EAAE;IACrB,gBAAgB,EAAET,KAAK;IACvBU,QAAQ,EAAE,CAAC;GACd;EAED,MAAMC,WAAW,GAAGjB,cAAK,CAACkB,WAAW,CAChCC,KAA4C;;IACzC,MAAMC,cAAc,GAAGD,KAAK,CAACE,MAAqB;IAElD,IAAI,GAAAC,oBAAA,GAACH,KAAK,CAACI,aAAa,cAAAD,oBAAA,eAAnBA,oBAAA,CAAqBE,QAAQ,CAACL,KAAK,CAACE,MAAqB,CAAC,KAAII,oBAAoB,CAACL,cAAc,CAAC,EAAE;MACrG;;IAGJT,SAAS,CAACe,QAAQ,CAACT,WAAW,CAACE,KAAK,EAAEX,GAAG,CAACmB,QAAQ,CAAC;GACtD,EACD,CAACnB,GAAG,CAACmB,QAAQ,CAAC,CACjB;EACD,MAAMC,kBAAkB,GAAG5B,cAAK,CAACkB,WAAW,CAAC;IACzCP,SAAS,CAACkB,SAAS,CAACC,iBAAiB,CAACxB,KAAK,CAAC;GAC/C,EAAE,CAACA,KAAK,CAAC,CAAC;;EAGX,IAAIK,SAAS,CAACkB,SAAS,CAACE,SAAS,EAAE;IAC/BjB,UAAU,CAAC,iBAAiB,CAAC,GAAGH,SAAS,CAACkB,SAAS,CAACG,cAAc,KAAK1B,KAAK,GAAG,IAAI,GAAG2B,SAAS;;IAE/FnB,UAAU,CAACoB,cAAc,GAAGN,kBAAkB;;;EAIlD,IAAIjB,SAAS,CAACe,QAAQ,CAACK,SAAS,CAACvB,GAAG,CAACmB,QAAQ,CAAC,EAAE;IAC5Cb,UAAU,CAACqB,OAAO,GAAGlB,WAAW;;;EAIpC,IAAIN,SAAS,CAACyB,OAAO,CAACL,SAAS,EAAE;IAC7BjB,UAAU,CAAC,cAAc,CAAC,GAAG,CAAC,CAACH,SAAS,CAACyB,OAAO,CAACC,QAAQ,CAAC7B,GAAG,CAACO,EAAE,CAAC;;;EAIrE,MAAM,CAACuB,aAAa,EAAEC,eAAe,CAAC,GAAGC,aAAa,CAACrB,KAAK;IAAA,IAAAsB,qBAAA,EAAAC,kBAAA;IAAA,QAAAD,qBAAA,GAAI,CAAAC,kBAAA,GAAA/B,SAAS,CAACgC,OAAO,EAACC,UAAU,cAAAH,qBAAA,uBAA5BA,qBAAA,CAAAI,IAAA,CAAAH,kBAAA,EAA+BvB,KAAK,EAAEX,GAAG,CAACmB,QAAQ,CAAC;IAAC;EAEpH,IAAIhB,SAAS,CAACgC,OAAO,CAACZ,SAAS,EAAE;IAC7BjB,UAAU,CAACgC,WAAW,GAAGP,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEO,WAAW;IACrDhC,UAAU,CAACiC,WAAW,GAAGR,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEQ,WAAW;IACrDjC,UAAU,CAACkC,UAAU,GAAGT,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAES,UAAU;IACnDlC,UAAU,CAACmC,MAAM,GAAGV,eAAe,aAAfA,eAAe,uBAAfA,eAAe,CAAEU,MAAM;IAC3CnC,UAAU,CAAC,uBAAuB,CAAC,GAAGwB,aAAa;;;EAIvD,IAAI7B,KAAK,CAACG,OAAO,CAACsC,cAAc,EAAE;IAC9BpC,UAAU,CAAC,gBAAgB,CAAC,GAAGN,GAAG,CAAC2C,YAAY,EAAE,GAAG,IAAI,GAAGlB,SAAS;;;EAIxE,IAAIzB,GAAG,CAAC4C,YAAY,EAAE,EAAE;IACpBtC,UAAU,CAAC,mBAAmB,CAAC,GAAGN,GAAG,CAAC6C,aAAa,EAAE,IAAI7C,GAAG,CAAC8C,uBAAuB,EAAE,GAAG,IAAI,GAAGrB,SAAS;;;EAI7G,IAAIsB,WAAW;EAEf,IAAI5C,SAAS,CAAC6C,YAAY,CAACzB,SAAS,IAAIvB,GAAG,CAACiD,aAAa,EAAE,EAAE;IAAA,IAAAC,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA;IACzD9C,UAAU,CAAC,mBAAmB,CAAC,GAAG,IAAI;IACtCyC,WAAW,IAAAG,qBAAA,GAAG,CAAAC,sBAAA,GAAAhD,SAAS,CAAC6C,YAAY,EAACK,oBAAoB,cAAAH,qBAAA,wBAAAE,sBAAA,GAA3CF,qBAAA,CAAAb,IAAA,CAAAc,sBAAA,EAA8CnD,GAAG,CAACmB,QAAQ,CAAC,cAAAiC,sBAAA,uBAA3DA,sBAAA,EAA+D;;EAGjF,MAAME,OAAO,GAAItD,GAAG,CAACmB,QAAwC,CAACoC,KAAK;EAEnE,IAAID,OAAO,EAAE;IACT,IAAIA,OAAO,CAACE,MAAM,EAAE;MAChBlD,UAAU,CAAC,sBAAsB,CAAC,GAAGgD,OAAO,CAACE,MAAM;;;EAI3D,MAAMC,GAAG,GAAGjE,cAAK,CAACkE,MAAM,CAAsB,IAAI,CAAC;EACnD,MAAMC,YAAY,GAAGnE,cAAK,CAACkE,MAAM,CAAsB,IAAI,CAAC;EAC5D,MAAME,UAAU,GAAG,CAAC,CAACtD,UAAU,CAAC,mBAAmB,CAAC;EAEpDuD,0BAA0B,CAAC9D,UAAU,EAAE0D,GAAG,CAACK,OAAO,EAAEH,YAAY,CAACG,OAAO,EAAEF,UAAU,CAAC;EAErF,MAAMG,SAAS,GAAGC,EAAE,CAAC,WAAW,EAAE;IAC9B,sBAAsB,EAAE,OAAO1D,UAAU,CAACqB,OAAO,KAAK;GACzD,CAAC;EAEF,oBACInC,yEACIA,qDAAQc,UAAU;IAAEyD,SAAS,EAAEA,SAAS;IAAEN,GAAG,EAAEA;MAC1C9D,QAAQ,EACRK,GAAG,CAACiE,eAAe,EAAE,CAACC,GAAG,CAAC,CAACC,IAAI,EAAEC,SAAS,oBACvC5E,6BAAC6E,IAAI;IAACC,GAAG,EAAEH,IAAI,CAAC5D,EAAE;IAAE4D,IAAI,EAAEA,IAAI;IAAErE,KAAK,EAAEsE,SAAS;IAAEG,QAAQ,EAAE1E;IAAgB,CAC/E,CAAC,CACD,EACJkD,WAAW,kBACRvD;0BAAwBQ,GAAG,CAACO,EAAE;IAAEkD,GAAG,EAAEE;kBACjCnE;IAAIuE,SAAS,EAAC;KAAiBhB,WAAW,CAAM,CAC/C,IACL,IAAI,CACT;AAEX,CAAC;AAED,SAASc,0BAA0BA,CAC/B9D,UAA4D,EAC5DyE,KAAiC,EACjCC,WAAuC,EACvCb,UAAmB;EAEnBpE,cAAK,CAACkF,SAAS,CAAC;IACZ,IAAIF,KAAK,EAAE;MACP,MAAMG,MAAM,GAAGH,KAAK,CAACI,qBAAqB,EAAE,CAACD,MAAM;MAEnD,IAAIf,UAAU,IAAIa,WAAW,EAAE;QAC3B1E,UAAU,CAAC4E,MAAM,EAAEF,WAAW,CAACG,qBAAqB,EAAE,CAACD,MAAM,CAAC;OACjE,MAAM;QACH5E,UAAU,CAAC4E,MAAM,CAAC;;;GAG7B,EAAE,CAACf,UAAU,EAAEY,KAAK,EAAEC,WAAW,CAAC,CAAC;AACxC;;;;"}
|
@@ -4,7 +4,7 @@ import { ROW_HEIGHT_ESTIMATES } from '../util/rows.js';
|
|
4
4
|
import { Row } from '../components/Row/Row.js';
|
5
5
|
|
6
6
|
function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
|
7
|
-
var _table$getState$group,
|
7
|
+
var _table$getState$group, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref, _virtualItems;
|
8
8
|
const tableMeta = table.options.meta;
|
9
9
|
const rows = table.getRowModel().rows;
|
10
10
|
const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
|
@@ -26,8 +26,6 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
|
|
26
26
|
getScrollElement: () => tableRef.current,
|
27
27
|
overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
|
28
28
|
rangeExtractor,
|
29
|
-
// correctly sets top and bottom spacing for the scroll container - very sensitive, don't change
|
30
|
-
scrollMargin: isTableRowGrouped ? 0 : scrollPaddingStart,
|
31
29
|
// correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list
|
32
30
|
scrollPaddingStart,
|
33
31
|
scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd
|
@@ -55,8 +53,9 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
|
|
55
53
|
}, [virtualItems.length, tableRef.current, totalSize, rows.length]);
|
56
54
|
// use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
|
57
55
|
const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;
|
56
|
+
const startValue = isTableRowGrouped ? ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size) : (_virtualItems$padding3 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding3 === void 0 ? void 0 : _virtualItems$padding3.start;
|
58
57
|
// styling for offsetting rows - this "is" the virtualisation
|
59
|
-
const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0,
|
58
|
+
const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, startValue !== null && startValue !== void 0 ? startValue : 0), Math.max(0, (_ref = totalSize - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref !== void 0 ? _ref : 0)] : [0, 0];
|
60
59
|
// ensure default active rows are scrolled to
|
61
60
|
React__default.useEffect(() => {
|
62
61
|
if (defaultRowActiveIndex) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTableRenderer.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport {\n useVirtualizer,\n defaultRangeExtractor,\n ScrollToOptions as ReactVirtualScrollToOptions,\n VirtualItem,\n} from '@tanstack/react-virtual';\nimport { ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\n\nexport function useTableRenderer<TType = unknown>(\n renderers: useTableRenderers<TType>,\n table: ReactTable<TType>,\n tableRef: React.RefObject<TableRef>,\n defaultRowActiveIndex?: number | undefined\n) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getRowModel().rows;\n const isTableRowGrouped = !!table.getState().grouping?.length;\n\n // expanded rows\n const { createRowMeasurer, estimateSize } = useRowHeightVirtualisation<TType>(table);\n\n // row groups\n const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n // account for thead and tfoot in the scroll area - both are always medium row height\n const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;\n // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains\n // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment\n const scrollPaddingEnd = ROW_HEIGHT_ESTIMATES.medium * (table.getHeaderGroups().length > 1 ? 1.5 : 1);\n\n const virtualiser = useVirtualizer({\n count: rows.length,\n estimateSize,\n getScrollElement: () => tableRef.current,\n overscan: tableMeta.printing.isPrinting ? rows.length : undefined,\n rangeExtractor,\n // correctly sets top and bottom spacing for the scroll container - very sensitive, don't change\n scrollMargin: isTableRowGrouped ? 0 : scrollPaddingStart,\n // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list\n scrollPaddingStart,\n scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd,\n });\n\n const totalSize = virtualiser.getTotalSize();\n const virtualItems = virtualiser.getVirtualItems();\n\n const scrollToIndex = React.useCallback(\n (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n if (tableRef.current) {\n if (index === 0) {\n virtualiser.scrollToOffset(0, notSmooth);\n } else if (index === rows.length - 1) {\n // sometimes the last row doesn't fully show, so we just force scroll to the bottom\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n } else {\n virtualiser.scrollToIndex(index, options);\n }\n }\n },\n [virtualItems.length, tableRef.current, totalSize, rows.length]\n );\n\n // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;\n\n // styling for offsetting rows - this \"is\" the virtualisation\n const [paddingTop, paddingBottom] =\n virtualItems.length > 0\n ? [\n Math.max(0, virtualItems[paddingStartIndex]?.start - virtualItems[paddingStartIndex]?.size ?? 0),\n Math.max(0, totalSize - virtualItems[virtualItems.length - 1]?.end ?? 0),\n ]\n : [0, 0];\n\n // ensure default active rows are scrolled to\n React.useEffect(() => {\n if (defaultRowActiveIndex) {\n scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n }\n }, []);\n\n // rendered output\n let style: CSSProperties = {};\n let content: (JSX.Element | null)[] | null = null;\n\n if (rows.length) {\n style = {\n height: totalSize,\n paddingBottom,\n paddingTop,\n };\n content = virtualItems.map(virtualRow => {\n // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n if (!virtualRow) {\n return null;\n }\n\n const row = rows[virtualRow.index];\n const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);\n return (\n <Row\n key={row.id}\n row={row}\n index={virtualRow.index}\n table={table}\n measureRow={measureRow}\n renderer={renderers.row}\n cellRenderer={renderers.cell}\n />\n );\n });\n }\n\n return {\n rows: content,\n style,\n scrollToIndex,\n };\n}\n\n// support varying row heights - variable row heights, row expansion\nfunction useRowHeightVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getRowModel().rows;\n const expandedState = table.getState().expanded;\n\n const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React.useState<Record<number, number>>({});\n\n // look at all registered expanded row heights and use them to form a more accurate average size\n // it might be worth considering if taking the max, or an upper bound, would be better\n const averageExpandedRowHeight = React.useMemo(() => {\n const values: number[] = Object.values(expandedRowHeightsCache);\n return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n }, [expandedRowHeightsCache]);\n\n // row heights\n const estimateSize = React.useCallback(\n (index: number) => {\n const rowHeight = tableMeta.rowHeight.height\n ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height]\n : ROW_HEIGHT_ESTIMATES.medium;\n\n if (expandedState === true || rows[index]?.getIsExpanded?.()) {\n return rowHeight + averageExpandedRowHeight;\n }\n\n return rowHeight;\n },\n [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]\n );\n\n const createRowMeasurer = React.useCallback(\n (resizeItem: (item: VirtualItem, size: number) => void, virtualRow: VirtualItem) =>\n (rowHeight: number, expansionHeight?: number) => {\n // register the expansion height so that it can be used to determine an average\n if (expansionHeight) {\n setExpandedRowHeightsCache(cache => ({ ...cache, [virtualRow.index]: expansionHeight }));\n }\n\n // update the whole row's size to include the expanded height\n resizeItem(virtualRow, rowHeight + (expansionHeight ?? 0));\n },\n []\n );\n\n return { estimateSize, createRowMeasurer };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const rows = table.getRowModel().rows;\n const isTableGrouped = !!table.getState().grouping.length;\n\n const rowGroupIndexes = React.useMemo(() => {\n const indexes: number[] = [];\n\n if (isTableGrouped) {\n rows.forEach((row, index) => {\n if (row.getIsGrouped()) {\n indexes.push(index);\n }\n });\n }\n\n return indexes;\n }, [rows]);\n\n // this is taken from the react-virtual docs/examples\n const rangeExtractor = React.useCallback(\n range => {\n const activeRowGroupIndex =\n [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);\n return [...next].sort((a, b) => a - b);\n },\n [rowGroupIndexes]\n );\n\n return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["useTableRenderer","renderers","table","tableRef","defaultRowActiveIndex","tableMeta","options","meta","rows","getRowModel","isTableRowGrouped","_table$getState$group","getState","grouping","length","createRowMeasurer","estimateSize","useRowHeightVirtualisation","rangeExtractor","useRowGroupVirtualisation","scrollPaddingStart","ROW_HEIGHT_ESTIMATES","medium","scrollPaddingEnd","getHeaderGroups","virtualiser","useVirtualizer","count","getScrollElement","current","overscan","printing","isPrinting","undefined","scrollMargin","footer","isEnabled","totalSize","getTotalSize","virtualItems","getVirtualItems","scrollToIndex","React","useCallback","index","align","behavior","notSmooth","scrollToOffset","scrollTop","scrollHeight","paddingStartIndex","paddingTop","paddingBottom","Math","max","_ref","_virtualItems$padding","start","_virtualItems$padding2","size","_ref2","_virtualItems","end","useEffect","style","content","height","map","virtualRow","row","measureRow","resizeItem","Row","key","id","renderer","cellRenderer","cell","expandedState","expanded","expandedRowHeightsCache","setExpandedRowHeightsCache","useState","averageExpandedRowHeight","useMemo","values","Object","reduce","a","b","rowHeight","_rows$index","_rows$index$getIsExpa","getIsExpanded","call","expansionHeight","cache","isTableGrouped","rowGroupIndexes","indexes","forEach","getIsGrouped","push","range","activeRowGroupIndex","_reverse$find","reverse","find","startIndex","next","Set","defaultRangeExtractor","sort"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"useTableRenderer.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport {\n useVirtualizer,\n defaultRangeExtractor,\n ScrollToOptions as ReactVirtualScrollToOptions,\n VirtualItem,\n} from '@tanstack/react-virtual';\nimport { ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\n\nexport function useTableRenderer<TType = unknown>(\n renderers: useTableRenderers<TType>,\n table: ReactTable<TType>,\n tableRef: React.RefObject<TableRef>,\n defaultRowActiveIndex?: number | undefined\n) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getRowModel().rows;\n const isTableRowGrouped = !!table.getState().grouping?.length;\n\n // expanded rows\n const { createRowMeasurer, estimateSize } = useRowHeightVirtualisation<TType>(table);\n\n // row groups\n const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n // account for thead and tfoot in the scroll area - both are always medium row height\n const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;\n // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains\n // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment\n const scrollPaddingEnd = ROW_HEIGHT_ESTIMATES.medium * (table.getHeaderGroups().length > 1 ? 1.5 : 1);\n\n const virtualiser = useVirtualizer({\n count: rows.length,\n estimateSize,\n getScrollElement: () => tableRef.current,\n overscan: tableMeta.printing.isPrinting ? rows.length : undefined,\n rangeExtractor,\n // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list\n scrollPaddingStart,\n scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd,\n });\n\n const totalSize = virtualiser.getTotalSize();\n const virtualItems = virtualiser.getVirtualItems();\n\n const scrollToIndex = React.useCallback(\n (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n if (tableRef.current) {\n if (index === 0) {\n virtualiser.scrollToOffset(0, notSmooth);\n } else if (index === rows.length - 1) {\n // sometimes the last row doesn't fully show, so we just force scroll to the bottom\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n } else {\n virtualiser.scrollToIndex(index, options);\n }\n }\n },\n [virtualItems.length, tableRef.current, totalSize, rows.length]\n );\n\n // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;\n\n const startValue = isTableRowGrouped\n ? virtualItems[paddingStartIndex]?.start - virtualItems[paddingStartIndex]?.size\n : virtualItems[paddingStartIndex]?.start;\n\n // styling for offsetting rows - this \"is\" the virtualisation\n const [paddingTop, paddingBottom] =\n virtualItems.length > 0\n ? [Math.max(0, startValue ?? 0), Math.max(0, totalSize - virtualItems[virtualItems.length - 1]?.end ?? 0)]\n : [0, 0];\n\n // ensure default active rows are scrolled to\n React.useEffect(() => {\n if (defaultRowActiveIndex) {\n scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n }\n }, []);\n\n // rendered output\n let style: CSSProperties = {};\n let content: (JSX.Element | null)[] | null = null;\n\n if (rows.length) {\n style = {\n height: totalSize,\n paddingBottom,\n paddingTop,\n };\n content = virtualItems.map(virtualRow => {\n // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n if (!virtualRow) {\n return null;\n }\n\n const row = rows[virtualRow.index];\n const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);\n return (\n <Row\n key={row.id}\n row={row}\n index={virtualRow.index}\n table={table}\n measureRow={measureRow}\n renderer={renderers.row}\n cellRenderer={renderers.cell}\n />\n );\n });\n }\n\n return {\n rows: content,\n style,\n scrollToIndex,\n };\n}\n\n// support varying row heights - variable row heights, row expansion\nfunction useRowHeightVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getRowModel().rows;\n const expandedState = table.getState().expanded;\n\n const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React.useState<Record<number, number>>({});\n\n // look at all registered expanded row heights and use them to form a more accurate average size\n // it might be worth considering if taking the max, or an upper bound, would be better\n const averageExpandedRowHeight = React.useMemo(() => {\n const values: number[] = Object.values(expandedRowHeightsCache);\n return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n }, [expandedRowHeightsCache]);\n\n // row heights\n const estimateSize = React.useCallback(\n (index: number) => {\n const rowHeight = tableMeta.rowHeight.height\n ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height]\n : ROW_HEIGHT_ESTIMATES.medium;\n\n if (expandedState === true || rows[index]?.getIsExpanded?.()) {\n return rowHeight + averageExpandedRowHeight;\n }\n\n return rowHeight;\n },\n [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]\n );\n\n const createRowMeasurer = React.useCallback(\n (resizeItem: (item: VirtualItem, size: number) => void, virtualRow: VirtualItem) =>\n (rowHeight: number, expansionHeight?: number) => {\n // register the expansion height so that it can be used to determine an average\n if (expansionHeight) {\n setExpandedRowHeightsCache(cache => ({ ...cache, [virtualRow.index]: expansionHeight }));\n }\n\n // update the whole row's size to include the expanded height\n resizeItem(virtualRow, rowHeight + (expansionHeight ?? 0));\n },\n []\n );\n\n return { estimateSize, createRowMeasurer };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const rows = table.getRowModel().rows;\n const isTableGrouped = !!table.getState().grouping.length;\n\n const rowGroupIndexes = React.useMemo(() => {\n const indexes: number[] = [];\n\n if (isTableGrouped) {\n rows.forEach((row, index) => {\n if (row.getIsGrouped()) {\n indexes.push(index);\n }\n });\n }\n\n return indexes;\n }, [rows]);\n\n // this is taken from the react-virtual docs/examples\n const rangeExtractor = React.useCallback(\n range => {\n const activeRowGroupIndex =\n [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);\n return [...next].sort((a, b) => a - b);\n },\n [rowGroupIndexes]\n );\n\n return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["useTableRenderer","renderers","table","tableRef","defaultRowActiveIndex","tableMeta","options","meta","rows","getRowModel","isTableRowGrouped","_table$getState$group","getState","grouping","length","createRowMeasurer","estimateSize","useRowHeightVirtualisation","rangeExtractor","useRowGroupVirtualisation","scrollPaddingStart","ROW_HEIGHT_ESTIMATES","medium","scrollPaddingEnd","getHeaderGroups","virtualiser","useVirtualizer","count","getScrollElement","current","overscan","printing","isPrinting","undefined","footer","isEnabled","totalSize","getTotalSize","virtualItems","getVirtualItems","scrollToIndex","React","useCallback","index","align","behavior","notSmooth","scrollToOffset","scrollTop","scrollHeight","paddingStartIndex","startValue","_virtualItems$padding","start","_virtualItems$padding2","size","_virtualItems$padding3","paddingTop","paddingBottom","Math","max","_ref","_virtualItems","end","useEffect","style","content","height","map","virtualRow","row","measureRow","resizeItem","Row","key","id","renderer","cellRenderer","cell","expandedState","expanded","expandedRowHeightsCache","setExpandedRowHeightsCache","useState","averageExpandedRowHeight","useMemo","values","Object","reduce","a","b","rowHeight","_rows$index","_rows$index$getIsExpa","getIsExpanded","call","expansionHeight","cache","isTableGrouped","rowGroupIndexes","indexes","forEach","getIsGrouped","push","range","activeRowGroupIndex","_reverse$find","reverse","find","startIndex","next","Set","defaultRangeExtractor","sort"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../../../../../src/primitives/Table/types.ts"],"sourcesContent":["import {\n ColumnFilter as ReactTableColumnFilter,\n ColumnFiltersState as ReactTableColumnFilterState,\n ColumnOrderState as ReactTableColumnOrderState,\n ColumnPinningState as ReactTableColumnPinningState,\n ColumnSort as ReactTableColumnSort,\n ColumnSizingState as ReactTableColumnSizingState,\n VisibilityState as ReactTableColumnVisibilityState,\n SortingState as ReactTableSortingState,\n BuiltInAggregationFn as ReactTableBuiltInAggregationFn,\n BuiltInSortingFn as ReactTableBuiltInSortingFn,\n} from '@tanstack/react-table';\nimport { FontSize, FontSizes, StringWithAutocompleteOptions, ValueOf } from '../../types';\nimport { MenuItemProps } from '../../components/Menu/components/Item';\n\nexport type TableRef = HTMLTableElement & {\n instance: {\n resetFiltering: () => void;\n resetRowExpansion: () => void;\n resetRowSelection: () => void;\n resetSorting: () => void;\n };\n};\n\n// filtering\nexport enum TableFilterComparator {\n Contains,\n DoesNotContain,\n IsEqualTo,\n IsNotEqualTo,\n IsGreaterThan,\n IsLessThan,\n IsBetween,\n IsEmpty,\n IsNotEmpty,\n IsLessThanOrEqualTo,\n IsGreaterThanOrEqualTo,\n HasAnyOf,\n HasAllOf,\n HasNoneOf,\n}\nexport type TableFilterValue = {\n comparator: TableFilterComparator;\n value: any;\n};\nexport type TableFilter = {\n id: string;\n value: TableFilterValue;\n};\n\n// columns\nexport type TableColumnAlignment = 'left' | 'center' | 'right';\nexport type TableColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type TableColumnDataType = 'auto' | 'number' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\nexport type TableColumnFilter = ReactTableColumnFilter;\nexport type TableColumnMenu = ((columnId: string) => React.ReactNode | null)[];\nexport type TableColumnRenderer<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererAggregate<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererControl<TType = unknown> =\n | ((props: TableColumnRendererControlProps, row?: TType) => JSX.Element)\n | 'datepicker'\n | 'input'\n | 'switch'\n | 'textarea';\nexport type TableColumnRendererControlProps = {\n className?: string;\n disabled?: boolean;\n fontSize?: FontSize;\n invalid?: boolean;\n onBlur?: (value: any) => void;\n onFocus?: React.FocusEventHandler;\n readOnly?: boolean;\n ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);\n setValue: (value: any) => void;\n value: any;\n};\nexport type TableColumnRendererHeader = string;\nexport type TableColumnRendererFooter<TType> = (rows: TType[]) => JSX.Element | string | number | null;\nexport type TableColumnSort = ReactTableColumnSort;\nexport type TableColumnSortDirection = 'asc' | 'desc';\nexport type TableColumnSortFn<TType = unknown> =\n | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n | ReactTableBuiltInSortingFn\n | 'auto';\nexport type TableColumnWidth = number | 'grow';\n\n// rows\nexport type TableRowActionRenderer<TType = unknown> = (row: TType, internalRowId: string) => JSX.Element | null;\nexport type TableRowActionGroupRenderer<TType = unknown> = (rows: TType[]) => JSX.Element | null;\nexport type TableRowClickHandler<TType = unknown> = (row: TType) => void;\nexport type TableRowDragHandler<TType = unknown> = (\n rows: TType[],\n showPlaceholder: (string) => void,\n setDataTransfer: (data: string) => void\n) => void;\nexport type TableRowDropHandler<TType = unknown> = (event: React.DragEvent, row: TType) => void;\nexport type TableRowGotoHandler = (\n column: string,\n query: string,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined\n) => Promise<number>;\nexport type TableRowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';\nexport type TableRowSelectHandler<TType = unknown> = (rows: TType[]) => void;\nexport type TableRowWithMetaData<TType = unknown> = TType & {\n _meta?: {\n layout?: 'heading' | 'summary' | 'item';\n };\n};\n\n// shortcuts\nexport type TableShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type TableShortcutHandlerObject<TType = unknown> = {\n handler: TableShortcutHandlerFn<TType>;\n meta?: boolean;\n shift?: boolean;\n};\n\n// table\nexport type TableFilterHandler = (filters: TableColumnFilter[]) => void | Promise<void>;\nexport type TableFontSize = keyof typeof FontSizes;\nexport type TablePreset = 'complex' | 'list' | 'simple';\nexport type TableRowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type TableScrollToIndexHandler = (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\nexport type TableSearchHandler = (search: string | undefined) => void | Promise<void>;\nexport type TableServerLoadPageHandler = (\n pageIndex: number,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[]\n) => Promise<void>;\nexport type TableServerLoadAllHandler = (sorting: TableColumnSort[], filters: TableColumnFilter[]) => Promise<void>;\nexport enum TableServerLoadAllState {\n Incomplete,\n Loading,\n Completed,\n}\nexport type TableSettingsHandler = (settings: TableSettings) => void | Promise<void>;\nexport type TableShortcuts<TType = unknown> = Record<string, TableShortcutHandlerFn<TType> | TableShortcutHandlerObject<TType>>;\nexport type TableSortHandler = (sorting: TableColumnSort[]) => void | Promise<void>;\nexport type TableCustomSettingsRenderer = (props: TableSettings) => React.ReactElement<MenuItemProps>[];\nexport type TableEmptyStateReason = 'empty' | 'filtering' | 'searching';\nexport type TableEmptyStateRenderer = (props: { reason: TableEmptyStateReason }) => JSX.Element | null;\n\n// settings\nexport type TableSettings = {\n columnFilters?: ReactTableColumnFilterState;\n columnOrder?: ReactTableColumnOrderState;\n columnPinning?: ReactTableColumnPinningState;\n columnSizing?: ReactTableColumnSizingState;\n columnVisibility?: ReactTableColumnVisibilityState;\n excludeUnmatchedRecordsInSearch?: boolean;\n fontSize?: TableFontSize;\n rowHeight?: TableRowHeight;\n searchQuery?: string;\n sorting?: ReactTableSortingState;\n};\nexport type TableEnableSettingsOptions = {\n columnOrder: boolean;\n columnPinning: boolean;\n columnSizing: boolean;\n columnVisibility: boolean;\n excludeUnmatchedRecordsInSearch: boolean;\n fontSize: boolean;\n grouping: boolean;\n rowHeight: boolean;\n sorting: boolean;\n};\n\n// props\nexport type TableFeatureProps<TType = unknown> = {\n // react-table built-in\n enableFiltering?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableColumnFreezing?: boolean;\n enableColumnHiding?: boolean;\n enableColumnResizing?: boolean;\n enableRowExpansion?: boolean;\n enableRowSelection?: boolean;\n enableRowSelectionSingle?: boolean;\n\n // custom -- common between all table types\n enableColumnOrdering?: boolean;\n enableFontSize?: boolean;\n enableFooter?: boolean;\n enablePrinting?: boolean;\n enableRowActions?: boolean;\n enableRowActive?: boolean;\n enableRowClick?: boolean | ((row: TType) => boolean);\n enableRowDrag?: boolean;\n enableRowDrop?: boolean;\n enableRowGoto?: boolean;\n enableRowHeight?: boolean;\n enableSaveSettings?: boolean | Partial<TableEnableSettingsOptions>;\n};\n\nexport type TableCommonProps<TType = unknown> = TableFeatureProps<TType> & {\n children: (JSX.Element | boolean | null | undefined)[];\n data: TType[];\n id: string;\n\n // misc\n customSettings?: TableCustomSettingsRenderer;\n defaultColumnFreezingIndex?: number;\n defaultRowActiveIndex?: number;\n defaultRowGroupColumnId?: keyof TType;\n defaultSettings?: TableSettings;\n emptyState?: TableEmptyStateRenderer;\n preset?: TablePreset;\n rowActions?: TableRowActionRenderer<TType>[];\n rowActionsForGroup?: TableRowActionGroupRenderer<TType>[];\n rowActionsLength?: number;\n rowExpansionRenderer?: TableRowExpansionRenderer<TType>;\n rowIdentityColumnId?: string;\n shortcuts?: TableShortcuts<TType>;\n toolbarLeft?: JSX.Element;\n toolbarRight?: JSX.Element;\n toolbarPanel?: JSX.Element;\n\n // handlers\n onRowClick?: TableRowClickHandler<TType>;\n onRowDrag?: TableRowDragHandler<TType>;\n onRowDrop?: TableRowDropHandler<TType>;\n onRowGoto?: TableRowGotoHandler;\n onRowSelect?: TableRowSelectHandler<TType>;\n\n // state change handlers\n onChangeFilter?: TableFilterHandler;\n onChangeSearch?: TableSearchHandler;\n onChangeSettings?: TableSettingsHandler;\n onChangeSort?: TableSortHandler;\n};\n\nexport interface TableClientProps<TType = unknown> extends TableCommonProps<TType> {\n length?: never;\n loadAll?: never;\n loadPage?: never;\n pageSize?: never;\n}\n\nexport interface TableServerProps<TType = unknown> extends TableCommonProps<TType> {\n length: number | undefined;\n loadAll: TableServerLoadAllHandler;\n loadPage: TableServerLoadPageHandler;\n pageSize?: number;\n}\n\nexport type TableProps<TType = unknown> = TableClientProps<TType> | TableServerProps<TType>;\n\nexport type TableColumnProps<TType = unknown> = ValueOf<{\n [Key in keyof TType]: {\n accessor?: Key;\n id: StringWithAutocompleteOptions<Key>;\n // renderers\n renderer?: TableColumnRenderer<TType, TType[Key]>;\n /** Renderer to use if the cell is an aggregate cell and part of a grouped row */\n aggregate?: TableColumnRendererAggregate<TType, TType[Key]>;\n control?: TableColumnRendererControl<TType>;\n footer?: TableColumnRendererFooter<TType>;\n header: TableColumnRendererHeader;\n // options\n /** Aggregation function to be used when the column is part of a grouped row */\n aggregationFn?: 'auto' | ReactTableBuiltInAggregationFn;\n align?: TableColumnAlignment;\n className?: TableColumnClassNameHandler<TType>;\n dataType?: TableColumnDataType;\n defaultHidden?: boolean;\n defaultWidth?: TableColumnWidth;\n enableFiltering?: boolean;\n enableGrouping?: boolean;\n enableHiding?: boolean;\n enableOrdering?: boolean;\n enablePrinting?: boolean;\n enableResizing?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableTruncate?: boolean;\n filters?: TableFilterComparator[];\n headerClassName?: string;\n menu?: TableColumnMenu;\n minWidth?: number;\n sort?: TableColumnSortDirection;\n sortFn?: TableColumnSortFn<TType>;\n tooltip?: string;\n };\n}>;\n\nexport type TableGroupProps = {\n children: (JSX.Element | boolean | null | undefined)[];\n header: string;\n id: string;\n};\n\nexport type TableTexts = {\n columns: {\n actions: {\n tooltip: string;\n };\n drag: {\n tooltip: string;\n };\n expansion: {\n collapse: string;\n collapseAll: string;\n expand: string;\n expandAll: string;\n };\n menu: {\n editFilter: string;\n filter: string;\n freezeFirstColumn: string;\n freezeUptoColumn: string;\n gotoRow: string;\n hideColumn: string;\n unfreezeColumns: string;\n sorting: string;\n sortingOrder: {\n ascending: string;\n descending: string;\n unsorted: string;\n };\n };\n resize: {\n tooltip: string;\n };\n select: {\n deselect: string;\n deselectAll: string;\n select: string;\n selectAll: string;\n };\n };\n columnSettings: {\n button: string;\n noResults: string;\n search: string;\n tooltip: string;\n };\n filters: {\n button: string;\n buttons: {\n addFilter: string;\n clearFilters: string;\n cancel: string;\n clear: string;\n apply: string;\n };\n comparators: {\n contains: string;\n doesNotContain: string;\n isEqualTo: string;\n isNotEqualTo: string;\n isGreaterThan: string;\n isLessThan: string;\n isBetween: string;\n isEmpty: string;\n isNotEmpty: string;\n isBefore: string;\n isAfter: string;\n isLessThanOrEqualTo: string;\n isGreaterThanOrEqualTo: string;\n isOnOrBefore: string;\n isOnOrAfter: string;\n hasAnyOf: string;\n hasAllOf: string;\n hasNoneOf: string;\n };\n conditions: {\n and: string;\n where: string;\n };\n emptyFilter: {\n condition: string;\n value: string;\n };\n hiddenColumn: string;\n hiddenGroupedColumn: string;\n tooltip: string;\n total: string;\n };\n fontSize: {\n tooltip: string;\n sizes: {\n small: string;\n medium: string;\n large: string;\n };\n };\n footer: {\n summary: {\n count: string;\n records: string;\n selected: string;\n };\n };\n print: {\n error: string;\n loading: string;\n tooltip: string;\n warningDialog: {\n title: string;\n description: string;\n checkboxVisibilityLabel: string;\n cancelButtonText: string;\n printButtonText: string;\n };\n settingsDialog: {\n title: string;\n size: string;\n sizeA5: string;\n sizeA4: string;\n sizeA3: string;\n sizeLetter: string;\n sizeLegal: string;\n orientation: string;\n orientationLandscape: string;\n orientationPortrait: string;\n rows: string;\n rowsAll: string;\n rowsSelected: string;\n layout: string;\n layoutSplitGroups: string;\n };\n };\n rowHeight: {\n tooltip: string;\n sizes: {\n short: string;\n medium: string;\n tall: string;\n extraTall: string;\n };\n };\n search: {\n excludeUnmatchedResults: string;\n placeholder: string;\n };\n otherOptions: {\n tooltip: string;\n };\n};\n"],"names":["TableFilterComparator","TableServerLoadAllState"],"mappings":"AAwBA;IACYA;AAAZ,WAAYA,qBAAqB;EAC7BA,yEAAQ;EACRA,qFAAc;EACdA,2EAAS;EACTA,iFAAY;EACZA,mFAAa;EACbA,6EAAU;EACVA,2EAAS;EACTA,uEAAO;EACPA,6EAAU;EACVA,+FAAmB;EACnBA,sGAAsB;EACtBA,0EAAQ;EACRA,0EAAQ;EACRA,4EAAS;AACb,CAAC,EAfWA,qBAAqB,KAArBA,qBAAqB;IA2GrBC;AAAZ,WAAYA,uBAAuB;EAC/BA,iFAAU;EACVA,2EAAO;EACPA,+EAAS;AACb,CAAC,EAJWA,uBAAuB,KAAvBA,uBAAuB;;;;"}
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../../../../../src/primitives/Table/types.ts"],"sourcesContent":["import {\n ColumnFilter as ReactTableColumnFilter,\n ColumnFiltersState as ReactTableColumnFilterState,\n ColumnOrderState as ReactTableColumnOrderState,\n ColumnPinningState as ReactTableColumnPinningState,\n ColumnSort as ReactTableColumnSort,\n ColumnSizingState as ReactTableColumnSizingState,\n VisibilityState as ReactTableColumnVisibilityState,\n SortingState as ReactTableSortingState,\n BuiltInAggregationFn as ReactTableBuiltInAggregationFn,\n BuiltInSortingFn as ReactTableBuiltInSortingFn,\n} from '@tanstack/react-table';\nimport { FontSize, FontSizes, StringWithAutocompleteOptions, ValueOf } from '../../types';\nimport { MenuItemProps } from '../../components/Menu/components/Item';\n\nexport type TableRef = HTMLTableElement & {\n instance: {\n resetFiltering: () => void;\n resetRowExpansion: () => void;\n resetRowSelection: () => void;\n resetSorting: () => void;\n };\n};\n\n// filtering\nexport enum TableFilterComparator {\n Contains,\n DoesNotContain,\n IsEqualTo,\n IsNotEqualTo,\n IsGreaterThan,\n IsLessThan,\n IsBetween,\n IsEmpty,\n IsNotEmpty,\n IsLessThanOrEqualTo,\n IsGreaterThanOrEqualTo,\n HasAnyOf,\n HasAllOf,\n HasNoneOf,\n}\nexport type TableFilterValue = {\n comparator: TableFilterComparator;\n value: any;\n};\nexport type TableFilter = {\n id: string;\n value: TableFilterValue;\n};\n\n// columns\nexport type TableColumnAlignment = 'left' | 'center' | 'right';\nexport type TableColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type TableColumnDataType = 'auto' | 'number' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\nexport type TableColumnFilter = ReactTableColumnFilter;\nexport type TableColumnMenu = ((columnId: string) => React.ReactNode | null)[];\nexport type TableColumnRenderer<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererAggregate<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererControl<TType = unknown> =\n | ((props: TableColumnRendererControlProps, row?: TType) => JSX.Element)\n | 'datepicker'\n | 'input'\n | 'switch'\n | 'textarea';\nexport type TableColumnRendererControlProps = {\n className?: string;\n disabled?: boolean;\n fontSize?: FontSize;\n invalid?: boolean;\n onBlur?: (value: any) => void;\n onFocus?: React.FocusEventHandler;\n readOnly?: boolean;\n ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);\n setValue: (value: any) => void;\n value: any;\n};\nexport type TableColumnRendererHeader = string;\nexport type TableColumnRendererFooter<TType> = (rows: TType[]) => JSX.Element | string | number | null;\nexport type TableColumnSort = ReactTableColumnSort;\nexport type TableColumnSortDirection = 'asc' | 'desc';\nexport type TableColumnSortFn<TType = unknown> =\n | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n | ReactTableBuiltInSortingFn\n | 'auto';\nexport type TableColumnWidth = number | 'grow';\n\n// rows\nexport type TableRowActionRenderer<TType = unknown> = (row: TType, internalRowId: string) => JSX.Element | null;\nexport type TableRowActionGroupRenderer<TType = unknown> = (rows: TType[]) => JSX.Element | null;\nexport type TableRowClickHandler<TType = unknown> = (row: TType) => void;\nexport type TableRowDragHandler<TType = unknown> = (\n rows: TType[],\n showPlaceholder: (string) => void,\n setDataTransfer: (data: string) => void\n) => void;\nexport type TableRowDropHandler<TType = unknown> = (event: React.DragEvent, row: TType) => void;\nexport type TableRowGotoHandler = (\n column: string,\n query: string,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined\n) => Promise<number>;\nexport type TableRowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';\nexport type TableRowSelectHandler<TType = unknown> = (rows: TType[]) => void;\nexport type TableRowWithMetaData<TType = unknown> = TType & {\n _meta?: {\n layout?: 'heading' | 'summary' | 'item';\n };\n};\n\n// shortcuts\nexport type TableShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type TableShortcutHandlerObject<TType = unknown> = {\n handler: TableShortcutHandlerFn<TType>;\n meta?: boolean;\n shift?: boolean;\n};\n\n// table\nexport type TableFilterHandler = (filters: TableColumnFilter[]) => void | Promise<void>;\nexport type TableFontSize = keyof typeof FontSizes;\nexport type TablePreset = 'complex' | 'list' | 'simple';\nexport type TableRowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type TableScrollToIndexHandler = (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\nexport type TableSearchHandler = (search: string | undefined) => void | Promise<void>;\nexport type TableServerLoadPageHandler = (\n pageIndex: number,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[]\n) => Promise<void>;\nexport type TableServerLoadAllHandler = (sorting: TableColumnSort[], filters: TableColumnFilter[]) => Promise<void>;\nexport enum TableServerLoadAllState {\n Incomplete,\n Loading,\n Completed,\n}\nexport type TableSettingsHandler = (settings: TableSettings) => void | Promise<void>;\nexport type TableShortcuts<TType = unknown> = Record<string, TableShortcutHandlerFn<TType> | TableShortcutHandlerObject<TType>>;\nexport type TableSortHandler = (sorting: TableColumnSort[]) => void | Promise<void>;\nexport type TableCustomSettingsRenderer = (props: TableSettings) => React.ReactElement<MenuItemProps>[];\nexport type TableEmptyStateReason = 'empty' | 'filtering' | 'searching';\nexport type TableEmptyStateRenderer = (props: { reason: TableEmptyStateReason }) => JSX.Element | null;\n\n// settings\nexport type TableSettings = {\n columnFilters?: ReactTableColumnFilterState;\n columnOrder?: ReactTableColumnOrderState;\n columnPinning?: ReactTableColumnPinningState;\n columnSizing?: ReactTableColumnSizingState;\n columnVisibility?: ReactTableColumnVisibilityState;\n excludeUnmatchedRecordsInSearch?: boolean;\n fontSize?: TableFontSize;\n rowHeight?: TableRowHeight;\n searchQuery?: string;\n sorting?: ReactTableSortingState;\n};\nexport type TableEnableSettingsOptions = {\n columnOrder: boolean;\n columnPinning: boolean;\n columnSizing: boolean;\n columnVisibility: boolean;\n excludeUnmatchedRecordsInSearch: boolean;\n fontSize: boolean;\n grouping: boolean;\n rowHeight: boolean;\n sorting: boolean;\n};\n\n// props\nexport type TableConditionalRowProp<TType = unknown> = boolean | ((row: TType) => boolean);\nexport type TableFeatureProps<TType = unknown> = {\n // react-table built-in\n enableFiltering?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableColumnFreezing?: boolean;\n enableColumnHiding?: boolean;\n enableColumnResizing?: boolean;\n enableRowExpansion?: boolean;\n enableRowSelection?: TableConditionalRowProp<TType>;\n enableRowSelectionSingle?: TableConditionalRowProp<TType>;\n\n // custom -- common between all table types\n enableColumnOrdering?: boolean;\n enableFontSize?: boolean;\n enableFooter?: boolean;\n enablePrinting?: boolean;\n enableRowActions?: boolean;\n enableRowActive?: boolean;\n enableRowClick?: TableConditionalRowProp<TType>;\n enableRowDrag?: boolean;\n enableRowDrop?: boolean;\n enableRowGoto?: boolean;\n enableRowHeight?: boolean;\n enableSaveSettings?: boolean | Partial<TableEnableSettingsOptions>;\n};\n\nexport type TableCommonProps<TType = unknown> = TableFeatureProps<TType> & {\n children: (JSX.Element | boolean | null | undefined)[];\n data: TType[];\n id: string;\n\n // misc\n customSettings?: TableCustomSettingsRenderer;\n defaultColumnFreezingIndex?: number;\n defaultRowActiveIndex?: number;\n defaultRowGroupColumnId?: keyof TType;\n defaultSettings?: TableSettings;\n emptyState?: TableEmptyStateRenderer;\n preset?: TablePreset;\n rowActions?: TableRowActionRenderer<TType>[];\n rowActionsForGroup?: TableRowActionGroupRenderer<TType>[];\n rowActionsLength?: number;\n rowExpansionRenderer?: TableRowExpansionRenderer<TType>;\n rowIdentityColumnId?: string;\n shortcuts?: TableShortcuts<TType>;\n toolbarLeft?: JSX.Element;\n toolbarRight?: JSX.Element;\n toolbarPanel?: JSX.Element;\n\n // handlers\n onRowClick?: TableRowClickHandler<TType>;\n onRowDrag?: TableRowDragHandler<TType>;\n onRowDrop?: TableRowDropHandler<TType>;\n onRowGoto?: TableRowGotoHandler;\n onRowSelect?: TableRowSelectHandler<TType>;\n\n // state change handlers\n onChangeFilter?: TableFilterHandler;\n onChangeSearch?: TableSearchHandler;\n onChangeSettings?: TableSettingsHandler;\n onChangeSort?: TableSortHandler;\n};\n\nexport interface TableClientProps<TType = unknown> extends TableCommonProps<TType> {\n length?: never;\n loadAll?: never;\n loadPage?: never;\n pageSize?: never;\n}\n\nexport interface TableServerProps<TType = unknown> extends TableCommonProps<TType> {\n length: number | undefined;\n loadAll: TableServerLoadAllHandler;\n loadPage: TableServerLoadPageHandler;\n pageSize?: number;\n}\n\nexport type TableProps<TType = unknown> = TableClientProps<TType> | TableServerProps<TType>;\n\nexport type TableColumnProps<TType = unknown> = ValueOf<{\n [Key in keyof TType]: {\n accessor?: Key;\n id: StringWithAutocompleteOptions<Key>;\n // renderers\n renderer?: TableColumnRenderer<TType, TType[Key]>;\n /** Renderer to use if the cell is an aggregate cell and part of a grouped row */\n aggregate?: TableColumnRendererAggregate<TType, TType[Key]>;\n control?: TableColumnRendererControl<TType>;\n footer?: TableColumnRendererFooter<TType>;\n header: TableColumnRendererHeader;\n // options\n /** Aggregation function to be used when the column is part of a grouped row */\n aggregationFn?: 'auto' | ReactTableBuiltInAggregationFn;\n align?: TableColumnAlignment;\n className?: TableColumnClassNameHandler<TType>;\n dataType?: TableColumnDataType;\n defaultHidden?: boolean;\n defaultWidth?: TableColumnWidth;\n enableFiltering?: boolean;\n enableGrouping?: boolean;\n enableHiding?: boolean;\n enableOrdering?: boolean;\n enablePrinting?: boolean;\n enableResizing?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableTruncate?: boolean;\n filters?: TableFilterComparator[];\n headerClassName?: string;\n menu?: TableColumnMenu;\n minWidth?: number;\n sort?: TableColumnSortDirection;\n sortFn?: TableColumnSortFn<TType>;\n tooltip?: string;\n };\n}>;\n\nexport type TableGroupProps = {\n children: (JSX.Element | boolean | null | undefined)[];\n header: string;\n id: string;\n};\n\nexport type TableTexts = {\n columns: {\n actions: {\n tooltip: string;\n };\n drag: {\n tooltip: string;\n };\n expansion: {\n collapse: string;\n collapseAll: string;\n expand: string;\n expandAll: string;\n };\n menu: {\n editFilter: string;\n filter: string;\n freezeFirstColumn: string;\n freezeUptoColumn: string;\n gotoRow: string;\n hideColumn: string;\n unfreezeColumns: string;\n sorting: string;\n sortingOrder: {\n ascending: string;\n descending: string;\n unsorted: string;\n };\n };\n resize: {\n tooltip: string;\n };\n select: {\n deselect: string;\n deselectAll: string;\n select: string;\n selectAll: string;\n };\n };\n columnSettings: {\n button: string;\n noResults: string;\n search: string;\n tooltip: string;\n };\n filters: {\n button: string;\n buttons: {\n addFilter: string;\n clearFilters: string;\n cancel: string;\n clear: string;\n apply: string;\n };\n comparators: {\n contains: string;\n doesNotContain: string;\n isEqualTo: string;\n isNotEqualTo: string;\n isGreaterThan: string;\n isLessThan: string;\n isBetween: string;\n isEmpty: string;\n isNotEmpty: string;\n isBefore: string;\n isAfter: string;\n isLessThanOrEqualTo: string;\n isGreaterThanOrEqualTo: string;\n isOnOrBefore: string;\n isOnOrAfter: string;\n hasAnyOf: string;\n hasAllOf: string;\n hasNoneOf: string;\n };\n conditions: {\n and: string;\n where: string;\n };\n emptyFilter: {\n condition: string;\n value: string;\n };\n hiddenColumn: string;\n hiddenGroupedColumn: string;\n tooltip: string;\n total: string;\n };\n fontSize: {\n tooltip: string;\n sizes: {\n small: string;\n medium: string;\n large: string;\n };\n };\n footer: {\n summary: {\n count: string;\n records: string;\n selected: string;\n };\n };\n print: {\n error: string;\n loading: string;\n tooltip: string;\n warningDialog: {\n title: string;\n description: string;\n checkboxVisibilityLabel: string;\n cancelButtonText: string;\n printButtonText: string;\n };\n settingsDialog: {\n title: string;\n size: string;\n sizeA5: string;\n sizeA4: string;\n sizeA3: string;\n sizeLetter: string;\n sizeLegal: string;\n orientation: string;\n orientationLandscape: string;\n orientationPortrait: string;\n rows: string;\n rowsAll: string;\n rowsSelected: string;\n layout: string;\n layoutSplitGroups: string;\n };\n };\n rowHeight: {\n tooltip: string;\n sizes: {\n short: string;\n medium: string;\n tall: string;\n extraTall: string;\n };\n };\n search: {\n excludeUnmatchedResults: string;\n placeholder: string;\n };\n otherOptions: {\n tooltip: string;\n };\n};\n"],"names":["TableFilterComparator","TableServerLoadAllState"],"mappings":"AAwBA;IACYA;AAAZ,WAAYA,qBAAqB;EAC7BA,yEAAQ;EACRA,qFAAc;EACdA,2EAAS;EACTA,iFAAY;EACZA,mFAAa;EACbA,6EAAU;EACVA,2EAAS;EACTA,uEAAO;EACPA,6EAAU;EACVA,+FAAmB;EACnBA,sGAAsB;EACtBA,0EAAQ;EACRA,0EAAQ;EACRA,4EAAS;AACb,CAAC,EAfWA,qBAAqB,KAArBA,qBAAqB;IA2GrBC;AAAZ,WAAYA,uBAAuB;EAC/BA,iFAAU;EACVA,2EAAO;EACPA,+EAAS;AACb,CAAC,EAJWA,uBAAuB,KAAvBA,uBAAuB;;;;"}
|
package/dist/esm/packages/taco/src/primitives/Table/useTableManager/features/useTableRowSelection.js
CHANGED
@@ -9,11 +9,12 @@ function useTableRowSelection(isEnabled = false) {
|
|
9
9
|
const rows = table.getRowModel().rows;
|
10
10
|
const tableMeta = table.options.meta;
|
11
11
|
if (event.key === ' ') {
|
12
|
+
var _rows$rowActiveIndex;
|
12
13
|
event.preventDefault();
|
13
14
|
const rowActiveIndex = tableMeta.rowActive.rowActiveIndex;
|
14
|
-
if (rowActiveIndex !== undefined) {
|
15
|
-
var _rows$
|
16
|
-
(_rows$
|
15
|
+
if (rowActiveIndex !== undefined && (_rows$rowActiveIndex = rows[rowActiveIndex]) !== null && _rows$rowActiveIndex !== void 0 && _rows$rowActiveIndex.getCanSelect()) {
|
16
|
+
var _rows$rowActiveIndex2;
|
17
|
+
(_rows$rowActiveIndex2 = rows[rowActiveIndex]) === null || _rows$rowActiveIndex2 === void 0 ? void 0 : _rows$rowActiveIndex2.toggleSelected();
|
17
18
|
}
|
18
19
|
return;
|
19
20
|
} else if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTableRowSelection.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/features/useTableRowSelection.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\n\nexport function useTableRowSelection(isEnabled = false) {\n const lastSelectedRowIndex = React.useRef<number>();\n\n const onKeyDown = React.useCallback(\n <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => {\n if (!isEnabled || !table.options.enableRowSelection || event.defaultPrevented) {\n return;\n }\n\n const rows = table.getRowModel().rows;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n if (event.key === ' ') {\n event.preventDefault();\n const rowActiveIndex = tableMeta.rowActive.rowActiveIndex;\n\n if (rowActiveIndex !== undefined) {\n rows[rowActiveIndex]?.toggleSelected();\n }\n\n return;\n } else if ((event.ctrlKey || event.metaKey) && event.key === 'a') {\n event.preventDefault();\n table.toggleAllRowsSelected();\n return;\n }\n },\n [isEnabled]\n ) as <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => void;\n\n return {\n isEnabled,\n handleKeyDown: isEnabled ? onKeyDown : () => undefined,\n lastSelectedRowIndex,\n };\n}\n"],"names":["useTableRowSelection","isEnabled","lastSelectedRowIndex","React","useRef","onKeyDown","useCallback","event","table","options","enableRowSelection","defaultPrevented","rows","getRowModel","tableMeta","meta","key","preventDefault","rowActiveIndex","rowActive","undefined","_rows$
|
1
|
+
{"version":3,"file":"useTableRowSelection.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/features/useTableRowSelection.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\n\nexport function useTableRowSelection(isEnabled = false) {\n const lastSelectedRowIndex = React.useRef<number>();\n\n const onKeyDown = React.useCallback(\n <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => {\n if (!isEnabled || !table.options.enableRowSelection || event.defaultPrevented) {\n return;\n }\n\n const rows = table.getRowModel().rows;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n if (event.key === ' ') {\n event.preventDefault();\n const rowActiveIndex = tableMeta.rowActive.rowActiveIndex;\n\n if (rowActiveIndex !== undefined && rows[rowActiveIndex]?.getCanSelect()) {\n rows[rowActiveIndex]?.toggleSelected();\n }\n\n return;\n } else if ((event.ctrlKey || event.metaKey) && event.key === 'a') {\n event.preventDefault();\n table.toggleAllRowsSelected();\n return;\n }\n },\n [isEnabled]\n ) as <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => void;\n\n return {\n isEnabled,\n handleKeyDown: isEnabled ? onKeyDown : () => undefined,\n lastSelectedRowIndex,\n };\n}\n"],"names":["useTableRowSelection","isEnabled","lastSelectedRowIndex","React","useRef","onKeyDown","useCallback","event","table","options","enableRowSelection","defaultPrevented","rows","getRowModel","tableMeta","meta","key","_rows$rowActiveIndex","preventDefault","rowActiveIndex","rowActive","undefined","getCanSelect","_rows$rowActiveIndex2","toggleSelected","ctrlKey","metaKey","toggleAllRowsSelected","handleKeyDown"],"mappings":";;SAGgBA,oBAAoBA,CAACC,SAAS,GAAG,KAAK;EAClD,MAAMC,oBAAoB,GAAGC,cAAK,CAACC,MAAM,EAAU;EAEnD,MAAMC,SAAS,GAAGF,cAAK,CAACG,WAAW,CAC/B,CAAkBC,KAAoB,EAAEC,KAAwB;IAC5D,IAAI,CAACP,SAAS,IAAI,CAACO,KAAK,CAACC,OAAO,CAACC,kBAAkB,IAAIH,KAAK,CAACI,gBAAgB,EAAE;MAC3E;;IAGJ,MAAMC,IAAI,GAAGJ,KAAK,CAACK,WAAW,EAAE,CAACD,IAAI;IACrC,MAAME,SAAS,GAAGN,KAAK,CAACC,OAAO,CAACM,IAA6B;IAE7D,IAAIR,KAAK,CAACS,GAAG,KAAK,GAAG,EAAE;MAAA,IAAAC,oBAAA;MACnBV,KAAK,CAACW,cAAc,EAAE;MACtB,MAAMC,cAAc,GAAGL,SAAS,CAACM,SAAS,CAACD,cAAc;MAEzD,IAAIA,cAAc,KAAKE,SAAS,KAAAJ,oBAAA,GAAIL,IAAI,CAACO,cAAc,CAAC,cAAAF,oBAAA,eAApBA,oBAAA,CAAsBK,YAAY,EAAE,EAAE;QAAA,IAAAC,qBAAA;QACtE,CAAAA,qBAAA,GAAAX,IAAI,CAACO,cAAc,CAAC,cAAAI,qBAAA,uBAApBA,qBAAA,CAAsBC,cAAc,EAAE;;MAG1C;KACH,MAAM,IAAI,CAACjB,KAAK,CAACkB,OAAO,IAAIlB,KAAK,CAACmB,OAAO,KAAKnB,KAAK,CAACS,GAAG,KAAK,GAAG,EAAE;MAC9DT,KAAK,CAACW,cAAc,EAAE;MACtBV,KAAK,CAACmB,qBAAqB,EAAE;MAC7B;;GAEP,EACD,CAAC1B,SAAS,CAAC,CAC+D;EAE9E,OAAO;IACHA,SAAS;IACT2B,aAAa,EAAE3B,SAAS,GAAGI,SAAS,GAAG,MAAMgB,SAAS;IACtDnB;GACH;AACL;;;;"}
|
@@ -1,22 +1,23 @@
|
|
1
|
+
import React__default from 'react';
|
1
2
|
import { useLazyEffect } from '../../../../hooks/useLazyEffect.js';
|
2
3
|
|
3
4
|
function useTableRowSelectionListener(table, onRowSelect) {
|
4
|
-
const
|
5
|
+
const rows = table.getSelectedRowModel().flatRows;
|
6
|
+
const rowSelection = React__default.useMemo(() => rows.map(row => row.original), [rows]);
|
5
7
|
useLazyEffect(() => {
|
6
|
-
const selectedRows = table.getSelectedRowModel().rows;
|
7
8
|
if (table.options.enableRowSelection && typeof onRowSelect === 'function') {
|
8
9
|
if (table.options.enableMultiRowSelection) {
|
9
|
-
onRowSelect(
|
10
|
+
onRowSelect(rowSelection);
|
10
11
|
} else {
|
11
|
-
var _ref
|
12
|
-
onRowSelect((_ref = [
|
12
|
+
var _ref;
|
13
|
+
onRowSelect((_ref = [rowSelection[0]]) !== null && _ref !== void 0 ? _ref : []);
|
13
14
|
}
|
14
15
|
}
|
15
16
|
// It is important to stringify either rowSelection state or selectedRows, because we don't
|
16
17
|
// know if the array or object that is returned by react-table has the same reference or not.
|
17
18
|
// rowSelection state is used here because it will be more expensive to strigify selectedRows
|
18
19
|
// than rowSelection state.
|
19
|
-
}, [table.options.enableRowSelection, table.options.enableMultiRowSelection,
|
20
|
+
}, [table.options.enableRowSelection, table.options.enableMultiRowSelection, rowSelection]);
|
20
21
|
}
|
21
22
|
|
22
23
|
export { useTableRowSelectionListener };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTableRowSelectionListener.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/listeners/useTableRowSelectionListener.ts"],"sourcesContent":["import { Table as ReactTable } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../../hooks/useLazyEffect';\nimport { TableRowSelectHandler } from '../../types';\n\nexport function useTableRowSelectionListener<TType = unknown>(\n table: ReactTable<TType>,\n onRowSelect?: TableRowSelectHandler<TType>\n) {\n const
|
1
|
+
{"version":3,"file":"useTableRowSelectionListener.js","sources":["../../../../../../../../../src/primitives/Table/useTableManager/listeners/useTableRowSelectionListener.ts"],"sourcesContent":["import { Table as ReactTable } from '@tanstack/react-table';\nimport { useLazyEffect } from '../../../../hooks/useLazyEffect';\nimport { TableRowSelectHandler } from '../../types';\nimport React from 'react';\n\nexport function useTableRowSelectionListener<TType = unknown>(\n table: ReactTable<TType>,\n onRowSelect?: TableRowSelectHandler<TType>\n) {\n const rows = table.getSelectedRowModel().flatRows;\n const rowSelection = React.useMemo(() => rows.map(row => row.original), [rows]);\n\n useLazyEffect(() => {\n if (table.options.enableRowSelection && typeof onRowSelect === 'function') {\n if (table.options.enableMultiRowSelection) {\n onRowSelect(rowSelection);\n } else {\n onRowSelect([rowSelection[0]] ?? []);\n }\n }\n // It is important to stringify either rowSelection state or selectedRows, because we don't\n // know if the array or object that is returned by react-table has the same reference or not.\n // rowSelection state is used here because it will be more expensive to strigify selectedRows\n // than rowSelection state.\n }, [table.options.enableRowSelection, table.options.enableMultiRowSelection, rowSelection]);\n}\n"],"names":["useTableRowSelectionListener","table","onRowSelect","rows","getSelectedRowModel","flatRows","rowSelection","React","useMemo","map","row","original","useLazyEffect","options","enableRowSelection","enableMultiRowSelection","_ref"],"mappings":";;;SAKgBA,4BAA4BA,CACxCC,KAAwB,EACxBC,WAA0C;EAE1C,MAAMC,IAAI,GAAGF,KAAK,CAACG,mBAAmB,EAAE,CAACC,QAAQ;EACjD,MAAMC,YAAY,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAML,IAAI,CAACM,GAAG,CAACC,GAAG,IAAIA,GAAG,CAACC,QAAQ,CAAC,EAAE,CAACR,IAAI,CAAC,CAAC;EAE/ES,aAAa,CAAC;IACV,IAAIX,KAAK,CAACY,OAAO,CAACC,kBAAkB,IAAI,OAAOZ,WAAW,KAAK,UAAU,EAAE;MACvE,IAAID,KAAK,CAACY,OAAO,CAACE,uBAAuB,EAAE;QACvCb,WAAW,CAACI,YAAY,CAAC;OAC5B,MAAM;QAAA,IAAAU,IAAA;QACHd,WAAW,EAAAc,IAAA,GAAC,CAACV,YAAY,CAAC,CAAC,CAAC,CAAC,cAAAU,IAAA,cAAAA,IAAA,GAAI,EAAE,CAAC;;;;;;;GAO/C,EAAE,CAACf,KAAK,CAACY,OAAO,CAACC,kBAAkB,EAAEb,KAAK,CAACY,OAAO,CAACE,uBAAuB,EAAET,YAAY,CAAC,CAAC;AAC/F;;;;"}
|
@@ -53,7 +53,7 @@ function useTableManager(props, meta, internalColumns) {
|
|
53
53
|
const rowGoto = useTableRowGoto(options.enableRowGoto, props.onRowGoto);
|
54
54
|
const rowGroups = useTableRowGroups(props.rowActionsForGroup);
|
55
55
|
const rowHeight = useTableRowHeight(options.enableRowHeight, settings.rowHeight);
|
56
|
-
const rowSelection = useTableRowSelection(options.enableRowSelection);
|
56
|
+
const rowSelection = useTableRowSelection(!!options.enableRowSelection);
|
57
57
|
const search = useTableSearch(options.enableSearch, settings.excludeUnmatchedRecordsInSearch);
|
58
58
|
const server = useTableServerLoading(props.loadPage, props.loadAll, props.pageSize);
|
59
59
|
// TODO: memoise
|