@vuu-ui/vuu-table 0.13.6 → 0.13.8

package/cjs/useTable.js

@@ -1,714 +0,0 @@
-'use strict';
-
-var vuuTableExtras = require('@vuu-ui/vuu-table-extras');
-var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var react = require('react');
-var useCellBlockSelection = require('./cell-block/useCellBlockSelection.js');
-var CellFocusState = require('./CellFocusState.js');
-var tableConfig = require('./table-config.js');
-var tableDomUtils = require('./table-dom-utils.js');
-var useCellEditing = require('./useCellEditing.js');
-var useCellFocus = require('./useCellFocus.js');
-var useDataSource = require('./useDataSource.js');
-var useKeyboardNavigation = require('./useKeyboardNavigation.js');
-var useRowClassNameGenerators = require('./useRowClassNameGenerators.js');
-var useSelection = require('./useSelection.js');
-var useTableContextMenu = require('./useTableContextMenu.js');
-var useTableModel = require('./useTableModel.js');
-var useTableScroll = require('./useTableScroll.js');
-var useTableViewport = require('./useTableViewport.js');
-
-const nullHeaderState = {
-  height: -1,
-  count: -1
-};
-const zeroHeaderState = {
-  height: 0,
-  count: 0
-};
-const stripInternalProperties = (tableConfig) => {
-  return tableConfig;
-};
-const { KEY, IS_EXPANDED, IS_LEAF } = vuuUtils.metadataKeys;
-const NULL_DRAG_DROP = {
-  draggable: void 0,
-  onMouseDown: void 0
-};
-const useNullDragDrop = () => NULL_DRAG_DROP;
-const addColumn = (tableConfig, column) => ({
-  ...tableConfig,
-  columns: tableConfig.columns.concat(column)
-});
-const useTable = ({
-  allowCellBlockSelection,
-  allowDragDrop = false,
-  availableColumns,
-  config,
-  containerRef,
-  dataSource,
-  defaultSelectedIndexValues,
-  defaultSelectedKeyValues,
-  disableFocus,
-  highlightedIndex: highlightedIndexProp,
-  id,
-  navigationStyle = "cell",
-  onAvailableColumnsChange,
-  onConfigChange,
-  onDataEdited: onDataEditedProp,
-  onDragStart,
-  onDrop,
-  onHighlight,
-  onRowClick: onRowClickProp,
-  onSelect,
-  onSelectCellBlock,
-  onSelectionChange,
-  renderBufferSize = 0,
-  revealSelected,
-  rowHeight = 20,
-  rowToObject = vuuUtils.asDataSourceRowObject,
-  scrollingApiRef,
-  selectionBookendWidth = 4,
-  selectionModel,
-  showColumnHeaderMenus = true,
-  showColumnHeaders,
-  showPaginationControls,
-  size
-}) => {
-  const tableConfigRef = react.useRef(config);
-  const requestScrollRef = react.useRef(void 0);
-  react.useMemo(() => {
-    tableConfigRef.current = config;
-  }, [config]);
-  const initialState = react.useMemo(() => new CellFocusState.CellFocusState(), []);
-  const cellFocusStateRef = react.useRef(initialState);
-  const focusCellRef = react.useRef(void 0);
-  const [headerState, setHeaderState] = react.useState(
-    showColumnHeaders ? nullHeaderState : zeroHeaderState
-  );
-  const [rowCount, setRowCount] = react.useState(dataSource.size);
-  if (dataSource === void 0) {
-    throw Error("no data source provided to Vuu Table");
-  }
-  const onDataRowcountChange = react.useCallback((size2) => {
-    setRowCount(size2);
-  }, []);
-  const virtualContentHeight = rowHeight * rowCount;
-  const viewportBodyHeight = size.height - (headerState.height === -1 ? 0 : headerState.height);
-  const verticalScrollbarWidth = virtualContentHeight > viewportBodyHeight ? 10 : 0;
-  const availableWidth = size.width - (verticalScrollbarWidth + 2 * selectionBookendWidth);
-  const rowClassNameGenerator = useRowClassNameGenerators.useRowClassNameGenerators(config);
-  const useRowDragDrop = allowDragDrop ? vuuUiControls.useDragDrop : useNullDragDrop;
-  const {
-    columns,
-    dispatchTableModelAction,
-    headings,
-    tableAttributes,
-    tableConfig: tableConfig$1
-  } = useTableModel.useTableModel({ config, dataSource, selectionModel, availableWidth });
-  vuuUtils.useLayoutEffectSkipFirst(() => {
-    dispatchTableModelAction({
-      availableWidth,
-      type: "init",
-      tableConfig: tableConfigRef.current,
-      dataSource
-    });
-  }, [availableWidth, config, dataSource, dispatchTableModelAction]);
-  const applyTableConfigChange = react.useCallback(
-    (config2) => {
-      dispatchTableModelAction({
-        availableWidth,
-        type: "init",
-        tableConfig: config2,
-        dataSource
-      });
-      tableConfigRef.current = config2;
-      onConfigChange?.(stripInternalProperties(config2));
-    },
-    [availableWidth, dataSource, dispatchTableModelAction, onConfigChange]
-  );
-  const columnMap = react.useMemo(
-    () => vuuUtils.buildColumnMap(dataSource.columns),
-    [dataSource.columns]
-  );
-  const onSubscribed = react.useCallback(
-    ({ tableSchema }) => {
-      if (tableSchema) {
-        dispatchTableModelAction({
-          type: "setTableSchema",
-          tableSchema
-        });
-      } else {
-        console.log("subscription message with no schema");
-      }
-    },
-    [dispatchTableModelAction]
-  );
-  const {
-    getRowAtPosition,
-    getRowOffset,
-    setInSituRowOffset: viewportHookSetInSituRowOffset,
-    setScrollTop: viewportHookSetScrollTop,
-    ...viewportMeasurements
-  } = useTableViewport.useTableViewport({
-    columns,
-    headerHeight: headerState.height,
-    rowCount,
-    rowHeight,
-    selectionEndSize: selectionBookendWidth,
-    size,
-    showPaginationControls
-  });
-  const { data, dataRef, getSelectedRows, range, setRange } = useDataSource.useDataSource({
-    dataSource,
-    defaultSelectedIndexValues,
-    defaultSelectedKeyValues,
-    renderBufferSize,
-    revealSelected,
-    onSizeChange: onDataRowcountChange,
-    onSubscribed
-  });
-  const { requestScroll, ...scrollProps } = useTableScroll.useTableScroll({
-    cellFocusStateRef,
-    columns,
-    focusCell: focusCellRef.current,
-    getRowAtPosition,
-    rowHeight,
-    scrollingApiRef,
-    setRange,
-    showPaginationControls,
-    onVerticalScroll: viewportHookSetScrollTop,
-    onVerticalScrollInSitu: viewportHookSetInSituRowOffset,
-    viewportMeasurements
-  });
-  requestScrollRef.current = requestScroll;
-  const handleConfigEditedInSettingsPanel = react.useCallback(
-    (tableConfig2) => {
-      dispatchTableModelAction({
-        availableWidth,
-        dataSource,
-        tableConfig: tableConfig2,
-        type: "init"
-      });
-      tableConfigRef.current = tableConfig2;
-      onConfigChange?.(stripInternalProperties(tableConfig2));
-    },
-    [availableWidth, dataSource, dispatchTableModelAction, onConfigChange]
-  );
-  const handleDataSourceConfigChanged = react.useCallback(
-    (dataSourceConfig) => {
-      dataSource.config = {
-        ...dataSource.config,
-        ...dataSourceConfig
-      };
-    },
-    [dataSource]
-  );
-  const handleConfigChange = react.useCallback(
-    (config2, range2, confirmed, changes) => {
-      const scrollSensitiveChanges = changes?.filterChanged || changes?.groupByChanged;
-      if (scrollSensitiveChanges && range2.from > 0) {
-        requestScrollRef.current?.({
-          type: "scroll-end",
-          direction: "home"
-        });
-      }
-      dispatchTableModelAction({
-        type: "tableConfig",
-        ...config2,
-        confirmed
-      });
-    },
-    [dispatchTableModelAction]
-  );
-  react.useEffect(() => {
-    dataSource.on("config", handleConfigChange);
-    return () => {
-      dataSource.removeListener("config", handleConfigChange);
-    };
-  }, [dataSource, dispatchTableModelAction, handleConfigChange]);
-  const handleCreateCalculatedColumn = react.useCallback(
-    (column) => {
-      dataSource.columns = dataSource.columns.concat(column.name);
-      applyTableConfigChange(addColumn(tableConfig$1, column));
-    },
-    [dataSource, tableConfig$1, applyTableConfigChange]
-  );
-  const hideColumns = react.useCallback(
-    (action) => {
-      const { columns: columns2 } = action;
-      const hiddenColumns = columns2.map((c) => c.name);
-      const newTableConfig = {
-        ...tableConfig$1,
-        columns: tableConfig$1.columns.map(
-          (col) => hiddenColumns.includes(col.name) ? { ...col, hidden: true } : col
-        )
-      };
-      applyTableConfigChange(newTableConfig);
-    },
-    [tableConfig$1, applyTableConfigChange]
-  );
-  const pinColumn = react.useCallback(
-    (action) => {
-      applyTableConfigChange({
-        ...tableConfig$1,
-        columns: vuuUtils.updateColumn(tableConfig$1.columns, {
-          ...action.column,
-          pin: action.pin
-        })
-      });
-    },
-    [tableConfig$1, applyTableConfigChange]
-  );
-  const { showColumnSettingsPanel, showTableSettingsPanel } = vuuTableExtras.useTableAndColumnSettings({
-    availableColumns: availableColumns ?? tableConfig$1.columns.map(({ name, serverDataType = "string" }) => ({
-      name,
-      serverDataType
-    })),
-    onAvailableColumnsChange,
-    onConfigChange: handleConfigEditedInSettingsPanel,
-    onCreateCalculatedColumn: handleCreateCalculatedColumn,
-    onDataSourceConfigChange: handleDataSourceConfigChanged,
-    settingsPermissions: {
-      allowColumnSettings: vuuTableExtras.columnSettingsFromColumnMenuPermissions(
-        showColumnHeaderMenus
-      ),
-      allowTableSettings: vuuTableExtras.tableSettingsFromColumnMenuPermissions(
-        showColumnHeaderMenus
-      )
-    },
-    tableConfig: tableConfig$1
-  });
-  const handleColumnDisplayAction = react.useCallback(
-    (action) => {
-      const { type } = action;
-      switch (type) {
-        case "hideColumn":
-          return hideColumns({
-            type: "hideColumns",
-            columns: [action.column]
-          });
-        case "pinColumn":
-          return pinColumn(action);
-        default:
-          vuuUtils.logUnhandledMessage(type, "[vuu-table] handleColumnDisplayAction");
-      }
-    },
-    [hideColumns, pinColumn]
-  );
-  const handleDisplaySettingsAction = react.useCallback(
-    (action) => {
-      if (action.type === "column-settings") {
-        showColumnSettingsPanel(action);
-      } else {
-        showTableSettingsPanel();
-      }
-    },
-    [showColumnSettingsPanel, showTableSettingsPanel]
-  );
-  const handleColumnAction = vuuTableExtras.useColumnActions({
-    dataSource,
-    onColumnDisplayAction: handleColumnDisplayAction,
-    onDisplaySettingsAction: handleDisplaySettingsAction
-  });
-  const handleSort = react.useCallback(
-    (column, extendSort = false, sortType) => {
-      if (dataSource) {
-        dataSource.sort = vuuUtils.toggleOrApplySort(
-          dataSource.sort,
-          column,
-          extendSort,
-          sortType
-        );
-      }
-    },
-    [dataSource]
-  );
-  const resizeCells = react.useRef(void 0);
-  const onResizeColumn = react.useCallback(
-    (phase, columnName, width) => {
-      const column = columns.find((column2) => column2.name === columnName);
-      if (column) {
-        if (phase === "resize") {
-          resizeCells.current?.forEach((cell) => {
-            cell.style.width = `${width}px`;
-          });
-        } else if (phase === "end") {
-          resizeCells.current = void 0;
-          if (vuuUtils.isValidNumber(width)) {
-            dispatchTableModelAction({
-              type: "resizeColumn",
-              phase,
-              column,
-              width
-            });
-            onConfigChange?.(
-              stripInternalProperties(
-                tableConfig.updateTableConfig(tableConfig$1, {
-                  type: "col-size",
-                  column,
-                  columns,
-                  width
-                })
-              )
-            );
-          }
-        } else {
-          const byColIndex = `[aria-colindex='${column.ariaColIndex}']`;
-          resizeCells.current = Array.from(
-            containerRef.current?.querySelectorAll(
-              `.vuuTableCell${byColIndex},.vuuTableHeaderCell${byColIndex}`
-            ) ?? []
-          );
-          dispatchTableModelAction({
-            type: "resizeColumn",
-            phase,
-            column,
-            width
-          });
-        }
-      } else {
-        throw Error(
-          `useDataTable.handleColumnResize, column ${columnName} not found`
-        );
-      }
-    },
-    [
-      columns,
-      dispatchTableModelAction,
-      onConfigChange,
-      tableConfig$1,
-      containerRef
-    ]
-  );
-  const onToggleGroup = react.useCallback(
-    (row, column) => {
-      const isJson = vuuUtils.isJsonGroup(column, row, columnMap);
-      const key = row[KEY];
-      if (row[IS_EXPANDED]) {
-        dataSource.closeTreeNode(key, true);
-        if (isJson) {
-          const idx = columns.indexOf(column);
-          const rows = dataSource.getRowsAtDepth?.(idx + 1);
-          if (rows && !rows.some((row2) => row2[IS_EXPANDED] || row2[IS_LEAF])) {
-            dispatchTableModelAction({
-              type: "hideColumns",
-              columns: columns.slice(idx + 2)
-            });
-          }
-        }
-      } else {
-        dataSource.openTreeNode(key);
-        if (isJson) {
-          const childRows = dataSource.getChildRows?.(key);
-          const idx = columns.indexOf(column) + 1;
-          const columnsToShow = [columns[idx]];
-          if (childRows && childRows.some((row2) => row2[IS_LEAF])) {
-            columnsToShow.push(columns[idx + 1]);
-          }
-          if (columnsToShow.some((col) => col.hidden)) {
-            dispatchTableModelAction({
-              type: "showColumns",
-              columns: columnsToShow
-            });
-          }
-        }
-      }
-    },
-    [columnMap, columns, dataSource, dispatchTableModelAction]
-  );
-  const handleToggleGroup = react.useCallback(
-    (treeNodeOperation, rowIdx) => {
-      if (treeNodeOperation === "expand") {
-        dataSource.openTreeNode(rowIdx);
-      } else {
-        dataSource.closeTreeNode(rowIdx);
-      }
-    },
-    [dataSource]
-  );
-  const {
-    focusCell,
-    focusCellPlaceholderKeyDown,
-    focusCellPlaceholderRef,
-    setTableBodyRef: tableBodyRef
-  } = useCellFocus.useCellFocus({
-    cellFocusStateRef,
-    containerRef,
-    disableFocus,
-    requestScroll
-  });
-  focusCellRef.current = focusCell;
-  const columnCount = columns.filter((c) => c.hidden !== true).length;
-  const {
-    highlightedIndexRef,
-    navigateCell: navigate,
-    onFocus: navigationFocus,
-    onKeyDown: navigationKeyDown,
-    ...containerProps
-  } = useKeyboardNavigation.useKeyboardNavigation({
-    cellFocusStateRef,
-    columnCount,
-    containerRef,
-    disableFocus,
-    focusCell,
-    headerCount: headerState.count,
-    highlightedIndex: highlightedIndexProp,
-    navigationStyle,
-    requestScroll,
-    rowCount,
-    onHighlight,
-    onToggleGroup: handleToggleGroup,
-    viewportRange: range,
-    viewportRowCount: viewportMeasurements.rowCount
-  });
-  const {
-    onBlur: editingBlur,
-    onDoubleClick: editingDoubleClick,
-    onKeyDown: editingKeyDown,
-    onFocus: editingFocus
-  } = useCellEditing.useCellEditing({
-    navigate
-  });
-  const handleFocus = react.useCallback(
-    (e) => {
-      navigationFocus();
-      if (!e.defaultPrevented) {
-        editingFocus(e);
-      }
-    },
-    [editingFocus, navigationFocus]
-  );
-  const onContextMenu = useTableContextMenu.useTableContextMenu({
-    columns,
-    data,
-    dataSource,
-    getSelectedRows,
-    headerCount: headerState.count
-  });
-  const onMoveGroupColumn = react.useCallback(
-    (columns2) => {
-      dataSource.groupBy = columns2.map((col) => col.name);
-    },
-    [dataSource]
-  );
-  const onRemoveGroupColumn = react.useCallback(
-    (column) => {
-      if (vuuUtils.isGroupColumn(column)) {
-        dataSource.groupBy = [];
-      } else {
-        if (dataSource && dataSource.groupBy?.includes(column.name)) {
-          dataSource.groupBy = dataSource.groupBy.filter(
-            (columnName) => columnName !== column.name
-          );
-        }
-      }
-    },
-    [dataSource]
-  );
-  const handleSelectionChange = react.useCallback(
-    (selected) => {
-      dataSource.select(selected);
-      onSelectionChange?.(selected);
-    },
-    [dataSource, onSelectionChange]
-  );
-  const handleSelect = react.useCallback(
-    (row) => {
-      if (onSelect) {
-        onSelect(row === null ? null : rowToObject(row, columnMap));
-      }
-    },
-    [columnMap, onSelect, rowToObject]
-  );
-  const {
-    onKeyDown: selectionHookKeyDown,
-    onRowClick: selectionHookOnRowClick
-  } = useSelection.useSelection({
-    containerRef,
-    defaultSelectedIndexValues,
-    highlightedIndexRef,
-    onSelect: handleSelect,
-    onSelectionChange: handleSelectionChange,
-    selectionModel
-  });
-  const handleSelectCellBlock = react.useCallback(
-    (cellBlock2) => {
-      handleSelectionChange([]);
-      onSelectCellBlock?.(cellBlock2);
-    },
-    [handleSelectionChange, onSelectCellBlock]
-  );
-  const {
-    onMouseDown: cellBlockHookMouseDown,
-    cellBlock,
-    onKeyDown: cellBlockSelectionKeyDown
-  } = useCellBlockSelection.useCellBlockSelection({
-    allowCellBlockSelection,
-    columnCount,
-    containerRef,
-    onSelectCellBlock: handleSelectCellBlock,
-    rowCount
-  });
-  const handleRowClick = react.useCallback(
-    (evt, row, rangeSelect, keepExistingSelection) => {
-      selectionHookOnRowClick(evt, row, rangeSelect, keepExistingSelection);
-      onRowClickProp?.(evt, rowToObject(row, columnMap));
-    },
-    [columnMap, onRowClickProp, rowToObject, selectionHookOnRowClick]
-  );
-  const handleKeyDown = react.useCallback(
-    (e) => {
-      cellBlockSelectionKeyDown?.(e);
-      if (!e.defaultPrevented) {
-        navigationKeyDown(e);
-      }
-      if (!e.defaultPrevented) {
-        editingKeyDown(e);
-      }
-      if (!e.defaultPrevented) {
-        selectionHookKeyDown(e);
-      }
-    },
-    [
-      cellBlockSelectionKeyDown,
-      navigationKeyDown,
-      editingKeyDown,
-      selectionHookKeyDown
-    ]
-  );
-  const onMoveColumn = react.useCallback(
-    (columns2) => {
-      const newTableConfig = {
-        ...tableConfig$1,
-        columns: columns2
-      };
-      tableConfigRef.current = newTableConfig;
-      console.log(`useTable [onMoveColumn]`);
-      dispatchTableModelAction({
-        availableWidth,
-        type: "init",
-        tableConfig: newTableConfig,
-        dataSource
-      });
-      onConfigChange?.(stripInternalProperties(newTableConfig));
-    },
-    [
-      availableWidth,
-      dataSource,
-      dispatchTableModelAction,
-      onConfigChange,
-      tableConfig$1
-    ]
-  );
-  const handleDropRow = react.useCallback(
-    // TODO - this should be GlobalDropHandler
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (dragDropState) => {
-      onDrop?.(dragDropState);
-    },
-    [onDrop]
-  );
-  const handleDataEdited = react.useCallback(
-    async (editState) => {
-      const {
-        editType = "commit",
-        isValid = true,
-        row,
-        columnName,
-        value
-      } = editState;
-      let result = void 0;
-      if (editType === "commit" && isValid) {
-        result = await dataSource.applyEdit(
-          row[KEY],
-          columnName,
-          value
-        );
-        onDataEditedProp?.({ ...editState, isValid: result === true });
-        return result;
-      } else {
-        onDataEditedProp?.(editState);
-      }
-    },
-    [dataSource, onDataEditedProp]
-  );
-  const handleDragStartRow = react.useCallback(
-    (dragDropState) => {
-      const { initialDragElement } = dragDropState;
-      const rowIndex = tableDomUtils.getAriaRowIndex(initialDragElement) - headerState.count - 1;
-      const row = dataRef.current.find((row2) => row2[0] === rowIndex);
-      if (row) {
-        dragDropState.setPayload(row);
-      }
-      onDragStart?.(dragDropState);
-    },
-    [dataRef, headerState.count, onDragStart]
-  );
-  const onHeaderHeightMeasured = react.useCallback(
-    (height, count) => {
-      setHeaderState({ height, count });
-    },
-    []
-  );
-  const { onMouseDown: rowDragMouseDown, draggable: draggableRow } = useRowDragDrop({
-    allowDragDrop,
-    containerRef,
-    draggableClassName: `vuuTable`,
-    id,
-    onDragStart: handleDragStartRow,
-    onDrop: handleDropRow,
-    orientation: "vertical",
-    itemQuery: ".vuuTableRow"
-  });
-  const handleMouseDown = react.useCallback(
-    (evt) => {
-      rowDragMouseDown?.(evt);
-      if (!evt.isPropagationStopped()) {
-        cellBlockHookMouseDown?.(evt);
-      }
-    },
-    [rowDragMouseDown, cellBlockHookMouseDown]
-  );
-  return {
-    ...containerProps,
-    "aria-rowcount": dataSource.size,
-    cellBlock,
-    columnMap,
-    columns,
-    data,
-    draggableRow,
-    focusCellPlaceholderKeyDown,
-    focusCellPlaceholderRef,
-    getRowOffset,
-    handleColumnAction,
-    headerState,
-    headings,
-    highlightedIndex: highlightedIndexRef.current,
-    onBlur: editingBlur,
-    onDoubleClick: editingDoubleClick,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    onMouseDown: handleMouseDown,
-    onContextMenu,
-    onDataEdited: handleDataEdited,
-    onHeaderHeightMeasured,
-    onMoveColumn,
-    onMoveGroupColumn,
-    onRemoveGroupColumn,
-    onRowClick: handleRowClick,
-    onSortColumn: handleSort,
-    onResizeColumn,
-    onToggleGroup,
-    rowClassNameGenerator,
-    scrollProps,
-    // TODO don't think we need these ...
-    tableAttributes,
-    tableBodyRef,
-    tableConfig: tableConfig$1,
-    viewportMeasurements
-  };
-};
-
-exports.useTable = useTable;
-//# sourceMappingURL=useTable.js.map