@economic/taco 2.2.2 → 2.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Table3/Table3.d.ts +1 -1
- package/dist/components/Table3/components/columns/internal/Actions.d.ts +1 -2
- package/dist/components/Table3/components/rows/Row.d.ts +1 -0
- package/dist/components/Table3/hooks/features/useRowActions.d.ts +5 -0
- package/dist/components/Table3/hooks/useTable.d.ts +2 -0
- package/dist/components/Table3/hooks/useTableDataLoader.d.ts +1 -2
- package/dist/components/Table3/types.d.ts +0 -2
- package/dist/esm/packages/taco/src/components/Header/components/MenuButton.js +1 -1
- package/dist/esm/packages/taco/src/components/Header/components/MenuButton.js.map +1 -1
- package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js +3 -1
- package/dist/esm/packages/taco/src/components/SearchInput2/SearchInput2.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js +2 -2
- package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js +5 -0
- package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js +24 -18
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Drag.js +2 -2
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Drag.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Expansion.js +2 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Expansion.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js +2 -2
- package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js +11 -2
- package/dist/esm/packages/taco/src/components/Table3/components/rows/Row.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js +32 -20
- package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Search.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useRowActions.js +10 -0
- package/dist/esm/packages/taco/src/components/Table3/hooks/features/useRowActions.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSettingsStateListener.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useCssGrid.js +2 -3
- package/dist/esm/packages/taco/src/components/Table3/hooks/useCssGrid.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js +10 -9
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTable.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTableDataLoader.js +0 -8
- package/dist/esm/packages/taco/src/components/Table3/hooks/useTableDataLoader.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/strategies/virtualised.js +4 -0
- package/dist/esm/packages/taco/src/components/Table3/strategies/virtualised.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/types.js.map +1 -1
- package/dist/taco.cjs.development.js +108 -115
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
- package/types.json +5430 -5460
- package/dist/components/Table3/hooks/listeners/useSearchStateListener.d.ts +0 -3
- package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSearchStateListener.js +0 -51
- package/dist/esm/packages/taco/src/components/Table3/hooks/listeners/useSearchStateListener.js.map +0 -1
package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Actions.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowActionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Menu } from '../../../../Menu/Menu';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n actions: Table3RowActionRenderer<TType>[];\n actionsLength: number;\n isCurrentRow: boolean;\n isEditing: boolean;\n isResizingColumn: boolean;\n isHoverStatePaused: boolean;\n};\n\nconst ACTIONS_ON_ROW_LENGTH = 4;\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { actions, actionsLength, isCurrentRow, isEditing, isResizingColumn, isHoverStatePaused, row } = props;\n const { isHovered } = React.useContext(RowContext);\n const { texts } = useLocalization();\n\n let content;\n\n // We don't want to show actions in edit mode, since we have editing actions,\n // which is shown in edit mode instead.\n if (!isEditing && (isCurrentRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n const visibleActions = actions.map(action => action(row.original)).filter(action => !!action) as JSX.Element[];\n\n const actionsOnRow =\n visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n content = (\n <span className=\"-mb-2 -mt-2 flex justify-end text-right\">\n {actionsOnRow.map((button, index) => {\n const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n return React.cloneElement(button, {\n appearance: 'discrete',\n key: index,\n tabIndex: isCurrentRow ? 0 : -1,\n tooltip: button.props.shortcut ? (\n <>\n {tooltip}\n <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n </>\n ) : (\n tooltip\n ),\n });\n })}\n {actionsInMenu.length ? (\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.table3.columns.actions.tooltip}\n icon=\"more\"\n tabIndex={isCurrentRow ? 0 : -1}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n {actionsInMenu.map((action, i) => (\n <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n {action.props['aria-label']}\n </Menu.Item>\n ))}\n </Menu.Content>\n </Menu>\n )}\n />\n ) : null}\n </span>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n actionsForRow: Table3RowActionRenderer<TType>[];\n actionsForRowLength: number;\n};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n const { actionsForRow, actionsForRowLength, ...context } = props;\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...context}\n actions={actionsForRow}\n actionsLength={actionsForRowLength}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isEditing={tableMeta.editing.isEditing}\n isResizingColumn={!!context.table.getState().columnSizingInfo.isResizingColumn}\n isHoverStatePaused={!!tableMeta.hoverState.isPaused}\n />\n );\n}\n\nexport function createRowActionsColumn<TType = unknown>(\n actionsForRow: Table3RowActionRenderer<TType>[],\n actionsForRowLength = ACTIONS_ON_ROW_LENGTH\n): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: (context: CellContext<TType, unknown>) => (\n <Cell {...context} actionsForRow={actionsForRow} actionsForRowLength={actionsForRowLength} />\n ),\n footer: Footer,\n meta: {\n align: 'right',\n className: cn(\n 'items-center print:opacity-0 [[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:sticky [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:sticky right-0 !pl-0 !pr-1',\n '[[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:shadow-[-6px_0px_6px] [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:shadow-[-6px_0px_6px]',\n 'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n };\n}\n"],"names":["COLUMN_ID","ACTIONS_ON_ROW_LENGTH","MemoedCell","React","memo","props","actions","actionsLength","isCurrentRow","isEditing","isResizingColumn","isHoverStatePaused","row","isHovered","useContext","RowContext","texts","useLocalization","content","visibleActions","map","action","original","filter","actionsOnRow","length","slice","actionsInMenu","className","button","index","tooltip","String","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","table3","columns","icon","menu","menuProps","Menu","Content","i","Item","DisplayCell","Cell","actionsForRow","actionsForRowLength","context","rowIndex","tableMeta","table","options","meta","currentRow","currentRowIndex","editing","getState","columnSizingInfo","hoverState","isPaused","createRowActionsColumn","id","header","ColumnHeader","cell","footer","Footer","align","cn","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowActionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Menu } from '../../../../Menu/Menu';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n actions?: Table3RowActionRenderer<TType>[];\n actionsLength: number;\n isCurrentRow: boolean;\n isEditing: boolean;\n isResizingColumn: boolean;\n isHoverStatePaused: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { actions, actionsLength, isCurrentRow, isEditing, isResizingColumn, isHoverStatePaused, row, table } = props;\n const { isHovered } = React.useContext(RowContext);\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLSpanElement | null>(null);\n const size = table.getState().columnSizing[COLUMN_ID];\n\n // the actions column needs to set its size based on its content, not the actual column\n // so we do this here instead of in the header\n React.useLayoutEffect(() => {\n if (ref.current && !size) {\n const width = ref.current.getBoundingClientRect().width;\n\n table.setColumnSizing(sizes => ({\n ...sizes,\n [COLUMN_ID]: width,\n }));\n }\n }, [ref.current]);\n\n let content;\n\n // We don't want to show actions in edit mode, since we have editing actions,\n // which is shown in edit mode instead.\n if (actions?.length && !isEditing && (isCurrentRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n const visibleActions = actions.map(action => action(row.original)).filter(action => !!action) as JSX.Element[];\n\n const actionsOnRow =\n visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n content = (\n <span className=\"-mb-2 -mt-2 flex justify-end pl-2 text-right\" ref={ref}>\n {actionsOnRow.map((button, index) => {\n const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n return React.cloneElement(button, {\n appearance: 'discrete',\n key: index,\n tabIndex: isCurrentRow ? 0 : -1,\n tooltip: button.props.shortcut ? (\n <>\n {tooltip}\n <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n </>\n ) : (\n tooltip\n ),\n });\n })}\n {actionsInMenu.length ? (\n <IconButton\n appearance=\"discrete\"\n aria-label={texts.table3.columns.actions.tooltip}\n icon=\"more\"\n tabIndex={isCurrentRow ? 0 : -1}\n menu={menuProps => (\n <Menu {...menuProps}>\n <Menu.Content>\n {actionsInMenu.map((action, i) => (\n <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n {action.props['aria-label']}\n </Menu.Item>\n ))}\n </Menu.Content>\n </Menu>\n )}\n />\n ) : null}\n </span>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown>;\n\nfunction Cell<TType = unknown>(context: CellProps<TType>) {\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...context}\n actions={tableMeta.rowActions.actionsForRow}\n actionsLength={tableMeta.rowActions.actionsForRowLength}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isEditing={tableMeta.editing.isEditing}\n isResizingColumn={!!context.table.getState().columnSizingInfo.isResizingColumn}\n isHoverStatePaused={!!tableMeta.hoverState.isPaused}\n />\n );\n}\n\nexport function createRowActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'right',\n className: cn(\n '!pt-[var(--table3-row-padding)] print:opacity-0 [[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:sticky [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1',\n '[[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:shadow-[-6px_0px_6px] [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:shadow-[-6px_0px_6px]',\n 'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n };\n}\n"],"names":["COLUMN_ID","MemoedCell","React","memo","props","actions","actionsLength","isCurrentRow","isEditing","isResizingColumn","isHoverStatePaused","row","table","isHovered","useContext","RowContext","texts","useLocalization","ref","useRef","size","getState","columnSizing","useLayoutEffect","current","width","getBoundingClientRect","setColumnSizing","sizes","content","length","visibleActions","map","action","original","filter","actionsOnRow","slice","actionsInMenu","className","button","index","tooltip","String","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","table3","columns","icon","menu","menuProps","Menu","Content","i","Item","DisplayCell","Cell","context","rowIndex","tableMeta","options","meta","rowActions","actionsForRow","actionsForRowLength","currentRow","currentRowIndex","editing","columnSizingInfo","hoverState","isPaused","createRowActionsColumn","id","header","ColumnHeader","cell","footer","Footer","align","cn","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing"],"mappings":"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"}
|
|
@@ -54,7 +54,7 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
|
|
|
54
54
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
55
55
|
"aria-label": texts.table3.columns.drag.tooltip,
|
|
56
56
|
name: "drag",
|
|
57
|
-
className: "text-grey-darkest invisible w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white"
|
|
57
|
+
className: "text-grey-darkest invisible -mt-1 w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white"
|
|
58
58
|
})));
|
|
59
59
|
});
|
|
60
60
|
function createRowDragColumn(onRowDrag) {
|
|
@@ -68,7 +68,7 @@ function createRowDragColumn(onRowDrag) {
|
|
|
68
68
|
footer: Footer,
|
|
69
69
|
meta: {
|
|
70
70
|
align: 'center',
|
|
71
|
-
className: '
|
|
71
|
+
className: '!p-0 !pt-[var(--table3-row-padding)]',
|
|
72
72
|
enableOrdering: false,
|
|
73
73
|
enableSearch: false,
|
|
74
74
|
enableTruncate: false,
|
package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Drag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drag.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Drag.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowDragHandler } from '../../../types';\nimport { Icon } from '../../../../Icon/Icon';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__drag';\nconst GHOST_ELEMENT_ID = 'taco_table_dragging';\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n isSelected: boolean;\n onRowDrag: Table3RowDragHandler<TType>;\n};\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(props: CellProps<TType>) {\n const { isSelected, onRowDrag: handleRowDrag, row, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const onDragStart = (event: React.DragEvent): void => {\n let rows = [row];\n\n if (table.options.enableRowSelection) {\n rows = isSelected ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n }\n\n const data = rows.map(row => row.original);\n\n tableMeta.rowDrag.setDragging(\n rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n );\n\n // set a default data value so that the consumer doesn't have to\n event.dataTransfer.setData('text', JSON.stringify(data));\n\n const showPlaceholder = (text: string) => {\n const ghost = document.createElement('div');\n ghost.id = GHOST_ELEMENT_ID;\n ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';\n ghost.innerText = text;\n document.body.appendChild(ghost);\n event.dataTransfer.setDragImage(ghost, 0, 0);\n };\n\n const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n handleRowDrag(data, showPlaceholder, setDataTransfer);\n };\n\n const handleDragEnd = (): void => {\n document.getElementById(GHOST_ELEMENT_ID)?.remove();\n tableMeta.rowDrag.setDragging({});\n };\n\n return (\n <DisplayCell {...props}>\n <div draggable onDragStart={onDragStart} onDragOver={event => event.preventDefault()} onDragEnd={handleDragEnd}>\n <Icon\n aria-label={texts.table3.columns.drag.tooltip}\n name=\"drag\"\n className=\"text-grey-darkest invisible w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white\"\n />\n </div>\n </DisplayCell>\n );\n}) as <TType = unknown>(props: CellProps<TType>) => JSX.Element;\n\nexport function createRowDragColumn<TType = unknown>(onRowDrag: Table3RowDragHandler<TType>): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: (context: CellContext<TType, unknown>) => (\n <Cell {...context} isSelected={context.row.getIsSelected()} onRowDrag={onRowDrag} />\n ),\n footer: Footer,\n meta: {\n align: 'center',\n className: '
|
|
1
|
+
{"version":3,"file":"Drag.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Drag.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowDragHandler } from '../../../types';\nimport { Icon } from '../../../../Icon/Icon';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__drag';\nconst GHOST_ELEMENT_ID = 'taco_table_dragging';\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n isSelected: boolean;\n onRowDrag: Table3RowDragHandler<TType>;\n};\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(props: CellProps<TType>) {\n const { isSelected, onRowDrag: handleRowDrag, row, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const onDragStart = (event: React.DragEvent): void => {\n let rows = [row];\n\n if (table.options.enableRowSelection) {\n rows = isSelected ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n }\n\n const data = rows.map(row => row.original);\n\n tableMeta.rowDrag.setDragging(\n rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n );\n\n // set a default data value so that the consumer doesn't have to\n event.dataTransfer.setData('text', JSON.stringify(data));\n\n const showPlaceholder = (text: string) => {\n const ghost = document.createElement('div');\n ghost.id = GHOST_ELEMENT_ID;\n ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';\n ghost.innerText = text;\n document.body.appendChild(ghost);\n event.dataTransfer.setDragImage(ghost, 0, 0);\n };\n\n const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n handleRowDrag(data, showPlaceholder, setDataTransfer);\n };\n\n const handleDragEnd = (): void => {\n document.getElementById(GHOST_ELEMENT_ID)?.remove();\n tableMeta.rowDrag.setDragging({});\n };\n\n return (\n <DisplayCell {...props}>\n <div draggable onDragStart={onDragStart} onDragOver={event => event.preventDefault()} onDragEnd={handleDragEnd}>\n <Icon\n aria-label={texts.table3.columns.drag.tooltip}\n name=\"drag\"\n className=\"text-grey-darkest invisible -mt-1 w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white\"\n />\n </div>\n </DisplayCell>\n );\n}) as <TType = unknown>(props: CellProps<TType>) => JSX.Element;\n\nexport function createRowDragColumn<TType = unknown>(onRowDrag: Table3RowDragHandler<TType>): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: ColumnHeader,\n cell: (context: CellContext<TType, unknown>) => (\n <Cell {...context} isSelected={context.row.getIsSelected()} onRowDrag={onRowDrag} />\n ),\n footer: Footer,\n meta: {\n align: 'center',\n className: '!p-0 !pt-[var(--table3-row-padding)]',\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n size: 15,\n minSize: 15,\n };\n}\n"],"names":["COLUMN_ID","GHOST_ELEMENT_ID","Cell","React","memo","MemoedCell","props","isSelected","onRowDrag","handleRowDrag","row","table","texts","useLocalization","tableMeta","options","meta","onDragStart","event","rows","enableRowSelection","getSelectedRowModel","data","map","original","rowDrag","setDragging","reduce","dragging","rowBeingDragged","id","dataTransfer","setData","JSON","stringify","showPlaceholder","text","ghost","document","createElement","className","innerText","body","appendChild","setDragImage","setDataTransfer","handleDragEnd","getElementById","remove","DisplayCell","draggable","onDragOver","preventDefault","onDragEnd","Icon","table3","columns","drag","tooltip","name","createRowDragColumn","header","ColumnHeader","cell","context","getIsSelected","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size","minSize"],"mappings":"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"}
|
package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Expansion.js
CHANGED
|
@@ -53,6 +53,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
|
|
|
53
53
|
title: title
|
|
54
54
|
}, /*#__PURE__*/React__default.createElement(IconButton, {
|
|
55
55
|
appearance: "discrete",
|
|
56
|
+
className: "-mt-1.5",
|
|
56
57
|
icon: isExpanded ? 'chevron-down' : 'chevron-right',
|
|
57
58
|
onClick: handleClick,
|
|
58
59
|
tabIndex: tabIndex,
|
|
@@ -86,7 +87,7 @@ function createRowExpansionColumn(expandedRowRenderer) {
|
|
|
86
87
|
footer: Footer,
|
|
87
88
|
meta: {
|
|
88
89
|
align: 'center',
|
|
89
|
-
className: '
|
|
90
|
+
className: '!p-0 !pt-[var(--table3-row-padding)]',
|
|
90
91
|
enableOrdering: false,
|
|
91
92
|
enableSearch: false,
|
|
92
93
|
enableTruncate: false,
|
package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Expansion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Expansion.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Expansion.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3RowExpansionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__expansion';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n const { texts } = useLocalization();\n\n const isSomeRowsExpanded = context.table.getIsSomeRowsExpanded();\n const handleClick = event => {\n event.stopPropagation();\n context.table.toggleAllRowsExpanded(!isSomeRowsExpanded);\n };\n\n const title = isSomeRowsExpanded ? texts.table3.columns.expansion.collapseAll : texts.table3.columns.expansion.expandAll;\n\n return (\n <ColumnHeader {...context}>\n <Tooltip title={title}>\n <IconButton\n appearance=\"discrete\"\n icon={isSomeRowsExpanded ? 'chevron-down-double' : 'chevron-right-double'}\n onClick={handleClick}\n tabIndex={-1}\n title={title}\n />\n </Tooltip>\n </ColumnHeader>\n );\n}\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n isCurrentRow: boolean;\n isExpanded: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { expandedRowRenderer, isCurrentRow, isExpanded, row, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const hasExpandedRow = expandedRowRenderer(row.original);\n\n let content;\n\n if (hasExpandedRow) {\n const handleClick = event => {\n event.stopPropagation();\n row.toggleExpanded();\n };\n const title = isExpanded ? texts.table3.columns.expansion.collapse : texts.table3.columns.expansion.expand;\n\n const tabIndex = isCurrentRow && !tableMeta.editing.isEditing ? 0 : -1;\n\n content = (\n <Tooltip title={title}>\n <IconButton\n appearance=\"discrete\"\n icon={isExpanded ? 'chevron-down' : 'chevron-right'}\n onClick={handleClick}\n tabIndex={tabIndex}\n title={title}\n />\n </Tooltip>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n const { expandedRowRenderer, ...context } = props;\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...context}\n expandedRowRenderer={expandedRowRenderer}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isExpanded={context.row.getIsExpanded()}\n />\n );\n}\n\nexport function createRowExpansionColumn<TType = unknown>(\n expandedRowRenderer: Table3RowExpansionRenderer<TType>\n): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: Header,\n cell: (context: CellContext<TType, unknown>) => <Cell {...context} expandedRowRenderer={expandedRowRenderer} />,\n footer: Footer,\n meta: {\n align: 'center',\n className: '
|
|
1
|
+
{"version":3,"file":"Expansion.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Expansion.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3RowExpansionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__expansion';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n const { texts } = useLocalization();\n\n const isSomeRowsExpanded = context.table.getIsSomeRowsExpanded();\n const handleClick = event => {\n event.stopPropagation();\n context.table.toggleAllRowsExpanded(!isSomeRowsExpanded);\n };\n\n const title = isSomeRowsExpanded ? texts.table3.columns.expansion.collapseAll : texts.table3.columns.expansion.expandAll;\n\n return (\n <ColumnHeader {...context}>\n <Tooltip title={title}>\n <IconButton\n appearance=\"discrete\"\n icon={isSomeRowsExpanded ? 'chevron-down-double' : 'chevron-right-double'}\n onClick={handleClick}\n tabIndex={-1}\n title={title}\n />\n </Tooltip>\n </ColumnHeader>\n );\n}\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n isCurrentRow: boolean;\n isExpanded: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n const { expandedRowRenderer, isCurrentRow, isExpanded, row, table } = props;\n const { texts } = useLocalization();\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const hasExpandedRow = expandedRowRenderer(row.original);\n\n let content;\n\n if (hasExpandedRow) {\n const handleClick = event => {\n event.stopPropagation();\n row.toggleExpanded();\n };\n const title = isExpanded ? texts.table3.columns.expansion.collapse : texts.table3.columns.expansion.expand;\n\n const tabIndex = isCurrentRow && !tableMeta.editing.isEditing ? 0 : -1;\n\n content = (\n <Tooltip title={title}>\n <IconButton\n appearance=\"discrete\"\n className=\"-mt-1.5\"\n icon={isExpanded ? 'chevron-down' : 'chevron-right'}\n onClick={handleClick}\n tabIndex={tabIndex}\n title={title}\n />\n </Tooltip>\n );\n }\n\n return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n const { expandedRowRenderer, ...context } = props;\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n return (\n <MemoedCell\n {...context}\n expandedRowRenderer={expandedRowRenderer}\n isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n isExpanded={context.row.getIsExpanded()}\n />\n );\n}\n\nexport function createRowExpansionColumn<TType = unknown>(\n expandedRowRenderer: Table3RowExpansionRenderer<TType>\n): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: Header,\n cell: (context: CellContext<TType, unknown>) => <Cell {...context} expandedRowRenderer={expandedRowRenderer} />,\n footer: Footer,\n meta: {\n align: 'center',\n className: '!p-0 !pt-[var(--table3-row-padding)]',\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !p-0',\n },\n // options\n enableResizing: false,\n size: 40,\n };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","isSomeRowsExpanded","table","getIsSomeRowsExpanded","handleClick","event","stopPropagation","toggleAllRowsExpanded","title","table3","columns","expansion","collapseAll","expandAll","React","ColumnHeader","Tooltip","IconButton","appearance","icon","onClick","tabIndex","MemoedCell","memo","props","expandedRowRenderer","isCurrentRow","isExpanded","row","tableMeta","options","meta","hasExpandedRow","original","content","toggleExpanded","collapse","expand","editing","isEditing","className","DisplayCell","Cell","rowIndex","useContext","RowContext","currentRow","currentRowIndex","getIsExpanded","createRowExpansionColumn","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size"],"mappings":";;;;;;;;;MAWaA,SAAS,GAAG;AAEzB,SAASC,MAAM,CAAkBC,OAAsC;EACnE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,kBAAkB,GAAGH,OAAO,CAACI,KAAK,CAACC,qBAAqB,EAAE;EAChE,MAAMC,WAAW,GAAGC,KAAK;IACrBA,KAAK,CAACC,eAAe,EAAE;IACvBR,OAAO,CAACI,KAAK,CAACK,qBAAqB,CAAC,CAACN,kBAAkB,CAAC;GAC3D;EAED,MAAMO,KAAK,GAAGP,kBAAkB,GAAGF,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,SAAS,CAACC,WAAW,GAAGb,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,SAAS,CAACE,SAAS;EAExH,oBACIC,6BAACC,QAAY,oBAAKjB,OAAO,gBACrBgB,6BAACE,OAAO;IAACR,KAAK,EAAEA;kBACZM,6BAACG,UAAU;IACPC,UAAU,EAAC,UAAU;IACrBC,IAAI,EAAElB,kBAAkB,GAAG,qBAAqB,GAAG,sBAAsB;IACzEmB,OAAO,EAAEhB,WAAW;IACpBiB,QAAQ,EAAE,CAAC,CAAC;IACZb,KAAK,EAAEA;IACT,CACI,CACC;AAEvB;AAQA,MAAMc,UAAU,gBAAGR,cAAK,CAACS,IAAI,CAAC,SAASD,UAAU,CAAkBE,KAA6B;EAC5F,MAAM;IAAEC,mBAAmB;IAAEC,YAAY;IAAEC,UAAU;IAAEC,GAAG;IAAE1B;GAAO,GAAGsB,KAAK;EAC3E,MAAM;IAAEzB;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM6B,SAAS,GAAG3B,KAAK,CAAC4B,OAAO,CAACC,IAAwB;EAExD,MAAMC,cAAc,GAAGP,mBAAmB,CAACG,GAAG,CAACK,QAAQ,CAAC;EAExD,IAAIC,OAAO;EAEX,IAAIF,cAAc,EAAE;IAChB,MAAM5B,WAAW,GAAGC,KAAK;MACrBA,KAAK,CAACC,eAAe,EAAE;MACvBsB,GAAG,CAACO,cAAc,EAAE;KACvB;IACD,MAAM3B,KAAK,GAAGmB,UAAU,GAAG5B,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,SAAS,CAACyB,QAAQ,GAAGrC,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,SAAS,CAAC0B,MAAM;IAE1G,MAAMhB,QAAQ,GAAGK,YAAY,IAAI,CAACG,SAAS,CAACS,OAAO,CAACC,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;IAEtEL,OAAO,gBACHpB,6BAACE,OAAO;MAACR,KAAK,EAAEA;oBACZM,6BAACG,UAAU;MACPC,UAAU,EAAC,UAAU;MACrBsB,SAAS,EAAC,SAAS;MACnBrB,IAAI,EAAEQ,UAAU,GAAG,cAAc,GAAG,eAAe;MACnDP,OAAO,EAAEhB,WAAW;MACpBiB,QAAQ,EAAEA,QAAQ;MAClBb,KAAK,EAAEA;MACT,CAET;;EAGL,oBAAOM,6BAAC2B,WAAW,oBAAKjB,KAAK,GAAGU,OAAO,CAAe;AAC1D,CAAC,CAAoE;AAMrE,SAASQ,IAAI,CAAkBlB,KAAuB;EAClD,MAAM;IAAEC,mBAAmB;IAAE,GAAG3B;GAAS,GAAG0B,KAAK;EACjD,MAAM;IAAEmB;GAAU,GAAG7B,cAAK,CAAC8B,UAAU,CAACC,UAAU,CAAC;EACjD,MAAMhB,SAAS,GAAG/B,OAAO,CAACI,KAAK,CAAC4B,OAAO,CAACC,IAAwB;EAEhE,oBACIjB,6BAACQ,UAAU,oBACHxB,OAAO;IACX2B,mBAAmB,EAAEA,mBAAmB;IACxCC,YAAY,EAAEG,SAAS,CAACiB,UAAU,CAACC,eAAe,KAAKJ,QAAQ;IAC/DhB,UAAU,EAAE7B,OAAO,CAAC8B,GAAG,CAACoB,aAAa;KACvC;AAEV;SAEgBC,wBAAwB,CACpCxB,mBAAsD;EAEtD,OAAO;IACHyB,EAAE,EAAEtD,SAAS;IACbuD,MAAM,EAAEtD,MAAM;IACduD,IAAI,EAAGtD,OAAoC,iBAAKgB,6BAAC4B,IAAI,oBAAK5C,OAAO;MAAE2B,mBAAmB,EAAEA;OAAuB;IAC/G4B,MAAM,EAAEC,MAAM;IACdvB,IAAI,EAAE;MACFwB,KAAK,EAAE,QAAQ;MACff,SAAS,EAAE,sCAAsC;MACjDgB,cAAc,EAAE,KAAK;MACrBC,YAAY,EAAE,KAAK;MACnBC,cAAc,EAAE,KAAK;MACrBP,MAAM,EAAE,EAAE;MACVQ,eAAe,EAAE;KACpB;;IAEDC,cAAc,EAAE,KAAK;IACrBC,IAAI,EAAE;GACT;AACL;;;;"}
|
package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js
CHANGED
|
@@ -89,7 +89,7 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
|
|
|
89
89
|
}) : null));
|
|
90
90
|
}
|
|
91
91
|
}, function arePropsEqual(oldProps, newProps) {
|
|
92
|
-
const oldTableMeta =
|
|
92
|
+
const oldTableMeta = oldProps.table.options.meta;
|
|
93
93
|
const newTableMeta = newProps.table.options.meta;
|
|
94
94
|
// we memo because we don't want the row re-rendering and removing focus from the checkbox
|
|
95
95
|
// we can't default to the standard comparison because we need currentRow off the table meta
|
|
@@ -104,7 +104,7 @@ function createRowSelectionColumn(onRowDrag) {
|
|
|
104
104
|
footer: Footer,
|
|
105
105
|
meta: {
|
|
106
106
|
align: 'center',
|
|
107
|
-
className: '
|
|
107
|
+
className: '!pt-[var(--table3-row-padding)] !justify-end !p-0 !pr-0.5',
|
|
108
108
|
enableOrdering: false,
|
|
109
109
|
enableSearch: false,
|
|
110
110
|
enableTruncate: false,
|
package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/Selection.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Selection.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Selection.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3RowDragHandler } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\nimport { getRadioClassnames } from '../../../../RadioGroup/util';\n\nexport const COLUMN_ID = '__select';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n const { texts } = useLocalization();\n\n if (context.table.options.enableMultiRowSelection) {\n const isAllRowsSelected = context.table.getIsAllRowsSelected();\n const isSomeRowsSelected = context.table.getIsSomeRowsSelected();\n const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;\n\n return (\n <ColumnHeader {...context}>\n <Tooltip title={title}>\n <Checkbox\n aria-label={title}\n className=\"hover:border-blue !mt-0\"\n key={String(`${isAllRowsSelected}_${isSomeRowsSelected}`)}\n checked={isAllRowsSelected}\n indeterminate={isSomeRowsSelected}\n onChange={context.table.toggleAllRowsSelected}\n tabIndex={-1}\n />\n </Tooltip>\n </ColumnHeader>\n );\n } else {\n return <ColumnHeader {...context}></ColumnHeader>;\n }\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n return [fromIndex, toIndex];\n};\n\nconst Cell = React.memo(\n function MemoedCell<TType = unknown>(context: CellContext<TType, unknown>) {\n const { texts } = useLocalization();\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n const isCurrentRow = tableMeta.currentRow.currentRowIndex === rowIndex;\n const isSelected = context.row.getIsSelected();\n const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;\n\n if (context.table.options.enableMultiRowSelection) {\n const handleClick = (event: React.MouseEvent): void => {\n event.stopPropagation();\n\n if (event.shiftKey) {\n const [fromIndex, toIndex] = toggleBetween(\n tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0,\n rowIndex\n );\n\n context.table\n .getRowModel()\n .rows.slice(fromIndex, toIndex + 1)\n .forEach(row => row.toggleSelected(true));\n } else {\n context.row.toggleSelected();\n }\n\n tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n };\n\n return (\n <DisplayCell {...context}>\n <Checkbox\n aria-label={title}\n className=\"!mt-0\"\n checked={isSelected}\n onClick={handleClick}\n // this is necessary to remove console spam from eslint\n onChange={() => false}\n tabIndex={isCurrentRow ? 0 : -1}\n />\n </DisplayCell>\n );\n } else {\n const className = cn('!mt-0', getRadioClassnames());\n\n const handleClick = (event: React.MouseEvent): void => {\n event.stopPropagation();\n context.row.toggleSelected();\n tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n };\n\n return (\n <DisplayCell {...context}>\n <button\n className={className}\n aria-checked={isSelected}\n onClick={handleClick}\n role=\"radio\"\n tabIndex={-1}\n type=\"button\">\n {isSelected ? <span className=\"h-2 w-2 rounded-full bg-white\" /> : null}\n </button>\n </DisplayCell>\n );\n }\n },\n function arePropsEqual(oldProps: CellContext<unknown, unknown>, newProps: CellContext<unknown, unknown>) {\n const oldTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n const newTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n\n // we memo because we don't want the row re-rendering and removing focus from the checkbox\n // we can't default to the standard comparison because we need currentRow off the table meta\n // and we don't really care about re-rendering in any other scenario\n return (\n newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex &&\n newProps.row.getIsSelected() !== oldProps.row.getIsSelected()\n );\n }\n) as <TType = unknown>(context: CellContext<TType, unknown>) => JSX.Element;\n\nexport function createRowSelectionColumn<TType = unknown>(\n onRowDrag?: Table3RowDragHandler<TType>\n): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: Header,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'center',\n className: 'items-center !justify-end !p-0 !pr-0.5',\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !justify-end !p-0 !pr-0.5',\n },\n // options\n enableResizing: false,\n size: onRowDrag ? 22 : 32,\n };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","table","options","enableMultiRowSelection","isAllRowsSelected","getIsAllRowsSelected","isSomeRowsSelected","getIsSomeRowsSelected","title","table3","columns","select","deselectAll","selectAll","React","ColumnHeader","Tooltip","Checkbox","className","key","String","checked","indeterminate","onChange","toggleAllRowsSelected","tabIndex","toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","Cell","memo","MemoedCell","rowIndex","useContext","RowContext","tableMeta","meta","isCurrentRow","currentRow","currentRowIndex","isSelected","row","getIsSelected","deselect","handleClick","event","stopPropagation","shiftKey","rowSelection","lastSelectedRowIndex","current","getRowModel","rows","slice","forEach","toggleSelected","DisplayCell","onClick","cn","getRadioClassnames","role","type","arePropsEqual","oldProps","newProps","oldTableMeta","newTableMeta","createRowSelectionColumn","onRowDrag","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Selection.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Selection.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3RowDragHandler } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\nimport { getRadioClassnames } from '../../../../RadioGroup/util';\n\nexport const COLUMN_ID = '__select';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n const { texts } = useLocalization();\n\n if (context.table.options.enableMultiRowSelection) {\n const isAllRowsSelected = context.table.getIsAllRowsSelected();\n const isSomeRowsSelected = context.table.getIsSomeRowsSelected();\n const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;\n\n return (\n <ColumnHeader {...context}>\n <Tooltip title={title}>\n <Checkbox\n aria-label={title}\n className=\"hover:border-blue !mt-0\"\n key={String(`${isAllRowsSelected}_${isSomeRowsSelected}`)}\n checked={isAllRowsSelected}\n indeterminate={isSomeRowsSelected}\n onChange={context.table.toggleAllRowsSelected}\n tabIndex={-1}\n />\n </Tooltip>\n </ColumnHeader>\n );\n } else {\n return <ColumnHeader {...context}></ColumnHeader>;\n }\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n return [fromIndex, toIndex];\n};\n\nconst Cell = React.memo(\n function MemoedCell<TType = unknown>(context: CellContext<TType, unknown>) {\n const { texts } = useLocalization();\n const { rowIndex } = React.useContext(RowContext);\n const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n const isCurrentRow = tableMeta.currentRow.currentRowIndex === rowIndex;\n const isSelected = context.row.getIsSelected();\n const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;\n\n if (context.table.options.enableMultiRowSelection) {\n const handleClick = (event: React.MouseEvent): void => {\n event.stopPropagation();\n\n if (event.shiftKey) {\n const [fromIndex, toIndex] = toggleBetween(\n tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0,\n rowIndex\n );\n\n context.table\n .getRowModel()\n .rows.slice(fromIndex, toIndex + 1)\n .forEach(row => row.toggleSelected(true));\n } else {\n context.row.toggleSelected();\n }\n\n tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n };\n\n return (\n <DisplayCell {...context}>\n <Checkbox\n aria-label={title}\n className=\"!mt-0\"\n checked={isSelected}\n onClick={handleClick}\n // this is necessary to remove console spam from eslint\n onChange={() => false}\n tabIndex={isCurrentRow ? 0 : -1}\n />\n </DisplayCell>\n );\n } else {\n const className = cn('!mt-0', getRadioClassnames());\n\n const handleClick = (event: React.MouseEvent): void => {\n event.stopPropagation();\n context.row.toggleSelected();\n tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n };\n\n return (\n <DisplayCell {...context}>\n <button\n className={className}\n aria-checked={isSelected}\n onClick={handleClick}\n role=\"radio\"\n tabIndex={-1}\n type=\"button\">\n {isSelected ? <span className=\"h-2 w-2 rounded-full bg-white\" /> : null}\n </button>\n </DisplayCell>\n );\n }\n },\n function arePropsEqual(oldProps: CellContext<unknown, unknown>, newProps: CellContext<unknown, unknown>) {\n const oldTableMeta = oldProps.table.options.meta as TableMeta<unknown>;\n const newTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n\n // we memo because we don't want the row re-rendering and removing focus from the checkbox\n // we can't default to the standard comparison because we need currentRow off the table meta\n // and we don't really care about re-rendering in any other scenario\n return (\n newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex &&\n newProps.row.getIsSelected() !== oldProps.row.getIsSelected()\n );\n }\n) as <TType = unknown>(context: CellContext<TType, unknown>) => JSX.Element;\n\nexport function createRowSelectionColumn<TType = unknown>(\n onRowDrag?: Table3RowDragHandler<TType>\n): DisplayColumnDef<TType, unknown> {\n return {\n id: COLUMN_ID,\n header: Header,\n cell: Cell,\n footer: Footer,\n meta: {\n align: 'center',\n className: '!pt-[var(--table3-row-padding)] !justify-end !p-0 !pr-0.5',\n enableOrdering: false,\n enableSearch: false,\n enableTruncate: false,\n header: '',\n headerClassName: 'items-center !justify-end !p-0 !pr-0.5',\n },\n // options\n enableResizing: false,\n size: onRowDrag ? 22 : 32,\n };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","table","options","enableMultiRowSelection","isAllRowsSelected","getIsAllRowsSelected","isSomeRowsSelected","getIsSomeRowsSelected","title","table3","columns","select","deselectAll","selectAll","React","ColumnHeader","Tooltip","Checkbox","className","key","String","checked","indeterminate","onChange","toggleAllRowsSelected","tabIndex","toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","Cell","memo","MemoedCell","rowIndex","useContext","RowContext","tableMeta","meta","isCurrentRow","currentRow","currentRowIndex","isSelected","row","getIsSelected","deselect","handleClick","event","stopPropagation","shiftKey","rowSelection","lastSelectedRowIndex","current","getRowModel","rows","slice","forEach","toggleSelected","DisplayCell","onClick","cn","getRadioClassnames","role","type","arePropsEqual","oldProps","newProps","oldTableMeta","newTableMeta","createRowSelectionColumn","onRowDrag","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size"],"mappings":"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"}
|
|
@@ -181,6 +181,7 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
|
|
|
181
181
|
const {
|
|
182
182
|
index,
|
|
183
183
|
isLastRow: _1,
|
|
184
|
+
measureRef,
|
|
184
185
|
onClick,
|
|
185
186
|
onClickCapture,
|
|
186
187
|
onDrop,
|
|
@@ -194,6 +195,14 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
|
|
|
194
195
|
const {
|
|
195
196
|
setIsHovered
|
|
196
197
|
} = useRowContext();
|
|
198
|
+
// we measure the first cell (since the row has display: contents) so that the virtualiser height is correct
|
|
199
|
+
React__default.useEffect(() => {
|
|
200
|
+
var _ref$current;
|
|
201
|
+
const firstCell = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('[role=cell]:first-child');
|
|
202
|
+
if (firstCell) {
|
|
203
|
+
measureRef(firstCell);
|
|
204
|
+
}
|
|
205
|
+
}, [ref.current]);
|
|
197
206
|
// we use capture because it also picks up clicks on e.g. select checkboxes
|
|
198
207
|
const handleClickCapture = event => {
|
|
199
208
|
if (typeof onClickCapture === 'function') {
|
|
@@ -204,9 +213,9 @@ const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
|
|
|
204
213
|
};
|
|
205
214
|
const handleClick = event => {
|
|
206
215
|
if (typeof onClick === 'function') {
|
|
207
|
-
var _ref$
|
|
216
|
+
var _ref$current2;
|
|
208
217
|
const clickedElement = event.target;
|
|
209
|
-
if (!((_ref$
|
|
218
|
+
if (!((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.contains(event.target)) || clickableElements.includes(clickedElement.tagName.toLowerCase()) || clickedElement.closest(clickableElements.map(tag => `[role=row] ${tag}`).join(','))) {
|
|
210
219
|
return;
|
|
211
220
|
}
|
|
212
221
|
onClick(row.original);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Row.js","sources":["../../../../../../../../../src/components/Table3/components/rows/Row.tsx"],"sourcesContent":["import React from 'react';\nimport { Row as RTRow, Table as RTable, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { RowContext, useRowContext } from './RowContext';\nimport { useDropTarget } from '../../../../utils/hooks/useDropTarget';\nimport { Table3RowClickHandler, Table3RowDropHandler } from '../../types';\nimport { useFocusManager } from '@react-aria/focus';\nimport { focusableSelector } from '../../util/editing';\n\ntype RowProps<TType = unknown> = Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop'> & {\n index: number;\n isLastRow: boolean;\n onClick?: Table3RowClickHandler<TType>;\n onDrop?: Table3RowDropHandler<TType>;\n row: RTRow<TType>;\n table: RTable<TType>;\n tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport function Row<TType = unknown>(props: RowProps<TType>) {\n const tableMeta = props.table.options.meta as TableMeta<TType>;\n const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;\n const isDraggingRow = tableMeta.rowDrag.dragging[props.row.id];\n // we use non-css hovered state to determine whether to render actions or not, for performance\n const [isHovered, setIsHovered] = React.useState(false);\n\n // rows are heavily memoized because performance in our table is critical\n // be careful and selective about props that you pass to the row\n const memoedProps = {\n // aria-grabbed is being deprecated but there is no current alternative api, we use it until there is\n 'aria-grabbed': isDraggingRow ? true : tableMeta.rowDrag.isEnabled ? false : undefined,\n 'data-current': isCurrentRow,\n 'data-selected': props.row.getIsSelected(),\n draggable: tableMeta.rowDrag.isEnabled,\n index: props.index,\n onClick: tableMeta.rowClick.handleClick,\n onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined,\n };\n\n let output = <MemoedRow<TType> {...props} {...memoedProps} />;\n\n if (tableMeta.editing.isEditing && (isCurrentRow || (isHovered && !tableMeta.hoverState.isPaused))) {\n output = (\n <EditingRow\n {...props}\n {...memoedProps}\n isLastRow={props.isLastRow}\n setCurrentRowIndex={tableMeta.currentRow.setCurrentRowIndex}\n />\n );\n }\n\n // we store the row index in context because in a virtualised table the row index and the\n // react table row index do not match when, for example, sorting is applied\n const contextValue = React.useMemo(() => ({ isHovered, setIsHovered, rowIndex: props.index }), [isHovered, props.index]);\n\n return <RowContext.Provider value={contextValue}>{output}</RowContext.Provider>;\n}\n\n// turns out we might need some kind of \"state\" for the focused column, but it doesn't need to be react state that re-renders\nlet lastIndex;\n\nfunction getColumnIndex(focusedElement: Element) {\n if (focusedElement) {\n return focusedElement.closest('[role=cell]')?.getAttribute('data-column-index');\n }\n\n return null;\n}\n\n// This code is needed to avoid multiple rows being hovered at the same time (it happens since we use non-css hovering)\nlet previouslyHoveredIndex: number | undefined;\nconst unhoverPreviousRow = (tableRef: React.RefObject<HTMLDivElement>) => {\n if (previouslyHoveredIndex !== undefined) {\n const mouseoutEvent = new MouseEvent('mouseout', { view: window, bubbles: true, cancelable: true });\n const previouslyHovered = tableRef?.current?.querySelector(`[data-row-index=\"${previouslyHoveredIndex}\"]`);\n previouslyHovered?.dispatchEvent(mouseoutEvent);\n }\n};\n\nfunction EditingRow(props) {\n const { isLastRow, setCurrentRowIndex, virtualiser, ...attributes } = props;\n const focusManager = useFocusManager();\n const focusManagerOptions = { tabbable: true };\n const tableMeta = props.table.options.meta as TableMeta<unknown>;\n\n const handleClickCapture = (event: React.FocusEvent) => {\n lastIndex = getColumnIndex(event.target);\n };\n\n const handleArrowLeftKey = event => {\n let focusedElement: Element;\n if (event.key === 'ArrowLeft' || (event.key === 'Tab' && event.shiftKey)) {\n // Need to stop propagation because \"Tab\" will be handled twice(default browser and programmatic one)\n // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,\n // so we don't need default browser behaviour.\n event.stopPropagation();\n event.preventDefault();\n\n // \"CTRL + ArrowLeft\" or \"META + ArrowLeft\" should focus first focusable element of the row\n if (event.ctrlKey || event.metaKey) {\n event.target.blur();\n focusedElement = focusManager.focusFirst(focusManagerOptions);\n lastIndex = getColumnIndex(focusedElement);\n } else {\n // Should focus previous focusable element, if there is one\n focusedElement = focusManager.focusPrevious(focusManagerOptions);\n\n // Should move to prevoius row and select last focusable element in that row,\n // if there is no previous focusable element in current row\n if (props.index !== 0 && (!focusedElement || !event.currentTarget.contains(focusedElement))) {\n tableMeta.hoverState.pause(true);\n setCurrentRowIndex(props.index - 1);\n setTimeout(() => {\n focusedElement = focusManager.focusLast(focusManagerOptions);\n // Need to update lastIndex when row got changed and last element got selected.\n lastIndex = getColumnIndex(focusedElement);\n }, 1);\n } else {\n lastIndex = getColumnIndex(focusedElement);\n }\n }\n }\n };\n\n const handleArrowRightKey = event => {\n let focusedElement: Element;\n if (event.key === 'ArrowRight' || (event.key === 'Tab' && !event.shiftKey)) {\n // Need to stop propagation because \"Tab\" will be handled twice(default browser and programmatic one)\n // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,\n // so we don't need default browser behaviour.\n event.stopPropagation();\n event.preventDefault();\n\n // \"CTRL + ArrowRight\" or \"META + ArrowRight\" should focus last focusable element of the row\n if (event.ctrlKey || event.metaKey) {\n event.target.blur();\n focusedElement = focusManager.focusLast(focusManagerOptions);\n lastIndex = getColumnIndex(focusedElement);\n } else {\n // Should focus next focusable element, if there is one\n focusedElement = focusManager.focusNext(focusManagerOptions);\n\n // Should move to next row and select first focusable element in that row,\n // if there is no next focusable element in current row\n if (!isLastRow && (!focusedElement || !event.currentTarget.contains(focusedElement))) {\n tableMeta.hoverState.pause(true);\n setCurrentRowIndex(props.index + 1);\n setTimeout(() => {\n focusedElement = focusManager.focusFirst(focusManagerOptions);\n // Need to update lastIndex when row got changed and first element got selected.\n\n lastIndex = getColumnIndex(focusedElement);\n }, 1);\n } else {\n lastIndex = getColumnIndex(focusedElement);\n }\n }\n }\n };\n\n React.useEffect(() => {\n // if some row stuck in hovered state, we heed to unhover it when hover state is paused\n if (tableMeta.hoverState.isPaused) {\n unhoverPreviousRow(props.tableRef);\n }\n }, [tableMeta.hoverState.isPaused]);\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing) {\n return;\n }\n\n handleArrowLeftKey(event);\n handleArrowRightKey(event);\n };\n\n // this ensures we focus either on a field or on the same column when keyboard navigating up/down\n React.useEffect(() => {\n if (tableMeta.currentRow.currentRowIndex === props.index) {\n if (lastIndex !== undefined) {\n const lastIndexCell = props.tableRef.current?.querySelector(\n `[role=\"row\"][data-current=\"true\"] [data-column-index=\"${lastIndex}\"]`\n );\n lastIndexCell?.querySelector(focusableSelector)?.focus();\n } else {\n focusManager.focusFirst(focusManagerOptions);\n }\n }\n // Need to subscribe to current row index and check is it a current row,\n // for a situation where hovered row is the next row after current row...\n // In this case row will not be re-rendered if user switch to next row, because hovered row also renders EditingRow.\n }, [tableMeta.currentRow.currentRowIndex]);\n\n return <MemoedRow {...attributes} onClickCapture={handleClickCapture} onKeyDown={handleKeyDown} />;\n}\n\n// Memoization\n\nexport type MemoedRowProps<TType = unknown> = RowProps<TType> & {\n 'aria-grabbed'?: boolean;\n 'data-current': boolean;\n 'data-selected': boolean;\n draggable: boolean;\n index: number;\n};\n\nconst clickableElements = ['input', 'button', 'a', 'select', 'option', 'label', 'textarea'];\n\nconst MemoedRow = React.memo(function MemoedRow<TType = unknown>(props: MemoedRowProps<TType>) {\n const { index, isLastRow: _1, onClick, onClickCapture, onDrop, row, table, tableRef, ...attributes } = props;\n const ref = React.useRef<HTMLDivElement | null>(null);\n const tableMeta = table.options.meta as TableMeta<TType>;\n const { setIsHovered } = useRowContext();\n\n // we use capture because it also picks up clicks on e.g. select checkboxes\n const handleClickCapture = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (typeof onClickCapture === 'function') {\n onClickCapture(event);\n }\n\n // do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable\n requestAnimationFrame(() => tableMeta.currentRow.setCurrentRowIndex(index));\n };\n\n const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (typeof onClick === 'function') {\n const clickedElement = event.target as HTMLElement;\n\n if (\n !ref.current?.contains(event.target as HTMLElement) ||\n clickableElements.includes(clickedElement.tagName.toLowerCase()) ||\n clickedElement.closest(clickableElements.map(tag => `[role=row] ${tag}`).join(','))\n ) {\n return;\n }\n\n onClick(row.original);\n }\n };\n\n const handleMouseEnter = () => {\n // When user moving mouse to fast, then some of the rows are getting stuck in hover state,\n // because mouseleave event never got triggered, to avoid this to happen we're saving the index of last hovered row,\n // so that we can unhover it when new row got hovered, and saving it in a variable outside of react to save in performance,\n // since it would be very performance heavy to use state which is bound to mouse events.\n if (previouslyHoveredIndex !== undefined) {\n if (previouslyHoveredIndex !== index) {\n unhoverPreviousRow(tableRef);\n previouslyHoveredIndex = index;\n }\n } else {\n previouslyHoveredIndex = index;\n }\n setIsHovered(true);\n };\n const handleMouseLeave = () => {\n if (previouslyHoveredIndex === index) {\n previouslyHoveredIndex = undefined;\n }\n setIsHovered(false);\n };\n\n const [, dropTargetProps] = useDropTarget(event => onDrop?.(event, row.original));\n\n const className = cn(\n 'group/row contents',\n // resizing column requires dragging, which means the mouse might (on rare occasions) move over rows and trigger hover state\n // that in turn triggers rendering of e.g. row actions, which could cause janky ui - so don't allow mouse interaction when resizing\n '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n {\n 'hover:cursor-pointer': typeof onClick === 'function',\n }\n );\n\n return (\n <div\n {...attributes}\n {...(onDrop ? dropTargetProps : undefined)}\n className={className}\n data-row-index={index}\n onClick={handleClick}\n onClickCapture={handleClickCapture}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n role=\"row\"\n ref={ref}\n />\n );\n}) as <TType = unknown>(props: MemoedRowProps<TType>) => JSX.Element;\n"],"names":["Row","props","tableMeta","table","options","meta","isCurrentRow","currentRow","currentRowIndex","index","isDraggingRow","rowDrag","dragging","row","id","isHovered","setIsHovered","React","useState","memoedProps","isEnabled","undefined","getIsSelected","draggable","onClick","rowClick","handleClick","onDrop","rowDrop","handleDrop","output","MemoedRow","editing","isEditing","hoverState","isPaused","EditingRow","isLastRow","setCurrentRowIndex","contextValue","useMemo","rowIndex","RowContext","Provider","value","lastIndex","getColumnIndex","focusedElement","closest","getAttribute","previouslyHoveredIndex","unhoverPreviousRow","tableRef","mouseoutEvent","MouseEvent","view","window","bubbles","cancelable","previouslyHovered","current","querySelector","dispatchEvent","virtualiser","attributes","focusManager","useFocusManager","focusManagerOptions","tabbable","handleClickCapture","event","target","handleArrowLeftKey","key","shiftKey","stopPropagation","preventDefault","ctrlKey","metaKey","blur","focusFirst","focusPrevious","currentTarget","contains","pause","setTimeout","focusLast","handleArrowRightKey","focusNext","useEffect","handleKeyDown","isDefaultPrevented","isPropagationStopped","detailModeEditing","lastIndexCell","focusableSelector","focus","onClickCapture","onKeyDown","clickableElements","memo","_1","ref","useRef","useRowContext","requestAnimationFrame","clickedElement","includes","tagName","toLowerCase","map","tag","join","original","handleMouseEnter","handleMouseLeave","dropTargetProps","useDropTarget","className","cn","onMouseEnter","onMouseLeave","role"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Row.js","sources":["../../../../../../../../../src/components/Table3/components/rows/Row.tsx"],"sourcesContent":["import React from 'react';\nimport { Row as RTRow, Table as RTable, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { RowContext, useRowContext } from './RowContext';\nimport { useDropTarget } from '../../../../utils/hooks/useDropTarget';\nimport { Table3RowClickHandler, Table3RowDropHandler } from '../../types';\nimport { useFocusManager } from '@react-aria/focus';\nimport { focusableSelector } from '../../util/editing';\n\ntype RowProps<TType = unknown> = Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onDrop'> & {\n index: number;\n isLastRow: boolean;\n measureRef: (el: HTMLElement | null) => void;\n onClick?: Table3RowClickHandler<TType>;\n onDrop?: Table3RowDropHandler<TType>;\n row: RTRow<TType>;\n table: RTable<TType>;\n tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport function Row<TType = unknown>(props: RowProps<TType>) {\n const tableMeta = props.table.options.meta as TableMeta<TType>;\n const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;\n const isDraggingRow = tableMeta.rowDrag.dragging[props.row.id];\n // we use non-css hovered state to determine whether to render actions or not, for performance\n const [isHovered, setIsHovered] = React.useState(false);\n\n // rows are heavily memoized because performance in our table is critical\n // be careful and selective about props that you pass to the row\n const memoedProps = {\n // aria-grabbed is being deprecated but there is no current alternative api, we use it until there is\n 'aria-grabbed': isDraggingRow ? true : tableMeta.rowDrag.isEnabled ? false : undefined,\n 'data-current': isCurrentRow,\n 'data-selected': props.row.getIsSelected(),\n draggable: tableMeta.rowDrag.isEnabled,\n index: props.index,\n onClick: tableMeta.rowClick.handleClick,\n onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined,\n };\n\n let output = <MemoedRow<TType> {...props} {...memoedProps} />;\n\n if (tableMeta.editing.isEditing && (isCurrentRow || (isHovered && !tableMeta.hoverState.isPaused))) {\n output = (\n <EditingRow\n {...props}\n {...memoedProps}\n isLastRow={props.isLastRow}\n setCurrentRowIndex={tableMeta.currentRow.setCurrentRowIndex}\n />\n );\n }\n\n // we store the row index in context because in a virtualised table the row index and the\n // react table row index do not match when, for example, sorting is applied\n const contextValue = React.useMemo(() => ({ isHovered, setIsHovered, rowIndex: props.index }), [isHovered, props.index]);\n\n return <RowContext.Provider value={contextValue}>{output}</RowContext.Provider>;\n}\n\n// turns out we might need some kind of \"state\" for the focused column, but it doesn't need to be react state that re-renders\nlet lastIndex;\n\nfunction getColumnIndex(focusedElement: Element) {\n if (focusedElement) {\n return focusedElement.closest('[role=cell]')?.getAttribute('data-column-index');\n }\n\n return null;\n}\n\n// This code is needed to avoid multiple rows being hovered at the same time (it happens since we use non-css hovering)\nlet previouslyHoveredIndex: number | undefined;\nconst unhoverPreviousRow = (tableRef: React.RefObject<HTMLDivElement>) => {\n if (previouslyHoveredIndex !== undefined) {\n const mouseoutEvent = new MouseEvent('mouseout', { view: window, bubbles: true, cancelable: true });\n const previouslyHovered = tableRef?.current?.querySelector(`[data-row-index=\"${previouslyHoveredIndex}\"]`);\n previouslyHovered?.dispatchEvent(mouseoutEvent);\n }\n};\n\nfunction EditingRow(props) {\n const { isLastRow, setCurrentRowIndex, virtualiser, ...attributes } = props;\n const focusManager = useFocusManager();\n const focusManagerOptions = { tabbable: true };\n const tableMeta = props.table.options.meta as TableMeta<unknown>;\n\n const handleClickCapture = (event: React.FocusEvent) => {\n lastIndex = getColumnIndex(event.target);\n };\n\n const handleArrowLeftKey = event => {\n let focusedElement: Element;\n if (event.key === 'ArrowLeft' || (event.key === 'Tab' && event.shiftKey)) {\n // Need to stop propagation because \"Tab\" will be handled twice(default browser and programmatic one)\n // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,\n // so we don't need default browser behaviour.\n event.stopPropagation();\n event.preventDefault();\n\n // \"CTRL + ArrowLeft\" or \"META + ArrowLeft\" should focus first focusable element of the row\n if (event.ctrlKey || event.metaKey) {\n event.target.blur();\n focusedElement = focusManager.focusFirst(focusManagerOptions);\n lastIndex = getColumnIndex(focusedElement);\n } else {\n // Should focus previous focusable element, if there is one\n focusedElement = focusManager.focusPrevious(focusManagerOptions);\n\n // Should move to prevoius row and select last focusable element in that row,\n // if there is no previous focusable element in current row\n if (props.index !== 0 && (!focusedElement || !event.currentTarget.contains(focusedElement))) {\n tableMeta.hoverState.pause(true);\n setCurrentRowIndex(props.index - 1);\n setTimeout(() => {\n focusedElement = focusManager.focusLast(focusManagerOptions);\n // Need to update lastIndex when row got changed and last element got selected.\n lastIndex = getColumnIndex(focusedElement);\n }, 1);\n } else {\n lastIndex = getColumnIndex(focusedElement);\n }\n }\n }\n };\n\n const handleArrowRightKey = event => {\n let focusedElement: Element;\n if (event.key === 'ArrowRight' || (event.key === 'Tab' && !event.shiftKey)) {\n // Need to stop propagation because \"Tab\" will be handled twice(default browser and programmatic one)\n // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,\n // so we don't need default browser behaviour.\n event.stopPropagation();\n event.preventDefault();\n\n // \"CTRL + ArrowRight\" or \"META + ArrowRight\" should focus last focusable element of the row\n if (event.ctrlKey || event.metaKey) {\n event.target.blur();\n focusedElement = focusManager.focusLast(focusManagerOptions);\n lastIndex = getColumnIndex(focusedElement);\n } else {\n // Should focus next focusable element, if there is one\n focusedElement = focusManager.focusNext(focusManagerOptions);\n\n // Should move to next row and select first focusable element in that row,\n // if there is no next focusable element in current row\n if (!isLastRow && (!focusedElement || !event.currentTarget.contains(focusedElement))) {\n tableMeta.hoverState.pause(true);\n setCurrentRowIndex(props.index + 1);\n setTimeout(() => {\n focusedElement = focusManager.focusFirst(focusManagerOptions);\n // Need to update lastIndex when row got changed and first element got selected.\n\n lastIndex = getColumnIndex(focusedElement);\n }, 1);\n } else {\n lastIndex = getColumnIndex(focusedElement);\n }\n }\n }\n };\n\n React.useEffect(() => {\n // if some row stuck in hovered state, we heed to unhover it when hover state is paused\n if (tableMeta.hoverState.isPaused) {\n unhoverPreviousRow(props.tableRef);\n }\n }, [tableMeta.hoverState.isPaused]);\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing) {\n return;\n }\n\n handleArrowLeftKey(event);\n handleArrowRightKey(event);\n };\n\n // this ensures we focus either on a field or on the same column when keyboard navigating up/down\n React.useEffect(() => {\n if (tableMeta.currentRow.currentRowIndex === props.index) {\n if (lastIndex !== undefined) {\n const lastIndexCell = props.tableRef.current?.querySelector(\n `[role=\"row\"][data-current=\"true\"] [data-column-index=\"${lastIndex}\"]`\n );\n lastIndexCell?.querySelector(focusableSelector)?.focus();\n } else {\n focusManager.focusFirst(focusManagerOptions);\n }\n }\n // Need to subscribe to current row index and check is it a current row,\n // for a situation where hovered row is the next row after current row...\n // In this case row will not be re-rendered if user switch to next row, because hovered row also renders EditingRow.\n }, [tableMeta.currentRow.currentRowIndex]);\n\n return <MemoedRow {...attributes} onClickCapture={handleClickCapture} onKeyDown={handleKeyDown} />;\n}\n\n// Memoization\n\nexport type MemoedRowProps<TType = unknown> = RowProps<TType> & {\n 'aria-grabbed'?: boolean;\n 'data-current': boolean;\n 'data-selected': boolean;\n draggable: boolean;\n index: number;\n};\n\nconst clickableElements = ['input', 'button', 'a', 'select', 'option', 'label', 'textarea'];\n\nconst MemoedRow = React.memo(function MemoedRow<TType = unknown>(props: MemoedRowProps<TType>) {\n const { index, isLastRow: _1, measureRef, onClick, onClickCapture, onDrop, row, table, tableRef, ...attributes } = props;\n const ref = React.useRef<HTMLDivElement | null>(null);\n const tableMeta = table.options.meta as TableMeta<TType>;\n const { setIsHovered } = useRowContext();\n\n // we measure the first cell (since the row has display: contents) so that the virtualiser height is correct\n React.useEffect(() => {\n const firstCell = ref.current?.querySelector('[role=cell]:first-child');\n\n if (firstCell) {\n measureRef(firstCell as HTMLElement);\n }\n }, [ref.current]);\n\n // we use capture because it also picks up clicks on e.g. select checkboxes\n const handleClickCapture = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n if (typeof onClickCapture === 'function') {\n onClickCapture(event);\n }\n\n // do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable\n requestAnimationFrame(() => tableMeta.currentRow.setCurrentRowIndex(index));\n };\n\n const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (typeof onClick === 'function') {\n const clickedElement = event.target as HTMLElement;\n\n if (\n !ref.current?.contains(event.target as HTMLElement) ||\n clickableElements.includes(clickedElement.tagName.toLowerCase()) ||\n clickedElement.closest(clickableElements.map(tag => `[role=row] ${tag}`).join(','))\n ) {\n return;\n }\n\n onClick(row.original);\n }\n };\n\n const handleMouseEnter = () => {\n // When user moving mouse to fast, then some of the rows are getting stuck in hover state,\n // because mouseleave event never got triggered, to avoid this to happen we're saving the index of last hovered row,\n // so that we can unhover it when new row got hovered, and saving it in a variable outside of react to save in performance,\n // since it would be very performance heavy to use state which is bound to mouse events.\n if (previouslyHoveredIndex !== undefined) {\n if (previouslyHoveredIndex !== index) {\n unhoverPreviousRow(tableRef);\n previouslyHoveredIndex = index;\n }\n } else {\n previouslyHoveredIndex = index;\n }\n setIsHovered(true);\n };\n const handleMouseLeave = () => {\n if (previouslyHoveredIndex === index) {\n previouslyHoveredIndex = undefined;\n }\n setIsHovered(false);\n };\n\n const [, dropTargetProps] = useDropTarget(event => onDrop?.(event, row.original));\n\n const className = cn(\n 'group/row contents',\n // resizing column requires dragging, which means the mouse might (on rare occasions) move over rows and trigger hover state\n // that in turn triggers rendering of e.g. row actions, which could cause janky ui - so don't allow mouse interaction when resizing\n '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n {\n 'hover:cursor-pointer': typeof onClick === 'function',\n }\n );\n\n return (\n <div\n {...attributes}\n {...(onDrop ? dropTargetProps : undefined)}\n className={className}\n data-row-index={index}\n onClick={handleClick}\n onClickCapture={handleClickCapture}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n role=\"row\"\n ref={ref}\n />\n );\n}) as <TType = unknown>(props: MemoedRowProps<TType>) => JSX.Element;\n"],"names":["Row","props","tableMeta","table","options","meta","isCurrentRow","currentRow","currentRowIndex","index","isDraggingRow","rowDrag","dragging","row","id","isHovered","setIsHovered","React","useState","memoedProps","isEnabled","undefined","getIsSelected","draggable","onClick","rowClick","handleClick","onDrop","rowDrop","handleDrop","output","MemoedRow","editing","isEditing","hoverState","isPaused","EditingRow","isLastRow","setCurrentRowIndex","contextValue","useMemo","rowIndex","RowContext","Provider","value","lastIndex","getColumnIndex","focusedElement","closest","getAttribute","previouslyHoveredIndex","unhoverPreviousRow","tableRef","mouseoutEvent","MouseEvent","view","window","bubbles","cancelable","previouslyHovered","current","querySelector","dispatchEvent","virtualiser","attributes","focusManager","useFocusManager","focusManagerOptions","tabbable","handleClickCapture","event","target","handleArrowLeftKey","key","shiftKey","stopPropagation","preventDefault","ctrlKey","metaKey","blur","focusFirst","focusPrevious","currentTarget","contains","pause","setTimeout","focusLast","handleArrowRightKey","focusNext","useEffect","handleKeyDown","isDefaultPrevented","isPropagationStopped","detailModeEditing","lastIndexCell","focusableSelector","focus","onClickCapture","onKeyDown","clickableElements","memo","_1","measureRef","ref","useRef","useRowContext","firstCell","requestAnimationFrame","clickedElement","includes","tagName","toLowerCase","map","tag","join","original","handleMouseEnter","handleMouseLeave","dropTargetProps","useDropTarget","className","cn","onMouseEnter","onMouseLeave","role"],"mappings":"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"}
|
|
@@ -26,30 +26,39 @@ function Search(props) {
|
|
|
26
26
|
if (firstRowIndex) {
|
|
27
27
|
scrollTo(firstRowIndex);
|
|
28
28
|
}
|
|
29
|
-
}, [table.getRowModel().rows.length, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility)]);
|
|
30
|
-
const handleSearch = query
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
29
|
+
}, [tableMeta.search.query, tableMeta.search.excludeUnmatchedResults, table.getRowModel().rows.length, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility)]);
|
|
30
|
+
const handleSearch = function (query) {
|
|
31
|
+
try {
|
|
32
|
+
function _temp2() {
|
|
33
|
+
if (tableMeta.search.excludeUnmatchedResults) {
|
|
34
|
+
if (value !== null && value !== void 0 && value.length) {
|
|
35
|
+
table.setGlobalFilter(value);
|
|
36
|
+
} else {
|
|
37
|
+
table.resetGlobalFilter();
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
tableMeta.search.setQuery(value);
|
|
38
41
|
}
|
|
39
|
-
|
|
40
|
-
//
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
const value = String(query !== null && query !== void 0 ? query : '');
|
|
43
|
+
// load all data if that is possible
|
|
44
|
+
const _temp = function () {
|
|
45
|
+
if (tableMeta.search.loadAll) {
|
|
46
|
+
// don't pass the search query because we need all data - not filtered data
|
|
47
|
+
return Promise.resolve(tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined)).then(function () {});
|
|
48
|
+
}
|
|
49
|
+
}();
|
|
50
|
+
return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
|
|
51
|
+
} catch (e) {
|
|
52
|
+
return Promise.reject(e);
|
|
46
53
|
}
|
|
47
54
|
};
|
|
48
55
|
const handleToggleExcludeUnmatchedResults = enabled => {
|
|
49
56
|
tableMeta.search.toggleExcludeUnmatchedResults(enabled);
|
|
50
57
|
if (enabled) {
|
|
51
|
-
|
|
52
|
-
|
|
58
|
+
var _ref$current2;
|
|
59
|
+
if ((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.value) {
|
|
60
|
+
var _ref$current3;
|
|
61
|
+
table.setGlobalFilter((_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.value);
|
|
53
62
|
} else {
|
|
54
63
|
table.resetGlobalFilter();
|
|
55
64
|
}
|
|
@@ -57,8 +66,8 @@ function Search(props) {
|
|
|
57
66
|
table.resetGlobalFilter();
|
|
58
67
|
}
|
|
59
68
|
requestAnimationFrame(() => {
|
|
60
|
-
var _ref$
|
|
61
|
-
return (_ref$
|
|
69
|
+
var _ref$current4;
|
|
70
|
+
return (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.focus();
|
|
62
71
|
});
|
|
63
72
|
};
|
|
64
73
|
const handleNextResult = () => {
|
|
@@ -136,6 +145,9 @@ function resetHighlightedColumnIndexes(enabled, value, table) {
|
|
|
136
145
|
tableMeta.search.setHighlightedColumnIndexes([]);
|
|
137
146
|
tableMeta.search.setCurrentHighlightColumnIndex(undefined);
|
|
138
147
|
}
|
|
148
|
+
if (firstRowIndex !== undefined) {
|
|
149
|
+
tableMeta.currentRow.setCurrentRowIndex(firstRowIndex);
|
|
150
|
+
}
|
|
139
151
|
return firstRowIndex;
|
|
140
152
|
}
|
|
141
153
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Search.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Switch } from '../../../Switch/Switch';\nimport { globalFilterFn } from '../../util/filtering';\nimport { isDate } from 'date-fns';\nimport { format, parseFromISOString } from '../../../../utils/date';\nimport { SearchInput2 } from '../../../SearchInput2/SearchInput2';\n\ntype SearchProps<TType = unknown> = {\n scrollToIndex: any;\n table: RTable<TType>;\n};\n\nexport function Search<TType = unknown>(props: SearchProps<TType>) {\n const { scrollToIndex, table } = props;\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLInputElement>(null);\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const scrollTo = (rowIndex: number) => scrollToIndex(rowIndex, { align: 'center' });\n\n // update the indexes if the row length changes (e.g. when filtering)\n React.useEffect(() => {\n const firstRowIndex = resetHighlightedColumnIndexes(tableMeta.search.isHighlightingEnabled, ref.current?.value, table);\n\n if (firstRowIndex) {\n scrollTo(firstRowIndex);\n }\n }, [\n table.getRowModel().rows.length,\n JSON.stringify(table.getState().sorting),\n JSON.stringify(table.getState().columnVisibility),\n ]);\n\n const handleSearch = (query: any) => {\n const value = String(query ?? '');\n tableMeta.search.setQuery(value);\n\n if (tableMeta.search.excludeUnmatchedResults) {\n if (value?.length) {\n table.setGlobalFilter(value);\n } else {\n table.resetGlobalFilter();\n }\n } else if (tableMeta.search.loadAll) {\n // don't pass the search query because filters when loading all, we need all - not filtered data\n tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined);\n }\n\n const firstRowIndex = resetHighlightedColumnIndexes(tableMeta.search.isHighlightingEnabled, value, table);\n\n if (firstRowIndex) {\n scrollTo(firstRowIndex);\n }\n };\n\n const handleToggleExcludeUnmatchedResults = (enabled: boolean) => {\n tableMeta.search.toggleExcludeUnmatchedResults(enabled);\n\n if (enabled) {\n if (tableMeta.search.query) {\n table.setGlobalFilter(tableMeta.search.query);\n } else {\n table.resetGlobalFilter();\n }\n } else {\n table.resetGlobalFilter();\n }\n\n requestAnimationFrame(() => ref.current?.focus());\n };\n\n const handleNextResult = () => {\n if (!tableMeta.search.highlightedColumnIndexes.length) {\n return;\n }\n\n const nextIndex =\n tableMeta.search.currentHighlightColumnIndex === undefined ||\n tableMeta.search.currentHighlightColumnIndex === tableMeta.search.highlightedColumnIndexes.length - 1\n ? 0\n : tableMeta.search.currentHighlightColumnIndex + 1;\n\n tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n // we scroll to the row here, the cell scrolls itself into view\n scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n };\n\n const handlePreviousResult = () => {\n if (!tableMeta.search.highlightedColumnIndexes.length) {\n return;\n }\n\n const nextIndex =\n tableMeta.search.currentHighlightColumnIndex === undefined\n ? 0\n : tableMeta.search.currentHighlightColumnIndex === 0\n ? tableMeta.search.highlightedColumnIndexes.length - 1\n : tableMeta.search.currentHighlightColumnIndex - 1;\n\n tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n // we scroll to the row here, the cell scrolls itself into view\n scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n };\n\n const settings = (\n <Switch\n label={texts.table3.search.excludeUnmatchedResults}\n checked={tableMeta.search.excludeUnmatchedResults}\n onChange={handleToggleExcludeUnmatchedResults}\n />\n );\n\n return (\n <>\n <SearchInput2\n findCurrent={\n tableMeta.search.currentHighlightColumnIndex !== undefined\n ? tableMeta.search.currentHighlightColumnIndex + 1\n : null\n }\n findTotal={tableMeta.search.highlightedColumnIndexes ? tableMeta.search.highlightedColumnIndexes.length : null}\n onClickFindPrevious={handlePreviousResult}\n onClickFindNext={handleNextResult}\n onSearch={handleSearch}\n placeholder={texts.table3.search.placeholder}\n settingsContent={settings}\n ref={ref}\n shortcut={{ key: 'f', meta: true, shift: false }}\n value={tableMeta.search.query}\n />\n </>\n );\n}\n\nfunction resetHighlightedColumnIndexes<TType = unknown>(enabled: boolean, value: string | undefined, table: RTable<TType>) {\n const tableMeta = table.options.meta as TableMeta<TType>;\n let firstRowIndex: undefined | number;\n\n if (enabled && value) {\n const rowIndexes: number[] = [];\n const indexes: number[][] = [];\n const columns = table.getVisibleLeafColumns();\n\n table.getRowModel().rows.forEach((row, rowIndex) => {\n columns.forEach((column, columnIndex) => {\n try {\n if (\n column.columnDef.meta?.enableSearch &&\n row.original &&\n globalFilterFn(\n // if it's a date, format it first\n isDate(row.original[column.id])\n ? format(row.original[column.id]) ?? ''\n : // if its marked as a date but isn't a date, try to format it\n column.columnDef.meta.dataType === 'datetime'\n ? format(parseFromISOString(row.original[column.id])) ?? ''\n : // otherwise just string compare\n String(row.original[column.id]),\n value\n )\n ) {\n indexes.push([rowIndex, columnIndex]);\n }\n } catch (e) {\n //\n }\n });\n\n if (indexes.length) {\n rowIndexes.push(rowIndex);\n }\n });\n\n tableMeta.search.setHighlightedColumnIndexes(indexes);\n\n if (indexes.length) {\n firstRowIndex = indexes[0][0];\n tableMeta.search.setCurrentHighlightColumnIndex(0);\n } else {\n tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n }\n } else {\n tableMeta.search.setHighlightedColumnIndexes([]);\n tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n }\n\n return firstRowIndex;\n}\n"],"names":["Search","props","scrollToIndex","table","texts","useLocalization","ref","React","useRef","tableMeta","options","meta","scrollTo","rowIndex","align","useEffect","firstRowIndex","resetHighlightedColumnIndexes","search","isHighlightingEnabled","current","value","getRowModel","rows","length","JSON","stringify","getState","sorting","columnVisibility","handleSearch","query","String","setQuery","excludeUnmatchedResults","setGlobalFilter","resetGlobalFilter","loadAll","columnFilters","undefined","handleToggleExcludeUnmatchedResults","enabled","toggleExcludeUnmatchedResults","requestAnimationFrame","focus","handleNextResult","highlightedColumnIndexes","nextIndex","currentHighlightColumnIndex","setCurrentHighlightColumnIndex","handlePreviousResult","settings","Switch","label","table3","checked","onChange","SearchInput2","findCurrent","findTotal","onClickFindPrevious","onClickFindNext","onSearch","placeholder","settingsContent","shortcut","key","shift","indexes","columns","getVisibleLeafColumns","forEach","row","column","columnIndex","columnDef","enableSearch","original","globalFilterFn","isDate","id","format","dataType","parseFromISOString","push","e","setHighlightedColumnIndexes"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Search.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/Search.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Switch } from '../../../Switch/Switch';\nimport { globalFilterFn } from '../../util/filtering';\nimport { isDate } from 'date-fns';\nimport { format, parseFromISOString } from '../../../../utils/date';\nimport { SearchInput2 } from '../../../SearchInput2/SearchInput2';\n\ntype SearchProps<TType = unknown> = {\n scrollToIndex: any;\n table: RTable<TType>;\n};\n\nexport function Search<TType = unknown>(props: SearchProps<TType>) {\n const { scrollToIndex, table } = props;\n const { texts } = useLocalization();\n const ref = React.useRef<HTMLInputElement>(null);\n const tableMeta = table.options.meta as TableMeta<TType>;\n\n const scrollTo = (rowIndex: number) => scrollToIndex(rowIndex, { align: 'center' });\n\n // update the indexes if the row length changes (e.g. when filtering)\n React.useEffect(() => {\n const firstRowIndex = resetHighlightedColumnIndexes(tableMeta.search.isHighlightingEnabled, ref.current?.value, table);\n\n if (firstRowIndex) {\n scrollTo(firstRowIndex);\n }\n }, [\n tableMeta.search.query,\n tableMeta.search.excludeUnmatchedResults,\n table.getRowModel().rows.length,\n JSON.stringify(table.getState().sorting),\n JSON.stringify(table.getState().columnVisibility),\n ]);\n\n const handleSearch = async (query: any) => {\n const value = String(query ?? '');\n\n // load all data if that is possible\n if (tableMeta.search.loadAll) {\n // don't pass the search query because we need all data - not filtered data\n await tableMeta.search.loadAll(table.getState().sorting, table.getState().columnFilters, undefined);\n }\n\n if (tableMeta.search.excludeUnmatchedResults) {\n if (value?.length) {\n table.setGlobalFilter(value);\n } else {\n table.resetGlobalFilter();\n }\n }\n\n tableMeta.search.setQuery(value);\n };\n\n const handleToggleExcludeUnmatchedResults = (enabled: boolean) => {\n tableMeta.search.toggleExcludeUnmatchedResults(enabled);\n\n if (enabled) {\n if (ref.current?.value) {\n table.setGlobalFilter(ref.current?.value);\n } else {\n table.resetGlobalFilter();\n }\n } else {\n table.resetGlobalFilter();\n }\n\n requestAnimationFrame(() => ref.current?.focus());\n };\n\n const handleNextResult = () => {\n if (!tableMeta.search.highlightedColumnIndexes.length) {\n return;\n }\n\n const nextIndex =\n tableMeta.search.currentHighlightColumnIndex === undefined ||\n tableMeta.search.currentHighlightColumnIndex === tableMeta.search.highlightedColumnIndexes.length - 1\n ? 0\n : tableMeta.search.currentHighlightColumnIndex + 1;\n\n tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n // we scroll to the row here, the cell scrolls itself into view\n scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n };\n\n const handlePreviousResult = () => {\n if (!tableMeta.search.highlightedColumnIndexes.length) {\n return;\n }\n\n const nextIndex =\n tableMeta.search.currentHighlightColumnIndex === undefined\n ? 0\n : tableMeta.search.currentHighlightColumnIndex === 0\n ? tableMeta.search.highlightedColumnIndexes.length - 1\n : tableMeta.search.currentHighlightColumnIndex - 1;\n\n tableMeta.search.setCurrentHighlightColumnIndex(nextIndex);\n // we scroll to the row here, the cell scrolls itself into view\n scrollTo(tableMeta.search.highlightedColumnIndexes[nextIndex][0]);\n };\n\n const settings = (\n <Switch\n label={texts.table3.search.excludeUnmatchedResults}\n checked={tableMeta.search.excludeUnmatchedResults}\n onChange={handleToggleExcludeUnmatchedResults}\n />\n );\n\n return (\n <>\n <SearchInput2\n findCurrent={\n tableMeta.search.currentHighlightColumnIndex !== undefined\n ? tableMeta.search.currentHighlightColumnIndex + 1\n : null\n }\n findTotal={tableMeta.search.highlightedColumnIndexes ? tableMeta.search.highlightedColumnIndexes.length : null}\n onClickFindPrevious={handlePreviousResult}\n onClickFindNext={handleNextResult}\n onSearch={handleSearch}\n placeholder={texts.table3.search.placeholder}\n settingsContent={settings}\n ref={ref}\n shortcut={{ key: 'f', meta: true, shift: false }}\n value={tableMeta.search.query}\n />\n </>\n );\n}\n\nfunction resetHighlightedColumnIndexes<TType = unknown>(enabled: boolean, value: string | undefined, table: RTable<TType>) {\n const tableMeta = table.options.meta as TableMeta<TType>;\n let firstRowIndex: undefined | number;\n\n if (enabled && value) {\n const rowIndexes: number[] = [];\n const indexes: number[][] = [];\n const columns = table.getVisibleLeafColumns();\n\n table.getRowModel().rows.forEach((row, rowIndex) => {\n columns.forEach((column, columnIndex) => {\n try {\n if (\n column.columnDef.meta?.enableSearch &&\n row.original &&\n globalFilterFn(\n // if it's a date, format it first\n isDate(row.original[column.id])\n ? format(row.original[column.id]) ?? ''\n : // if its marked as a date but isn't a date, try to format it\n column.columnDef.meta.dataType === 'datetime'\n ? format(parseFromISOString(row.original[column.id])) ?? ''\n : // otherwise just string compare\n String(row.original[column.id]),\n value\n )\n ) {\n indexes.push([rowIndex, columnIndex]);\n }\n } catch (e) {\n //\n }\n });\n\n if (indexes.length) {\n rowIndexes.push(rowIndex);\n }\n });\n\n tableMeta.search.setHighlightedColumnIndexes(indexes);\n\n if (indexes.length) {\n firstRowIndex = indexes[0][0];\n tableMeta.search.setCurrentHighlightColumnIndex(0);\n } else {\n tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n }\n } else {\n tableMeta.search.setHighlightedColumnIndexes([]);\n tableMeta.search.setCurrentHighlightColumnIndex(undefined);\n }\n\n if (firstRowIndex !== undefined) {\n tableMeta.currentRow.setCurrentRowIndex(firstRowIndex);\n }\n\n return firstRowIndex;\n}\n"],"names":["Search","props","scrollToIndex","table","texts","useLocalization","ref","React","useRef","tableMeta","options","meta","scrollTo","rowIndex","align","useEffect","firstRowIndex","resetHighlightedColumnIndexes","search","isHighlightingEnabled","current","value","query","excludeUnmatchedResults","getRowModel","rows","length","JSON","stringify","getState","sorting","columnVisibility","handleSearch","setGlobalFilter","resetGlobalFilter","setQuery","String","loadAll","columnFilters","undefined","handleToggleExcludeUnmatchedResults","enabled","toggleExcludeUnmatchedResults","requestAnimationFrame","focus","handleNextResult","highlightedColumnIndexes","nextIndex","currentHighlightColumnIndex","setCurrentHighlightColumnIndex","handlePreviousResult","settings","Switch","label","table3","checked","onChange","SearchInput2","findCurrent","findTotal","onClickFindPrevious","onClickFindNext","onSearch","placeholder","settingsContent","shortcut","key","shift","indexes","columns","getVisibleLeafColumns","forEach","row","column","columnIndex","columnDef","enableSearch","original","globalFilterFn","isDate","id","format","dataType","parseFromISOString","push","e","setHighlightedColumnIndexes","currentRow","setCurrentRowIndex"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRowActions.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useRowActions.ts"],"sourcesContent":["import { Table3RowActionRenderer } from '../../types';\n\nconst ACTIONS_ON_ROW_LENGTH = 4;\n\nexport function useRowActions<TType = unknown>(\n actionsForRow?: Table3RowActionRenderer<TType>[],\n actionsForRowLength = ACTIONS_ON_ROW_LENGTH\n) {\n return {\n actionsForRow,\n actionsForRowLength,\n };\n}\n"],"names":["ACTIONS_ON_ROW_LENGTH","useRowActions","actionsForRow","actionsForRowLength"],"mappings":"AAEA,MAAMA,qBAAqB,GAAG,CAAC;SAEfC,aAAa,CACzBC,aAAgD,EAChDC,mBAAmB,GAAGH,qBAAqB;EAE3C,OAAO;IACHE,aAAa;IACbC;GACH;AACL;;;;"}
|