@vuu-ui/vuu-table 2.1.18 → 2.1.19-beta.2

package/src/useTableContextMenu.mjs

@@ -0,0 +1,54 @@
+import { useContextMenu } from "@vuu-ui/vuu-context-menu";
+import { columnByAriaIndex, getAriaColIndex, getAriaRowIndex } from "@vuu-ui/vuu-utils";
+import { useCallback } from "react";
+const NO_ROWS = [];
+const isTableLocation = (location)=>[
+        "grid",
+        "header",
+        "filter"
+    ].includes(location);
+const getDataSourceRow = (dataRows, rowIndex)=>{
+    const row = dataRows.find((dataRow)=>dataRow.index === rowIndex);
+    if (row) return row;
+    throw Error(`useTableContextMenu data row not found for rowIndex ${rowIndex}`);
+};
+const useTableContextMenu = ({ allowContextMenu = true, columns, dataRows, dataSource, getSelectedRows, headerCount = 1 })=>{
+    const showContextMenu = useContextMenu();
+    const onContextMenu = useCallback((evt)=>{
+        const target = evt.target;
+        const cellEl = target?.closest("div[role='cell']");
+        const rowEl = target?.closest("div[role='row']");
+        if (cellEl && rowEl) {
+            const { selectedRowsCount } = dataSource;
+            const rowIndex = getAriaRowIndex(rowEl) - headerCount - 1;
+            const ariaColIndex = getAriaColIndex(cellEl);
+            const dataRow = getDataSourceRow(dataRows, rowIndex);
+            const column = columnByAriaIndex(columns, ariaColIndex);
+            if (!column.isSystemColumn) {
+                const menuOptions = {
+                    column,
+                    columns,
+                    dataRow,
+                    selectedRows: 0 === selectedRowsCount ? NO_ROWS : getSelectedRows(),
+                    viewport: dataSource.viewport
+                };
+                const menuShowing = showContextMenu(evt, "grid", menuOptions, {
+                    onOpenChange: (isOpen)=>{
+                        console.log(`[useTableContextMenu] onOpenChange ${isOpen}`);
+                        cellEl.classList.remove("ContextOpen");
+                    }
+                });
+                if (menuShowing) cellEl.classList.add("ContextOpen");
+            }
+        }
+    }, [
+        columns,
+        dataRows,
+        dataSource,
+        getSelectedRows,
+        headerCount,
+        showContextMenu
+    ]);
+    return allowContextMenu ? onContextMenu : void 0;
+};
+export { isTableLocation, useTableContextMenu };

package/src/useTableModel.mjs

@@ -0,0 +1,344 @@
+import { buildValidationChecker } from "@vuu-ui/vuu-data-react";
+import { applyFilterToColumns, applyGroupByToColumns, applyRuntimeColumnWidthsToConfig, applySortToColumns, applyWidthToColumns, assertAllColumnsAreIncludedInSubscription, checkConfirmationPending, existingSort, flattenColumnGroup, getCellRenderer, getColumnHeaderContentRenderer, getColumnHeaderLabelRenderer, getColumnLabel, getTableHeadings, getValueFormatter, hasValidationRules, isFilteredColumn, isGroupColumn, isNumericType, isPinned, logger, removeSort, replaceColumn, sortPinnedColumns, stripFilterFromColumns } from "@vuu-ui/vuu-utils";
+import { useReducer } from "react";
+const { info: info } = logger("useTableModel");
+const DEFAULT_COLUMN_WIDTH = 100;
+const columnWithoutDataType = ({ serverDataType })=>void 0 === serverDataType;
+const getDataType = (column, tableSchema)=>{
+    const schemaColumn = tableSchema?.columns.find(({ name })=>name === column.name);
+    if (schemaColumn) return schemaColumn.serverDataType;
+    return column.serverDataType;
+};
+const CheckboxColumnDescriptor = (selectionModel, width = 25)=>({
+        allowColumnHeaderMenu: false,
+        className: "checkbox-disabled" === selectionModel ? "vuuDisabled" : void 0,
+        label: "",
+        name: "",
+        width,
+        resizeable: false,
+        sortable: false,
+        isSystemColumn: true,
+        type: {
+            name: "checkbox",
+            renderer: {
+                name: "checkbox-row-selector-cell"
+            }
+        }
+    });
+const PinnedCheckboxColumnDescriptor = (selectionModel, width)=>({
+        ...CheckboxColumnDescriptor(selectionModel, width),
+        pin: "left"
+    });
+const getDefaultAlignment = (serverDataType)=>void 0 === serverDataType ? void 0 : isNumericType(serverDataType) ? "right" : "left";
+const tableModelReducer = (state, action)=>{
+    info?.(`TableModelReducer ${action.type}`);
+    switch(action.type){
+        case "init":
+            if ("manual" === state.tableConfig.columnLayout && "fit" === action.tableConfig.columnLayout) return init({
+                ...action,
+                tableConfig: applyRuntimeColumnWidthsToConfig(action.tableConfig, state.columns)
+            });
+            return init(action, state);
+        case "moveColumn":
+            return moveColumn(state, action);
+        case "resizeColumn":
+            return resizeColumn(state, action);
+        case "setTableSchema":
+            return setTableSchema(state, action);
+        case "hideColumns":
+            return hideColumns(state, action);
+        case "showColumns":
+            return showColumns(state, action);
+        case "updateColumnProp":
+            return updateColumnProp(state, action);
+        case "tableConfig":
+            return updateTableConfig(state, action);
+        default:
+            console.log(`unhandled action ${action.type}`);
+            return state;
+    }
+};
+const useTableModel = ({ config: tableConfigProp, dataSource, selectionModel, availableWidth })=>{
+    const [state, dispatchTableModelAction] = useReducer(tableModelReducer, {
+        availableWidth,
+        tableConfig: tableConfigProp,
+        dataSource,
+        selectionModel
+    }, init);
+    const { columns, headings, tableConfig, ...tableAttributes } = state;
+    return {
+        columns,
+        dispatchTableModelAction,
+        headings,
+        tableAttributes,
+        tableConfig
+    };
+};
+function init({ availableWidth, dataSource, selectionModel, tableConfig }, previousConfig) {
+    const { checkboxColumnWidth = 25, columns, ...tableAttributes } = tableConfig;
+    const { config: dataSourceConfig, tableSchema } = dataSource;
+    const toRuntimeColumnDescriptor = columnDescriptorToRuntimeColumDescriptor(tableAttributes, tableSchema);
+    const runtimeColumns = [];
+    let colIndex = selectionModel?.startsWith("checkbox") ? 2 : 1;
+    assertAllColumnsAreIncludedInSubscription(columns, dataSourceConfig.columns);
+    for (const column of columns){
+        runtimeColumns.push(toRuntimeColumnDescriptor(column, column.hidden ? -1 : colIndex));
+        if (!column.hidden) colIndex += 1;
+    }
+    if (selectionModel?.startsWith("checkbox")) {
+        const somePinnedLeft = runtimeColumns.some((col)=>"left" === col.pin);
+        runtimeColumns.splice(0, 0, toRuntimeColumnDescriptor(somePinnedLeft ? PinnedCheckboxColumnDescriptor(selectionModel, checkboxColumnWidth) : CheckboxColumnDescriptor(selectionModel, checkboxColumnWidth), 1));
+    }
+    const { columnLayout = "static", selectionBookendWidth = 4 } = tableConfig;
+    const runtimeColumnsWithLayout = applyWidthToColumns(runtimeColumns, {
+        availableWidth,
+        columnLayout
+    });
+    const columnsInRenderOrder = runtimeColumnsWithLayout.some(isPinned) ? sortPinnedColumns(runtimeColumnsWithLayout, selectionBookendWidth) : runtimeColumnsWithLayout;
+    let state = {
+        availableWidth,
+        columns: columnsInRenderOrder,
+        headings: getTableHeadings(columnsInRenderOrder),
+        tableConfig,
+        ...tableAttributes
+    };
+    if (dataSourceConfig) {
+        const { columns: _, ...rest } = dataSourceConfig;
+        state = updateTableConfig(state, {
+            type: "tableConfig",
+            ...rest,
+            confirmed: checkConfirmationPending(previousConfig)
+        });
+    }
+    return state;
+}
+const getLabel = (label, columnFormatHeader)=>{
+    if ("uppercase" === columnFormatHeader) return label.toUpperCase();
+    if ("capitalize" === columnFormatHeader) return label[0].toUpperCase() + label.slice(1).toLowerCase();
+    return label;
+};
+const columnDescriptorToRuntimeColumDescriptor = (tableAttributes, tableSchema)=>(column, ariaColIndex)=>{
+        const { columnDefaultWidth = DEFAULT_COLUMN_WIDTH, columnFormatHeader } = tableAttributes;
+        const serverDataType = getDataType(column, tableSchema);
+        const { align = getDefaultAlignment(serverDataType), name, label = getColumnLabel(column), source = "server", width = columnDefaultWidth, ...rest } = column;
+        const runtimeColumnWithDefaults = {
+            ...rest,
+            align,
+            ariaColIndex,
+            CellRenderer: getCellRenderer(column),
+            HeaderCellContentRenderer: getColumnHeaderContentRenderer(column),
+            HeaderCellLabelRenderer: getColumnHeaderLabelRenderer(column),
+            clientSideEditValidationCheck: hasValidationRules(column.type) ? buildValidationChecker(column.type.rules) : void 0,
+            label: getLabel(label, columnFormatHeader),
+            name,
+            originalIdx: ariaColIndex,
+            serverDataType,
+            source,
+            valueFormatter: getValueFormatter(column, serverDataType),
+            width
+        };
+        if (isGroupColumn(runtimeColumnWithDefaults)) runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map((col)=>columnDescriptorToRuntimeColumDescriptor(tableAttributes)(col, -1));
+        return runtimeColumnWithDefaults;
+    };
+function moveColumn(state, { column, moveBy }) {
+    const { columns } = state;
+    if ("number" == typeof moveBy) {
+        const idx = columns.indexOf(column);
+        const newColumns = columns.slice();
+        const [movedColumns] = newColumns.splice(idx, 1);
+        newColumns.splice(idx + moveBy, 0, movedColumns);
+        return {
+            ...state,
+            columns: newColumns
+        };
+    }
+    return state;
+}
+function hideColumns(state, { columns }) {
+    console.log(`[useTableModel] hideColumns ${JSON.stringify(columns)}`);
+    if (columns.some((col)=>true !== col.hidden)) return columns.reduce((s, c)=>{
+        if (true !== c.hidden) return updateColumnProp(s, {
+            type: "updateColumnProp",
+            column: c,
+            hidden: true
+        });
+        return s;
+    }, state);
+    return state;
+}
+function showColumns(state, { columns }) {
+    if (columns.some((col)=>col.hidden)) return columns.reduce((s, c)=>{
+        if (c.hidden) return updateColumnProp(s, {
+            type: "updateColumnProp",
+            column: c,
+            hidden: false
+        });
+        return s;
+    }, state);
+    return state;
+}
+function resizeColumn(state, { column, phase, width }) {
+    const type = "updateColumnProp";
+    const resizing = "end" !== phase;
+    switch(phase){
+        case "begin":
+            return updateColumnProp(state, {
+                type,
+                column,
+                resizing
+            });
+        case "end":
+            {
+                const { tableConfig } = state;
+                const isFit = "fit" === tableConfig.columnLayout;
+                let newState = isFit ? {
+                    ...state,
+                    tableConfig: applyRuntimeColumnWidthsToConfig(tableConfig, state.columns)
+                } : state;
+                if (column.pin && !column.pinnedWidth && width) newState = adjustPinOffsets(newState, column, width);
+                return updateColumnProp(newState, {
+                    type,
+                    column,
+                    resizing,
+                    width
+                });
+            }
+        case "resize":
+            return updateColumnProp(state, {
+                type,
+                column,
+                width
+            });
+        default:
+            throw Error(`useTableModel.resizeColumn, invalid resizePhase ${phase}`);
+    }
+}
+function setTableSchema(state, { tableSchema }) {
+    const { columns } = state;
+    if (!columns.some(columnWithoutDataType)) return state;
+    {
+        const cols = columns.map((column)=>{
+            const serverDataType = getDataType(column, tableSchema);
+            return {
+                ...column,
+                align: column.align ?? getDefaultAlignment(serverDataType),
+                serverDataType
+            };
+        });
+        return {
+            ...state,
+            columns: cols
+        };
+    }
+}
+function adjustPinOffsets(state, column, width) {
+    const newColumns = state.columns.slice();
+    if ("left" === column.pin) {
+        const diff = width - column.width;
+        const colIndex = newColumns.findIndex((col)=>col.name === column.name);
+        for(let i = colIndex + 1; i < newColumns.length; i++){
+            const pinnedColumn = newColumns.at(i);
+            if (pinnedColumn?.pin === "left" && "number" == typeof pinnedColumn?.pinnedOffset) {
+                newColumns[i] = {
+                    ...newColumns[i],
+                    pinnedOffset: pinnedColumn.pinnedOffset + diff
+                };
+                if (pinnedColumn.pinnedWidth) {
+                    newColumns[i] = {
+                        ...newColumns[i],
+                        pinnedWidth: pinnedColumn.pinnedWidth + diff
+                    };
+                    break;
+                }
+            } else throw Error("[useTableModel] adjustPinOffsets, invalid column pin, no endPin following pinned column");
+        }
+    } else if ("right" === column.pin) throw "whoaaargh";
+    else throw Error("[useTableModel] adjustPinOffsets, invalid param, column is not pinned ");
+    return {
+        ...state,
+        columns: newColumns
+    };
+}
+function updateColumnProp(state, action) {
+    let { columns, tableConfig } = state;
+    const { align, column, hidden, label, resizing, width } = action;
+    const targetColumn = columns.find((col)=>col.name === column.name);
+    if (targetColumn) {
+        if ("left" === align || "right" === align) columns = replaceColumn(columns, {
+            ...targetColumn,
+            align
+        });
+        if ("string" == typeof label) columns = replaceColumn(columns, {
+            ...targetColumn,
+            label
+        });
+        if ("boolean" == typeof resizing) columns = replaceColumn(columns, {
+            ...targetColumn,
+            resizing
+        });
+        if ("boolean" == typeof hidden) columns = replaceColumn(columns, {
+            ...targetColumn,
+            hidden
+        });
+        if ("number" == typeof width) {
+            columns = replaceColumn(columns, {
+                ...targetColumn,
+                width
+            });
+            const targetConfigColumn = tableConfig.columns.find((col)=>col.name === column.name);
+            if (targetConfigColumn) tableConfig = {
+                ...tableConfig,
+                columns: replaceColumn(tableConfig.columns, {
+                    ...targetConfigColumn,
+                    width
+                })
+            };
+        }
+    }
+    return {
+        ...state,
+        columns,
+        tableConfig
+    };
+}
+function updateTableConfig(state, { confirmed, filterSpec, groupBy, sort }) {
+    let result = state;
+    const { availableWidth, columnLayout = "static" } = state;
+    if (groupBy.length > 0) {
+        const groupedColumns = applyGroupByToColumns({
+            columns: result.columns,
+            groupBy,
+            confirmed,
+            availableWidth
+        });
+        const columns = applyWidthToColumns(groupedColumns, {
+            availableWidth,
+            columnLayout
+        });
+        result = {
+            ...state,
+            columns
+        };
+    } else if (result.columns.length > 0 && isGroupColumn(result.columns[0]) && confirmed) result = {
+        ...state,
+        columns: flattenColumnGroup(result.columns)
+    };
+    if (sort.sortDefs.length > 0) result = {
+        ...state,
+        columns: applySortToColumns(result.columns, sort)
+    };
+    else if (existingSort(result.columns)) result = {
+        ...state,
+        columns: removeSort(result.columns)
+    };
+    if (filterSpec.filter.length > 0) result = {
+        ...state,
+        columns: applyFilterToColumns(result.columns, filterSpec)
+    };
+    else if (result.columns.some(isFilteredColumn)) result = {
+        ...state,
+        columns: stripFilterFromColumns(result.columns)
+    };
+    return result;
+}
+export { useTableModel };