@vuu-ui/vuu-table 2.1.0-alpha.5 → 2.1.0-alpha.7

package/cjs/useTableViewport.js

@@ -94,7 +94,6 @@ const useTableViewport = ({
       const verticalScrollbarWidth = showPaginationControls ? 0 : pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;
       const appliedPageSize = count * rowHeight * (pixelContentHeight / virtualContentHeight);
       const viewportWidth = size.width;
-      console.log(`useTableViewport rowCount = ${rowCount}`);
       return {
         usesMeasuredHeaderHeight: headerHeight !== -1,
         appliedPageSize,

package/cjs/useTableViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableViewport.js","sources":["../../../packages/vuu-table/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  showPaginationControls?: boolean;\n  size: MeasuredSize;\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  usesMeasuredHeaderHeight: boolean;\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  usesMeasuredHeaderHeight: false,\n  verticalScrollbarWidth: 0,\n  viewportBodyHeight: 0,\n  viewportWidth: 0,\n};\n\nconst getViewportHeightProps = (\n  rowCount: number,\n  rowHeight: number,\n  size: MeasuredSize,\n  showPaginationControls = false,\n) => {\n  if (showPaginationControls) {\n    return {\n      pixelContentHeight: size.height,\n      virtualContentHeight: size.height,\n      virtualisedExtent: 0,\n    };\n  } else {\n    const virtualContentHeight = rowCount * rowHeight;\n    const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);\n    const virtualisedExtent = virtualContentHeight - pixelContentHeight;\n    return {\n      pixelContentHeight,\n      virtualContentHeight,\n      virtualisedExtent,\n    };\n  }\n};\n\nexport const useTableViewport = ({\n  columns,\n  headerHeight,\n  rowCount,\n  rowHeight,\n  selectionEndSize = 4,\n  showPaginationControls,\n  size,\n}: TableViewportHookProps): TableViewportHookResult => {\n  const inSituRowOffsetRef = useRef(0);\n  const pctScrollTopRef = useRef(0);\n\n  console.log(`useTableViewport rowHeight = ${rowHeight}`);\n\n  const { virtualContentHeight, pixelContentHeight, virtualisedExtent } =\n    getViewportHeightProps(rowCount, rowHeight, size, showPaginationControls);\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 = (dataRow) => {\n          return _getRowOffset(dataRow, 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 measuredHeaderHeight = headerHeight === -1 ? 0 : headerHeight;\n      const visibleRows = showPaginationControls\n        ? Math.floor((pixelContentHeight - headerHeight) / rowHeight)\n        : (size.height - headerHeight) / rowHeight;\n      const count = Number.isInteger(visibleRows)\n        ? visibleRows\n        : Math.ceil(visibleRows);\n      const viewportBodyHeight = size.height - measuredHeaderHeight;\n      const verticalScrollbarWidth = showPaginationControls\n        ? 0\n        : pixelContentHeight > viewportBodyHeight\n          ? scrollbarSize\n          : 0;\n\n      const appliedPageSize =\n        count * rowHeight * (pixelContentHeight / virtualContentHeight);\n\n      const viewportWidth = size.width;\n\n      console.log(`useTableViewport rowCount = ${rowCount}`);\n\n      return {\n        usesMeasuredHeaderHeight: headerHeight !== -1,\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    size,\n    pinnedWidthLeft,\n    unpinnedWidth,\n    pinnedWidthRight,\n    headerHeight,\n    rowHeight,\n    showPaginationControls,\n    pixelContentHeight,\n    virtualContentHeight,\n    getRowAtPosition,\n    getRowOffset,\n    isVirtualScroll,\n    setInSituRowOffset,\n    setScrollTop,\n  ]);\n};\n"],"names":["useRef","useMemo","measurePinnedColumns","getRowAtPosition","virtualRowPositioning","actualRowPositioning","useCallback"],"mappings":"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"}
+{"version":3,"file":"useTableViewport.js","sources":["../../../packages/vuu-table/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  showPaginationControls?: boolean;\n  size: MeasuredSize;\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  usesMeasuredHeaderHeight: boolean;\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  usesMeasuredHeaderHeight: false,\n  verticalScrollbarWidth: 0,\n  viewportBodyHeight: 0,\n  viewportWidth: 0,\n};\n\nconst getViewportHeightProps = (\n  rowCount: number,\n  rowHeight: number,\n  size: MeasuredSize,\n  showPaginationControls = false,\n) => {\n  if (showPaginationControls) {\n    return {\n      pixelContentHeight: size.height,\n      virtualContentHeight: size.height,\n      virtualisedExtent: 0,\n    };\n  } else {\n    const virtualContentHeight = rowCount * rowHeight;\n    const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);\n    const virtualisedExtent = virtualContentHeight - pixelContentHeight;\n    return {\n      pixelContentHeight,\n      virtualContentHeight,\n      virtualisedExtent,\n    };\n  }\n};\n\nexport const useTableViewport = ({\n  columns,\n  headerHeight,\n  rowCount,\n  rowHeight,\n  selectionEndSize = 4,\n  showPaginationControls,\n  size,\n}: TableViewportHookProps): TableViewportHookResult => {\n  const inSituRowOffsetRef = useRef(0);\n  const pctScrollTopRef = useRef(0);\n\n  console.log(`useTableViewport rowHeight = ${rowHeight}`);\n\n  const { virtualContentHeight, pixelContentHeight, virtualisedExtent } =\n    getViewportHeightProps(rowCount, rowHeight, size, showPaginationControls);\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 = (dataRow) => {\n          return _getRowOffset(dataRow, 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 measuredHeaderHeight = headerHeight === -1 ? 0 : headerHeight;\n      const visibleRows = showPaginationControls\n        ? Math.floor((pixelContentHeight - headerHeight) / rowHeight)\n        : (size.height - headerHeight) / rowHeight;\n      const count = Number.isInteger(visibleRows)\n        ? visibleRows\n        : Math.ceil(visibleRows);\n      const viewportBodyHeight = size.height - measuredHeaderHeight;\n      const verticalScrollbarWidth = showPaginationControls\n        ? 0\n        : pixelContentHeight > viewportBodyHeight\n          ? scrollbarSize\n          : 0;\n\n      const appliedPageSize =\n        count * rowHeight * (pixelContentHeight / virtualContentHeight);\n\n      const viewportWidth = size.width;\n\n      return {\n        usesMeasuredHeaderHeight: headerHeight !== -1,\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    size,\n    pinnedWidthLeft,\n    unpinnedWidth,\n    pinnedWidthRight,\n    headerHeight,\n    rowHeight,\n    showPaginationControls,\n    pixelContentHeight,\n    virtualContentHeight,\n    getRowAtPosition,\n    getRowOffset,\n    isVirtualScroll,\n    setInSituRowOffset,\n    setScrollTop,\n  ]);\n};\n"],"names":["useRef","useMemo","measurePinnedColumns","getRowAtPosition","virtualRowPositioning","actualRowPositioning","useCallback"],"mappings":"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"}

package/esm/useTableViewport.js

@@ -92,7 +92,6 @@ const useTableViewport = ({
       const verticalScrollbarWidth = showPaginationControls ? 0 : pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;
       const appliedPageSize = count * rowHeight * (pixelContentHeight / virtualContentHeight);
       const viewportWidth = size.width;
-      console.log(`useTableViewport rowCount = ${rowCount}`);
       return {
         usesMeasuredHeaderHeight: headerHeight !== -1,
         appliedPageSize,

package/esm/useTableViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableViewport.js","sources":["../../../packages/vuu-table/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  showPaginationControls?: boolean;\n  size: MeasuredSize;\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  usesMeasuredHeaderHeight: boolean;\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  usesMeasuredHeaderHeight: false,\n  verticalScrollbarWidth: 0,\n  viewportBodyHeight: 0,\n  viewportWidth: 0,\n};\n\nconst getViewportHeightProps = (\n  rowCount: number,\n  rowHeight: number,\n  size: MeasuredSize,\n  showPaginationControls = false,\n) => {\n  if (showPaginationControls) {\n    return {\n      pixelContentHeight: size.height,\n      virtualContentHeight: size.height,\n      virtualisedExtent: 0,\n    };\n  } else {\n    const virtualContentHeight = rowCount * rowHeight;\n    const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);\n    const virtualisedExtent = virtualContentHeight - pixelContentHeight;\n    return {\n      pixelContentHeight,\n      virtualContentHeight,\n      virtualisedExtent,\n    };\n  }\n};\n\nexport const useTableViewport = ({\n  columns,\n  headerHeight,\n  rowCount,\n  rowHeight,\n  selectionEndSize = 4,\n  showPaginationControls,\n  size,\n}: TableViewportHookProps): TableViewportHookResult => {\n  const inSituRowOffsetRef = useRef(0);\n  const pctScrollTopRef = useRef(0);\n\n  console.log(`useTableViewport rowHeight = ${rowHeight}`);\n\n  const { virtualContentHeight, pixelContentHeight, virtualisedExtent } =\n    getViewportHeightProps(rowCount, rowHeight, size, showPaginationControls);\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 = (dataRow) => {\n          return _getRowOffset(dataRow, 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 measuredHeaderHeight = headerHeight === -1 ? 0 : headerHeight;\n      const visibleRows = showPaginationControls\n        ? Math.floor((pixelContentHeight - headerHeight) / rowHeight)\n        : (size.height - headerHeight) / rowHeight;\n      const count = Number.isInteger(visibleRows)\n        ? visibleRows\n        : Math.ceil(visibleRows);\n      const viewportBodyHeight = size.height - measuredHeaderHeight;\n      const verticalScrollbarWidth = showPaginationControls\n        ? 0\n        : pixelContentHeight > viewportBodyHeight\n          ? scrollbarSize\n          : 0;\n\n      const appliedPageSize =\n        count * rowHeight * (pixelContentHeight / virtualContentHeight);\n\n      const viewportWidth = size.width;\n\n      console.log(`useTableViewport rowCount = ${rowCount}`);\n\n      return {\n        usesMeasuredHeaderHeight: headerHeight !== -1,\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    size,\n    pinnedWidthLeft,\n    unpinnedWidth,\n    pinnedWidthRight,\n    headerHeight,\n    rowHeight,\n    showPaginationControls,\n    pixelContentHeight,\n    virtualContentHeight,\n    getRowAtPosition,\n    getRowOffset,\n    isVirtualScroll,\n    setInSituRowOffset,\n    setScrollTop,\n  ]);\n};\n"],"names":["getRowAtPosition"],"mappings":"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"}
+{"version":3,"file":"useTableViewport.js","sources":["../../../packages/vuu-table/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  showPaginationControls?: boolean;\n  size: MeasuredSize;\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  usesMeasuredHeaderHeight: boolean;\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  usesMeasuredHeaderHeight: false,\n  verticalScrollbarWidth: 0,\n  viewportBodyHeight: 0,\n  viewportWidth: 0,\n};\n\nconst getViewportHeightProps = (\n  rowCount: number,\n  rowHeight: number,\n  size: MeasuredSize,\n  showPaginationControls = false,\n) => {\n  if (showPaginationControls) {\n    return {\n      pixelContentHeight: size.height,\n      virtualContentHeight: size.height,\n      virtualisedExtent: 0,\n    };\n  } else {\n    const virtualContentHeight = rowCount * rowHeight;\n    const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);\n    const virtualisedExtent = virtualContentHeight - pixelContentHeight;\n    return {\n      pixelContentHeight,\n      virtualContentHeight,\n      virtualisedExtent,\n    };\n  }\n};\n\nexport const useTableViewport = ({\n  columns,\n  headerHeight,\n  rowCount,\n  rowHeight,\n  selectionEndSize = 4,\n  showPaginationControls,\n  size,\n}: TableViewportHookProps): TableViewportHookResult => {\n  const inSituRowOffsetRef = useRef(0);\n  const pctScrollTopRef = useRef(0);\n\n  console.log(`useTableViewport rowHeight = ${rowHeight}`);\n\n  const { virtualContentHeight, pixelContentHeight, virtualisedExtent } =\n    getViewportHeightProps(rowCount, rowHeight, size, showPaginationControls);\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 = (dataRow) => {\n          return _getRowOffset(dataRow, 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 measuredHeaderHeight = headerHeight === -1 ? 0 : headerHeight;\n      const visibleRows = showPaginationControls\n        ? Math.floor((pixelContentHeight - headerHeight) / rowHeight)\n        : (size.height - headerHeight) / rowHeight;\n      const count = Number.isInteger(visibleRows)\n        ? visibleRows\n        : Math.ceil(visibleRows);\n      const viewportBodyHeight = size.height - measuredHeaderHeight;\n      const verticalScrollbarWidth = showPaginationControls\n        ? 0\n        : pixelContentHeight > viewportBodyHeight\n          ? scrollbarSize\n          : 0;\n\n      const appliedPageSize =\n        count * rowHeight * (pixelContentHeight / virtualContentHeight);\n\n      const viewportWidth = size.width;\n\n      return {\n        usesMeasuredHeaderHeight: headerHeight !== -1,\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    size,\n    pinnedWidthLeft,\n    unpinnedWidth,\n    pinnedWidthRight,\n    headerHeight,\n    rowHeight,\n    showPaginationControls,\n    pixelContentHeight,\n    virtualContentHeight,\n    getRowAtPosition,\n    getRowOffset,\n    isVirtualScroll,\n    setInSituRowOffset,\n    setScrollTop,\n  ]);\n};\n"],"names":["getRowAtPosition"],"mappings":"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"}

package/package.json

@@ -1,22 +1,22 @@
 {
-  "version": "2.1.0-alpha.5",
+  "version": "2.1.0-alpha.7",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "2.1.0-alpha.5",
-    "@vuu-ui/vuu-table-types": "2.1.0-alpha.5",
-    "@vuu-ui/vuu-protocol-types": "2.1.0-alpha.5"
+    "@vuu-ui/vuu-data-types": "2.1.0-alpha.7",
+    "@vuu-ui/vuu-table-types": "2.1.0-alpha.7",
+    "@vuu-ui/vuu-protocol-types": "2.1.0-alpha.7"
   },
   "dependencies": {
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "2.1.0-alpha.5",
-    "@vuu-ui/vuu-data-react": "2.1.0-alpha.5",
-    "@vuu-ui/vuu-popups": "2.1.0-alpha.5",
-    "@vuu-ui/vuu-table-extras": "2.1.0-alpha.5",
-    "@vuu-ui/vuu-ui-controls": "2.1.0-alpha.5",
-    "@vuu-ui/vuu-utils": "2.1.0-alpha.5"
+    "@vuu-ui/vuu-context-menu": "2.1.0-alpha.7",
+    "@vuu-ui/vuu-data-react": "2.1.0-alpha.7",
+    "@vuu-ui/vuu-popups": "2.1.0-alpha.7",
+    "@vuu-ui/vuu-table-extras": "2.1.0-alpha.7",
+    "@vuu-ui/vuu-ui-controls": "2.1.0-alpha.7",
+    "@vuu-ui/vuu-utils": "2.1.0-alpha.7"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",