@vuu-ui/vuu-table 0.8.63 → 0.8.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/Table.css.js +1 -1
- package/cjs/Table.js.map +1 -1
- package/cjs/table-config.js +14 -4
- package/cjs/table-config.js.map +1 -1
- package/cjs/useControlledTableNavigation.js +7 -5
- package/cjs/useControlledTableNavigation.js.map +1 -1
- package/cjs/useTable.js +28 -7
- package/cjs/useTable.js.map +1 -1
- package/cjs/useTableModel.js +43 -7
- package/cjs/useTableModel.js.map +1 -1
- package/cjs/useTableViewport.js +2 -2
- package/cjs/useTableViewport.js.map +1 -1
- package/esm/Table.css.js +1 -1
- package/esm/Table.js.map +1 -1
- package/esm/table-config.js +14 -4
- package/esm/table-config.js.map +1 -1
- package/esm/useControlledTableNavigation.js +7 -5
- package/esm/useControlledTableNavigation.js.map +1 -1
- package/esm/useTable.js +28 -7
- package/esm/useTable.js.map +1 -1
- package/esm/useTableModel.js +44 -8
- package/esm/useTableModel.js.map +1 -1
- package/esm/useTableViewport.js +2 -2
- package/esm/useTableViewport.js.map +1 -1
- package/package.json +9 -9
- package/types/table-config.d.ts +2 -1
- package/types/useTable.d.ts +2 -0
- package/types/useTableModel.d.ts +6 -2
package/cjs/useTableModel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableModel.js","sources":["../src/useTableModel.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n PinLocation,\n ResizePhase,\n RuntimeColumnDescriptor,\n TableAttributes,\n TableConfig,\n TableHeadings,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n applyFilterToColumns,\n applyGroupByToColumns,\n applySortToColumns,\n existingSort,\n getCellRenderer,\n getColumnHeaderContentRenderer,\n getColumnHeaderLabelRenderer,\n getColumnLabel,\n getTableHeadings,\n getValueFormatter,\n hasValidationRules,\n isFilteredColumn,\n isGroupColumn,\n isPinned,\n logger,\n removeSort,\n replaceColumn,\n sortPinnedColumns,\n stripFilterFromColumns,\n subscribedOnly,\n} from \"@vuu-ui/vuu-utils\";\n\nimport {\n DataSource,\n DataSourceConfig,\n TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuColumnDataType, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { buildValidationChecker } from \"@vuu-ui/vuu-ui-controls\";\nimport { Reducer, useReducer } from \"react\";\n\nconst { info } = logger(\"useTableModel\");\n\nconst DEFAULT_COLUMN_WIDTH = 100;\n\nconst columnWithoutDataType = ({ serverDataType }: ColumnDescriptor) =>\n serverDataType === undefined;\n\nconst getDataType = (\n column: ColumnDescriptor,\n tableSchema?: TableSchema\n): VuuColumnDataType | undefined => {\n const schemaColumn = tableSchema?.columns.find(\n ({ name }) => name === column.name\n );\n if (schemaColumn) {\n return schemaColumn.serverDataType;\n } else {\n return column.serverDataType;\n }\n};\n\nconst checkboxColumnDescriptor: ColumnDescriptor = {\n label: \"\",\n name: \"\",\n width: 25,\n sortable: false,\n isSystemColumn: true,\n type: {\n name: \"checkbox\",\n renderer: {\n name: \"checkbox-row-selector-cell\",\n },\n },\n};\n\n/**\n * TableModel represents state used internally to manage Table. It is\n * derived initially from the TableConfig provided by user, along with the\n * data-related config from DataSource.\n */\nexport interface TableModel extends TableAttributes {\n columns: RuntimeColumnDescriptor[];\n headings: TableHeadings;\n}\n\n/**\n * InternalTableModel describes the state managed within the TableModel\n * reducer. It is the same as TableModel but with the addition of a\n * readonly copy of the original TableConfig.\n */\ninterface InternalTableModel extends TableModel {\n tableConfig: Readonly<TableConfig>;\n}\n\nconst numericTypes = [\"int\", \"long\", \"double\"];\nconst getDefaultAlignment = (serverDataType?: VuuColumnDataType) =>\n serverDataType === undefined\n ? undefined\n : numericTypes.includes(serverDataType)\n ? \"right\"\n : \"left\";\n\nexport interface ColumnActionInit {\n type: \"init\";\n tableConfig: TableConfig;\n dataSource: DataSource;\n}\n\nexport interface ColumnActionHide {\n type: \"hideColumns\";\n columns: RuntimeColumnDescriptor[];\n}\n\nexport interface ColumnActionShow {\n type: \"showColumns\";\n columns: RuntimeColumnDescriptor[];\n}\nexport interface ColumnActionMove {\n type: \"moveColumn\";\n column: RuntimeColumnDescriptor;\n moveBy?: 1 | -1;\n}\n\nexport interface ColumnActionPin {\n type: \"pinColumn\";\n column: ColumnDescriptor;\n pin?: PinLocation;\n}\n\nexport interface ColumnActionResize {\n type: \"resizeColumn\";\n column: RuntimeColumnDescriptor;\n phase: ResizePhase;\n width?: number;\n}\n\nexport interface ColumnActionSetTableSchema {\n type: \"setTableSchema\";\n tableSchema: TableSchema;\n}\n\nexport interface ColumnActionUpdate {\n type: \"updateColumn\";\n column: ColumnDescriptor;\n}\n\nexport interface ColumnActionUpdateProp {\n align?: ColumnDescriptor[\"align\"];\n column: RuntimeColumnDescriptor;\n hidden?: ColumnDescriptor[\"hidden\"];\n label?: ColumnDescriptor[\"label\"];\n resizing?: RuntimeColumnDescriptor[\"resizing\"];\n type: \"updateColumnProp\";\n width?: ColumnDescriptor[\"width\"];\n}\n\nexport interface ColumnActionTableConfig extends DataSourceConfig {\n confirmed?: boolean;\n type: \"tableConfig\";\n}\n\nexport interface ColumnActionColumnSettings extends DataSourceConfig {\n type: \"columnSettings\";\n column: ColumnDescriptor;\n /** required only for calculated coplumns */\n vuuTable?: VuuTable;\n}\n\nexport interface ColumnActionTableSettings extends DataSourceConfig {\n type: \"tableSettings\";\n}\n\nexport const isShowColumnSettings = (\n action: PersistentColumnAction\n): action is ColumnActionColumnSettings => action.type === \"columnSettings\";\n\nexport const isShowTableSettings = (\n action: PersistentColumnAction\n): action is ColumnActionTableSettings => action.type === \"tableSettings\";\n\n/**\n * PersistentColumnActions are those actions that require us to persist user changes across sessions\n */\nexport type PersistentColumnAction =\n | ColumnActionPin\n | ColumnActionHide\n | ColumnActionColumnSettings\n | ColumnActionTableSettings;\n\nexport type GridModelAction =\n | ColumnActionHide\n | ColumnActionInit\n | ColumnActionMove\n | ColumnActionPin\n | ColumnActionResize\n | ColumnActionSetTableSchema\n | ColumnActionShow\n | ColumnActionUpdate\n | ColumnActionUpdateProp\n | ColumnActionTableConfig;\n\nexport type GridModelReducer = Reducer<InternalTableModel, GridModelAction>;\n\nexport type ColumnActionDispatch = (action: GridModelAction) => void;\n\nconst columnReducer: GridModelReducer = (state, action) => {\n info?.(`TableModelReducer ${action.type}`);\n switch (action.type) {\n case \"init\":\n return init(action);\n case \"moveColumn\":\n return moveColumn(state, action);\n case \"resizeColumn\":\n return resizeColumn(state, action);\n case \"setTableSchema\":\n return setTableSchema(state, action);\n case \"hideColumns\":\n return hideColumns(state, action);\n case \"showColumns\":\n return showColumns(state, action);\n case \"pinColumn\":\n return pinColumn(state, action);\n case \"updateColumnProp\":\n return updateColumnProp(state, action);\n case \"tableConfig\":\n return updateTableConfig(state, action);\n default:\n console.log(`unhandled action ${action.type}`);\n return state;\n }\n};\n\nexport const useTableModel = (\n tableConfigProp: TableConfig,\n dataSource: DataSource,\n selectionModel: TableSelectionModel\n) => {\n const [state, dispatchTableModelAction] = useReducer<\n GridModelReducer,\n InitialConfig\n >(\n columnReducer,\n { tableConfig: tableConfigProp, dataSource, selectionModel },\n init\n );\n\n const { columns, headings, tableConfig, ...tableAttributes } = state;\n\n return {\n columns,\n dispatchTableModelAction,\n headings,\n tableAttributes,\n tableConfig,\n };\n};\n\ntype InitialConfig = {\n dataSource: DataSource;\n // TODO are we at risk of losing selectionModel on updates ?\n selectionModel?: TableSelectionModel;\n tableConfig: TableConfig;\n};\n\nfunction init({\n dataSource,\n selectionModel,\n tableConfig,\n}: InitialConfig): InternalTableModel {\n const { columns, ...tableAttributes } = tableConfig;\n const { config: dataSourceConfig, tableSchema } = dataSource;\n const toRuntimeColumnDescriptor = columnDescriptorToRuntimeColumDescriptor(\n tableAttributes,\n tableSchema\n );\n const runtimeColumns = columns\n .filter(subscribedOnly(dataSourceConfig?.columns))\n .map(toRuntimeColumnDescriptor);\n\n const columnsInRenderOrder = runtimeColumns.some(isPinned)\n ? sortPinnedColumns(runtimeColumns)\n : runtimeColumns;\n\n if (selectionModel === \"checkbox\") {\n columnsInRenderOrder.splice(\n 0,\n 0,\n toRuntimeColumnDescriptor(checkboxColumnDescriptor, -1)\n );\n }\n\n let state: InternalTableModel = {\n columns: columnsInRenderOrder,\n headings: getTableHeadings(columnsInRenderOrder),\n tableConfig,\n ...tableAttributes,\n };\n if (dataSourceConfig) {\n const { columns: _, ...rest } = dataSourceConfig;\n state = updateTableConfig(state, {\n type: \"tableConfig\",\n ...rest,\n });\n }\n return state;\n}\n\nconst getLabel = (\n label: string,\n columnFormatHeader?: \"uppercase\" | \"capitalize\"\n): string => {\n if (columnFormatHeader === \"uppercase\") {\n return label.toUpperCase();\n } else if (columnFormatHeader === \"capitalize\") {\n return label[0].toUpperCase() + label.slice(1).toLowerCase();\n }\n return label;\n};\n\nconst columnDescriptorToRuntimeColumDescriptor =\n (tableAttributes: TableAttributes, tableSchema?: TableSchema) =>\n (column: ColumnDescriptor, index: number): RuntimeColumnDescriptor => {\n const { columnDefaultWidth = DEFAULT_COLUMN_WIDTH, columnFormatHeader } =\n tableAttributes;\n const serverDataType = getDataType(column, tableSchema);\n const {\n align = getDefaultAlignment(serverDataType),\n name,\n label = getColumnLabel(column),\n width = columnDefaultWidth,\n ...rest\n } = column;\n\n const runtimeColumnWithDefaults: RuntimeColumnDescriptor = {\n ...rest,\n align,\n CellRenderer: getCellRenderer(column),\n HeaderCellContentRenderer: getColumnHeaderContentRenderer(column),\n HeaderCellLabelRenderer: getColumnHeaderLabelRenderer(column),\n clientSideEditValidationCheck: hasValidationRules(column.type)\n ? buildValidationChecker(column.type.renderer.rules)\n : undefined,\n index: index + 1,\n label: getLabel(label, columnFormatHeader),\n name,\n originalIdx: index,\n serverDataType,\n valueFormatter: getValueFormatter(column, serverDataType),\n width: width,\n };\n\n if (isGroupColumn(runtimeColumnWithDefaults)) {\n runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(\n (col) =>\n columnDescriptorToRuntimeColumDescriptor(tableAttributes)(col, index)\n );\n }\n\n return runtimeColumnWithDefaults;\n };\n\nfunction moveColumn(\n state: InternalTableModel,\n // TODO do we ever use this ?\n { column, moveBy }: ColumnActionMove\n) {\n const { columns } = state;\n if (typeof moveBy === \"number\") {\n const idx = columns.indexOf(column);\n const newColumns = columns.slice();\n const [movedColumns] = newColumns.splice(idx, 1);\n newColumns.splice(idx + moveBy, 0, movedColumns);\n return {\n ...state,\n columns: newColumns,\n };\n }\n return state;\n}\n\nfunction hideColumns(state: InternalTableModel, { columns }: ColumnActionHide) {\n if (columns.some((col) => col.hidden !== true)) {\n return columns.reduce<InternalTableModel>((s, c) => {\n if (c.hidden !== true) {\n return updateColumnProp(s, {\n type: \"updateColumnProp\",\n column: c,\n hidden: true,\n });\n } else {\n return s;\n }\n }, state);\n } else {\n return state;\n }\n}\nfunction showColumns(state: InternalTableModel, { columns }: ColumnActionShow) {\n if (columns.some((col) => col.hidden)) {\n return columns.reduce<InternalTableModel>((s, c) => {\n if (c.hidden) {\n return updateColumnProp(s, {\n type: \"updateColumnProp\",\n column: c,\n hidden: false,\n });\n } else {\n return s;\n }\n }, state);\n } else {\n return state;\n }\n}\n\nfunction resizeColumn(\n state: InternalTableModel,\n { column, phase, width }: ColumnActionResize\n) {\n const type = \"updateColumnProp\";\n const resizing = phase !== \"end\";\n switch (phase) {\n case \"begin\":\n return updateColumnProp(state, { type, column, resizing });\n case \"end\":\n return updateColumnProp(state, { type, column, resizing, width });\n case \"resize\":\n return updateColumnProp(state, { type, column, width });\n default:\n throw Error(`useTableModel.resizeColumn, invalid resizePhase ${phase}`);\n }\n}\n\nfunction setTableSchema(\n state: InternalTableModel,\n { tableSchema }: ColumnActionSetTableSchema\n) {\n const { columns } = state;\n if (columns.some(columnWithoutDataType)) {\n const cols = columns.map((column) => {\n const serverDataType = getDataType(column, tableSchema);\n return {\n ...column,\n align: column.align ?? getDefaultAlignment(serverDataType),\n serverDataType,\n };\n });\n\n return {\n ...state,\n columns: cols,\n };\n } else {\n return state;\n }\n}\n\nfunction pinColumn(state: InternalTableModel, action: ColumnActionPin) {\n let { columns } = state;\n const { column, pin } = action;\n const targetColumn = columns.find((col) => col.name === column.name);\n if (targetColumn) {\n columns = replaceColumn(columns, { ...targetColumn, pin });\n columns = sortPinnedColumns(columns);\n return {\n ...state,\n columns,\n };\n } else {\n return state;\n }\n}\nfunction updateColumnProp(\n state: InternalTableModel,\n action: ColumnActionUpdateProp\n) {\n let { columns, tableConfig } = state;\n const { align, column, hidden, label, resizing, width } = action;\n const targetColumn = columns.find((col) => col.name === column.name);\n if (targetColumn) {\n if (align === \"left\" || align === \"right\") {\n columns = replaceColumn(columns, { ...targetColumn, align });\n }\n if (typeof label === \"string\") {\n columns = replaceColumn(columns, { ...targetColumn, label });\n }\n if (typeof resizing === \"boolean\") {\n columns = replaceColumn(columns, { ...targetColumn, resizing });\n }\n if (typeof hidden === \"boolean\") {\n columns = replaceColumn(columns, { ...targetColumn, hidden });\n }\n if (typeof width === \"number\") {\n columns = replaceColumn(columns, { ...targetColumn, width });\n\n const targetConfigColumn = tableConfig.columns.find(\n (col) => col.name === column.name\n );\n if (targetConfigColumn) {\n tableConfig = {\n ...tableConfig,\n columns: replaceColumn<ColumnDescriptor>(tableConfig.columns, {\n ...targetConfigColumn,\n width,\n }),\n };\n }\n }\n }\n return {\n ...state,\n columns,\n tableConfig,\n } as InternalTableModel;\n}\n\nfunction updateTableConfig(\n state: InternalTableModel,\n { confirmed, filter, groupBy, sort }: ColumnActionTableConfig\n) {\n const hasGroupBy = groupBy !== undefined;\n const hasFilter = typeof filter?.filter === \"string\";\n const hasSort = sort && sort.sortDefs.length > 0;\n\n let result = state;\n\n if (hasGroupBy) {\n result = {\n ...state,\n columns: applyGroupByToColumns(result.columns, groupBy, confirmed),\n };\n }\n\n if (hasSort) {\n result = {\n ...state,\n columns: applySortToColumns(result.columns, sort),\n };\n } else if (existingSort(result.columns)) {\n result = {\n ...state,\n columns: removeSort(result.columns),\n };\n }\n\n if (hasFilter) {\n result = {\n ...state,\n columns: applyFilterToColumns(result.columns, filter),\n };\n } else if (result.columns.some(isFilteredColumn)) {\n result = {\n ...state,\n columns: stripFilterFromColumns(result.columns),\n };\n }\n\n return result;\n}\n"],"names":["logger","useReducer","subscribedOnly","isPinned","sortPinnedColumns","getTableHeadings","getColumnLabel","getCellRenderer","getColumnHeaderContentRenderer","getColumnHeaderLabelRenderer","hasValidationRules","buildValidationChecker","getValueFormatter","isGroupColumn","replaceColumn","applyGroupByToColumns","applySortToColumns","existingSort","removeSort","applyFilterToColumns","isFilteredColumn","stripFilterFromColumns"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useTableModel.js","sources":["../src/useTableModel.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n ColumnLayout,\n PinLocation,\n ResizePhase,\n RuntimeColumnDescriptor,\n TableAttributes,\n TableConfig,\n TableHeadings,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n applyFilterToColumns,\n applyGroupByToColumns,\n applyRuntimeColumnWidthsToConfig,\n applySortToColumns,\n applyWidthToColumns,\n existingSort,\n getCellRenderer,\n getColumnHeaderContentRenderer,\n getColumnHeaderLabelRenderer,\n getColumnLabel,\n getTableHeadings,\n getValueFormatter,\n hasValidationRules,\n isFilteredColumn,\n isGroupColumn,\n isPinned,\n logger,\n removeSort,\n replaceColumn,\n sortPinnedColumns,\n stripFilterFromColumns,\n subscribedOnly,\n} from \"@vuu-ui/vuu-utils\";\n\nimport {\n DataSource,\n DataSourceConfig,\n TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport { VuuColumnDataType, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { buildValidationChecker } from \"@vuu-ui/vuu-ui-controls\";\nimport { Reducer, useReducer } from \"react\";\n\nconst { info } = logger(\"useTableModel\");\n\nconst DEFAULT_COLUMN_WIDTH = 100;\n\nconst columnWithoutDataType = ({ serverDataType }: ColumnDescriptor) =>\n serverDataType === undefined;\n\nconst getDataType = (\n column: ColumnDescriptor,\n tableSchema?: TableSchema\n): VuuColumnDataType | undefined => {\n const schemaColumn = tableSchema?.columns.find(\n ({ name }) => name === column.name\n );\n if (schemaColumn) {\n return schemaColumn.serverDataType;\n } else {\n return column.serverDataType;\n }\n};\n\nconst checkboxColumnDescriptor: ColumnDescriptor = {\n label: \"\",\n name: \"\",\n width: 25,\n sortable: false,\n isSystemColumn: true,\n type: {\n name: \"checkbox\",\n renderer: {\n name: \"checkbox-row-selector-cell\",\n },\n },\n};\n\n/**\n * TableModel represents state used internally to manage Table. It is\n * derived initially from the TableConfig provided by user, along with the\n * data-related config from DataSource.\n */\nexport interface TableModel extends TableAttributes {\n columns: RuntimeColumnDescriptor[];\n headings: TableHeadings;\n}\n\n/**\n * InternalTableModel describes the state managed within the TableModel\n * reducer. It is the same as TableModel but with the addition of a\n * readonly copy of the original TableConfig.\n */\ninterface InternalTableModel extends TableModel {\n availableWidth: number;\n tableConfig: Readonly<TableConfig>;\n}\n\nconst numericTypes = [\"int\", \"long\", \"double\"];\nconst getDefaultAlignment = (serverDataType?: VuuColumnDataType) =>\n serverDataType === undefined\n ? undefined\n : numericTypes.includes(serverDataType)\n ? \"right\"\n : \"left\";\n\nexport interface ColumnActionInit {\n availableWidth: number;\n type: \"init\";\n tableConfig: TableConfig;\n dataSource: DataSource;\n}\n\nexport interface ColumnActionHide {\n type: \"hideColumns\";\n columns: RuntimeColumnDescriptor[];\n}\n\nexport interface ColumnActionShow {\n type: \"showColumns\";\n columns: RuntimeColumnDescriptor[];\n}\nexport interface ColumnActionMove {\n type: \"moveColumn\";\n column: RuntimeColumnDescriptor;\n moveBy?: 1 | -1;\n}\n\nexport interface ColumnActionPin {\n type: \"pinColumn\";\n column: ColumnDescriptor;\n pin?: PinLocation;\n}\n\nexport interface ColumnActionResize {\n type: \"resizeColumn\";\n column: RuntimeColumnDescriptor;\n phase: ResizePhase;\n width?: number;\n}\n\nexport interface ColumnActionSetTableSchema {\n type: \"setTableSchema\";\n tableSchema: TableSchema;\n}\n\nexport interface ColumnActionUpdate {\n type: \"updateColumn\";\n column: ColumnDescriptor;\n}\n\nexport interface ColumnActionUpdateProp {\n align?: ColumnDescriptor[\"align\"];\n column: RuntimeColumnDescriptor;\n hidden?: ColumnDescriptor[\"hidden\"];\n label?: ColumnDescriptor[\"label\"];\n resizing?: RuntimeColumnDescriptor[\"resizing\"];\n type: \"updateColumnProp\";\n width?: ColumnDescriptor[\"width\"];\n}\n\nexport interface ColumnActionTableConfig extends DataSourceConfig {\n confirmed?: boolean;\n type: \"tableConfig\";\n}\n\nexport interface ColumnActionColumnSettings extends DataSourceConfig {\n type: \"columnSettings\";\n column: ColumnDescriptor;\n /** required only for calculated coplumns */\n vuuTable?: VuuTable;\n}\n\nexport interface ColumnActionTableSettings extends DataSourceConfig {\n type: \"tableSettings\";\n}\n\nexport const isShowColumnSettings = (\n action: PersistentColumnAction\n): action is ColumnActionColumnSettings => action.type === \"columnSettings\";\n\nexport const isShowTableSettings = (\n action: PersistentColumnAction\n): action is ColumnActionTableSettings => action.type === \"tableSettings\";\n\n/**\n * PersistentColumnActions are those actions that require us to persist user changes across sessions\n */\nexport type PersistentColumnAction =\n | ColumnActionPin\n | ColumnActionHide\n | ColumnActionColumnSettings\n | ColumnActionTableSettings;\n\nexport type GridModelAction =\n | ColumnActionHide\n | ColumnActionInit\n | ColumnActionMove\n | ColumnActionPin\n | ColumnActionResize\n | ColumnActionSetTableSchema\n | ColumnActionShow\n | ColumnActionUpdate\n | ColumnActionUpdateProp\n | ColumnActionTableConfig;\n\nexport type GridModelReducer = Reducer<InternalTableModel, GridModelAction>;\n\nexport type ColumnActionDispatch = (action: GridModelAction) => void;\n\nconst columnReducer: GridModelReducer = (state, action) => {\n info?.(`TableModelReducer ${action.type}`);\n switch (action.type) {\n case \"init\": {\n if (\n state.tableConfig.columnLayout === \"manual\" &&\n action.tableConfig.columnLayout === \"fit\"\n ) {\n //TODO we're jumping through hoops here when we should just make config a controlled prop\n\n // Manual columnLayout has been assigned because user has resized one or more columns.\n // It happened during current session so tableConfig still reflects original value.\n return init({\n ...action,\n tableConfig: applyRuntimeColumnWidthsToConfig(\n action.tableConfig,\n state.columns\n ),\n });\n } else {\n return init(action);\n }\n }\n case \"moveColumn\":\n return moveColumn(state, action);\n case \"resizeColumn\":\n return resizeColumn(state, action);\n case \"setTableSchema\":\n return setTableSchema(state, action);\n case \"hideColumns\":\n return hideColumns(state, action);\n case \"showColumns\":\n return showColumns(state, action);\n case \"pinColumn\":\n return pinColumn(state, action);\n case \"updateColumnProp\":\n return updateColumnProp(state, action);\n case \"tableConfig\":\n return updateTableConfig(state, action);\n default:\n console.log(`unhandled action ${action.type}`);\n return state;\n }\n};\n\nexport const useTableModel = (\n tableConfigProp: TableConfig,\n dataSource: DataSource,\n selectionModel: TableSelectionModel,\n availableWidth: number\n) => {\n const [state, dispatchTableModelAction] = useReducer<\n GridModelReducer,\n InitialConfig\n >(\n columnReducer,\n {\n availableWidth,\n tableConfig: tableConfigProp,\n dataSource,\n selectionModel,\n },\n init\n );\n\n const { columns, headings, tableConfig, ...tableAttributes } = state;\n\n return {\n columns,\n dispatchTableModelAction,\n headings,\n tableAttributes,\n tableConfig,\n };\n};\n\ntype InitialConfig = {\n availableWidth: number;\n columnLayout?: ColumnLayout;\n dataSource: DataSource;\n selectionModel?: TableSelectionModel;\n tableConfig: TableConfig;\n};\n\nfunction init({\n availableWidth,\n dataSource,\n selectionModel,\n tableConfig,\n}: InitialConfig): InternalTableModel {\n console.log(\n `init model ${tableConfig?.columnLayout} columns, availableWidth=${availableWidth}`\n );\n const { columns, ...tableAttributes } = tableConfig;\n const { config: dataSourceConfig, tableSchema } = dataSource;\n const toRuntimeColumnDescriptor = columnDescriptorToRuntimeColumDescriptor(\n tableAttributes,\n tableSchema\n );\n const runtimeColumns = columns\n .filter(subscribedOnly(dataSourceConfig?.columns))\n .map(toRuntimeColumnDescriptor);\n\n const { columnLayout = \"static\" } = tableConfig;\n const runtimeColumnsWithLayout = applyWidthToColumns(runtimeColumns, {\n availableWidth,\n columnLayout,\n });\n\n const columnsInRenderOrder = runtimeColumnsWithLayout.some(isPinned)\n ? sortPinnedColumns(runtimeColumnsWithLayout)\n : runtimeColumnsWithLayout;\n\n if (selectionModel === \"checkbox\") {\n columnsInRenderOrder.splice(\n 0,\n 0,\n toRuntimeColumnDescriptor(checkboxColumnDescriptor, -1)\n );\n }\n\n let state: InternalTableModel = {\n availableWidth,\n columns: columnsInRenderOrder,\n headings: getTableHeadings(columnsInRenderOrder),\n tableConfig,\n ...tableAttributes,\n };\n if (dataSourceConfig) {\n const { columns: _, ...rest } = dataSourceConfig;\n state = updateTableConfig(state, {\n type: \"tableConfig\",\n ...rest,\n });\n }\n return state;\n}\n\nconst getLabel = (\n label: string,\n columnFormatHeader?: \"uppercase\" | \"capitalize\"\n): string => {\n if (columnFormatHeader === \"uppercase\") {\n return label.toUpperCase();\n } else if (columnFormatHeader === \"capitalize\") {\n return label[0].toUpperCase() + label.slice(1).toLowerCase();\n }\n return label;\n};\n\nconst columnDescriptorToRuntimeColumDescriptor =\n (tableAttributes: TableAttributes, tableSchema?: TableSchema) =>\n (column: ColumnDescriptor, index: number): RuntimeColumnDescriptor => {\n const { columnDefaultWidth = DEFAULT_COLUMN_WIDTH, columnFormatHeader } =\n tableAttributes;\n const serverDataType = getDataType(column, tableSchema);\n const {\n align = getDefaultAlignment(serverDataType),\n name,\n label = getColumnLabel(column),\n width = columnDefaultWidth,\n ...rest\n } = column;\n\n const runtimeColumnWithDefaults: RuntimeColumnDescriptor = {\n ...rest,\n align,\n CellRenderer: getCellRenderer(column),\n HeaderCellContentRenderer: getColumnHeaderContentRenderer(column),\n HeaderCellLabelRenderer: getColumnHeaderLabelRenderer(column),\n clientSideEditValidationCheck: hasValidationRules(column.type)\n ? buildValidationChecker(column.type.renderer.rules)\n : undefined,\n index: index + 1,\n label: getLabel(label, columnFormatHeader),\n name,\n originalIdx: index,\n serverDataType,\n valueFormatter: getValueFormatter(column, serverDataType),\n width,\n };\n\n if (isGroupColumn(runtimeColumnWithDefaults)) {\n runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(\n (col) =>\n columnDescriptorToRuntimeColumDescriptor(tableAttributes)(col, index)\n );\n }\n\n return runtimeColumnWithDefaults;\n };\n\nfunction moveColumn(\n state: InternalTableModel,\n // TODO do we ever use this ?\n { column, moveBy }: ColumnActionMove\n) {\n const { columns } = state;\n if (typeof moveBy === \"number\") {\n const idx = columns.indexOf(column);\n const newColumns = columns.slice();\n const [movedColumns] = newColumns.splice(idx, 1);\n newColumns.splice(idx + moveBy, 0, movedColumns);\n return {\n ...state,\n columns: newColumns,\n };\n }\n return state;\n}\n\nfunction hideColumns(state: InternalTableModel, { columns }: ColumnActionHide) {\n if (columns.some((col) => col.hidden !== true)) {\n return columns.reduce<InternalTableModel>((s, c) => {\n if (c.hidden !== true) {\n return updateColumnProp(s, {\n type: \"updateColumnProp\",\n column: c,\n hidden: true,\n });\n } else {\n return s;\n }\n }, state);\n } else {\n return state;\n }\n}\nfunction showColumns(state: InternalTableModel, { columns }: ColumnActionShow) {\n if (columns.some((col) => col.hidden)) {\n return columns.reduce<InternalTableModel>((s, c) => {\n if (c.hidden) {\n return updateColumnProp(s, {\n type: \"updateColumnProp\",\n column: c,\n hidden: false,\n });\n } else {\n return s;\n }\n }, state);\n } else {\n return state;\n }\n}\n\nfunction resizeColumn(\n state: InternalTableModel,\n { column, phase, width }: ColumnActionResize\n) {\n const type = \"updateColumnProp\";\n const resizing = phase !== \"end\";\n switch (phase) {\n case \"begin\":\n return updateColumnProp(state, { type, column, resizing });\n case \"end\": {\n const { tableConfig } = state;\n const isFit = tableConfig.columnLayout === \"fit\";\n const newState: InternalTableModel = isFit\n ? {\n ...state,\n tableConfig: applyRuntimeColumnWidthsToConfig(\n tableConfig,\n state.columns\n ),\n }\n : state;\n return updateColumnProp(newState, { type, column, resizing, width });\n }\n case \"resize\":\n return updateColumnProp(state, { type, column, width });\n default:\n throw Error(`useTableModel.resizeColumn, invalid resizePhase ${phase}`);\n }\n}\n\nfunction setTableSchema(\n state: InternalTableModel,\n { tableSchema }: ColumnActionSetTableSchema\n) {\n const { columns } = state;\n if (columns.some(columnWithoutDataType)) {\n const cols = columns.map((column) => {\n const serverDataType = getDataType(column, tableSchema);\n return {\n ...column,\n align: column.align ?? getDefaultAlignment(serverDataType),\n serverDataType,\n };\n });\n\n return {\n ...state,\n columns: cols,\n };\n } else {\n return state;\n }\n}\n\nfunction pinColumn(state: InternalTableModel, action: ColumnActionPin) {\n let { columns } = state;\n const { column, pin } = action;\n const targetColumn = columns.find((col) => col.name === column.name);\n if (targetColumn) {\n columns = replaceColumn(columns, { ...targetColumn, pin });\n columns = sortPinnedColumns(columns);\n return {\n ...state,\n columns,\n };\n } else {\n return state;\n }\n}\nfunction updateColumnProp(\n state: InternalTableModel,\n action: ColumnActionUpdateProp\n) {\n let { columns, tableConfig } = state;\n const { align, column, hidden, label, resizing, width } = action;\n const targetColumn = columns.find((col) => col.name === column.name);\n if (targetColumn) {\n if (align === \"left\" || align === \"right\") {\n columns = replaceColumn(columns, { ...targetColumn, align });\n }\n if (typeof label === \"string\") {\n columns = replaceColumn(columns, { ...targetColumn, label });\n }\n if (typeof resizing === \"boolean\") {\n columns = replaceColumn(columns, { ...targetColumn, resizing });\n }\n if (typeof hidden === \"boolean\") {\n columns = replaceColumn(columns, { ...targetColumn, hidden });\n }\n if (typeof width === \"number\") {\n columns = replaceColumn(columns, { ...targetColumn, width });\n\n const targetConfigColumn = tableConfig.columns.find(\n (col) => col.name === column.name\n );\n if (targetConfigColumn) {\n tableConfig = {\n ...tableConfig,\n columns: replaceColumn<ColumnDescriptor>(tableConfig.columns, {\n ...targetConfigColumn,\n width,\n }),\n };\n }\n }\n }\n return {\n ...state,\n columns,\n tableConfig,\n } as InternalTableModel;\n}\n\nfunction updateTableConfig(\n state: InternalTableModel,\n { confirmed, filter, groupBy, sort }: ColumnActionTableConfig\n) {\n const hasGroupBy = groupBy !== undefined;\n const hasFilter = typeof filter?.filter === \"string\";\n const hasSort = sort && sort.sortDefs.length > 0;\n\n let result = state;\n\n if (hasGroupBy) {\n result = {\n ...state,\n columns: applyGroupByToColumns(result.columns, groupBy, confirmed),\n };\n }\n\n if (hasSort) {\n result = {\n ...state,\n columns: applySortToColumns(result.columns, sort),\n };\n } else if (existingSort(result.columns)) {\n result = {\n ...state,\n columns: removeSort(result.columns),\n };\n }\n\n if (hasFilter) {\n result = {\n ...state,\n columns: applyFilterToColumns(result.columns, filter),\n };\n } else if (result.columns.some(isFilteredColumn)) {\n result = {\n ...state,\n columns: stripFilterFromColumns(result.columns),\n };\n }\n\n return result;\n}\n"],"names":["logger","applyRuntimeColumnWidthsToConfig","useReducer","subscribedOnly","applyWidthToColumns","isPinned","sortPinnedColumns","getTableHeadings","getColumnLabel","getCellRenderer","getColumnHeaderContentRenderer","getColumnHeaderLabelRenderer","hasValidationRules","buildValidationChecker","getValueFormatter","isGroupColumn","replaceColumn","applyGroupByToColumns","applySortToColumns","existingSort","removeSort","applyFilterToColumns","isFilteredColumn","stripFilterFromColumns"],"mappings":"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"}
|
package/cjs/useTableViewport.js
CHANGED
|
@@ -32,8 +32,8 @@ const useTableViewport = ({
|
|
|
32
32
|
}) => {
|
|
33
33
|
const inSituRowOffsetRef = react.useRef(0);
|
|
34
34
|
const pctScrollTopRef = react.useRef(0);
|
|
35
|
-
const pixelContentHeight = Math.min(rowHeight * rowCount, MAX_PIXEL_HEIGHT);
|
|
36
35
|
const virtualContentHeight = rowCount * rowHeight;
|
|
36
|
+
const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);
|
|
37
37
|
const virtualisedExtent = virtualContentHeight - pixelContentHeight;
|
|
38
38
|
const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = react.useMemo(
|
|
39
39
|
() => vuuUtils.measurePinnedColumns(columns, selectionEndSize),
|
|
@@ -65,7 +65,7 @@ const useTableViewport = ({
|
|
|
65
65
|
}, []);
|
|
66
66
|
return react.useMemo(() => {
|
|
67
67
|
if (size) {
|
|
68
|
-
const scrollbarSize =
|
|
68
|
+
const scrollbarSize = 10;
|
|
69
69
|
const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
|
|
70
70
|
const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
|
|
71
71
|
const visibleRows = (size.height - headerHeight) / rowHeight;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableViewport.js","sources":["../src/useTableViewport.ts"],"sourcesContent":["/**\n * This hook measures and calculates the values needed to manage layout\n * and virtualisation of the table. This includes measurements required\n * to support pinned columns.\n */\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n actualRowPositioning,\n measurePinnedColumns,\n RowAtPositionFunc,\n RowOffsetFunc,\n RowPositioning,\n virtualRowPositioning,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef } from \"react\";\n\nexport interface TableViewportHookProps {\n columns: RuntimeColumnDescriptor[];\n headerHeight: number;\n rowCount: number;\n rowHeight: number;\n /**\n * this is the solid left/right `border` rendered on the selection block\n */\n selectionEndSize?: number;\n size: MeasuredSize | undefined;\n}\n\nexport interface ViewportMeasurements {\n appliedPageSize: number;\n contentHeight: number;\n horizontalScrollbarHeight: number;\n isVirtualScroll: boolean;\n pinnedWidthLeft: number;\n pinnedWidthRight: number;\n rowCount: number;\n contentWidth: number;\n totalHeaderHeight: number;\n verticalScrollbarWidth: number;\n viewportBodyHeight: number;\n viewportWidth: number;\n}\n\nexport interface TableViewportHookResult extends ViewportMeasurements {\n getRowAtPosition: RowAtPositionFunc;\n getRowOffset: RowOffsetFunc;\n setInSituRowOffset: (rowIndexOffset: number) => void;\n setScrollTop: (scrollTop: number, scrollPct: number) => void;\n}\n\n// Too simplistic, it depends on rowHeight\nconst MAX_PIXEL_HEIGHT = 10_000_000;\n\nconst UNMEASURED_VIEWPORT: TableViewportHookResult = {\n appliedPageSize: 0,\n contentHeight: 0,\n contentWidth: 0,\n getRowAtPosition: () => -1,\n getRowOffset: () => -1,\n horizontalScrollbarHeight: 0,\n isVirtualScroll: false,\n pinnedWidthLeft: 0,\n pinnedWidthRight: 0,\n rowCount: 0,\n setInSituRowOffset: () => undefined,\n setScrollTop: () => undefined,\n totalHeaderHeight: 0,\n verticalScrollbarWidth: 0,\n viewportBodyHeight: 0,\n viewportWidth: 0,\n};\n\nexport const useTableViewport = ({\n columns,\n headerHeight,\n rowCount,\n rowHeight,\n selectionEndSize = 4,\n size,\n}: TableViewportHookProps): TableViewportHookResult => {\n const inSituRowOffsetRef = useRef(0);\n const pctScrollTopRef = useRef(0);\n // TODO we are limited by pixels not an
|
|
1
|
+
{"version":3,"file":"useTableViewport.js","sources":["../src/useTableViewport.ts"],"sourcesContent":["/**\n * This hook measures and calculates the values needed to manage layout\n * and virtualisation of the table. This includes measurements required\n * to support pinned columns.\n */\nimport { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n actualRowPositioning,\n measurePinnedColumns,\n RowAtPositionFunc,\n RowOffsetFunc,\n RowPositioning,\n virtualRowPositioning,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef } from \"react\";\n\nexport interface TableViewportHookProps {\n columns: RuntimeColumnDescriptor[];\n headerHeight: number;\n rowCount: number;\n rowHeight: number;\n /**\n * this is the solid left/right `border` rendered on the selection block\n */\n selectionEndSize?: number;\n size: MeasuredSize | undefined;\n}\n\nexport interface ViewportMeasurements {\n appliedPageSize: number;\n contentHeight: number;\n horizontalScrollbarHeight: number;\n isVirtualScroll: boolean;\n pinnedWidthLeft: number;\n pinnedWidthRight: number;\n rowCount: number;\n contentWidth: number;\n totalHeaderHeight: number;\n verticalScrollbarWidth: number;\n viewportBodyHeight: number;\n viewportWidth: number;\n}\n\nexport interface TableViewportHookResult extends ViewportMeasurements {\n getRowAtPosition: RowAtPositionFunc;\n getRowOffset: RowOffsetFunc;\n setInSituRowOffset: (rowIndexOffset: number) => void;\n setScrollTop: (scrollTop: number, scrollPct: number) => void;\n}\n\n// Too simplistic, it depends on rowHeight\nconst MAX_PIXEL_HEIGHT = 10_000_000;\n\nconst UNMEASURED_VIEWPORT: TableViewportHookResult = {\n appliedPageSize: 0,\n contentHeight: 0,\n contentWidth: 0,\n getRowAtPosition: () => -1,\n getRowOffset: () => -1,\n horizontalScrollbarHeight: 0,\n isVirtualScroll: false,\n pinnedWidthLeft: 0,\n pinnedWidthRight: 0,\n rowCount: 0,\n setInSituRowOffset: () => undefined,\n setScrollTop: () => undefined,\n totalHeaderHeight: 0,\n verticalScrollbarWidth: 0,\n viewportBodyHeight: 0,\n viewportWidth: 0,\n};\n\nexport const useTableViewport = ({\n columns,\n headerHeight,\n rowCount,\n rowHeight,\n selectionEndSize = 4,\n size,\n}: TableViewportHookProps): TableViewportHookResult => {\n const inSituRowOffsetRef = useRef(0);\n const pctScrollTopRef = useRef(0);\n // TODO we are limited by pixels not an arbitrary number of rows\n const virtualContentHeight = rowCount * rowHeight;\n const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);\n const virtualisedExtent = virtualContentHeight - pixelContentHeight;\n\n const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo(\n () => measurePinnedColumns(columns, selectionEndSize),\n [columns, selectionEndSize]\n );\n\n const [getRowOffset, getRowAtPosition, isVirtualScroll] =\n useMemo<RowPositioning>(() => {\n if (virtualisedExtent) {\n const [_getRowOffset, getRowAtPosition, _isVirtual] =\n virtualRowPositioning(rowHeight, virtualisedExtent, pctScrollTopRef);\n const getOffset: RowOffsetFunc = (row) => {\n return _getRowOffset(row, inSituRowOffsetRef.current);\n };\n return [getOffset, getRowAtPosition, _isVirtual];\n } else {\n return actualRowPositioning(rowHeight);\n }\n }, [virtualisedExtent, rowHeight]);\n\n const setScrollTop = useCallback((_: number, scrollPct: number) => {\n pctScrollTopRef.current = scrollPct;\n }, []);\n\n /**\n * The inSituRowOffset is used to simulate scrolling through a very large dataset\n * without actually moving the scroll position. It is triggered by keyboard\n * navigation. A simulated scroll operation will always be of one or more rows.\n * A value of zero is a request to reset the offset.\n */\n const setInSituRowOffset = useCallback((rowIndexOffset: number) => {\n if (rowIndexOffset === 0) {\n inSituRowOffsetRef.current = 0;\n } else {\n inSituRowOffsetRef.current = Math.max(\n 0,\n inSituRowOffsetRef.current + rowIndexOffset\n );\n }\n }, []);\n\n return useMemo(() => {\n if (size) {\n // TODO determine this at runtime\n const scrollbarSize = 10;\n const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;\n const horizontalScrollbarHeight =\n contentWidth > size.width ? scrollbarSize : 0;\n const visibleRows = (size.height - headerHeight) / rowHeight;\n const count = Number.isInteger(visibleRows)\n ? visibleRows\n : Math.ceil(visibleRows);\n const viewportBodyHeight = size.height - headerHeight;\n const verticalScrollbarWidth =\n pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;\n\n const appliedPageSize =\n count * rowHeight * (pixelContentHeight / virtualContentHeight);\n\n const viewportWidth = size.width;\n\n return {\n appliedPageSize,\n contentHeight: pixelContentHeight,\n contentWidth,\n getRowAtPosition,\n getRowOffset,\n isVirtualScroll,\n horizontalScrollbarHeight,\n pinnedWidthLeft,\n pinnedWidthRight,\n rowCount: count,\n setInSituRowOffset,\n setScrollTop,\n totalHeaderHeight: headerHeight,\n verticalScrollbarWidth,\n viewportBodyHeight,\n viewportWidth,\n };\n } else {\n return UNMEASURED_VIEWPORT;\n }\n }, [\n getRowAtPosition,\n getRowOffset,\n headerHeight,\n isVirtualScroll,\n pinnedWidthLeft,\n unpinnedWidth,\n pinnedWidthRight,\n pixelContentHeight,\n rowHeight,\n setInSituRowOffset,\n setScrollTop,\n size,\n virtualContentHeight,\n ]);\n};\n"],"names":["useRef","useMemo","measurePinnedColumns","getRowAtPosition","virtualRowPositioning","actualRowPositioning","useCallback"],"mappings":";;;;;AAoDA,MAAM,gBAAmB,GAAA,GAAA,CAAA;AAEzB,MAAM,mBAA+C,GAAA;AAAA,EACnD,eAAiB,EAAA,CAAA;AAAA,EACjB,aAAe,EAAA,CAAA;AAAA,EACf,YAAc,EAAA,CAAA;AAAA,EACd,kBAAkB,MAAM,CAAA,CAAA;AAAA,EACxB,cAAc,MAAM,CAAA,CAAA;AAAA,EACpB,yBAA2B,EAAA,CAAA;AAAA,EAC3B,eAAiB,EAAA,KAAA;AAAA,EACjB,eAAiB,EAAA,CAAA;AAAA,EACjB,gBAAkB,EAAA,CAAA;AAAA,EAClB,QAAU,EAAA,CAAA;AAAA,EACV,oBAAoB,MAAM,KAAA,CAAA;AAAA,EAC1B,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,iBAAmB,EAAA,CAAA;AAAA,EACnB,sBAAwB,EAAA,CAAA;AAAA,EACxB,kBAAoB,EAAA,CAAA;AAAA,EACpB,aAAe,EAAA,CAAA;AACjB,CAAA,CAAA;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,OAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAmB,GAAA,CAAA;AAAA,EACnB,IAAA;AACF,CAAuD,KAAA;AACrD,EAAM,MAAA,kBAAA,GAAqBA,aAAO,CAAC,CAAA,CAAA;AACnC,EAAM,MAAA,eAAA,GAAkBA,aAAO,CAAC,CAAA,CAAA;AAEhC,EAAA,MAAM,uBAAuB,QAAW,GAAA,SAAA,CAAA;AACxC,EAAA,MAAM,kBAAqB,GAAA,IAAA,CAAK,GAAI,CAAA,oBAAA,EAAsB,gBAAgB,CAAA,CAAA;AAC1E,EAAA,MAAM,oBAAoB,oBAAuB,GAAA,kBAAA,CAAA;AAEjD,EAAA,MAAM,EAAE,eAAA,EAAiB,gBAAkB,EAAA,aAAA,EAAkB,GAAAC,aAAA;AAAA,IAC3D,MAAMC,6BAAqB,CAAA,OAAA,EAAS,gBAAgB,CAAA;AAAA,IACpD,CAAC,SAAS,gBAAgB,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAA,MAAM,CAAC,YAAc,EAAA,gBAAA,EAAkB,eAAe,CAAA,GACpDD,cAAwB,MAAM;AAC5B,IAAA,IAAI,iBAAmB,EAAA;AACrB,MAAM,MAAA,CAAC,eAAeE,iBAAkB,EAAA,UAAU,IAChDC,8BAAsB,CAAA,SAAA,EAAW,mBAAmB,eAAe,CAAA,CAAA;AACrE,MAAM,MAAA,SAAA,GAA2B,CAAC,GAAQ,KAAA;AACxC,QAAO,OAAA,aAAA,CAAc,GAAK,EAAA,kBAAA,CAAmB,OAAO,CAAA,CAAA;AAAA,OACtD,CAAA;AACA,MAAO,OAAA,CAAC,SAAWD,EAAAA,iBAAAA,EAAkB,UAAU,CAAA,CAAA;AAAA,KAC1C,MAAA;AACL,MAAA,OAAOE,8BAAqB,SAAS,CAAA,CAAA;AAAA,KACvC;AAAA,GACC,EAAA,CAAC,iBAAmB,EAAA,SAAS,CAAC,CAAA,CAAA;AAEnC,EAAA,MAAM,YAAe,GAAAC,iBAAA,CAAY,CAAC,CAAA,EAAW,SAAsB,KAAA;AACjE,IAAA,eAAA,CAAgB,OAAU,GAAA,SAAA,CAAA;AAAA,GAC5B,EAAG,EAAE,CAAA,CAAA;AAQL,EAAM,MAAA,kBAAA,GAAqBA,iBAAY,CAAA,CAAC,cAA2B,KAAA;AACjE,IAAA,IAAI,mBAAmB,CAAG,EAAA;AACxB,MAAA,kBAAA,CAAmB,OAAU,GAAA,CAAA,CAAA;AAAA,KACxB,MAAA;AACL,MAAA,kBAAA,CAAmB,UAAU,IAAK,CAAA,GAAA;AAAA,QAChC,CAAA;AAAA,QACA,mBAAmB,OAAU,GAAA,cAAA;AAAA,OAC/B,CAAA;AAAA,KACF;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,OAAOL,cAAQ,MAAM;AACnB,IAAA,IAAI,IAAM,EAAA;AAER,MAAA,MAAM,aAAgB,GAAA,EAAA,CAAA;AACtB,MAAM,MAAA,YAAA,GAAe,kBAAkB,aAAgB,GAAA,gBAAA,CAAA;AACvD,MAAA,MAAM,yBACJ,GAAA,YAAA,GAAe,IAAK,CAAA,KAAA,GAAQ,aAAgB,GAAA,CAAA,CAAA;AAC9C,MAAM,MAAA,WAAA,GAAA,CAAe,IAAK,CAAA,MAAA,GAAS,YAAgB,IAAA,SAAA,CAAA;AACnD,MAAM,MAAA,KAAA,GAAQ,OAAO,SAAU,CAAA,WAAW,IACtC,WACA,GAAA,IAAA,CAAK,KAAK,WAAW,CAAA,CAAA;AACzB,MAAM,MAAA,kBAAA,GAAqB,KAAK,MAAS,GAAA,YAAA,CAAA;AACzC,MAAM,MAAA,sBAAA,GACJ,kBAAqB,GAAA,kBAAA,GAAqB,aAAgB,GAAA,CAAA,CAAA;AAE5D,MAAM,MAAA,eAAA,GACJ,KAAQ,GAAA,SAAA,IAAa,kBAAqB,GAAA,oBAAA,CAAA,CAAA;AAE5C,MAAA,MAAM,gBAAgB,IAAK,CAAA,KAAA,CAAA;AAE3B,MAAO,OAAA;AAAA,QACL,eAAA;AAAA,QACA,aAAe,EAAA,kBAAA;AAAA,QACf,YAAA;AAAA,QACA,gBAAA;AAAA,QACA,YAAA;AAAA,QACA,eAAA;AAAA,QACA,yBAAA;AAAA,QACA,eAAA;AAAA,QACA,gBAAA;AAAA,QACA,QAAU,EAAA,KAAA;AAAA,QACV,kBAAA;AAAA,QACA,YAAA;AAAA,QACA,iBAAmB,EAAA,YAAA;AAAA,QACnB,sBAAA;AAAA,QACA,kBAAA;AAAA,QACA,aAAA;AAAA,OACF,CAAA;AAAA,KACK,MAAA;AACL,MAAO,OAAA,mBAAA,CAAA;AAAA,KACT;AAAA,GACC,EAAA;AAAA,IACD,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAA;AAAA,IACA,kBAAA;AAAA,IACA,SAAA;AAAA,IACA,kBAAA;AAAA,IACA,YAAA;AAAA,IACA,IAAA;AAAA,IACA,oBAAA;AAAA,GACD,CAAA,CAAA;AACH;;;;"}
|
package/esm/Table.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var tableCss = ".vuuTable {\n --vuu-table-cell-outlineWidth: 1px;\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n --vuu-table-next-selection-bookend-width: 4px;\n --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n --vuu-table-col-heading-height: 25px;\n --columnResizer-color: transparent;\n --row-height: var(\n --row-height-prop,\n var(--vuu-table-row-height, var(--salt-size-base))\n );\n\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --table-background: var(--salt-container-primary-background);\n\n background: var(--table-background);\n font-family: var(\n --vuuTable-fontFamily,\n var(--salt-typography-fontFamily, sans-serif)\n );\n font-size: var(--vuuTable-fontSize, var(--salt-text-fontSize, 12px));\n position: relative;\n user-select: none;\n}\n\n.vuuTable-zebra {\n --row-background-even: var(--table-background);\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var();\n}\n\n.vuuTable-rowLines {\n --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n border-bottom: none !important;\n border-top: none !important;\n border-left: solid 1px var(--salt-container-primary-borderColor);\n /* a top border */\n /** creates a border to top od scrollbar */\n /* box-shadow: 0px -1px 0px 0px var(--salt-container-primary-borderColor); */\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n
|
|
1
|
+
var tableCss = ".vuuTable {\n --vuu-table-cell-outlineWidth: 1px;\n --table-height: var(--measured-px-height);\n --table-width: var(--measured-px-width);\n --vuu-table-next-selection-bookend-width: 4px;\n --vuu-table-embedded-control-height: calc(var(--row-height) - 3px);\n --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n --vuu-table-col-heading-height: 25px;\n --columnResizer-color: transparent;\n --row-height: var(\n --row-height-prop,\n var(--vuu-table-row-height, var(--salt-size-base))\n );\n\n --cell-borderColor: transparent;\n --row-borderColor: var(--row-background);\n --table-background: var(--salt-container-primary-background);\n\n background: var(--table-background);\n font-family: var(\n --vuuTable-fontFamily,\n var(--salt-typography-fontFamily, sans-serif)\n );\n font-size: var(--vuuTable-fontSize, var(--salt-text-fontSize, 12px));\n position: relative;\n user-select: none;\n}\n\n.vuuTable-zebra {\n --row-background-even: var(--table-background);\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var();\n}\n\n.vuuTable-rowLines {\n --row-borderColor: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-scrollbarContainer {\n border-bottom: none !important;\n border-top: none !important;\n border-left: solid 1px var(--salt-container-primary-borderColor);\n /* a top border */\n /** creates a border to top od scrollbar */\n /* box-shadow: 0px -1px 0px 0px var(--salt-container-primary-borderColor); */\n height: var(--viewport-body-height);\n left: 0px;\n overflow: auto;\n position: absolute;\n top: var(--total-header-height);\n width: var(--table-width);\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar {\n width: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar:horizontal {\n height: 10px;\n}\n\n.vuuTable-scrollbarContainer::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.vuuTable-scrollbarContainer::-webkit-scrollbar-thumb {\n background-clip: padding-box;\n border-radius: 10px;\n border: 2px solid rgba(0, 0, 0, 0);\n background-color: var(--vuu-color-gray-30);\n}\n\n.vuuTable-scrollbarContent {\n height: calc(var(--content-height) + var(--horizontal-scrollbar-height));\n position: absolute;\n width: var(--content-width);\n}\n\n.vuuTable-contentContainer {\n background: var(--table-background);\n height: calc(var(--table-height) - var(--horizontal-scrollbar-height));\n position: relative;\n overflow: auto;\n overscroll-behavior: none;\n width: calc(var(--table-width) - var(--vertical-scrollbar-width));\n}\n\n.vuuTable-contentContainer::-webkit-scrollbar {\n display: none;\n}\n\n.vuuTable-table {\n position: absolute;\n top: 0;\n left: 0;\n table-layout: fixed;\n width: var(--content-width);\n margin: 0;\n border: none;\n border-collapse: separate;\n border-spacing: 0;\n}\n\n.vuuTable-body {\n height: var(--content-height);\n position: relative;\n}\n\n.vuuPinLeft,\n.vuuPinRight {\n background-color: inherit;\n position: sticky;\n z-index: 1;\n}\n\n.vuuTable-col-headings {\n background-color: var(\n --vuuTableColHeadings-background,\n var(--table-background)\n );\n padding: 0 var(--vuu-table-next-selection-bookend-width, 0);\n position: sticky;\n top: 0;\n /* ensure header row sits atop everything else when scrolling down */\n z-index: 1;\n}\n\n.vuuTable-col-headings:hover {\n --columnResizer-height: var(--vuu-table-col-header-height);\n --columnResizer-color: var(--salt-separable-tertiary-borderColor);\n}\n\n.vuuTable-heading {\n height: var(--vuu-table-col-heading-height);\n}\n\n.vuuTable-col-headers {\n background-color: var(\n --vuuTableColHeadings-background,\n var(--vuuTableColHeadings-background)\n );\n color: var(--salt-content-secondary-foreground);\n height: var(--vuu-table-col-header-height);\n white-space: nowrap;\n\n .vuuDraggable-spacer {\n border-bottom: solid 1px #ccc;\n height: var(--vuu-table-col-header-height);\n }\n}\n\n.sizer-cell {\n border: none !important;\n height: 0px;\n}\n\n.vuuDraggable-vuuTable {\n --cell-borderColor: transparent;\n --vuu-table-col-header-height: var(--vuuTableHeaderCell-height, 25px);\n --vuuTableHeaderCell-background: var(--salt-container-secondary-background);\n}\n.vuuDraggable-vuuTable {\n --row-height: 25px;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { tableCss as default };
|
|
4
4
|
//# sourceMappingURL=Table.css.js.map
|
package/esm/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n DataSource,\n SchemaColumn,\n SelectionChangeHandler,\n VuuFeatureInvocationMessage,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n CustomHeader,\n RowProps,\n TableConfig,\n TableConfigChangeHandler,\n TableRowClickHandler,\n TableRowSelectHandler,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n DragStartHandler,\n MeasuredContainer,\n MeasuredContainerProps,\n MeasuredSize,\n dragStrategy,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { metadataKeys, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n CSSProperties,\n FC,\n ForwardedRef,\n RefObject,\n forwardRef,\n useRef,\n useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProxy } from \"./Row\";\nimport { TableHeader } from \"./table-header\";\nimport { useMeasuredHeight } from \"./useMeasuredHeight\";\nimport { useTable } from \"./useTable\";\nimport { ScrollingAPI } from \"./useTableScroll\";\n\nimport tableCss from \"./Table.css\";\n\nconst classBase = \"vuuTable\";\n\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\";\n\nexport interface TableProps\n extends Omit<MeasuredContainerProps, \"onDragStart\" | \"onDrop\" | \"onSelect\"> {\n Row?: FC<RowProps>;\n allowConfigEditing?: boolean;\n allowDragDrop?: boolean | dragStrategy;\n /**\n * required if a fully featured column picker is to be available\n */\n availableColumns?: SchemaColumn[];\n /**\n * Provide configuration settings for Table. At minimun, column\n * descriptors must be provided.\n */\n config: TableConfig;\n dataSource: DataSource;\n disableFocus?: boolean;\n /**\n * Allows additional custom element(s) to be embedded immediately below column headers.\n * Could be used to present inline filters for example.\n */\n customHeader?: CustomHeader | CustomHeader[];\n /**\n * Defined how focus navigation within data cells will be handled by table.\n * Default is cell.\n */\n highlightedIndex?: number;\n navigationStyle?: TableNavigationStyle;\n /**\n * required if a fully featured column picker is to be available.\n * Available columns can be changed by the addition or removal of\n * one or more calculated columns.\n */\n onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n /**\n * This callback will be invoked any time a config attribute of TableConfig\n * is changed. By persisting this value and providing it to the Table as a\n * prop, table state can be persisted across sessions.\n */\n onConfigChange?: TableConfigChangeHandler;\n onDragStart?: DragStartHandler;\n onDrop?: (dragDropState: DragDropState) => void;\n /**\n * When a Vuu feature e.g. context menu action, has been invoked, the Vuu server\n * response must be handled. This callback provides that response.\n */\n onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;\n\n onHighlight?: (idx: number) => void;\n /**\n * callback invoked when user 'clicks' a table row. CLick triggered either\n * via mouse click or keyboard (default ENTER);\n */\n onRowClick?: TableRowClickHandler;\n onSelect?: TableRowSelectHandler;\n onSelectionChange?: SelectionChangeHandler;\n renderBufferSize?: number;\n /**\n * Pixel height of rows. If specified here, this will take precedence over CSS\n * values and Table will not respond to density changes.\n */\n rowHeight?: number;\n /**\n * imperative API for scrolling table\n */\n scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n /**\n * Selection Bookends style the left and right edge of a selection block.\n * They are optional, value defaults to zero.\n * TODO this should just live in CSS\n */\n selectionBookendWidth?: number;\n /**\n * Selection behaviour for Table:\n * `none` selection disabled\n * `single` no more than one row may be selected\n * `extended` (default) multiple rows can be selected\n * `checkbox` same behaviour as extended, with checkbox column for selection\n */\n selectionModel?: TableSelectionModel;\n /**\n * if false, table rendered without headers. Useful when table is being included in a\n * composite component.\n */\n showColumnHeaders?: boolean;\n /**\n * if false, column headers will not display menu icon. Menu items are still available\n * from contexct menu\n */\n showColumnHeaderMenus?: boolean;\n}\n\nconst TableCore = ({\n Row = DefaultRow,\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n customHeader,\n dataSource,\n disableFocus = false,\n highlightedIndex: highlightedIndexProp,\n id: idProp,\n navigationStyle = \"cell\",\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectionChange,\n renderBufferSize = 5,\n rowHeight,\n scrollingApiRef,\n selectionModel = \"extended\",\n showColumnHeaders = true,\n showColumnHeaderMenus = true,\n size,\n}: Omit<TableProps, \"rowHeight\"> & {\n containerRef: RefObject<HTMLDivElement>;\n rowHeight: number;\n size: MeasuredSize;\n}) => {\n const id = useId(idProp);\n const {\n columnMap,\n columns,\n data,\n draggableRow,\n getRowOffset,\n handleContextMenuAction,\n headerHeight,\n headings,\n highlightedIndex,\n menuBuilder,\n onDataEdited,\n onHeaderHeightMeasured,\n onMoveColumn,\n onMoveGroupColumn,\n onRemoveGroupColumn,\n onResizeColumn,\n onRowClick,\n onSortColumn,\n onToggleGroup,\n rowClassNameGenerator,\n scrollProps,\n tableAttributes,\n tableConfig,\n viewportMeasurements,\n ...tableProps\n } = useTable({\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n dataSource,\n disableFocus,\n highlightedIndex: highlightedIndexProp,\n id,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectionChange,\n renderBufferSize: Math.max(5, renderBufferSize),\n rowHeight,\n scrollingApiRef,\n selectionModel,\n size,\n });\n\n const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n });\n\n //TODO move TableBody into separate component\n // we only render TableBody when we have measured TableHeader\n\n const cssVariables = {\n \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n \"--total-header-height\": `${headerHeight}px`,\n \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n } as CSSProperties;\n\n return (\n <ContextMenuProvider\n menuActionHandler={handleContextMenuAction}\n menuBuilder={menuBuilder}\n >\n <div\n className={`${classBase}-scrollbarContainer`}\n ref={scrollProps.scrollbarContainerRef}\n style={cssVariables}\n >\n <div className={`${classBase}-scrollbarContent`} />\n </div>\n <div\n className={contentContainerClassName}\n ref={scrollProps.contentContainerRef}\n style={cssVariables}\n >\n <div\n {...tableProps}\n className={`${classBase}-table`}\n role=\"table\"\n tabIndex={disableFocus ? undefined : -1}\n >\n {showColumnHeaders ? (\n <TableHeader\n columns={scrollProps.columnsWithinViewport}\n customHeader={customHeader}\n headings={headings}\n onHeightMeasured={onHeaderHeightMeasured}\n onMoveColumn={onMoveColumn}\n onMoveGroupColumn={onMoveGroupColumn}\n onRemoveGroupColumn={onRemoveGroupColumn}\n onResizeColumn={onResizeColumn}\n onSortColumn={onSortColumn}\n showColumnHeaderMenus={showColumnHeaderMenus}\n tableConfig={tableConfig}\n tableId={id}\n virtualColSpan={scrollProps.virtualColSpan}\n />\n ) : null}\n {showColumnHeaders === false || headerHeight > 0 ? (\n <div className={`${classBase}-body`}>\n {data.map((data) => (\n <Row\n aria-rowindex={data[0] + 1}\n classNameGenerator={rowClassNameGenerator}\n columnMap={columnMap}\n columns={scrollProps.columnsWithinViewport}\n highlighted={highlightedIndex === data[IDX]}\n key={data[RENDER_IDX]}\n onClick={onRowClick}\n onDataEdited={onDataEdited}\n row={data}\n offset={getRowOffset(data)}\n onToggleGroup={onToggleGroup}\n virtualColSpan={scrollProps.virtualColSpan}\n zebraStripes={tableAttributes.zebraStripes}\n />\n ))}\n </div>\n ) : null}\n </div>\n </div>\n {draggableRow}\n </ContextMenuProvider>\n );\n};\n\nexport const Table = forwardRef(function Table(\n {\n Row,\n allowDragDrop,\n availableColumns,\n className: classNameProp,\n config,\n customHeader,\n dataSource,\n disableFocus,\n highlightedIndex,\n id,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick,\n onSelect,\n onSelectionChange,\n renderBufferSize,\n rowHeight: rowHeightProp,\n scrollingApiRef,\n selectionModel,\n showColumnHeaders,\n showColumnHeaderMenus,\n style: styleProp,\n ...htmlAttributes\n }: TableProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table\",\n css: tableCss,\n window: targetWindow,\n });\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [size, setSize] = useState<MeasuredSize>();\n\n const { rowHeight, rowRef } = useMeasuredHeight({ height: rowHeightProp });\n\n if (config === undefined) {\n throw Error(\n \"vuu Table requires config prop. Minimum config is list of Column Descriptors\"\n );\n }\n if (dataSource === undefined) {\n throw Error(\"vuu Table requires dataSource prop\");\n }\n\n // TODO render TableHeader here and measure before row construction begins\n // TODO we could have MeasuredContainer render a Provider and make size available via a context hook ?\n return (\n <MeasuredContainer\n {...htmlAttributes}\n className={cx(classBase, classNameProp)}\n id={id}\n onResize={setSize}\n ref={useForkRef(containerRef, forwardedRef)}\n style={\n {\n \"--row-height-prop\": rowHeight > 0 ? `${rowHeight}px` : undefined,\n } as CSSProperties\n }\n >\n <RowProxy ref={rowRef} height={rowHeightProp} />\n\n {size && rowHeight ? (\n <TableCore\n Row={Row}\n allowDragDrop={allowDragDrop}\n availableColumns={availableColumns}\n config={config}\n containerRef={containerRef}\n customHeader={customHeader}\n dataSource={dataSource}\n disableFocus={disableFocus}\n highlightedIndex={highlightedIndex}\n id={id}\n navigationStyle={navigationStyle}\n onAvailableColumnsChange={onAvailableColumnsChange}\n onConfigChange={onConfigChange}\n onDragStart={onDragStart}\n onDrop={onDrop}\n onFeatureInvocation={onFeatureInvocation}\n onHighlight={onHighlight}\n onRowClick={onRowClick}\n onSelect={onSelect}\n onSelectionChange={onSelectionChange}\n renderBufferSize={renderBufferSize}\n rowHeight={rowHeight}\n scrollingApiRef={scrollingApiRef}\n selectionModel={selectionModel}\n showColumnHeaders={showColumnHeaders}\n showColumnHeaderMenus={showColumnHeaderMenus}\n size={size}\n />\n ) : null}\n </MeasuredContainer>\n );\n});\n"],"names":["Row","DefaultRow","data","Table"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../src/Table.tsx"],"sourcesContent":["import {\n DataSource,\n SchemaColumn,\n SelectionChangeHandler,\n VuuFeatureInvocationMessage,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ContextMenuProvider } from \"@vuu-ui/vuu-popups\";\nimport {\n CustomHeader,\n RowProps,\n TableConfig,\n TableConfigChangeHandler,\n TableRowClickHandler,\n TableRowSelectHandler,\n TableSelectionModel,\n} from \"@vuu-ui/vuu-table-types\";\nimport type { DragDropState } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n DragStartHandler,\n MeasuredContainer,\n MeasuredContainerProps,\n MeasuredSize,\n dragStrategy,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { metadataKeys, useId } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n CSSProperties,\n FC,\n ForwardedRef,\n RefObject,\n forwardRef,\n useRef,\n useState,\n} from \"react\";\nimport { Row as DefaultRow, RowProxy } from \"./Row\";\nimport { TableHeader } from \"./table-header\";\nimport { useMeasuredHeight } from \"./useMeasuredHeight\";\nimport { useTable } from \"./useTable\";\nimport { ScrollingAPI } from \"./useTableScroll\";\n\nimport tableCss from \"./Table.css\";\n\nconst classBase = \"vuuTable\";\n\nconst { IDX, RENDER_IDX } = metadataKeys;\n\nexport type TableNavigationStyle = \"none\" | \"cell\" | \"row\";\n\nexport interface TableProps\n extends Omit<MeasuredContainerProps, \"onDragStart\" | \"onDrop\" | \"onSelect\"> {\n Row?: FC<RowProps>;\n allowConfigEditing?: boolean;\n allowDragDrop?: boolean | dragStrategy;\n /**\n * required if a fully featured column picker is to be available\n */\n availableColumns?: SchemaColumn[];\n /**\n * Provide configuration settings for Table. At minimun, column\n * descriptors must be provided.\n */\n config: TableConfig;\n dataSource: DataSource;\n disableFocus?: boolean;\n /**\n * Allows additional custom element(s) to be embedded immediately below column headers.\n * Could be used to present inline filters for example.\n */\n customHeader?: CustomHeader | CustomHeader[];\n /**\n * Defined how focus navigation within data cells will be handled by table.\n * Default is cell.\n */\n highlightedIndex?: number;\n navigationStyle?: TableNavigationStyle;\n /**\n * required if a fully featured column picker is to be available.\n * Available columns can be changed by the addition or removal of\n * one or more calculated columns.\n */\n onAvailableColumnsChange?: (columns: SchemaColumn[]) => void;\n /**\n * This callback will be invoked any time a config attribute of TableConfig\n * is changed. By persisting this value and providing it to the Table as a\n * prop, table state can be persisted across sessions.\n */\n onConfigChange?: TableConfigChangeHandler;\n onDragStart?: DragStartHandler;\n onDrop?: (dragDropState: DragDropState) => void;\n /**\n * When a Vuu feature e.g. context menu action, has been invoked, the Vuu server\n * response must be handled. This callback provides that response.\n */\n onFeatureInvocation?: (message: VuuFeatureInvocationMessage) => void;\n\n onHighlight?: (idx: number) => void;\n /**\n * callback invoked when user 'clicks' a table row. CLick triggered either\n * via mouse click or keyboard (default ENTER);\n */\n onRowClick?: TableRowClickHandler;\n onSelect?: TableRowSelectHandler;\n onSelectionChange?: SelectionChangeHandler;\n renderBufferSize?: number;\n /**\n * Pixel height of rows. If specified here, this will take precedence over CSS\n * values and Table will not respond to density changes.\n */\n rowHeight?: number;\n /**\n * imperative API for scrolling table\n */\n scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n\n /**\n * Selection Bookends style the left and right edge of a selection block.\n * They are optional, value defaults to zero.\n * TODO this should just live in CSS\n */\n selectionBookendWidth?: number;\n /**\n * Selection behaviour for Table:\n * `none` selection disabled\n * `single` no more than one row may be selected\n * `extended` (default) multiple rows can be selected\n * `checkbox` same behaviour as extended, with checkbox column for selection\n */\n selectionModel?: TableSelectionModel;\n /**\n * if false, table rendered without headers. Useful when table is being included in a\n * composite component.\n */\n showColumnHeaders?: boolean;\n /**\n * if false, column headers will not display menu icon. Menu items are still available\n * from contexct menu\n */\n showColumnHeaderMenus?: boolean;\n}\n\nconst TableCore = ({\n Row = DefaultRow,\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n customHeader,\n dataSource,\n disableFocus = false,\n highlightedIndex: highlightedIndexProp,\n id: idProp,\n navigationStyle = \"cell\",\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectionChange,\n renderBufferSize = 5,\n rowHeight,\n scrollingApiRef,\n selectionModel = \"extended\",\n showColumnHeaders = true,\n showColumnHeaderMenus = true,\n size,\n}: Omit<TableProps, \"rowHeight\"> & {\n containerRef: RefObject<HTMLDivElement>;\n rowHeight: number;\n size: MeasuredSize;\n}) => {\n const id = useId(idProp);\n const {\n columnMap,\n columns,\n data,\n draggableRow,\n getRowOffset,\n handleContextMenuAction,\n headerHeight,\n headings,\n highlightedIndex,\n menuBuilder,\n onDataEdited,\n onHeaderHeightMeasured,\n onMoveColumn,\n onMoveGroupColumn,\n onRemoveGroupColumn,\n onResizeColumn,\n onRowClick,\n onSortColumn,\n onToggleGroup,\n rowClassNameGenerator,\n scrollProps,\n tableAttributes,\n tableConfig,\n viewportMeasurements,\n ...tableProps\n } = useTable({\n allowDragDrop,\n availableColumns,\n config,\n containerRef,\n dataSource,\n disableFocus,\n highlightedIndex: highlightedIndexProp,\n id,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick: onRowClickProp,\n onSelect,\n onSelectionChange,\n renderBufferSize: Math.max(5, renderBufferSize),\n rowHeight,\n scrollingApiRef,\n selectionModel,\n size,\n });\n\n const contentContainerClassName = cx(`${classBase}-contentContainer`, {\n [`${classBase}-colLines`]: tableAttributes.columnSeparators,\n [`${classBase}-rowLines`]: tableAttributes.rowSeparators,\n [`${classBase}-zebra`]: tableAttributes.zebraStripes,\n });\n\n const cssVariables = {\n \"--content-height\": `${viewportMeasurements.contentHeight}px`,\n \"--content-width\": `${viewportMeasurements.contentWidth}px`,\n \"--horizontal-scrollbar-height\": `${viewportMeasurements.horizontalScrollbarHeight}px`,\n \"--pinned-width-left\": `${viewportMeasurements.pinnedWidthLeft}px`,\n \"--pinned-width-right\": `${viewportMeasurements.pinnedWidthRight}px`,\n \"--total-header-height\": `${headerHeight}px`,\n \"--vertical-scrollbar-width\": `${viewportMeasurements.verticalScrollbarWidth}px`,\n \"--viewport-body-height\": `${viewportMeasurements.viewportBodyHeight}px`,\n } as CSSProperties;\n\n return (\n <ContextMenuProvider\n menuActionHandler={handleContextMenuAction}\n menuBuilder={menuBuilder}\n >\n <div\n className={`${classBase}-scrollbarContainer`}\n ref={scrollProps.scrollbarContainerRef}\n style={cssVariables}\n >\n <div className={`${classBase}-scrollbarContent`} />\n </div>\n <div\n className={contentContainerClassName}\n ref={scrollProps.contentContainerRef}\n style={cssVariables}\n >\n <div\n {...tableProps}\n className={`${classBase}-table`}\n role=\"table\"\n tabIndex={disableFocus ? undefined : -1}\n >\n {showColumnHeaders ? (\n <TableHeader\n columns={scrollProps.columnsWithinViewport}\n customHeader={customHeader}\n headings={headings}\n onHeightMeasured={onHeaderHeightMeasured}\n onMoveColumn={onMoveColumn}\n onMoveGroupColumn={onMoveGroupColumn}\n onRemoveGroupColumn={onRemoveGroupColumn}\n onResizeColumn={onResizeColumn}\n onSortColumn={onSortColumn}\n showColumnHeaderMenus={showColumnHeaderMenus}\n tableConfig={tableConfig}\n tableId={id}\n virtualColSpan={scrollProps.virtualColSpan}\n />\n ) : null}\n {showColumnHeaders === false || headerHeight > 0 ? (\n <div className={`${classBase}-body`}>\n {data.map((data) => (\n <Row\n aria-rowindex={data[0] + 1}\n classNameGenerator={rowClassNameGenerator}\n columnMap={columnMap}\n columns={scrollProps.columnsWithinViewport}\n highlighted={highlightedIndex === data[IDX]}\n key={data[RENDER_IDX]}\n onClick={onRowClick}\n onDataEdited={onDataEdited}\n row={data}\n offset={getRowOffset(data)}\n onToggleGroup={onToggleGroup}\n virtualColSpan={scrollProps.virtualColSpan}\n zebraStripes={tableAttributes.zebraStripes}\n />\n ))}\n </div>\n ) : null}\n </div>\n </div>\n {draggableRow}\n </ContextMenuProvider>\n );\n};\n\nexport const Table = forwardRef(function Table(\n {\n Row,\n allowDragDrop,\n availableColumns,\n className: classNameProp,\n config,\n customHeader,\n dataSource,\n disableFocus,\n highlightedIndex,\n id,\n navigationStyle,\n onAvailableColumnsChange,\n onConfigChange,\n onDragStart,\n onDrop,\n onFeatureInvocation,\n onHighlight,\n onRowClick,\n onSelect,\n onSelectionChange,\n renderBufferSize,\n rowHeight: rowHeightProp,\n scrollingApiRef,\n selectionModel,\n showColumnHeaders,\n showColumnHeaderMenus,\n style: styleProp,\n ...htmlAttributes\n }: TableProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table\",\n css: tableCss,\n window: targetWindow,\n });\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [size, setSize] = useState<MeasuredSize>();\n\n const { rowHeight, rowRef } = useMeasuredHeight({ height: rowHeightProp });\n\n if (config === undefined) {\n throw Error(\n \"vuu Table requires config prop. Minimum config is list of Column Descriptors\"\n );\n }\n if (dataSource === undefined) {\n throw Error(\"vuu Table requires dataSource prop\");\n }\n\n // TODO render TableHeader here and measure before row construction begins\n // TODO we could have MeasuredContainer render a Provider and make size available via a context hook ?\n return (\n <MeasuredContainer\n {...htmlAttributes}\n className={cx(classBase, classNameProp)}\n id={id}\n onResize={setSize}\n ref={useForkRef(containerRef, forwardedRef)}\n style={\n {\n \"--row-height-prop\": rowHeight > 0 ? `${rowHeight}px` : undefined,\n } as CSSProperties\n }\n >\n <RowProxy ref={rowRef} height={rowHeightProp} />\n\n {size && rowHeight ? (\n <TableCore\n Row={Row}\n allowDragDrop={allowDragDrop}\n availableColumns={availableColumns}\n config={config}\n containerRef={containerRef}\n customHeader={customHeader}\n dataSource={dataSource}\n disableFocus={disableFocus}\n highlightedIndex={highlightedIndex}\n id={id}\n navigationStyle={navigationStyle}\n onAvailableColumnsChange={onAvailableColumnsChange}\n onConfigChange={onConfigChange}\n onDragStart={onDragStart}\n onDrop={onDrop}\n onFeatureInvocation={onFeatureInvocation}\n onHighlight={onHighlight}\n onRowClick={onRowClick}\n onSelect={onSelect}\n onSelectionChange={onSelectionChange}\n renderBufferSize={renderBufferSize}\n rowHeight={rowHeight}\n scrollingApiRef={scrollingApiRef}\n selectionModel={selectionModel}\n showColumnHeaders={showColumnHeaders}\n showColumnHeaderMenus={showColumnHeaderMenus}\n size={size}\n />\n ) : null}\n </MeasuredContainer>\n );\n});\n"],"names":["Row","DefaultRow","data","Table"],"mappings":"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"}
|
package/esm/table-config.js
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
|
+
import { getRuntimeColumnWidth } from '@vuu-ui/vuu-utils';
|
|
2
|
+
|
|
1
3
|
const updateTableConfig = (config, action) => {
|
|
2
4
|
switch (action.type) {
|
|
3
|
-
case "col-size":
|
|
5
|
+
case "col-size": {
|
|
6
|
+
const { columns: runtimeColumns, width } = action;
|
|
7
|
+
const isFit = config.columnLayout === "fit";
|
|
4
8
|
return {
|
|
5
9
|
...config,
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
10
|
+
columnLayout: isFit ? "manual" : config.columnLayout,
|
|
11
|
+
columns: config.columns.map((col) => {
|
|
12
|
+
if (isFit) {
|
|
13
|
+
return col.name === action.column.name ? { ...col, width } : col.width ? col : { ...col, width: getRuntimeColumnWidth(col, runtimeColumns) };
|
|
14
|
+
} else {
|
|
15
|
+
return col.name === action.column.name ? { ...col, width: action.width } : col;
|
|
16
|
+
}
|
|
17
|
+
})
|
|
9
18
|
};
|
|
19
|
+
}
|
|
10
20
|
case "column-prop":
|
|
11
21
|
return {
|
|
12
22
|
...config,
|
package/esm/table-config.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-config.js","sources":["../src/table-config.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"table-config.js","sources":["../src/table-config.ts"],"sourcesContent":["import {\n ColumnDescriptor,\n RuntimeColumnDescriptor,\n TableConfig,\n} from \"@vuu-ui/vuu-table-types\";\nimport { getRuntimeColumnWidth } from \"@vuu-ui/vuu-utils\";\n\nexport type MoveColumnTableConfigAction = {\n type: \"col-move\";\n column: ColumnDescriptor;\n fromIndex: number;\n toIndex: number;\n};\n\nexport type ResizeColumnTableConfigAction = {\n type: \"col-size\";\n column: ColumnDescriptor;\n columns: RuntimeColumnDescriptor[];\n width: number;\n};\n\nexport type SubscribeColumnTableConfigAction = {\n type: \"subscribed\";\n column: ColumnDescriptor;\n value: boolean;\n};\n\nexport type UpdateColumnPropertyTableConfigAction = {\n type: \"column-prop\";\n column: ColumnDescriptor;\n property: keyof ColumnDescriptor;\n value: boolean | number | string;\n};\n\nexport type TableConfigAction =\n | MoveColumnTableConfigAction\n | ResizeColumnTableConfigAction\n | UpdateColumnPropertyTableConfigAction;\n\nexport const updateTableConfig = (\n config: TableConfig,\n action: TableConfigAction\n): TableConfig => {\n switch (action.type) {\n case \"col-size\": {\n const { columns: runtimeColumns, width } = action;\n const isFit = config.columnLayout === \"fit\";\n return {\n ...config,\n columnLayout: isFit ? \"manual\" : config.columnLayout,\n columns: config.columns.map((col) => {\n if (isFit) {\n // When user resizes a column and 'fit' column layout is in effect,\n // column layout becomes 'manual' and all columns are set to\n // their current widths (unless subsequently resized by user).\n return col.name === action.column.name\n ? { ...col, width }\n : col.width\n ? col\n : { ...col, width: getRuntimeColumnWidth(col, runtimeColumns) };\n } else {\n return col.name === action.column.name\n ? { ...col, width: action.width }\n : col;\n }\n }),\n };\n }\n case \"column-prop\":\n return {\n ...config,\n columns: config.columns.map((col) =>\n col.name === action.column.name\n ? { ...col, [action.property]: action.value }\n : col\n ),\n };\n\n default:\n return config;\n }\n};\n"],"names":[],"mappings":";;AAuCa,MAAA,iBAAA,GAAoB,CAC/B,MAAA,EACA,MACgB,KAAA;AAChB,EAAA,QAAQ,OAAO,IAAM;AAAA,IACnB,KAAK,UAAY,EAAA;AACf,MAAA,MAAM,EAAE,OAAA,EAAS,cAAgB,EAAA,KAAA,EAAU,GAAA,MAAA,CAAA;AAC3C,MAAM,MAAA,KAAA,GAAQ,OAAO,YAAiB,KAAA,KAAA,CAAA;AACtC,MAAO,OAAA;AAAA,QACL,GAAG,MAAA;AAAA,QACH,YAAA,EAAc,KAAQ,GAAA,QAAA,GAAW,MAAO,CAAA,YAAA;AAAA,QACxC,OAAS,EAAA,MAAA,CAAO,OAAQ,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACnC,UAAA,IAAI,KAAO,EAAA;AAIT,YAAO,OAAA,GAAA,CAAI,SAAS,MAAO,CAAA,MAAA,CAAO,OAC9B,EAAE,GAAG,KAAK,KAAM,EAAA,GAChB,IAAI,KACJ,GAAA,GAAA,GACA,EAAE,GAAG,GAAA,EAAK,OAAO,qBAAsB,CAAA,GAAA,EAAK,cAAc,CAAE,EAAA,CAAA;AAAA,WAC3D,MAAA;AACL,YAAO,OAAA,GAAA,CAAI,IAAS,KAAA,MAAA,CAAO,MAAO,CAAA,IAAA,GAC9B,EAAE,GAAG,GAAK,EAAA,KAAA,EAAO,MAAO,CAAA,KAAA,EACxB,GAAA,GAAA,CAAA;AAAA,WACN;AAAA,SACD,CAAA;AAAA,OACH,CAAA;AAAA,KACF;AAAA,IACA,KAAK,aAAA;AACH,MAAO,OAAA;AAAA,QACL,GAAG,MAAA;AAAA,QACH,OAAA,EAAS,OAAO,OAAQ,CAAA,GAAA;AAAA,UAAI,CAAC,GAC3B,KAAA,GAAA,CAAI,IAAS,KAAA,MAAA,CAAO,OAAO,IACvB,GAAA,EAAE,GAAG,GAAA,EAAK,CAAC,MAAO,CAAA,QAAQ,GAAG,MAAA,CAAO,OACpC,GAAA,GAAA;AAAA,SACN;AAAA,OACF,CAAA;AAAA,IAEF;AACE,MAAO,OAAA,MAAA,CAAA;AAAA,GACX;AACF;;;;"}
|
|
@@ -13,11 +13,13 @@ const useControlledTableNavigation = (initialValue, rowCount) => {
|
|
|
13
13
|
setHighlightedIndex((index = -1) => Math.max(0, index - 1));
|
|
14
14
|
} else if (e.key === "Enter" || e.key === " ") {
|
|
15
15
|
const { current: rowIdx } = highlightedIndexRef;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
if (typeof rowIdx === "number") {
|
|
17
|
+
const rowEl = tableRef.current?.querySelector(
|
|
18
|
+
`[aria-rowindex="${rowIdx + 1}"]`
|
|
19
|
+
);
|
|
20
|
+
if (rowEl) {
|
|
21
|
+
dispatchMouseEvent(rowEl, "click");
|
|
22
|
+
}
|
|
21
23
|
}
|
|
22
24
|
}
|
|
23
25
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { useStateRef } from \"@vuu-ui/vuu-ui-controls\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const useControlledTableNavigation = (\n initialValue: number,\n rowCount: number\n) => {\n const tableRef = useRef<HTMLDivElement>(null);\n\n const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n number | undefined\n >(initialValue);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"ArrowDown\") {\n setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n } else if (e.key === \"ArrowUp\") {\n setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n } else if (e.key === \"Enter\" || e.key === \" \") {\n const { current: rowIdx } = highlightedIndexRef;\n // induce an onSelect event by 'clicking' the row\n const rowEl = tableRef.current?.querySelector(\n
|
|
1
|
+
{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { useStateRef } from \"@vuu-ui/vuu-ui-controls\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const useControlledTableNavigation = (\n initialValue: number,\n rowCount: number\n) => {\n const tableRef = useRef<HTMLDivElement>(null);\n\n const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n number | undefined\n >(initialValue);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"ArrowDown\") {\n setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n } else if (e.key === \"ArrowUp\") {\n setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n } else if (e.key === \"Enter\" || e.key === \" \") {\n const { current: rowIdx } = highlightedIndexRef;\n // induce an onSelect event by 'clicking' the row\n if (typeof rowIdx === \"number\") {\n const rowEl = tableRef.current?.querySelector(\n `[aria-rowindex=\"${rowIdx + 1}\"]`\n ) as HTMLElement;\n if (rowEl) {\n dispatchMouseEvent(rowEl, \"click\");\n }\n }\n }\n },\n [highlightedIndexRef, rowCount, setHighlightedIndex]\n );\n\n const handleHighlight = useCallback(\n (idx: number) => {\n setHighlightedIndex(idx);\n },\n [setHighlightedIndex]\n );\n\n return {\n highlightedIndexRef,\n onHighlight: handleHighlight,\n onKeyDown: handleKeyDown,\n tableRef,\n };\n};\n"],"names":[],"mappings":";;;;AAIa,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,QACG,KAAA;AACH,EAAM,MAAA,QAAA,GAAW,OAAuB,IAAI,CAAA,CAAA;AAE5C,EAAA,MAAM,CAAC,mBAAA,EAAqB,mBAAmB,CAAA,GAAI,YAEjD,YAAY,CAAA,CAAA;AAEd,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACzB,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,QAAW,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,CAAC,CAAA,CAAA;AAAA,OACvE,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,SAAW,EAAA;AAC9B,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,iBACjD,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,CAAA,CAAE,QAAQ,GAAK,EAAA;AAC7C,QAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,mBAAA,CAAA;AAE5B,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAM,MAAA,KAAA,GAAQ,SAAS,OAAS,EAAA,aAAA;AAAA,YAC9B,CAAA,gBAAA,EAAmB,SAAS,CAAC,CAAA,EAAA,CAAA;AAAA,WAC/B,CAAA;AACA,UAAA,IAAI,KAAO,EAAA;AACT,YAAA,kBAAA,CAAmB,OAAO,OAAO,CAAA,CAAA;AAAA,WACnC;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,QAAA,EAAU,mBAAmB,CAAA;AAAA,GACrD,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAA,WAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAA,mBAAA,CAAoB,GAAG,CAAA,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,mBAAmB,CAAA;AAAA,GACtB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
package/esm/useTable.js
CHANGED
|
@@ -59,6 +59,10 @@ const useTable = ({
|
|
|
59
59
|
if (dataSource === void 0) {
|
|
60
60
|
throw Error("no data source provided to Vuu Table");
|
|
61
61
|
}
|
|
62
|
+
const virtualContentHeight = rowHeight * rowCount;
|
|
63
|
+
const viewportBodyHeight = size.height - headerHeight;
|
|
64
|
+
const verticalScrollbarWidth = virtualContentHeight > viewportBodyHeight ? 10 : 0;
|
|
65
|
+
const availableWidth = size.width - (verticalScrollbarWidth + 8);
|
|
62
66
|
const rowClassNameGenerator = useRowClassNameGenerators(config);
|
|
63
67
|
const useRowDragDrop = allowDragDrop ? useDragDrop : useNullDragDrop;
|
|
64
68
|
const menuBuilder = useMemo(
|
|
@@ -74,24 +78,32 @@ const useTable = ({
|
|
|
74
78
|
headings,
|
|
75
79
|
tableAttributes,
|
|
76
80
|
tableConfig
|
|
77
|
-
} = useTableModel(config, dataSource, selectionModel);
|
|
81
|
+
} = useTableModel(config, dataSource, selectionModel, availableWidth);
|
|
78
82
|
useLayoutEffectSkipFirst(() => {
|
|
79
83
|
dispatchTableModelAction({
|
|
84
|
+
availableWidth,
|
|
80
85
|
type: "init",
|
|
81
86
|
tableConfig: config,
|
|
82
87
|
dataSource
|
|
83
88
|
});
|
|
84
|
-
}, [
|
|
89
|
+
}, [
|
|
90
|
+
availableWidth,
|
|
91
|
+
config,
|
|
92
|
+
dataSource,
|
|
93
|
+
dispatchTableModelAction,
|
|
94
|
+
verticalScrollbarWidth
|
|
95
|
+
]);
|
|
85
96
|
const applyTableConfigChange = useCallback(
|
|
86
97
|
(config2) => {
|
|
87
98
|
dispatchTableModelAction({
|
|
99
|
+
availableWidth,
|
|
88
100
|
type: "init",
|
|
89
101
|
tableConfig: config2,
|
|
90
102
|
dataSource
|
|
91
103
|
});
|
|
92
104
|
onConfigChange?.(stripInternalProperties(config2));
|
|
93
105
|
},
|
|
94
|
-
[dataSource, dispatchTableModelAction, onConfigChange]
|
|
106
|
+
[availableWidth, dataSource, dispatchTableModelAction, onConfigChange]
|
|
95
107
|
);
|
|
96
108
|
const columnMap = useMemo(
|
|
97
109
|
() => buildColumnMap(dataSource.columns),
|
|
@@ -149,13 +161,14 @@ const useTable = ({
|
|
|
149
161
|
const handleConfigEditedInSettingsPanel = useCallback(
|
|
150
162
|
(tableConfig2) => {
|
|
151
163
|
dispatchTableModelAction({
|
|
152
|
-
|
|
164
|
+
availableWidth,
|
|
165
|
+
dataSource,
|
|
153
166
|
tableConfig: tableConfig2,
|
|
154
|
-
|
|
167
|
+
type: "init"
|
|
155
168
|
});
|
|
156
169
|
onConfigChange?.(stripInternalProperties(tableConfig2));
|
|
157
170
|
},
|
|
158
|
-
[dataSource, dispatchTableModelAction, onConfigChange]
|
|
171
|
+
[availableWidth, dataSource, dispatchTableModelAction, onConfigChange]
|
|
159
172
|
);
|
|
160
173
|
const handleDataSourceConfigChanged = useCallback(
|
|
161
174
|
(dataSourceConfig) => {
|
|
@@ -291,6 +304,7 @@ const useTable = ({
|
|
|
291
304
|
updateTableConfig(tableConfig, {
|
|
292
305
|
type: "col-size",
|
|
293
306
|
column,
|
|
307
|
+
columns,
|
|
294
308
|
width
|
|
295
309
|
})
|
|
296
310
|
)
|
|
@@ -471,13 +485,20 @@ const useTable = ({
|
|
|
471
485
|
columns: columns2
|
|
472
486
|
};
|
|
473
487
|
dispatchTableModelAction({
|
|
488
|
+
availableWidth,
|
|
474
489
|
type: "init",
|
|
475
490
|
tableConfig: newTableConfig,
|
|
476
491
|
dataSource
|
|
477
492
|
});
|
|
478
493
|
onConfigChange?.(stripInternalProperties(newTableConfig));
|
|
479
494
|
},
|
|
480
|
-
[
|
|
495
|
+
[
|
|
496
|
+
availableWidth,
|
|
497
|
+
dataSource,
|
|
498
|
+
dispatchTableModelAction,
|
|
499
|
+
onConfigChange,
|
|
500
|
+
tableConfig
|
|
501
|
+
]
|
|
481
502
|
);
|
|
482
503
|
const handleDropRow = useCallback(
|
|
483
504
|
(dragDropState) => {
|