@economic/taco 2.44.5-create.5 → 2.44.5-create.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/Provider/Localization.d.ts +0 -2
- package/dist/components/Report/Report.d.ts +1 -1
- package/dist/components/Table3/Table3.d.ts +14 -2
- package/dist/components/Table3/components/Columns/Internal/EditingActionsMenu.d.ts +2 -1
- package/dist/components/Table3/components/Row/Editing/CreateRowButton.d.ts +11 -0
- package/dist/components/Table3/features/useTableEditing.d.ts +36 -25
- package/dist/components/Table3/types.d.ts +8 -23
- package/dist/components/Table3/useTable3.d.ts +0 -6
- package/dist/components/Table3/util/editing.d.ts +1 -2
- package/dist/esm/index.css +2 -6
- package/dist/esm/packages/taco/src/components/ModeSwitch/ModeSwitch.js +2 -2
- package/dist/esm/packages/taco/src/components/ModeSwitch/ModeSwitch.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Provider/Localization.js +3 -5
- package/dist/esm/packages/taco/src/components/Provider/Localization.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Switch/Switch.js +1 -1
- package/dist/esm/packages/taco/src/components/Switch/Switch.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/Table3.js +7 -19
- package/dist/esm/packages/taco/src/components/Table3/Table3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js +22 -21
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Cell/EditingControlCell.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js +37 -5
- package/dist/esm/packages/taco/src/components/Table3/components/Columns/Internal/EditingActionsMenu.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/Alert.js +12 -17
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/Alert.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js +90 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateRowButton.js.map +1 -0
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js +14 -2
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/SaveStatus.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Row.js +6 -39
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Row.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Toolbar/Editing/Editing.js +2 -7
- package/dist/esm/packages/taco/src/components/Table3/components/Toolbar/Editing/Editing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js +406 -19
- package/dist/esm/packages/taco/src/components/Table3/features/useTableEditing.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js +32 -37
- package/dist/esm/packages/taco/src/components/Table3/listeners/useTableEditingListener.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js +8 -25
- package/dist/esm/packages/taco/src/components/Table3/useTable3.js.map +1 -1
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js +24 -4
- package/dist/esm/packages/taco/src/components/Table3/util/editing.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js +4 -3
- package/dist/esm/packages/taco/src/primitives/Table/Core/Table.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.js +3 -9
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js +3 -6
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Footer/Footer.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Footer/Footer.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterValue.js +8 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterValue.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableRenderer.js +6 -23
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableRenderer.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/Core/useTable.js +2 -2
- package/dist/esm/packages/taco/src/primitives/Table/Core/useTable.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/types.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/useTableManager.js +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/useTableManager.js.map +1 -1
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js +0 -11
- package/dist/esm/packages/taco/src/primitives/Table/useTableManager/util/setup.js.map +1 -1
- package/dist/esm/packages/taco/src/utils/dom.js +4 -7
- package/dist/esm/packages/taco/src/utils/dom.js.map +1 -1
- package/dist/index.css +2 -6
- package/dist/primitives/Table/Core/Table.d.ts +0 -1
- package/dist/primitives/Table/Core/components/Columns/Internal/Actions.d.ts +1 -3
- package/dist/primitives/Table/Core/components/Footer/Footer.d.ts +2 -2
- package/dist/primitives/Table/Core/features/useTableRenderer.d.ts +2 -2
- package/dist/primitives/Table/Core/features/useTableStyle.d.ts +1 -1
- package/dist/primitives/Table/Core/types.d.ts +0 -3
- package/dist/primitives/Table/Core/useTable.d.ts +2 -2
- package/dist/primitives/Table/types.d.ts +2 -2
- package/dist/primitives/Table/useTableManager/useTableManager.d.ts +1 -1
- package/dist/taco.cjs.development.js +627 -904
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/dist/utils/dom.d.ts +0 -1
- package/package.json +1 -1
- package/dist/components/Table3/components/Editing/DiscardChangesConfirmationDialog.d.ts +0 -7
- package/dist/components/Table3/components/Row/Editing/CreateNewRow.d.ts +0 -13
- package/dist/components/Table3/components/Row/Editing/TemporaryRow.d.ts +0 -11
- package/dist/components/Table3/features/useEditingState.d.ts +0 -28
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/DiscardChangesConfirmationDialog.js +0 -34
- package/dist/esm/packages/taco/src/components/Table3/components/Editing/DiscardChangesConfirmationDialog.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateNewRow.js +0 -88
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/CreateNewRow.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/TemporaryRow.js +0 -95
- package/dist/esm/packages/taco/src/components/Table3/components/Row/Editing/TemporaryRow.js.map +0 -1
- package/dist/esm/packages/taco/src/components/Table3/features/useEditingState.js +0 -512
- package/dist/esm/packages/taco/src/components/Table3/features/useEditingState.js.map +0 -1
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js
CHANGED
@@ -12,14 +12,12 @@ function Actions(props) {
|
|
12
12
|
actionsLength,
|
13
13
|
data,
|
14
14
|
isActiveRow,
|
15
|
-
rowId
|
16
|
-
table
|
15
|
+
rowId
|
17
16
|
} = props;
|
18
17
|
const {
|
19
18
|
texts
|
20
19
|
} = useLocalization();
|
21
|
-
|
22
|
-
const visibleActions = actions.map(action => action(data, rowId, table)).filter(action => !!action);
|
20
|
+
const visibleActions = actions.map(action => action(data, rowId)).filter(action => !!action);
|
23
21
|
const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
|
24
22
|
const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
|
25
23
|
const className = cn('flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden');
|
@@ -75,8 +73,7 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
|
|
75
73
|
actionsLength: actionsLength,
|
76
74
|
data: row.original,
|
77
75
|
isActiveRow: isActiveRow,
|
78
|
-
rowId: row.id
|
79
|
-
table: table
|
76
|
+
rowId: row.id
|
80
77
|
});
|
81
78
|
}
|
82
79
|
return null;
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Columns/Internal/Actions.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport {
|
1
|
+
{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Columns/Internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext as ReactTableCellContext, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { useLocalization } from '../../../../../../components/Provider/Localization';\nimport { IconButton } from '../../../../../../components/IconButton/IconButton';\nimport { Menu } from '../../../../../../components/Menu/Menu';\nimport { Shortcut } from '../../../../../../components/Shortcut/Shortcut';\nimport { TableRowActionRenderer } from '../../../../types';\nimport { RowContext } from '../../Row/RowContext';\nimport { useTableManagerInternalColumn } from '../../../../useTableManager/types';\n\nexport type ActionsProps<TType = unknown> = {\n actions: TableRowActionRenderer<TType>[];\n actionsLength: number;\n data: any;\n isActiveRow: boolean;\n rowId: string;\n};\nexport function Actions<TType = unknown>(props: ActionsProps<TType>) {\n const { actions, actionsLength, data, isActiveRow, rowId } = props;\n const { texts } = useLocalization();\n const visibleActions = actions.map(action => action(data, rowId)).filter(action => !!action) as JSX.Element[];\n\n const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n const className = cn(\n 'flex justify-end text-right bg-[inherit] shadow-[-6px_0px_6px_var(--table-row-actions-shadow)] print:hidden'\n );\n\n return (\n <span className={className}>\n {actionsOnRow.map((button, index) => {\n const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n return React.cloneElement(button, {\n appearance: 'transparent',\n key: index,\n tabIndex: isActiveRow ? 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=\"transparent\"\n aria-label={texts.table.columns.actions.tooltip}\n icon=\"more\"\n tabIndex={isActiveRow ? 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\nfunction Header() {\n return null;\n}\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(context: ReactTableCellContext<TType, unknown>) {\n const { row, table } = context;\n const { isHovered, rowIndex } = React.useContext(RowContext);\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const actions = tableMeta.rowActions.rowActions;\n const actionsLength = tableMeta.rowActions.rowActionsLength;\n\n const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n const isResizingColumn = !!table.getState().columnSizingInfo.isResizingColumn;\n const isHoverStatePaused = tableMeta.rowActive.isHoverStatePaused;\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 && (isActiveRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n return (\n <Actions\n actions={actions}\n actionsLength={actionsLength}\n data={row.original}\n isActiveRow={isActiveRow}\n rowId={row.id}\n />\n );\n }\n\n return null;\n}) as <TType = unknown>(context: ReactTableCellContext<TType, unknown>) => JSX.Element;\n\nexport const renderer: useTableManagerInternalColumn = {\n header: Header,\n renderer: Cell,\n meta: {\n align: 'right',\n className: cn(\n 'print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active=\"true\"]]/row:sticky right-0',\n 'group-[[data-row-active=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n 'group-[[data-row-selected=\"true\"]]/row:text-blue-100',\n 'group-[[data-row-selected=\"false\"]:hover]/row:text-grey-100'\n ),\n // TODO: remove when table3 is migrated, this satisfies the legacy table3 type\n enableSearch: false,\n header: '',\n },\n};\n"],"names":["Actions","props","actions","actionsLength","data","isActiveRow","rowId","texts","useLocalization","visibleActions","map","action","filter","actionsOnRow","length","slice","actionsInMenu","className","cn","React","button","index","tooltip","String","_ref","_button$props$tooltip","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","table","columns","icon","menu","menuProps","Menu","Content","i","Item","Header","Cell","memo","MemoedCell","context","row","isHovered","rowIndex","useContext","RowContext","tableMeta","options","meta","rowActions","rowActionsLength","rowActive","rowActiveIndex","isResizingColumn","getState","columnSizingInfo","isHoverStatePaused","original","id","renderer","header","align","enableSearch"],"mappings":"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"}
|
@@ -4,7 +4,7 @@ import { Summary } from './Summary.js';
|
|
4
4
|
|
5
5
|
function Foot(props) {
|
6
6
|
const nonGroupedHeaders = props.table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
|
7
|
-
return /*#__PURE__*/React__default.createElement("tfoot", null,
|
7
|
+
return /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer, {
|
8
8
|
key: header.id,
|
9
9
|
header: header,
|
10
10
|
index: index
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Footer.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Header as ReactTableHeader,\n ColumnMeta as ReactTableColumnMeta,\n flexRender,\n Table as ReactTable,\n} from '@tanstack/react-table';\nimport { Summary } from './Summary';\n\nexport type FootProps<TType = unknown> =
|
1
|
+
{"version":3,"file":"Footer.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Footer/Footer.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Header as ReactTableHeader,\n ColumnMeta as ReactTableColumnMeta,\n flexRender,\n Table as ReactTable,\n} from '@tanstack/react-table';\nimport { Summary } from './Summary';\n\nexport type FootProps<TType = unknown> = {\n table: ReactTable<TType>;\n};\nexport function Foot<TType = unknown>(props: FootProps<TType>) {\n const nonGroupedHeaders = props.table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());\n return (\n <tfoot>\n <tr>\n {nonGroupedHeaders.map((header, index) => (\n <Footer key={header.id} header={header} index={index} />\n ))}\n </tr>\n </tfoot>\n );\n}\n\nexport type FooterProps<TType = unknown> = {\n header: ReactTableHeader<TType, unknown>;\n index: number;\n};\nexport function Footer<TType = unknown>(props: FooterProps<TType>) {\n return <MemoedFooter footer={props.header} index={props.index} />;\n}\n\nexport type MemoedFooterProps<TType = unknown> = {\n footer: ReactTableHeader<TType, unknown>;\n index: number;\n};\nconst MemoedFooter = React.memo(function MemoedFooter<TType = unknown>(props: MemoedFooterProps<TType>) {\n const { footer, index } = props;\n const columnMeta = footer.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n\n // getIsPinned returns true for split header groups, even if the split group has no pinned sub headers\n const isHeaderGroup = !!footer.subHeaders?.length;\n const isPinned = isHeaderGroup\n ? footer.subHeaders.find(x => x.column.getIsPinned())?.column.getIsPinned()\n : footer.column.getIsPinned();\n\n const style: React.CSSProperties = {};\n\n if (isPinned) {\n // pinned columns should be offset from either the left or right\n style[isPinned] = `${footer.column.getStart(isPinned)}px`;\n }\n\n let content;\n let align;\n\n if (index === 0) {\n align = 'left';\n content = <Summary table={footer.getContext().table} />;\n } else {\n align = columnMeta.align;\n content = footer.isPlaceholder ? null : flexRender(footer.column.columnDef.footer, footer.getContext());\n }\n\n return (\n <td\n key={footer.id}\n data-cell-align={align}\n data-cell-id={footer.id}\n data-cell-pinned={isPinned ? isPinned : undefined}\n style={style}>\n {content}\n </td>\n );\n}) as <TType = unknown>(props: MemoedFooterProps<TType>) => JSX.Element;\n"],"names":["Foot","props","nonGroupedHeaders","table","getFooterGroups","headers","filter","header","column","getIsGrouped","React","map","index","Footer","key","id","MemoedFooter","footer","memo","columnMeta","columnDef","meta","isHeaderGroup","_footer$subHeaders","subHeaders","length","isPinned","_footer$subHeaders$fi","find","x","getIsPinned","style","getStart","content","align","Summary","getContext","isPlaceholder","flexRender","undefined"],"mappings":";;;;SAYgBA,IAAIA,CAAkBC,KAAuB;EACzD,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,KAAK,CAACC,eAAe,EAAE,CAAC,CAAC,CAAC,CAACC,OAAO,CAACC,MAAM,CAACC,MAAM,IAAI,CAACA,MAAM,CAACC,MAAM,CAACC,YAAY,EAAE,CAAC;EAClH,oBACIC,yDACIA,yCACKR,iBAAiB,CAACS,GAAG,CAAC,CAACJ,MAAM,EAAEK,KAAK,mBACjCF,6BAACG,MAAM;IAACC,GAAG,EAAEP,MAAM,CAACQ,EAAE;IAAER,MAAM,EAAEA,MAAM;IAAEK,KAAK,EAAEA;IAAS,CAC3D,CAAC,CACD,CACD;AAEhB;SAMgBC,MAAMA,CAAkBZ,KAAyB;EAC7D,oBAAOS,6BAACM,YAAY;IAACC,MAAM,EAAEhB,KAAK,CAACM,MAAM;IAAEK,KAAK,EAAEX,KAAK,CAACW;IAAS;AACrE;AAMA,MAAMI,YAAY,gBAAGN,cAAK,CAACQ,IAAI,CAAC,SAASF,YAAYA,CAAkBf,KAA+B;;EAClG,MAAM;IAAEgB,MAAM;IAAEL;GAAO,GAAGX,KAAK;EAC/B,MAAMkB,UAAU,GAAGF,MAAM,CAACT,MAAM,CAACY,SAAS,CAACC,IAA4C;;EAGvF,MAAMC,aAAa,GAAG,CAAC,GAAAC,kBAAA,GAACN,MAAM,CAACO,UAAU,cAAAD,kBAAA,eAAjBA,kBAAA,CAAmBE,MAAM;EACjD,MAAMC,QAAQ,GAAGJ,aAAa,IAAAK,qBAAA,GACxBV,MAAM,CAACO,UAAU,CAACI,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACrB,MAAM,CAACsB,WAAW,EAAE,CAAC,cAAAH,qBAAA,uBAAnDA,qBAAA,CAAqDnB,MAAM,CAACsB,WAAW,EAAE,GACzEb,MAAM,CAACT,MAAM,CAACsB,WAAW,EAAE;EAEjC,MAAMC,KAAK,GAAwB,EAAE;EAErC,IAAIL,QAAQ,EAAE;;IAEVK,KAAK,CAACL,QAAQ,CAAC,GAAG,GAAGT,MAAM,CAACT,MAAM,CAACwB,QAAQ,CAACN,QAAQ,CAAC,IAAI;;EAG7D,IAAIO,OAAO;EACX,IAAIC,KAAK;EAET,IAAItB,KAAK,KAAK,CAAC,EAAE;IACbsB,KAAK,GAAG,MAAM;IACdD,OAAO,gBAAGvB,6BAACyB,OAAO;MAAChC,KAAK,EAAEc,MAAM,CAACmB,UAAU,EAAE,CAACjC;MAAS;GAC1D,MAAM;IACH+B,KAAK,GAAGf,UAAU,CAACe,KAAK;IACxBD,OAAO,GAAGhB,MAAM,CAACoB,aAAa,GAAG,IAAI,GAAGC,UAAU,CAACrB,MAAM,CAACT,MAAM,CAACY,SAAS,CAACH,MAAM,EAAEA,MAAM,CAACmB,UAAU,EAAE,CAAC;;EAG3G,oBACI1B;IACII,GAAG,EAAEG,MAAM,CAACF,EAAE;uBACGmB,KAAK;oBACRjB,MAAM,CAACF,EAAE;wBACLW,QAAQ,GAAGA,QAAQ,GAAGa,SAAS;IACjDR,KAAK,EAAEA;KACNE,OAAO,CACP;AAEb,CAAC,CAAsE;;;;"}
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js
CHANGED
@@ -114,7 +114,7 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
|
|
114
114
|
const expansionRef = React__default.useRef(null);
|
115
115
|
const isExpanded = !!attributes['data-row-expanded'];
|
116
116
|
useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);
|
117
|
-
const className = cn('group/row',
|
117
|
+
const className = cn('group/row', {
|
118
118
|
'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',
|
119
119
|
'hover:cursor-pointer': typeof attributes.onClick === 'function'
|
120
120
|
});
|
package/dist/esm/packages/taco/src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"DisplayRow.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Cell } from '../../Columns/Cell/Cell';\nimport { TableRowRendererProps } from '../../../types';\nimport { TableRowWithMetaData } from '../../../../types';\nimport { isElementInteractive } from '../../../../../../utils/dom';\nimport { useDropTarget } from '../../../../../../utils/hooks/useDropTarget';\n\nexport type DisplayRowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> & TableRowRendererProps<TType>;\n\nexport const DisplayRow = React.memo(function DisplayRow<TType = unknown>(props: DisplayRowProps<TType>) {\n const { children, cellRenderer: CellRenderer, index, measureRow, row, table, ...otherAttributes } = props;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const attributes: any = {\n ...otherAttributes,\n 'data-row-id': row.id,\n 'data-row-index': index,\n tabIndex: -1,\n };\n\n const handleClick = React.useCallback(\n (event: React.MouseEvent<HTMLTableRowElement>) => {\n const clickedElement = event.target as HTMLElement;\n\n if (!event.currentTarget?.contains(event.target as HTMLElement) || isElementInteractive(clickedElement)) {\n return;\n }\n\n tableMeta.rowClick.handleClick(event, row.original);\n },\n [row.original]\n );\n const handleClickCapture = React.useCallback(() => {\n tableMeta.rowActive.setRowActiveIndex(index);\n }, [index]);\n\n // row active\n if (tableMeta.rowActive.isEnabled) {\n attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;\n // we use capture because it let's us picks up clicks on components inside the row, e.g. checkboxes\n attributes.onClickCapture = handleClickCapture;\n }\n\n // row click\n if (tableMeta.rowClick.isEnabled(row.original)) {\n attributes.onClick = handleClick;\n }\n\n // row drag\n if (tableMeta.rowDrag.isEnabled) {\n attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];\n attributes.draggable = true;\n const GHOST_ELEMENT_ID = 'taco_table_dragging';\n\n attributes.onDragStart = (event: React.DragEvent): void => {\n let rows = [row];\n\n if (row.getCanSelect()) {\n rows = row.getIsSelected() ? 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 tableMeta.rowDrag.handleRowDrag?.(data, showPlaceholder, setDataTransfer);\n };\n\n attributes.onDragEnd = (): void => {\n document.getElementById(GHOST_ELEMENT_ID)?.remove();\n tableMeta.rowDrag.setDragging?.({});\n };\n }\n\n // row drop\n const [isDraggedOver, dropTargetProps] = useDropTarget(event => tableMeta.rowDrop.handleDrop?.(event, row.original));\n\n if (tableMeta.rowDrop.isEnabled) {\n attributes.onDragEnter = dropTargetProps?.onDragEnter;\n attributes.onDragLeave = dropTargetProps?.onDragLeave;\n attributes.onDragOver = dropTargetProps?.onDragOver;\n attributes.onDrop = dropTargetProps?.onDrop;\n attributes['data-row-dragged-over'] = isDraggedOver;\n }\n\n // row grouping\n if (table.options.enableGrouping) {\n attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;\n }\n\n // row selection\n if (row.getCanSelect()) {\n attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;\n }\n\n // row expansion\n let expandedRow;\n\n if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {\n attributes['data-row-expanded'] = true;\n expandedRow = tableMeta.rowExpansion.rowExpansionRenderer?.(row.original)?.();\n }\n\n const rowMeta = (row.original as TableRowWithMetaData<TType>)._meta;\n\n if (rowMeta) {\n if (rowMeta.layout) {\n attributes['data-row-meta-layout'] = rowMeta.layout;\n }\n }\n\n const ref = React.useRef<HTMLTableRowElement>(null);\n const expansionRef = React.useRef<HTMLTableRowElement>(null);\n const isExpanded = !!attributes['data-row-expanded'];\n\n useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);\n\n const className = cn('group/row', otherAttributes.className, {\n 'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',\n 'hover:cursor-pointer': typeof attributes.onClick === 'function',\n });\n\n return (\n <>\n <tr {...attributes} className={className} ref={ref}>\n {children}\n {row.getVisibleCells().map((cell, cellIndex) => (\n <Cell key={cell.id} cell={cell} index={cellIndex} renderer={CellRenderer} />\n ))}\n </tr>\n {expandedRow ? (\n <tr data-row-parent-id={row.id} ref={expansionRef}>\n <td className=\"col-span-full\">{expandedRow}</td>\n </tr>\n ) : null}\n </>\n );\n}) as <TType = unknown>(props: TableRowRendererProps<TType>) => JSX.Element;\n\nfunction useSetVirtualisedRowHeight(\n measureRow: (size: number, expansionHeight?: number) => void,\n rowEl: HTMLTableRowElement | null,\n expansionEl: HTMLTableRowElement | null,\n isExpanded: boolean\n) {\n React.useEffect(() => {\n if (rowEl) {\n const height = rowEl.getBoundingClientRect().height;\n\n if (isExpanded && expansionEl) {\n measureRow(height, expansionEl.getBoundingClientRect().height);\n } else {\n measureRow(height);\n }\n }\n }, [isExpanded, rowEl, expansionEl]);\n}\n"],"names":["DisplayRow","React","memo","props","children","cellRenderer","CellRenderer","index","measureRow","row","table","otherAttributes","tableMeta","options","meta","attributes","id","tabIndex","handleClick","useCallback","event","clickedElement","target","_event$currentTarget","currentTarget","contains","isElementInteractive","rowClick","original","handleClickCapture","rowActive","setRowActiveIndex","isEnabled","rowActiveIndex","undefined","onClickCapture","onClick","rowDrag","dragging","draggable","GHOST_ELEMENT_ID","onDragStart","rows","getCanSelect","getIsSelected","getSelectedRowModel","data","map","_tableMeta$rowDrag$se","_tableMeta$rowDrag","setDragging","call","reduce","rowBeingDragged","dataTransfer","setData","JSON","stringify","showPlaceholder","text","ghost","document","createElement","className","innerText","body","appendChild","setDragImage","setDataTransfer","_tableMeta$rowDrag$ha","_tableMeta$rowDrag2","handleRowDrag","onDragEnd","_document$getElementB","getElementById","remove","_tableMeta$rowDrag$se2","_tableMeta$rowDrag3","isDraggedOver","dropTargetProps","useDropTarget","_tableMeta$rowDrop$ha","_tableMeta$rowDrop","rowDrop","handleDrop","onDragEnter","onDragLeave","onDragOver","onDrop","enableGrouping","getIsGrouped","getIsAllSubRowsSelected","expandedRow","rowExpansion","getIsExpanded","_tableMeta$rowExpansi","_tableMeta$rowExpansi2","_tableMeta$rowExpansi3","rowExpansionRenderer","rowMeta","_meta","layout","ref","useRef","expansionRef","isExpanded","useSetVirtualisedRowHeight","current","cn","getVisibleCells","cell","cellIndex","Cell","key","renderer","rowEl","expansionEl","useEffect","height","getBoundingClientRect"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"DisplayRow.js","sources":["../../../../../../../../../../../src/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.tsx"],"sourcesContent":["import React from 'react';\nimport { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { Cell } from '../../Columns/Cell/Cell';\nimport { TableRowRendererProps } from '../../../types';\nimport { TableRowWithMetaData } from '../../../../types';\nimport { isElementInteractive } from '../../../../../../utils/dom';\nimport { useDropTarget } from '../../../../../../utils/hooks/useDropTarget';\n\nexport type DisplayRowProps<TType = unknown> = React.HTMLAttributes<HTMLTableRowElement> & TableRowRendererProps<TType>;\n\nexport const DisplayRow = React.memo(function DisplayRow<TType = unknown>(props: DisplayRowProps<TType>) {\n const { children, cellRenderer: CellRenderer, index, measureRow, row, table, ...otherAttributes } = props;\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n const attributes: any = {\n ...otherAttributes,\n 'data-row-id': row.id,\n 'data-row-index': index,\n tabIndex: -1,\n };\n\n const handleClick = React.useCallback(\n (event: React.MouseEvent<HTMLTableRowElement>) => {\n const clickedElement = event.target as HTMLElement;\n\n if (!event.currentTarget?.contains(event.target as HTMLElement) || isElementInteractive(clickedElement)) {\n return;\n }\n\n tableMeta.rowClick.handleClick(event, row.original);\n },\n [row.original]\n );\n const handleClickCapture = React.useCallback(() => {\n tableMeta.rowActive.setRowActiveIndex(index);\n }, [index]);\n\n // row active\n if (tableMeta.rowActive.isEnabled) {\n attributes['data-row-active'] = tableMeta.rowActive.rowActiveIndex === index ? true : undefined;\n // we use capture because it let's us picks up clicks on components inside the row, e.g. checkboxes\n attributes.onClickCapture = handleClickCapture;\n }\n\n // row click\n if (tableMeta.rowClick.isEnabled(row.original)) {\n attributes.onClick = handleClick;\n }\n\n // row drag\n if (tableMeta.rowDrag.isEnabled) {\n attributes['aria-grabbed'] = !!tableMeta.rowDrag.dragging[row.id];\n attributes.draggable = true;\n const GHOST_ELEMENT_ID = 'taco_table_dragging';\n\n attributes.onDragStart = (event: React.DragEvent): void => {\n let rows = [row];\n\n if (row.getCanSelect()) {\n rows = row.getIsSelected() ? 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 tableMeta.rowDrag.handleRowDrag?.(data, showPlaceholder, setDataTransfer);\n };\n\n attributes.onDragEnd = (): void => {\n document.getElementById(GHOST_ELEMENT_ID)?.remove();\n tableMeta.rowDrag.setDragging?.({});\n };\n }\n\n // row drop\n const [isDraggedOver, dropTargetProps] = useDropTarget(event => tableMeta.rowDrop.handleDrop?.(event, row.original));\n\n if (tableMeta.rowDrop.isEnabled) {\n attributes.onDragEnter = dropTargetProps?.onDragEnter;\n attributes.onDragLeave = dropTargetProps?.onDragLeave;\n attributes.onDragOver = dropTargetProps?.onDragOver;\n attributes.onDrop = dropTargetProps?.onDrop;\n attributes['data-row-dragged-over'] = isDraggedOver;\n }\n\n // row grouping\n if (table.options.enableGrouping) {\n attributes['data-row-group'] = row.getIsGrouped() ? true : undefined;\n }\n\n // row selection\n if (row.getCanSelect()) {\n attributes['data-row-selected'] = row.getIsSelected() || row.getIsAllSubRowsSelected() ? true : undefined;\n }\n\n // row expansion\n let expandedRow;\n\n if (tableMeta.rowExpansion.isEnabled && row.getIsExpanded()) {\n attributes['data-row-expanded'] = true;\n expandedRow = tableMeta.rowExpansion.rowExpansionRenderer?.(row.original)?.();\n }\n\n const rowMeta = (row.original as TableRowWithMetaData<TType>)._meta;\n\n if (rowMeta) {\n if (rowMeta.layout) {\n attributes['data-row-meta-layout'] = rowMeta.layout;\n }\n }\n\n const ref = React.useRef<HTMLTableRowElement>(null);\n const expansionRef = React.useRef<HTMLTableRowElement>(null);\n const isExpanded = !!attributes['data-row-expanded'];\n\n useSetVirtualisedRowHeight(measureRow, ref.current, expansionRef.current, isExpanded);\n\n const className = cn('group/row', {\n 'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',\n 'hover:cursor-pointer': typeof attributes.onClick === 'function',\n });\n\n return (\n <>\n <tr {...attributes} className={className} ref={ref}>\n {children}\n {row.getVisibleCells().map((cell, cellIndex) => (\n <Cell key={cell.id} cell={cell} index={cellIndex} renderer={CellRenderer} />\n ))}\n </tr>\n {expandedRow ? (\n <tr data-row-parent-id={row.id} ref={expansionRef}>\n <td className=\"col-span-full\">{expandedRow}</td>\n </tr>\n ) : null}\n </>\n );\n}) as <TType = unknown>(props: TableRowRendererProps<TType>) => JSX.Element;\n\nfunction useSetVirtualisedRowHeight(\n measureRow: (size: number, expansionHeight?: number) => void,\n rowEl: HTMLTableRowElement | null,\n expansionEl: HTMLTableRowElement | null,\n isExpanded: boolean\n) {\n React.useEffect(() => {\n if (rowEl) {\n const height = rowEl.getBoundingClientRect().height;\n\n if (isExpanded && expansionEl) {\n measureRow(height, expansionEl.getBoundingClientRect().height);\n } else {\n measureRow(height);\n }\n }\n }, [isExpanded, rowEl, expansionEl]);\n}\n"],"names":["DisplayRow","React","memo","props","children","cellRenderer","CellRenderer","index","measureRow","row","table","otherAttributes","tableMeta","options","meta","attributes","id","tabIndex","handleClick","useCallback","event","clickedElement","target","_event$currentTarget","currentTarget","contains","isElementInteractive","rowClick","original","handleClickCapture","rowActive","setRowActiveIndex","isEnabled","rowActiveIndex","undefined","onClickCapture","onClick","rowDrag","dragging","draggable","GHOST_ELEMENT_ID","onDragStart","rows","getCanSelect","getIsSelected","getSelectedRowModel","data","map","_tableMeta$rowDrag$se","_tableMeta$rowDrag","setDragging","call","reduce","rowBeingDragged","dataTransfer","setData","JSON","stringify","showPlaceholder","text","ghost","document","createElement","className","innerText","body","appendChild","setDragImage","setDataTransfer","_tableMeta$rowDrag$ha","_tableMeta$rowDrag2","handleRowDrag","onDragEnd","_document$getElementB","getElementById","remove","_tableMeta$rowDrag$se2","_tableMeta$rowDrag3","isDraggedOver","dropTargetProps","useDropTarget","_tableMeta$rowDrop$ha","_tableMeta$rowDrop","rowDrop","handleDrop","onDragEnter","onDragLeave","onDragOver","onDrop","enableGrouping","getIsGrouped","getIsAllSubRowsSelected","expandedRow","rowExpansion","getIsExpanded","_tableMeta$rowExpansi","_tableMeta$rowExpansi2","_tableMeta$rowExpansi3","rowExpansionRenderer","rowMeta","_meta","layout","ref","useRef","expansionRef","isExpanded","useSetVirtualisedRowHeight","current","cn","getVisibleCells","cell","cellIndex","Cell","key","renderer","rowEl","expansionEl","useEffect","height","getBoundingClientRect"],"mappings":"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"}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import React__default, { useEffect } from 'react';
|
2
2
|
import { useLocalization } from '../../../../../../../../components/Provider/Localization.js';
|
3
|
+
import { Checkbox } from '../../../../../../../../components/Checkbox/Checkbox.js';
|
3
4
|
import { Input } from '../../../../../../../../components/Input/Input.js';
|
4
5
|
import { Datepicker } from '../../../../../../../../components/Datepicker/Datepicker.js';
|
5
6
|
import { Switch } from '../../../../../../../../components/Switch/Switch.js';
|
@@ -84,7 +85,7 @@ function Control(props) {
|
|
84
85
|
const dataType = column === null || column === void 0 ? void 0 : (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType;
|
85
86
|
useEffect(() => {
|
86
87
|
// Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened
|
87
|
-
if (controlRenderer === 'switch' && value === undefined) {
|
88
|
+
if ((controlRenderer === 'switch' || controlRenderer === 'checkbox') && value === undefined) {
|
88
89
|
onChange(false);
|
89
90
|
}
|
90
91
|
}, [controlRenderer]);
|
@@ -108,6 +109,12 @@ function Control(props) {
|
|
108
109
|
checked: Boolean(value),
|
109
110
|
onChange: onChange
|
110
111
|
}));
|
112
|
+
} else if (controlRenderer === 'checkbox') {
|
113
|
+
return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, attributes, {
|
114
|
+
className: "!m-1.5",
|
115
|
+
checked: Boolean(value),
|
116
|
+
onChange: onChange
|
117
|
+
}));
|
111
118
|
} else if ((controlRenderer === 'input' || controlRenderer === undefined) && dataType === 'number') {
|
112
119
|
return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
|
113
120
|
className: "flex-grow",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FilterValue.js","sources":["../../../../../../../../../../../../../src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterValue.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Column as ReactTableColumn } from '@tanstack/react-table';\nimport { Input } from '../../../../../../../../components/Input/Input';\nimport { Datepicker } from '../../../../../../../../components/Datepicker/Datepicker';\nimport { Switch } from '../../../../../../../../components/Switch/Switch';\nimport { useLocalization } from '../../../../../../../../components/Provider/Localization';\nimport { TableColumnDataType, TableFilterComparator } from '../../../../../../types';\n\nexport type FilterValueProps<TType = unknown> = {\n column?: ReactTableColumn<TType, unknown>;\n comparator: TableFilterComparator;\n onChange: (value: any) => void;\n value: any;\n};\n\nconst querySelector = 'filter-value';\n\nexport function FilterValue<TType = unknown>(props: FilterValueProps<TType>) {\n const { column, comparator, onChange: handleChange, value } = props;\n const { texts } = useLocalization();\n\n if (comparator === TableFilterComparator.IsEmpty || comparator === TableFilterComparator.IsNotEmpty) {\n return null;\n }\n\n if (comparator === TableFilterComparator.IsBetween) {\n const fromValue = Array.isArray(value) ? value[0] : undefined;\n const toValue = Array.isArray(value) ? value[1] : undefined;\n\n if (column === undefined) {\n return (\n <Input\n aria-label={texts.table.filters.emptyFilter.value}\n className=\"flex-grow\"\n data-query-selector={querySelector}\n disabled\n value={texts.table.filters.emptyFilter.value}\n />\n );\n }\n\n if (column.columnDef.meta?.dataType === 'datetime') {\n return (\n <div className=\"flex flex-grow items-center gap-2\">\n <Control\n column={column}\n data-query-selector={querySelector}\n onChange={value => handleChange([value, toValue])}\n value={fromValue}\n />\n <Control\n column={column}\n data-query-selector={querySelector}\n onChange={value => handleChange([fromValue, value])}\n value={toValue}\n />\n </div>\n );\n }\n\n return (\n <div className=\"flex flex-grow items-center gap-2\">\n <Control\n column={column}\n data-query-selector={querySelector}\n onChange={value => handleChange([isNaN(value) ? undefined : value, toValue])}\n placeholder=\"from\"\n value={fromValue ?? ''}\n />\n <Control\n column={column}\n data-query-selector={querySelector}\n onChange={value => handleChange([fromValue, isNaN(value) ? undefined : value])}\n placeholder=\"to\"\n value={toValue ?? ''}\n />\n </div>\n );\n }\n return (\n <Control\n comparator={comparator}\n column={column}\n data-query-selector={querySelector}\n onChange={handleChange}\n value={value}\n />\n );\n}\n\nfunction Control(props) {\n const { column, comparator, onChange, value, ...attributes } = props;\n const controlRenderer = column?.columnDef.meta?.control;\n const dataType: TableColumnDataType = column?.columnDef.meta?.dataType;\n\n useEffect(() => {\n // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened\n if (controlRenderer === 'switch' && value === undefined) {\n onChange(false);\n }\n }, [controlRenderer]);\n\n if (typeof controlRenderer === 'function') {\n return React.cloneElement(\n controlRenderer({\n ...attributes,\n setValue: value => onChange(value),\n value,\n }),\n { ['data-query-selector']: querySelector, className: 'focus:yt-focus' }\n );\n } else if (controlRenderer === 'datepicker' || dataType === 'datetime') {\n return <Datepicker {...attributes} onChange={event => onChange((event as any).detail)} value={value as Date} />;\n } else if (controlRenderer === 'switch') {\n return <Switch {...attributes} className=\"m-1.5\" checked={Boolean(value)} onChange={onChange} />;\n } else if ((controlRenderer === 'input' || controlRenderer === undefined) && dataType === 'number') {\n return (\n <Input\n {...attributes}\n className=\"flex-grow\"\n type=\"number\"\n onChange={event => onChange(event.target.valueAsNumber)}\n value={String(value ?? '')}\n />\n );\n }\n\n return (\n <Input\n disabled={!column}\n {...attributes}\n className=\"flex-grow\"\n onChange={event => onChange(event.target.value)}\n value={String(value ?? '')}\n />\n );\n}\n"],"names":["querySelector","FilterValue","props","column","comparator","onChange","handleChange","value","texts","useLocalization","TableFilterComparator","IsEmpty","IsNotEmpty","IsBetween","_column$columnDef$met","fromValue","Array","isArray","undefined","toValue","React","Input","table","filters","emptyFilter","className","disabled","columnDef","meta","dataType","Control","isNaN","placeholder","attributes","controlRenderer","_column$columnDef$met2","control","_column$columnDef$met3","useEffect","cloneElement","setValue","Datepicker","event","detail","Switch","checked","Boolean","type","target","valueAsNumber","String"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"FilterValue.js","sources":["../../../../../../../../../../../../../src/primitives/Table/Core/components/Toolbar/components/Filters/components/FilterValue.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Column as ReactTableColumn } from '@tanstack/react-table';\nimport { Input } from '../../../../../../../../components/Input/Input';\nimport { Datepicker } from '../../../../../../../../components/Datepicker/Datepicker';\nimport { Switch } from '../../../../../../../../components/Switch/Switch';\nimport { useLocalization } from '../../../../../../../../components/Provider/Localization';\nimport { TableColumnDataType, TableFilterComparator } from '../../../../../../types';\nimport { Checkbox } from '../../../../../../../../components/Checkbox/Checkbox';\n\nexport type FilterValueProps<TType = unknown> = {\n column?: ReactTableColumn<TType, unknown>;\n comparator: TableFilterComparator;\n onChange: (value: any) => void;\n value: any;\n};\n\nconst querySelector = 'filter-value';\n\nexport function FilterValue<TType = unknown>(props: FilterValueProps<TType>) {\n const { column, comparator, onChange: handleChange, value } = props;\n const { texts } = useLocalization();\n\n if (comparator === TableFilterComparator.IsEmpty || comparator === TableFilterComparator.IsNotEmpty) {\n return null;\n }\n\n if (comparator === TableFilterComparator.IsBetween) {\n const fromValue = Array.isArray(value) ? value[0] : undefined;\n const toValue = Array.isArray(value) ? value[1] : undefined;\n\n if (column === undefined) {\n return (\n <Input\n aria-label={texts.table.filters.emptyFilter.value}\n className=\"flex-grow\"\n data-query-selector={querySelector}\n disabled\n value={texts.table.filters.emptyFilter.value}\n />\n );\n }\n\n if (column.columnDef.meta?.dataType === 'datetime') {\n return (\n <div className=\"flex flex-grow items-center gap-2\">\n <Control\n column={column}\n data-query-selector={querySelector}\n onChange={value => handleChange([value, toValue])}\n value={fromValue}\n />\n <Control\n column={column}\n data-query-selector={querySelector}\n onChange={value => handleChange([fromValue, value])}\n value={toValue}\n />\n </div>\n );\n }\n\n return (\n <div className=\"flex flex-grow items-center gap-2\">\n <Control\n column={column}\n data-query-selector={querySelector}\n onChange={value => handleChange([isNaN(value) ? undefined : value, toValue])}\n placeholder=\"from\"\n value={fromValue ?? ''}\n />\n <Control\n column={column}\n data-query-selector={querySelector}\n onChange={value => handleChange([fromValue, isNaN(value) ? undefined : value])}\n placeholder=\"to\"\n value={toValue ?? ''}\n />\n </div>\n );\n }\n return (\n <Control\n comparator={comparator}\n column={column}\n data-query-selector={querySelector}\n onChange={handleChange}\n value={value}\n />\n );\n}\n\nfunction Control(props) {\n const { column, comparator, onChange, value, ...attributes } = props;\n const controlRenderer = column?.columnDef.meta?.control;\n const dataType: TableColumnDataType = column?.columnDef.meta?.dataType;\n\n useEffect(() => {\n // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened\n if ((controlRenderer === 'switch' || controlRenderer === 'checkbox') && value === undefined) {\n onChange(false);\n }\n }, [controlRenderer]);\n\n if (typeof controlRenderer === 'function') {\n return React.cloneElement(\n controlRenderer({\n ...attributes,\n setValue: value => onChange(value),\n value,\n }),\n { ['data-query-selector']: querySelector, className: 'focus:yt-focus' }\n );\n } else if (controlRenderer === 'datepicker' || dataType === 'datetime') {\n return <Datepicker {...attributes} onChange={event => onChange((event as any).detail)} value={value as Date} />;\n } else if (controlRenderer === 'switch') {\n return <Switch {...attributes} className=\"m-1.5\" checked={Boolean(value)} onChange={onChange} />;\n } else if (controlRenderer === 'checkbox') {\n return <Checkbox {...attributes} className=\"!m-1.5\" checked={Boolean(value)} onChange={onChange} />;\n } else if ((controlRenderer === 'input' || controlRenderer === undefined) && dataType === 'number') {\n return (\n <Input\n {...attributes}\n className=\"flex-grow\"\n type=\"number\"\n onChange={event => onChange(event.target.valueAsNumber)}\n value={String(value ?? '')}\n />\n );\n }\n\n return (\n <Input\n disabled={!column}\n {...attributes}\n className=\"flex-grow\"\n onChange={event => onChange(event.target.value)}\n value={String(value ?? '')}\n />\n );\n}\n"],"names":["querySelector","FilterValue","props","column","comparator","onChange","handleChange","value","texts","useLocalization","TableFilterComparator","IsEmpty","IsNotEmpty","IsBetween","_column$columnDef$met","fromValue","Array","isArray","undefined","toValue","React","Input","table","filters","emptyFilter","className","disabled","columnDef","meta","dataType","Control","isNaN","placeholder","attributes","controlRenderer","_column$columnDef$met2","control","_column$columnDef$met3","useEffect","cloneElement","setValue","Datepicker","event","detail","Switch","checked","Boolean","Checkbox","type","target","valueAsNumber","String"],"mappings":"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"}
|
@@ -3,30 +3,11 @@ import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
|
|
3
3
|
import { ROW_HEIGHT_ESTIMATES } from '../util/rows.js';
|
4
4
|
import { Row } from '../components/Row/Row.js';
|
5
5
|
|
6
|
-
|
7
|
-
function getScrollPaddingEndOffset(table, options) {
|
8
|
-
var _options$virtualiserP;
|
9
|
-
const tableMeta = table.options.meta;
|
10
|
-
let offset = 2 + ((_options$virtualiserP = options === null || options === void 0 ? void 0 : options.virtualiserPaddingEndOffset) !== null && _options$virtualiserP !== void 0 ? _options$virtualiserP : 0);
|
11
|
-
if (tableMeta.footer.isEnabled) {
|
12
|
-
offset += 1;
|
13
|
-
}
|
14
|
-
if (table.getHeaderGroups().length > 1) {
|
15
|
-
offset += table.getHeaderGroups().length - 1;
|
16
|
-
}
|
17
|
-
let height = ROW_HEIGHT_ESTIMATES.medium * offset;
|
18
|
-
const bottomRows = table.getBottomRows();
|
19
|
-
if (bottomRows.length) {
|
20
|
-
height += ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] * 1.4 * bottomRows.length;
|
21
|
-
}
|
22
|
-
return height;
|
23
|
-
}
|
24
|
-
function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, options) {
|
6
|
+
function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
|
25
7
|
var _table$getState$group, _virtualItems$padding, _virtualItems$padding2, _virtualItems$padding3, _ref, _virtualItems;
|
26
8
|
const tableMeta = table.options.meta;
|
27
|
-
const rows = table.
|
9
|
+
const rows = table.getRowModel().rows;
|
28
10
|
const isTableRowGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
|
29
|
-
const bottomRows = table.getBottomRows();
|
30
11
|
// expanded rows
|
31
12
|
const {
|
32
13
|
createRowMeasurer,
|
@@ -36,6 +17,9 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, opt
|
|
36
17
|
const rangeExtractor = useRowGroupVirtualisation(table);
|
37
18
|
// account for thead and tfoot in the scroll area - both are always medium row height
|
38
19
|
const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;
|
20
|
+
// column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains
|
21
|
+
// consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment
|
22
|
+
const scrollPaddingEnd = ROW_HEIGHT_ESTIMATES.medium * (table.getHeaderGroups().length > 1 ? 1.5 : 1);
|
39
23
|
const virtualiser = useVirtualizer({
|
40
24
|
count: rows.length,
|
41
25
|
estimateSize,
|
@@ -44,8 +28,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex, opt
|
|
44
28
|
rangeExtractor,
|
45
29
|
// correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list
|
46
30
|
scrollPaddingStart,
|
47
|
-
scrollPaddingEnd:
|
48
|
-
paddingEnd: ROW_HEIGHT_ESTIMATES.medium * bottomRows.length
|
31
|
+
scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd
|
49
32
|
});
|
50
33
|
const totalSize = virtualiser.getTotalSize();
|
51
34
|
const virtualItems = virtualiser.getVirtualItems();
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTableRenderer.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport {\n useVirtualizer,\n defaultRangeExtractor,\n ScrollToOptions as ReactVirtualScrollToOptions,\n VirtualItem,\n} from '@tanstack/react-virtual';\nimport { ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers, useTableRenderOptions } from '../types';\nimport { TableRef } from '../../types';\n\n// scroll padding end is designed to always show half of the next row\nfunction getScrollPaddingEndOffset<TType = unknown>(table: ReactTable<TType>, options?: useTableRenderOptions) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n let offset = 2 + (options?.virtualiserPaddingEndOffset ?? 0);\n\n if (tableMeta.footer.isEnabled) {\n offset += 1;\n }\n\n if (table.getHeaderGroups().length > 1) {\n offset += table.getHeaderGroups().length - 1;\n }\n\n let height = ROW_HEIGHT_ESTIMATES.medium * offset;\n\n const bottomRows = table.getBottomRows();\n\n if (bottomRows.length) {\n height += ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] * 1.4 * bottomRows.length;\n }\n\n return height;\n}\n\nexport function useTableRenderer<TType = unknown>(\n renderers: useTableRenderers<TType>,\n table: ReactTable<TType>,\n tableRef: React.RefObject<TableRef>,\n defaultRowActiveIndex?: number | undefined,\n options?: useTableRenderOptions\n) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getCenterRows();\n const isTableRowGrouped = !!table.getState().grouping?.length;\n const bottomRows = table.getBottomRows();\n\n // expanded rows\n const { createRowMeasurer, estimateSize } = useRowHeightVirtualisation<TType>(table);\n\n // row groups\n const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n // account for thead and tfoot in the scroll area - both are always medium row height\n const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;\n\n const virtualiser = useVirtualizer({\n count: rows.length,\n estimateSize,\n getScrollElement: () => tableRef.current,\n overscan: tableMeta.printing.isPrinting ? rows.length : undefined,\n rangeExtractor,\n // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list\n scrollPaddingStart,\n scrollPaddingEnd: getScrollPaddingEndOffset(table, options),\n paddingEnd: ROW_HEIGHT_ESTIMATES.medium * bottomRows.length,\n });\n\n const totalSize = virtualiser.getTotalSize();\n const virtualItems = virtualiser.getVirtualItems();\n\n const scrollToIndex = React.useCallback(\n (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n if (tableRef.current) {\n if (index === 0) {\n virtualiser.scrollToOffset(0, notSmooth);\n } else if (index === rows.length - 1) {\n // sometimes the last row doesn't fully show, so we just force scroll to the bottom\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n } else {\n virtualiser.scrollToIndex(index, options);\n }\n }\n },\n [virtualItems.length, tableRef.current, totalSize, rows.length]\n );\n\n // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;\n\n const startValue = isTableRowGrouped\n ? virtualItems[paddingStartIndex]?.start - virtualItems[paddingStartIndex]?.size\n : virtualItems[paddingStartIndex]?.start;\n\n // styling for offsetting rows - this \"is\" the virtualisation\n const [paddingTop, paddingBottom] =\n virtualItems.length > 0\n ? [Math.max(0, startValue ?? 0), Math.max(0, totalSize - virtualItems[virtualItems.length - 1]?.end ?? 0)]\n : [0, 0];\n\n // ensure default active rows are scrolled to\n React.useEffect(() => {\n if (defaultRowActiveIndex) {\n scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n }\n }, []);\n\n // rendered output\n let style: CSSProperties = {};\n let content: (JSX.Element | null)[] | null = null;\n\n if (rows.length) {\n style = {\n height: totalSize,\n paddingBottom,\n paddingTop,\n };\n content = virtualItems.map(virtualRow => {\n // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n if (!virtualRow) {\n return null;\n }\n\n const row = rows[virtualRow.index];\n const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);\n return (\n <Row\n key={row.id}\n row={row}\n index={virtualRow.index}\n table={table}\n measureRow={measureRow}\n renderer={renderers.row}\n cellRenderer={renderers.cell}\n />\n );\n });\n }\n\n return {\n rows: content,\n style,\n scrollToIndex,\n };\n}\n\n// support varying row heights - variable row heights, row expansion\nfunction useRowHeightVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getRowModel().rows;\n const expandedState = table.getState().expanded;\n\n const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React.useState<Record<number, number>>({});\n\n // look at all registered expanded row heights and use them to form a more accurate average size\n // it might be worth considering if taking the max, or an upper bound, would be better\n const averageExpandedRowHeight = React.useMemo(() => {\n const values: number[] = Object.values(expandedRowHeightsCache);\n return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n }, [expandedRowHeightsCache]);\n\n // row heights\n const estimateSize = React.useCallback(\n (index: number) => {\n const rowHeight = tableMeta.rowHeight.height\n ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height]\n : ROW_HEIGHT_ESTIMATES.medium;\n\n if (expandedState === true || rows[index]?.getIsExpanded?.()) {\n return rowHeight + averageExpandedRowHeight;\n }\n\n return rowHeight;\n },\n [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]\n );\n\n const createRowMeasurer = React.useCallback(\n (resizeItem: (item: VirtualItem, size: number) => void, virtualRow: VirtualItem) =>\n (rowHeight: number, expansionHeight?: number) => {\n // register the expansion height so that it can be used to determine an average\n if (expansionHeight) {\n setExpandedRowHeightsCache(cache => ({ ...cache, [virtualRow.index]: expansionHeight }));\n }\n\n // update the whole row's size to include the expanded height\n resizeItem(virtualRow, rowHeight + (expansionHeight ?? 0));\n },\n []\n );\n\n return { estimateSize, createRowMeasurer };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const rows = table.getRowModel().rows;\n const isTableGrouped = !!table.getState().grouping.length;\n\n const rowGroupIndexes = React.useMemo(() => {\n const indexes: number[] = [];\n\n if (isTableGrouped) {\n rows.forEach((row, index) => {\n if (row.getIsGrouped()) {\n indexes.push(index);\n }\n });\n }\n\n return indexes;\n }, [rows]);\n\n // this is taken from the react-virtual docs/examples\n const rangeExtractor = React.useCallback(\n range => {\n const activeRowGroupIndex =\n [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);\n return [...next].sort((a, b) => a - b);\n },\n [rowGroupIndexes]\n );\n\n return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["getScrollPaddingEndOffset","table","options","tableMeta","meta","offset","_options$virtualiserP","virtualiserPaddingEndOffset","footer","isEnabled","getHeaderGroups","length","height","ROW_HEIGHT_ESTIMATES","medium","bottomRows","getBottomRows","rowHeight","useTableRenderer","renderers","tableRef","defaultRowActiveIndex","rows","getCenterRows","isTableRowGrouped","_table$getState$group","getState","grouping","createRowMeasurer","estimateSize","useRowHeightVirtualisation","rangeExtractor","useRowGroupVirtualisation","scrollPaddingStart","virtualiser","useVirtualizer","count","getScrollElement","current","overscan","printing","isPrinting","undefined","scrollPaddingEnd","paddingEnd","totalSize","getTotalSize","virtualItems","getVirtualItems","scrollToIndex","React","useCallback","index","align","behavior","notSmooth","scrollToOffset","scrollTop","scrollHeight","paddingStartIndex","startValue","_virtualItems$padding","start","_virtualItems$padding2","size","_virtualItems$padding3","paddingTop","paddingBottom","Math","max","_ref","_virtualItems","end","useEffect","style","content","map","virtualRow","row","measureRow","resizeItem","Row","key","id","renderer","cellRenderer","cell","getRowModel","expandedState","expanded","expandedRowHeightsCache","setExpandedRowHeightsCache","useState","averageExpandedRowHeight","useMemo","values","Object","reduce","a","b","_rows$index","_rows$index$getIsExpa","getIsExpanded","call","expansionHeight","cache","isTableGrouped","rowGroupIndexes","indexes","forEach","getIsGrouped","push","range","activeRowGroupIndex","_reverse$find","reverse","find","startIndex","next","Set","defaultRangeExtractor","sort"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"useTableRenderer.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport {\n useVirtualizer,\n defaultRangeExtractor,\n ScrollToOptions as ReactVirtualScrollToOptions,\n VirtualItem,\n} from '@tanstack/react-virtual';\nimport { ROW_HEIGHT_ESTIMATES } from '../util/rows';\nimport { Row } from '../components/Row/Row';\nimport { useTableRenderers } from '../types';\nimport { TableRef } from '../../types';\n\nexport function useTableRenderer<TType = unknown>(\n renderers: useTableRenderers<TType>,\n table: ReactTable<TType>,\n tableRef: React.RefObject<TableRef>,\n defaultRowActiveIndex?: number | undefined\n) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getRowModel().rows;\n const isTableRowGrouped = !!table.getState().grouping?.length;\n\n // expanded rows\n const { createRowMeasurer, estimateSize } = useRowHeightVirtualisation<TType>(table);\n\n // row groups\n const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n // account for thead and tfoot in the scroll area - both are always medium row height\n const scrollPaddingStart = ROW_HEIGHT_ESTIMATES.medium;\n // column groups offset the bottom padding :shrug:, multiplying by 1.5 ensures the bottom padding remains\n // consistent when there are groups and when there aren't. 1.5 is relatively arbitrary, but it gives alignment\n const scrollPaddingEnd = ROW_HEIGHT_ESTIMATES.medium * (table.getHeaderGroups().length > 1 ? 1.5 : 1);\n\n const virtualiser = useVirtualizer({\n count: rows.length,\n estimateSize,\n getScrollElement: () => tableRef.current,\n overscan: tableMeta.printing.isPrinting ? rows.length : undefined,\n rangeExtractor,\n // correctly sets the scroll padding offset, e.g. when keyboard navigating rows in the list\n scrollPaddingStart,\n scrollPaddingEnd: tableMeta.footer.isEnabled ? scrollPaddingEnd * 2 : scrollPaddingEnd,\n });\n\n const totalSize = virtualiser.getTotalSize();\n const virtualItems = virtualiser.getVirtualItems();\n\n const scrollToIndex = React.useCallback(\n (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n if (tableRef.current) {\n if (index === 0) {\n virtualiser.scrollToOffset(0, notSmooth);\n } else if (index === rows.length - 1) {\n // sometimes the last row doesn't fully show, so we just force scroll to the bottom\n tableRef.current.scrollTop = tableRef.current.scrollHeight;\n } else {\n virtualiser.scrollToIndex(index, options);\n }\n }\n },\n [virtualItems.length, tableRef.current, totalSize, rows.length]\n );\n\n // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n const paddingStartIndex = isTableRowGrouped && rows.length > 1 ? 1 : 0;\n\n const startValue = isTableRowGrouped\n ? virtualItems[paddingStartIndex]?.start - virtualItems[paddingStartIndex]?.size\n : virtualItems[paddingStartIndex]?.start;\n\n // styling for offsetting rows - this \"is\" the virtualisation\n const [paddingTop, paddingBottom] =\n virtualItems.length > 0\n ? [Math.max(0, startValue ?? 0), Math.max(0, totalSize - virtualItems[virtualItems.length - 1]?.end ?? 0)]\n : [0, 0];\n\n // ensure default active rows are scrolled to\n React.useEffect(() => {\n if (defaultRowActiveIndex) {\n scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n }\n }, []);\n\n // rendered output\n let style: CSSProperties = {};\n let content: (JSX.Element | null)[] | null = null;\n\n if (rows.length) {\n style = {\n height: totalSize,\n paddingBottom,\n paddingTop,\n };\n content = virtualItems.map(virtualRow => {\n // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here\n if (!virtualRow) {\n return null;\n }\n\n const row = rows[virtualRow.index];\n const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);\n return (\n <Row\n key={row.id}\n row={row}\n index={virtualRow.index}\n table={table}\n measureRow={measureRow}\n renderer={renderers.row}\n cellRenderer={renderers.cell}\n />\n );\n });\n }\n\n return {\n rows: content,\n style,\n scrollToIndex,\n };\n}\n\n// support varying row heights - variable row heights, row expansion\nfunction useRowHeightVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const rows = table.getRowModel().rows;\n const expandedState = table.getState().expanded;\n\n const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React.useState<Record<number, number>>({});\n\n // look at all registered expanded row heights and use them to form a more accurate average size\n // it might be worth considering if taking the max, or an upper bound, would be better\n const averageExpandedRowHeight = React.useMemo(() => {\n const values: number[] = Object.values(expandedRowHeightsCache);\n return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n }, [expandedRowHeightsCache]);\n\n // row heights\n const estimateSize = React.useCallback(\n (index: number) => {\n const rowHeight = tableMeta.rowHeight.height\n ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height]\n : ROW_HEIGHT_ESTIMATES.medium;\n\n if (expandedState === true || rows[index]?.getIsExpanded?.()) {\n return rowHeight + averageExpandedRowHeight;\n }\n\n return rowHeight;\n },\n [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]\n );\n\n const createRowMeasurer = React.useCallback(\n (resizeItem: (item: VirtualItem, size: number) => void, virtualRow: VirtualItem) =>\n (rowHeight: number, expansionHeight?: number) => {\n // register the expansion height so that it can be used to determine an average\n if (expansionHeight) {\n setExpandedRowHeightsCache(cache => ({ ...cache, [virtualRow.index]: expansionHeight }));\n }\n\n // update the whole row's size to include the expanded height\n resizeItem(virtualRow, rowHeight + (expansionHeight ?? 0));\n },\n []\n );\n\n return { estimateSize, createRowMeasurer };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n const rows = table.getRowModel().rows;\n const isTableGrouped = !!table.getState().grouping.length;\n\n const rowGroupIndexes = React.useMemo(() => {\n const indexes: number[] = [];\n\n if (isTableGrouped) {\n rows.forEach((row, index) => {\n if (row.getIsGrouped()) {\n indexes.push(index);\n }\n });\n }\n\n return indexes;\n }, [rows]);\n\n // this is taken from the react-virtual docs/examples\n const rangeExtractor = React.useCallback(\n range => {\n const activeRowGroupIndex =\n [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);\n return [...next].sort((a, b) => a - b);\n },\n [rowGroupIndexes]\n );\n\n return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["useTableRenderer","renderers","table","tableRef","defaultRowActiveIndex","tableMeta","options","meta","rows","getRowModel","isTableRowGrouped","_table$getState$group","getState","grouping","length","createRowMeasurer","estimateSize","useRowHeightVirtualisation","rangeExtractor","useRowGroupVirtualisation","scrollPaddingStart","ROW_HEIGHT_ESTIMATES","medium","scrollPaddingEnd","getHeaderGroups","virtualiser","useVirtualizer","count","getScrollElement","current","overscan","printing","isPrinting","undefined","footer","isEnabled","totalSize","getTotalSize","virtualItems","getVirtualItems","scrollToIndex","React","useCallback","index","align","behavior","notSmooth","scrollToOffset","scrollTop","scrollHeight","paddingStartIndex","startValue","_virtualItems$padding","start","_virtualItems$padding2","size","_virtualItems$padding3","paddingTop","paddingBottom","Math","max","_ref","_virtualItems","end","useEffect","style","content","height","map","virtualRow","row","measureRow","resizeItem","Row","key","id","renderer","cellRenderer","cell","expandedState","expanded","expandedRowHeightsCache","setExpandedRowHeightsCache","useState","averageExpandedRowHeight","useMemo","values","Object","reduce","a","b","rowHeight","_rows$index","_rows$index$getIsExpa","getIsExpanded","call","expansionHeight","cache","isTableGrouped","rowGroupIndexes","indexes","forEach","getIsGrouped","push","range","activeRowGroupIndex","_reverse$find","reverse","find","startIndex","next","Set","defaultRangeExtractor","sort"],"mappings":"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"}
|
@@ -16,13 +16,13 @@ const INTERNAL_RENDERERS = {
|
|
16
16
|
rowExpansion: renderer$2,
|
17
17
|
rowSelection: renderer$3
|
18
18
|
};
|
19
|
-
function useTable(props, externalRef, renderers, meta
|
19
|
+
function useTable(props, externalRef, renderers, meta) {
|
20
20
|
// create a ref and merge with the consumer's ref
|
21
21
|
const ref = useMergedRef(externalRef);
|
22
22
|
// configure the table
|
23
23
|
const manager = useTableManager(props, meta, INTERNAL_RENDERERS);
|
24
24
|
// configure the virtualised renderer
|
25
|
-
const renderer = useTableRenderer(renderers, manager.instance, ref, props.defaultRowActiveIndex
|
25
|
+
const renderer = useTableRenderer(renderers, manager.instance, ref, props.defaultRowActiveIndex);
|
26
26
|
// configure dynamic styling
|
27
27
|
const {
|
28
28
|
style,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useTable.js","sources":["../../../../../../../../src/primitives/Table/Core/useTable.ts"],"sourcesContent":["import { Table as ReactTable, TableMeta as ReactTableMeta, TableState as ReactTableState } from '@tanstack/react-table';\nimport { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { TableCustomSettingsRenderer, TableEmptyStateRenderer, TableProps } from '../types';\nimport { useTableManager } from '../useTableManager/useTableManager';\nimport { useTableStyle } from './features/useTableStyle';\nimport { useTableGlobalShortcuts } from './features/useTableGlobalShortcuts';\nimport { useTableRef } from './features/useTableRef';\nimport { useTableRenderer } from './features/useTableRenderer';\nimport { useTableRowActiveListener } from './listeners/useTableRowActiveListener';\nimport { TableRef } from '../types';\nimport { useTableRenderers
|
1
|
+
{"version":3,"file":"useTable.js","sources":["../../../../../../../../src/primitives/Table/Core/useTable.ts"],"sourcesContent":["import { Table as ReactTable, TableMeta as ReactTableMeta, TableState as ReactTableState } from '@tanstack/react-table';\nimport { ScrollToOptions as ReactVirtualScrollToOptions } from '@tanstack/react-virtual';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { TableCustomSettingsRenderer, TableEmptyStateRenderer, TableProps } from '../types';\nimport { useTableManager } from '../useTableManager/useTableManager';\nimport { useTableStyle } from './features/useTableStyle';\nimport { useTableGlobalShortcuts } from './features/useTableGlobalShortcuts';\nimport { useTableRef } from './features/useTableRef';\nimport { useTableRenderer } from './features/useTableRenderer';\nimport { useTableRowActiveListener } from './listeners/useTableRowActiveListener';\nimport { TableRef } from '../types';\nimport { useTableRenderers } from './types';\nimport { renderer as rowActions } from './components/Columns/Internal/Actions';\nimport { renderer as rowDrag } from './components/Columns/Internal/Drag';\nimport { renderer as rowExpansion } from './components/Columns/Internal/Expansion';\nimport { renderer as rowSelection } from './components/Columns/Internal/Selection';\nimport { useTableManagerInternalColumns } from '../useTableManager/types';\n\nconst INTERNAL_RENDERERS = {\n rowActions,\n rowDrag,\n rowExpansion,\n rowSelection,\n};\n\nexport type useTableReturnValue<TType = unknown> = {\n id: string;\n instance: ReactTable<TType>;\n meta: ReactTableMeta<TType>;\n props: {\n customSettings: TableCustomSettingsRenderer | undefined;\n emptyState: TableEmptyStateRenderer | undefined;\n toolbarLeft: JSX.Element | undefined;\n toolbarPanel: JSX.Element | undefined;\n toolbarRight: JSX.Element | undefined;\n };\n ref: React.RefObject<TableRef>;\n renderer: {\n rows: (JSX.Element | null)[] | null;\n style: React.CSSProperties;\n scrollToIndex: (index: number, options?: ReactVirtualScrollToOptions) => void;\n };\n style: React.CSSProperties;\n stylesheet: string;\n state: ReactTableState;\n};\n\nexport function useTable<TType = unknown, TMeta = {}>(\n props: TableProps<TType>,\n externalRef: React.Ref<TableRef>,\n renderers: useTableRenderers<TType>,\n meta?: Partial<ReactTableMeta<TType>> & TMeta\n): useTableReturnValue<TType> {\n // create a ref and merge with the consumer's ref\n const ref = useMergedRef<TableRef>(externalRef);\n // configure the table\n const manager = useTableManager<TType>(props, meta, INTERNAL_RENDERERS as useTableManagerInternalColumns<TType>);\n // configure the virtualised renderer\n const renderer = useTableRenderer<TType>(renderers, manager.instance, ref, props.defaultRowActiveIndex);\n // configure dynamic styling\n const { style, stylesheet } = useTableStyle(manager.id, manager.instance);\n // configure global keyboard shortcuts\n useTableGlobalShortcuts(manager.instance, ref, renderer.scrollToIndex);\n // augment the ref with some helper functions\n useTableRef(manager.instance, ref);\n\n // listeners - they are here and not in useTableManager because they rely on the dom and the table ref\n useTableRowActiveListener(manager.instance, ref);\n\n return {\n ...manager,\n props: {\n customSettings: props.customSettings,\n emptyState: props.emptyState,\n toolbarLeft: props.toolbarLeft,\n toolbarPanel: props.toolbarPanel,\n toolbarRight: props.toolbarRight,\n },\n renderer,\n style,\n stylesheet,\n ref,\n };\n}\n"],"names":["INTERNAL_RENDERERS","rowActions","rowDrag","rowExpansion","rowSelection","useTable","props","externalRef","renderers","meta","ref","useMergedRef","manager","useTableManager","renderer","useTableRenderer","instance","defaultRowActiveIndex","style","stylesheet","useTableStyle","id","useTableGlobalShortcuts","scrollToIndex","useTableRef","useTableRowActiveListener","customSettings","emptyState","toolbarLeft","toolbarPanel","toolbarRight"],"mappings":";;;;;;;;;;;;AAkBA,MAAMA,kBAAkB,GAAG;cACvBC,QAAU;WACVC,UAAO;gBACPC,UAAY;gBACZC;CACH;SAwBeC,QAAQA,CACpBC,KAAwB,EACxBC,WAAgC,EAChCC,SAAmC,EACnCC,IAA6C;;EAG7C,MAAMC,GAAG,GAAGC,YAAY,CAAWJ,WAAW,CAAC;;EAE/C,MAAMK,OAAO,GAAGC,eAAe,CAAQP,KAAK,EAAEG,IAAI,EAAET,kBAA2D,CAAC;;EAEhH,MAAMc,QAAQ,GAAGC,gBAAgB,CAAQP,SAAS,EAAEI,OAAO,CAACI,QAAQ,EAAEN,GAAG,EAAEJ,KAAK,CAACW,qBAAqB,CAAC;;EAEvG,MAAM;IAAEC,KAAK;IAAEC;GAAY,GAAGC,aAAa,CAACR,OAAO,CAACS,EAAE,EAAET,OAAO,CAACI,QAAQ,CAAC;;EAEzEM,uBAAuB,CAACV,OAAO,CAACI,QAAQ,EAAEN,GAAG,EAAEI,QAAQ,CAACS,aAAa,CAAC;;EAEtEC,WAAW,CAACZ,OAAO,CAACI,QAAQ,EAAEN,GAAG,CAAC;;EAGlCe,yBAAyB,CAACb,OAAO,CAACI,QAAQ,EAAEN,GAAG,CAAC;EAEhD,OAAO;IACH,GAAGE,OAAO;IACVN,KAAK,EAAE;MACHoB,cAAc,EAAEpB,KAAK,CAACoB,cAAc;MACpCC,UAAU,EAAErB,KAAK,CAACqB,UAAU;MAC5BC,WAAW,EAAEtB,KAAK,CAACsB,WAAW;MAC9BC,YAAY,EAAEvB,KAAK,CAACuB,YAAY;MAChCC,YAAY,EAAExB,KAAK,CAACwB;KACvB;IACDhB,QAAQ;IACRI,KAAK;IACLC,UAAU;IACVT;GACH;AACL;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../../../../../src/primitives/Table/types.ts"],"sourcesContent":["import {\n ColumnFilter as ReactTableColumnFilter,\n ColumnFiltersState as ReactTableColumnFilterState,\n ColumnOrderState as ReactTableColumnOrderState,\n ColumnPinningState as ReactTableColumnPinningState,\n ColumnSort as ReactTableColumnSort,\n ColumnSizingState as ReactTableColumnSizingState,\n VisibilityState as ReactTableColumnVisibilityState,\n SortingState as ReactTableSortingState,\n BuiltInAggregationFn as ReactTableBuiltInAggregationFn,\n BuiltInSortingFn as ReactTableBuiltInSortingFn,\n} from '@tanstack/react-table';\nimport { FontSize, FontSizes, StringWithAutocompleteOptions, ValueOf } from '../../types';\nimport { MenuItemProps } from '../../components/Menu/components/Item';\n\nexport type TableRef = HTMLTableElement & {\n instance: {\n resetFiltering: () => void;\n resetRowExpansion: () => void;\n resetRowSelection: () => void;\n resetSorting: () => void;\n };\n};\n\n// filtering\nexport enum TableFilterComparator {\n Contains,\n DoesNotContain,\n IsEqualTo,\n IsNotEqualTo,\n IsGreaterThan,\n IsLessThan,\n IsBetween,\n IsEmpty,\n IsNotEmpty,\n IsLessThanOrEqualTo,\n IsGreaterThanOrEqualTo,\n HasAnyOf,\n HasAllOf,\n HasNoneOf,\n}\nexport type TableFilterValue = {\n comparator: TableFilterComparator;\n value: any;\n};\nexport type TableFilter = {\n id: string;\n value: TableFilterValue;\n};\n\n// columns\nexport type TableColumnAlignment = 'left' | 'center' | 'right';\nexport type TableColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type TableColumnDataType =\n // base\n | 'text'\n | 'number'\n | 'datetime'\n | 'boolean'\n // advanced\n | 'amount';\nexport type TableColumnFilter = ReactTableColumnFilter;\nexport type TableColumnMenu = ((columnId: string) => React.ReactNode | null)[];\nexport type TableColumnRenderer<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererAggregate<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererControl<TType = unknown> =\n | ((props: TableColumnRendererControlProps, row?: TType) => JSX.Element)\n | 'datepicker'\n | 'input'\n | 'switch'\n | 'textarea';\nexport type TableColumnRendererControlProps = {\n className?: string;\n disabled?: boolean;\n fontSize?: FontSize;\n invalid?: boolean;\n onBlur?: (value: any) => void;\n onFocus?: React.FocusEventHandler;\n readOnly?: boolean;\n ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);\n setValue: (value: any) => void;\n value: any;\n};\nexport type TableColumnRendererHeader = string;\nexport type TableColumnRendererFooter<TType> = (rows: TType[]) => JSX.Element | string | number | null;\nexport type TableColumnSort = ReactTableColumnSort;\nexport type TableColumnSortDirection = 'asc' | 'desc';\nexport type TableColumnSortFn<TType = unknown> =\n | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n | ReactTableBuiltInSortingFn\n | 'auto';\nexport type TableColumnWidth = number | 'grow';\n\n// rows\nexport type TableRowActionRenderer<TType = unknown> = (row: TType, internalRowId: string) => JSX.Element | null;\nexport type TableRowActionGroupRenderer<TType = unknown> = (rows: TType[]) => JSX.Element | null;\nexport type TableRowClickHandler<TType = unknown> = (row: TType) => void;\nexport type TableRowDragHandler<TType = unknown> = (\n rows: TType[],\n showPlaceholder: (string) => void,\n setDataTransfer: (data: string) => void\n) => void;\nexport type TableRowDropHandler<TType = unknown> = (event: React.DragEvent, row: TType) => void;\nexport type TableRowGotoHandler = (\n column: string,\n query: string,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined\n) => Promise<number>;\nexport type TableRowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';\nexport type TableRowSelectHandler<TType = unknown> = (rows: TType[]) => void;\nexport type TableRowWithMetaData<TType = unknown> = TType & {\n _meta?: {\n layout?: 'heading' | 'summary' | 'item';\n };\n};\n\n// shortcuts\nexport type TableShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type TableShortcutHandlerObject<TType = unknown> = {\n handler: TableShortcutHandlerFn<TType>;\n meta?: boolean;\n shift?: boolean;\n};\n\n// table\nexport type TableFilterHandler = (filters: TableColumnFilter[]) => void | Promise<void>;\nexport type TableFontSize = keyof typeof FontSizes;\nexport type TablePreset = 'complex' | 'list' | 'simple';\nexport type TableRowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type TableScrollToIndexHandler = (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\nexport type TableSearchHandler = (search: string | undefined) => void | Promise<void>;\nexport type TableServerLoadPageHandler = (\n pageIndex: number,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[]\n) => Promise<void>;\nexport type TableServerLoadAllHandler = (sorting: TableColumnSort[], filters: TableColumnFilter[]) => Promise<void>;\nexport enum TableServerLoadAllState {\n Incomplete,\n Loading,\n Completed,\n}\nexport type TableSettingsHandler = (settings: TableSettings) => void | Promise<void>;\nexport type TableShortcuts<TType = unknown> = Record<string, TableShortcutHandlerFn<TType> | TableShortcutHandlerObject<TType>>;\nexport type TableSortHandler = (sorting: TableColumnSort[]) => void | Promise<void>;\nexport type TableCustomSettingsRenderer = (props: TableSettings) => React.ReactElement<MenuItemProps>[];\nexport type TableEmptyStateReason = 'empty' | 'filtering' | 'searching';\nexport type TableEmptyStateRenderer = (props: { reason: TableEmptyStateReason }) => JSX.Element | null;\n\n// settings\nexport type TableSettings = {\n columnFilters?: ReactTableColumnFilterState;\n columnOrder?: ReactTableColumnOrderState;\n columnPinning?: ReactTableColumnPinningState;\n columnSizing?: ReactTableColumnSizingState;\n columnVisibility?: ReactTableColumnVisibilityState;\n excludeUnmatchedRecordsInSearch?: boolean;\n fontSize?: TableFontSize;\n rowHeight?: TableRowHeight;\n searchQuery?: string;\n sorting?: ReactTableSortingState;\n};\nexport type TableEnableSettingsOptions = {\n columnOrder: boolean;\n columnPinning: boolean;\n columnSizing: boolean;\n columnVisibility: boolean;\n excludeUnmatchedRecordsInSearch: boolean;\n fontSize: boolean;\n grouping: boolean;\n rowHeight: boolean;\n sorting: boolean;\n};\n\n// props\nexport type TableConditionalRowProp<TType = unknown> = boolean | ((row: TType) => boolean);\nexport type TableFeatureProps<TType = unknown> = {\n // react-table built-in\n enableFiltering?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableColumnFreezing?: boolean;\n enableColumnHiding?: boolean;\n enableColumnResizing?: boolean;\n enableRowExpansion?: boolean;\n enableRowSelection?: TableConditionalRowProp<TType>;\n\n // custom -- common between all table types\n enableColumnOrdering?: boolean;\n enableFontSize?: boolean;\n enableFooter?: boolean;\n enablePrinting?: boolean;\n enableRowActions?: boolean;\n enableRowActive?: boolean;\n enableRowClick?: TableConditionalRowProp<TType>;\n enableRowDrag?: boolean;\n enableRowDrop?: boolean;\n enableRowGoto?: boolean;\n enableRowHeight?: boolean;\n enableSaveSettings?: boolean | Partial<TableEnableSettingsOptions>;\n};\n\nexport type TableChild = JSX.Element | boolean | null | undefined;\n\nexport type TableCommonProps<TType = unknown> = TableFeatureProps<TType> & {\n children: TableChild | TableChild[];\n data: TType[];\n id: string;\n\n // misc\n customSettings?: TableCustomSettingsRenderer;\n defaultColumnFreezingIndex?: number;\n defaultRowActiveIndex?: number;\n defaultRowGroupColumnId?: keyof TType;\n defaultSettings?: TableSettings;\n emptyState?: TableEmptyStateRenderer;\n preset?: TablePreset;\n rowActions?: TableRowActionRenderer<TType>[];\n rowActionsForGroup?: TableRowActionGroupRenderer<TType>[];\n rowActionsLength?: number;\n rowExpansionRenderer?: TableRowExpansionRenderer<TType>;\n rowIdentityAccessor?: keyof TType;\n shortcuts?: TableShortcuts<TType>;\n toolbarLeft?: JSX.Element;\n toolbarRight?: JSX.Element;\n toolbarPanel?: JSX.Element;\n\n // handlers\n onRowClick?: TableRowClickHandler<TType>;\n onRowDrag?: TableRowDragHandler<TType>;\n onRowDrop?: TableRowDropHandler<TType>;\n onRowGoto?: TableRowGotoHandler;\n onRowSelect?: TableRowSelectHandler<TType>;\n\n // state change handlers\n onChangeFilter?: TableFilterHandler;\n onChangeSearch?: TableSearchHandler;\n onChangeSettings?: TableSettingsHandler;\n onChangeSort?: TableSortHandler;\n};\n\nexport interface TableClientProps<TType = unknown> extends TableCommonProps<TType> {\n length?: never;\n loadAll?: never;\n loadPage?: never;\n pageSize?: never;\n}\n\nexport interface TableServerProps<TType = unknown> extends TableCommonProps<TType> {\n length: number | undefined;\n loadAll: TableServerLoadAllHandler;\n loadPage: TableServerLoadPageHandler;\n pageSize?: number;\n}\n\nexport type TableProps<TType = unknown> = TableClientProps<TType> | TableServerProps<TType>;\n\nexport type TableColumnProps<TType = unknown> = ValueOf<{\n [Key in keyof TType]: {\n accessor?: Key;\n id: StringWithAutocompleteOptions<Key>;\n // renderers\n renderer?: TableColumnRenderer<TType, TType[Key]>;\n /** Renderer to use if the cell is an aggregate cell and part of a grouped row */\n aggregate?: TableColumnRendererAggregate<TType, TType[Key]>;\n control?: TableColumnRendererControl<TType>;\n footer?: TableColumnRendererFooter<TType>;\n header: TableColumnRendererHeader;\n // options\n /** Aggregation function to be used when the column is part of a grouped row */\n aggregationFn?: 'auto' | ReactTableBuiltInAggregationFn;\n align?: TableColumnAlignment;\n className?: TableColumnClassNameHandler<TType>;\n dataType?: TableColumnDataType;\n defaultHidden?: boolean;\n defaultWidth?: TableColumnWidth;\n enableEditing?: boolean;\n enableFiltering?: boolean;\n enableGrouping?: boolean;\n enableHiding?: boolean;\n enableOrdering?: boolean;\n enablePrinting?: boolean;\n enableResizing?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableTruncate?: boolean;\n filters?: TableFilterComparator[];\n headerClassName?: string;\n menu?: TableColumnMenu;\n minWidth?: number;\n sort?: TableColumnSortDirection;\n sortFn?: TableColumnSortFn<TType>;\n tooltip?: string;\n };\n}>;\n\nexport type TableGroupProps = {\n children: (JSX.Element | boolean | null | undefined)[];\n header: string;\n id: string;\n};\n\nexport type TableTexts = {\n columns: {\n actions: {\n tooltip: string;\n };\n drag: {\n tooltip: string;\n };\n expansion: {\n collapse: string;\n collapseAll: string;\n expand: string;\n expandAll: string;\n };\n menu: {\n editFilter: string;\n filter: string;\n freezeFirstColumn: string;\n freezeUptoColumn: string;\n gotoRow: string;\n hideColumn: string;\n unfreezeColumns: string;\n sorting: string;\n sortingOrder: {\n ascending: string;\n descending: string;\n unsorted: string;\n };\n };\n resize: {\n tooltip: string;\n };\n select: {\n deselect: string;\n deselectAll: string;\n select: string;\n selectAll: string;\n };\n };\n columnSettings: {\n button: string;\n noResults: string;\n search: string;\n tooltip: string;\n };\n filters: {\n button: string;\n buttons: {\n addFilter: string;\n clearFilters: string;\n cancel: string;\n clear: string;\n apply: string;\n };\n comparators: {\n contains: string;\n doesNotContain: string;\n isEqualTo: string;\n isNotEqualTo: string;\n isGreaterThan: string;\n isLessThan: string;\n isBetween: string;\n isEmpty: string;\n isNotEmpty: string;\n isBefore: string;\n isAfter: string;\n isLessThanOrEqualTo: string;\n isGreaterThanOrEqualTo: string;\n isOnOrBefore: string;\n isOnOrAfter: string;\n hasAnyOf: string;\n hasAllOf: string;\n hasNoneOf: string;\n };\n conditions: {\n and: string;\n where: string;\n };\n emptyFilter: {\n condition: string;\n value: string;\n };\n hiddenColumn: string;\n hiddenGroupedColumn: string;\n tooltip: string;\n total: string;\n };\n fontSize: {\n tooltip: string;\n sizes: {\n small: string;\n medium: string;\n large: string;\n };\n };\n footer: {\n summary: {\n count: string;\n records: string;\n selected: string;\n };\n };\n print: {\n error: string;\n loading: string;\n tooltip: string;\n warningDialog: {\n title: string;\n description: string;\n checkboxVisibilityLabel: string;\n cancelButtonText: string;\n printButtonText: string;\n };\n settingsDialog: {\n title: string;\n size: string;\n sizeA5: string;\n sizeA4: string;\n sizeA3: string;\n sizeLetter: string;\n sizeLegal: string;\n orientation: string;\n orientationLandscape: string;\n orientationPortrait: string;\n rows: string;\n rowsAll: string;\n rowsSelected: string;\n layout: string;\n layoutSplitGroups: string;\n };\n };\n rowHeight: {\n tooltip: string;\n sizes: {\n short: string;\n medium: string;\n tall: string;\n extraTall: string;\n };\n };\n search: {\n excludeUnmatchedResults: string;\n placeholder: string;\n };\n otherOptions: {\n tooltip: string;\n };\n};\n"],"names":["TableFilterComparator","TableServerLoadAllState"],"mappings":"AAwBA;IACYA;AAAZ,WAAYA,qBAAqB;EAC7BA,yEAAQ;EACRA,qFAAc;EACdA,2EAAS;EACTA,iFAAY;EACZA,mFAAa;EACbA,6EAAU;EACVA,2EAAS;EACTA,uEAAO;EACPA,6EAAU;EACVA,+FAAmB;EACnBA,sGAAsB;EACtBA,0EAAQ;EACRA,0EAAQ;EACRA,4EAAS;AACb,CAAC,EAfWA,qBAAqB,KAArBA,qBAAqB;IAkHrBC;AAAZ,WAAYA,uBAAuB;EAC/BA,iFAAU;EACVA,2EAAO;EACPA,+EAAS;AACb,CAAC,EAJWA,uBAAuB,KAAvBA,uBAAuB;;;;"}
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../../../../../src/primitives/Table/types.ts"],"sourcesContent":["import {\n ColumnFilter as ReactTableColumnFilter,\n ColumnFiltersState as ReactTableColumnFilterState,\n ColumnOrderState as ReactTableColumnOrderState,\n ColumnPinningState as ReactTableColumnPinningState,\n ColumnSort as ReactTableColumnSort,\n ColumnSizingState as ReactTableColumnSizingState,\n VisibilityState as ReactTableColumnVisibilityState,\n SortingState as ReactTableSortingState,\n BuiltInAggregationFn as ReactTableBuiltInAggregationFn,\n BuiltInSortingFn as ReactTableBuiltInSortingFn,\n} from '@tanstack/react-table';\nimport { FontSize, FontSizes, StringWithAutocompleteOptions, ValueOf } from '../../types';\nimport { MenuItemProps } from '../../components/Menu/components/Item';\n\nexport type TableRef = HTMLTableElement & {\n instance: {\n resetFiltering: () => void;\n resetRowExpansion: () => void;\n resetRowSelection: () => void;\n resetSorting: () => void;\n };\n};\n\n// filtering\nexport enum TableFilterComparator {\n Contains,\n DoesNotContain,\n IsEqualTo,\n IsNotEqualTo,\n IsGreaterThan,\n IsLessThan,\n IsBetween,\n IsEmpty,\n IsNotEmpty,\n IsLessThanOrEqualTo,\n IsGreaterThanOrEqualTo,\n HasAnyOf,\n HasAllOf,\n HasNoneOf,\n}\nexport type TableFilterValue = {\n comparator: TableFilterComparator;\n value: any;\n};\nexport type TableFilter = {\n id: string;\n value: TableFilterValue;\n};\n\n// columns\nexport type TableColumnAlignment = 'left' | 'center' | 'right';\nexport type TableColumnClassNameHandler<TType = unknown> = string | ((row: TType) => string | undefined);\nexport type TableColumnDataType =\n // base\n | 'text'\n | 'number'\n | 'datetime'\n | 'boolean'\n // advanced\n | 'amount';\nexport type TableColumnFilter = ReactTableColumnFilter;\nexport type TableColumnMenu = ((columnId: string) => React.ReactNode | null)[];\nexport type TableColumnRenderer<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererAggregate<TType, TValue> = (value: TValue, row: TType) => JSX.Element | string | number | null;\nexport type TableColumnRendererControl<TType = unknown> =\n | ((props: TableColumnRendererControlProps, row?: TType) => JSX.Element)\n | 'datepicker'\n | 'input'\n | 'switch'\n | 'checkbox'\n | 'textarea';\nexport type TableColumnRendererControlProps = {\n className?: string;\n disabled?: boolean;\n fontSize?: FontSize;\n invalid?: boolean;\n onBlur?: (value: any) => void;\n onFocus?: React.FocusEventHandler;\n readOnly?: boolean;\n ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);\n setValue: (value: any) => void;\n value: any;\n};\nexport type TableColumnRendererHeader = string;\nexport type TableColumnRendererFooter<TType> = (rows: TType[]) => JSX.Element | string | number | null;\nexport type TableColumnSort = ReactTableColumnSort;\nexport type TableColumnSortDirection = 'asc' | 'desc';\nexport type TableColumnSortFn<TType = unknown> =\n | ((rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1)\n | ReactTableBuiltInSortingFn\n | 'auto';\nexport type TableColumnWidth = number | 'grow';\n\n// rows\nexport type TableRowActionRenderer<TType = unknown> = (row: TType, internalRowId: string) => JSX.Element | null;\nexport type TableRowActionGroupRenderer<TType = unknown> = (rows: TType[]) => JSX.Element | null;\nexport type TableRowClickHandler<TType = unknown> = (row: TType) => void;\nexport type TableRowDragHandler<TType = unknown> = (\n rows: TType[],\n showPlaceholder: (string) => void,\n setDataTransfer: (data: string) => void\n) => void;\nexport type TableRowDropHandler<TType = unknown> = (event: React.DragEvent, row: TType) => void;\nexport type TableRowGotoHandler = (\n column: string,\n query: string,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[],\n search: string | undefined\n) => Promise<number>;\nexport type TableRowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';\nexport type TableRowSelectHandler<TType = unknown> = (rows: TType[]) => void;\nexport type TableRowWithMetaData<TType = unknown> = TType & {\n _meta?: {\n layout?: 'heading' | 'summary' | 'item';\n };\n};\n\n// shortcuts\nexport type TableShortcutHandlerFn<TType = unknown> = (row: TType) => void;\nexport type TableShortcutHandlerObject<TType = unknown> = {\n handler: TableShortcutHandlerFn<TType>;\n meta?: boolean;\n shift?: boolean;\n};\n\n// table\nexport type TableFilterHandler = (filters: TableColumnFilter[]) => void | Promise<void>;\nexport type TableFontSize = keyof typeof FontSizes;\nexport type TablePreset = 'complex' | 'list' | 'simple';\nexport type TableRowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;\nexport type TableScrollToIndexHandler = (index: number, options?: { align: 'start' | 'center' | 'end' | 'auto' }) => void;\nexport type TableSearchHandler = (search: string | undefined) => void | Promise<void>;\nexport type TableServerLoadPageHandler = (\n pageIndex: number,\n sorting: TableColumnSort[],\n filters: TableColumnFilter[]\n) => Promise<void>;\nexport type TableServerLoadAllHandler = (sorting: TableColumnSort[], filters: TableColumnFilter[]) => Promise<void>;\nexport enum TableServerLoadAllState {\n Incomplete,\n Loading,\n Completed,\n}\nexport type TableSettingsHandler = (settings: TableSettings) => void | Promise<void>;\nexport type TableShortcuts<TType = unknown> = Record<string, TableShortcutHandlerFn<TType> | TableShortcutHandlerObject<TType>>;\nexport type TableSortHandler = (sorting: TableColumnSort[]) => void | Promise<void>;\nexport type TableCustomSettingsRenderer = (props: TableSettings) => React.ReactElement<MenuItemProps>[];\nexport type TableEmptyStateReason = 'empty' | 'filtering' | 'searching';\nexport type TableEmptyStateRenderer = (props: { reason: TableEmptyStateReason }) => JSX.Element | null;\n\n// settings\nexport type TableSettings = {\n columnFilters?: ReactTableColumnFilterState;\n columnOrder?: ReactTableColumnOrderState;\n columnPinning?: ReactTableColumnPinningState;\n columnSizing?: ReactTableColumnSizingState;\n columnVisibility?: ReactTableColumnVisibilityState;\n excludeUnmatchedRecordsInSearch?: boolean;\n fontSize?: TableFontSize;\n rowHeight?: TableRowHeight;\n searchQuery?: string;\n sorting?: ReactTableSortingState;\n};\nexport type TableEnableSettingsOptions = {\n columnOrder: boolean;\n columnPinning: boolean;\n columnSizing: boolean;\n columnVisibility: boolean;\n excludeUnmatchedRecordsInSearch: boolean;\n fontSize: boolean;\n grouping: boolean;\n rowHeight: boolean;\n sorting: boolean;\n};\n\n// props\nexport type TableConditionalRowProp<TType = unknown> = boolean | ((row: TType) => boolean);\nexport type TableFeatureProps<TType = unknown> = {\n // react-table built-in\n enableFiltering?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableColumnFreezing?: boolean;\n enableColumnHiding?: boolean;\n enableColumnResizing?: boolean;\n enableRowExpansion?: boolean;\n enableRowSelection?: TableConditionalRowProp<TType>;\n\n // custom -- common between all table types\n enableColumnOrdering?: boolean;\n enableFontSize?: boolean;\n enableFooter?: boolean;\n enablePrinting?: boolean;\n enableRowActions?: boolean;\n enableRowActive?: boolean;\n enableRowClick?: TableConditionalRowProp<TType>;\n enableRowDrag?: boolean;\n enableRowDrop?: boolean;\n enableRowGoto?: boolean;\n enableRowHeight?: boolean;\n enableSaveSettings?: boolean | Partial<TableEnableSettingsOptions>;\n};\n\nexport type TableChild = JSX.Element | boolean | null | undefined;\n\nexport type TableCommonProps<TType = unknown> = TableFeatureProps<TType> & {\n children: TableChild | TableChild[];\n data: TType[];\n id: string;\n\n // misc\n customSettings?: TableCustomSettingsRenderer;\n defaultColumnFreezingIndex?: number;\n defaultRowActiveIndex?: number;\n defaultRowGroupColumnId?: keyof TType;\n defaultSettings?: TableSettings;\n emptyState?: TableEmptyStateRenderer;\n preset?: TablePreset;\n rowActions?: TableRowActionRenderer<TType>[];\n rowActionsForGroup?: TableRowActionGroupRenderer<TType>[];\n rowActionsLength?: number;\n rowExpansionRenderer?: TableRowExpansionRenderer<TType>;\n rowIdentityColumnId?: string;\n shortcuts?: TableShortcuts<TType>;\n toolbarLeft?: JSX.Element;\n toolbarRight?: JSX.Element;\n toolbarPanel?: JSX.Element;\n\n // handlers\n onRowClick?: TableRowClickHandler<TType>;\n onRowDrag?: TableRowDragHandler<TType>;\n onRowDrop?: TableRowDropHandler<TType>;\n onRowGoto?: TableRowGotoHandler;\n onRowSelect?: TableRowSelectHandler<TType>;\n\n // state change handlers\n onChangeFilter?: TableFilterHandler;\n onChangeSearch?: TableSearchHandler;\n onChangeSettings?: TableSettingsHandler;\n onChangeSort?: TableSortHandler;\n};\n\nexport interface TableClientProps<TType = unknown> extends TableCommonProps<TType> {\n length?: never;\n loadAll?: never;\n loadPage?: never;\n pageSize?: never;\n}\n\nexport interface TableServerProps<TType = unknown> extends TableCommonProps<TType> {\n length: number | undefined;\n loadAll: TableServerLoadAllHandler;\n loadPage: TableServerLoadPageHandler;\n pageSize?: number;\n}\n\nexport type TableProps<TType = unknown> = TableClientProps<TType> | TableServerProps<TType>;\n\nexport type TableColumnProps<TType = unknown> = ValueOf<{\n [Key in keyof TType]: {\n accessor?: Key;\n id: StringWithAutocompleteOptions<Key>;\n // renderers\n renderer?: TableColumnRenderer<TType, TType[Key]>;\n /** Renderer to use if the cell is an aggregate cell and part of a grouped row */\n aggregate?: TableColumnRendererAggregate<TType, TType[Key]>;\n control?: TableColumnRendererControl<TType>;\n footer?: TableColumnRendererFooter<TType>;\n header: TableColumnRendererHeader;\n // options\n /** Aggregation function to be used when the column is part of a grouped row */\n aggregationFn?: 'auto' | ReactTableBuiltInAggregationFn;\n align?: TableColumnAlignment;\n className?: TableColumnClassNameHandler<TType>;\n dataType?: TableColumnDataType;\n defaultHidden?: boolean;\n defaultWidth?: TableColumnWidth;\n enableEditing?: boolean;\n enableFiltering?: boolean;\n enableGrouping?: boolean;\n enableHiding?: boolean;\n enableOrdering?: boolean;\n enablePrinting?: boolean;\n enableResizing?: boolean;\n enableSearch?: boolean;\n enableSorting?: boolean;\n enableTruncate?: boolean;\n filters?: TableFilterComparator[];\n headerClassName?: string;\n menu?: TableColumnMenu;\n minWidth?: number;\n sort?: TableColumnSortDirection;\n sortFn?: TableColumnSortFn<TType>;\n tooltip?: string;\n };\n}>;\n\nexport type TableGroupProps = {\n children: (JSX.Element | boolean | null | undefined)[];\n header: string;\n id: string;\n};\n\nexport type TableTexts = {\n columns: {\n actions: {\n tooltip: string;\n };\n drag: {\n tooltip: string;\n };\n expansion: {\n collapse: string;\n collapseAll: string;\n expand: string;\n expandAll: string;\n };\n menu: {\n editFilter: string;\n filter: string;\n freezeFirstColumn: string;\n freezeUptoColumn: string;\n gotoRow: string;\n hideColumn: string;\n unfreezeColumns: string;\n sorting: string;\n sortingOrder: {\n ascending: string;\n descending: string;\n unsorted: string;\n };\n };\n resize: {\n tooltip: string;\n };\n select: {\n deselect: string;\n deselectAll: string;\n select: string;\n selectAll: string;\n };\n };\n columnSettings: {\n button: string;\n noResults: string;\n search: string;\n tooltip: string;\n };\n filters: {\n button: string;\n buttons: {\n addFilter: string;\n clearFilters: string;\n cancel: string;\n clear: string;\n apply: string;\n };\n comparators: {\n contains: string;\n doesNotContain: string;\n isEqualTo: string;\n isNotEqualTo: string;\n isGreaterThan: string;\n isLessThan: string;\n isBetween: string;\n isEmpty: string;\n isNotEmpty: string;\n isBefore: string;\n isAfter: string;\n isLessThanOrEqualTo: string;\n isGreaterThanOrEqualTo: string;\n isOnOrBefore: string;\n isOnOrAfter: string;\n hasAnyOf: string;\n hasAllOf: string;\n hasNoneOf: string;\n };\n conditions: {\n and: string;\n where: string;\n };\n emptyFilter: {\n condition: string;\n value: string;\n };\n hiddenColumn: string;\n hiddenGroupedColumn: string;\n tooltip: string;\n total: string;\n };\n fontSize: {\n tooltip: string;\n sizes: {\n small: string;\n medium: string;\n large: string;\n };\n };\n footer: {\n summary: {\n count: string;\n records: string;\n selected: string;\n };\n };\n print: {\n error: string;\n loading: string;\n tooltip: string;\n warningDialog: {\n title: string;\n description: string;\n checkboxVisibilityLabel: string;\n cancelButtonText: string;\n printButtonText: string;\n };\n settingsDialog: {\n title: string;\n size: string;\n sizeA5: string;\n sizeA4: string;\n sizeA3: string;\n sizeLetter: string;\n sizeLegal: string;\n orientation: string;\n orientationLandscape: string;\n orientationPortrait: string;\n rows: string;\n rowsAll: string;\n rowsSelected: string;\n layout: string;\n layoutSplitGroups: string;\n };\n };\n rowHeight: {\n tooltip: string;\n sizes: {\n short: string;\n medium: string;\n tall: string;\n extraTall: string;\n };\n };\n search: {\n excludeUnmatchedResults: string;\n placeholder: string;\n };\n otherOptions: {\n tooltip: string;\n };\n};\n"],"names":["TableFilterComparator","TableServerLoadAllState"],"mappings":"AAwBA;IACYA;AAAZ,WAAYA,qBAAqB;EAC7BA,yEAAQ;EACRA,qFAAc;EACdA,2EAAS;EACTA,iFAAY;EACZA,mFAAa;EACbA,6EAAU;EACVA,2EAAS;EACTA,uEAAO;EACPA,6EAAU;EACVA,+FAAmB;EACnBA,sGAAsB;EACtBA,0EAAQ;EACRA,0EAAQ;EACRA,4EAAS;AACb,CAAC,EAfWA,qBAAqB,KAArBA,qBAAqB;IAmHrBC;AAAZ,WAAYA,uBAAuB;EAC/BA,iFAAU;EACVA,2EAAO;EACPA,+EAAS;AACb,CAAC,EAJWA,uBAAuB,KAAvBA,uBAAuB;;;;"}
|
@@ -98,7 +98,7 @@ function useTableManager(props, meta, internalColumns) {
|
|
98
98
|
rowDrag,
|
99
99
|
rowDrop: rowDrop,
|
100
100
|
rowExpansion: rowExpansion,
|
101
|
-
|
101
|
+
rowIdentityColumnId: props.rowIdentityColumnId,
|
102
102
|
rowGoto,
|
103
103
|
rowGroups: rowGroups,
|
104
104
|
rowHeight,
|