@vuu-ui/vuu-table 0.8.94 → 0.8.96
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/Row.css.js +1 -1
- package/cjs/Row.js +1 -1
- package/cjs/Row.js.map +1 -1
- package/cjs/Table.css.js +1 -1
- package/cjs/Table.js +113 -31
- package/cjs/Table.js.map +1 -1
- package/cjs/cell-block/CellBlock.css.js +6 -0
- package/cjs/cell-block/CellBlock.css.js.map +1 -0
- package/cjs/cell-block/CellBlock.js +41 -0
- package/cjs/cell-block/CellBlock.js.map +1 -0
- package/cjs/cell-block/cellblock-utils.js +140 -0
- package/cjs/cell-block/cellblock-utils.js.map +1 -0
- package/cjs/cell-block/useCellBlockSelection.js +232 -0
- package/cjs/cell-block/useCellBlockSelection.js.map +1 -0
- package/cjs/index.js +5 -0
- package/cjs/index.js.map +1 -1
- package/cjs/moving-window.js +21 -9
- package/cjs/moving-window.js.map +1 -1
- package/cjs/pagination/PaginationControl.css.js +6 -0
- package/cjs/pagination/PaginationControl.css.js.map +1 -0
- package/cjs/pagination/PaginationControl.js +38 -0
- package/cjs/pagination/PaginationControl.js.map +1 -0
- package/cjs/pagination/usePagination.js +38 -0
- package/cjs/pagination/usePagination.js.map +1 -0
- package/cjs/table-dom-utils.js +67 -10
- package/cjs/table-dom-utils.js.map +1 -1
- package/cjs/table-header/useTableHeader.js +1 -1
- package/cjs/table-header/useTableHeader.js.map +1 -1
- package/cjs/useCellFocus.js +56 -0
- package/cjs/useCellFocus.js.map +1 -0
- package/cjs/useControlledTableNavigation.js +3 -1
- package/cjs/useControlledTableNavigation.js.map +1 -1
- package/cjs/useDataSource.js +13 -0
- package/cjs/useDataSource.js.map +1 -1
- package/cjs/useKeyboardNavigation.js +8 -82
- package/cjs/useKeyboardNavigation.js.map +1 -1
- package/cjs/useMeasuredHeight.js +5 -5
- package/cjs/useMeasuredHeight.js.map +1 -1
- package/cjs/useTable.js +63 -16
- package/cjs/useTable.js.map +1 -1
- package/cjs/useTableContextMenu.js +2 -1
- package/cjs/useTableContextMenu.js.map +1 -1
- package/cjs/useTableScroll.js.map +1 -1
- package/cjs/useTableViewport.js +31 -13
- package/cjs/useTableViewport.js.map +1 -1
- package/esm/Row.css.js +1 -1
- package/esm/Row.js +1 -1
- package/esm/Row.js.map +1 -1
- package/esm/Table.css.js +1 -1
- package/esm/Table.js +115 -33
- package/esm/Table.js.map +1 -1
- package/esm/cell-block/CellBlock.css.js +4 -0
- package/esm/cell-block/CellBlock.css.js.map +1 -0
- package/esm/cell-block/CellBlock.js +39 -0
- package/esm/cell-block/CellBlock.js.map +1 -0
- package/esm/cell-block/cellblock-utils.js +131 -0
- package/esm/cell-block/cellblock-utils.js.map +1 -0
- package/esm/cell-block/useCellBlockSelection.js +230 -0
- package/esm/cell-block/useCellBlockSelection.js.map +1 -0
- package/esm/index.js +2 -1
- package/esm/index.js.map +1 -1
- package/esm/moving-window.js +21 -9
- package/esm/moving-window.js.map +1 -1
- package/esm/pagination/PaginationControl.css.js +4 -0
- package/esm/pagination/PaginationControl.css.js.map +1 -0
- package/esm/pagination/PaginationControl.js +36 -0
- package/esm/pagination/PaginationControl.js.map +1 -0
- package/esm/pagination/usePagination.js +36 -0
- package/esm/pagination/usePagination.js.map +1 -0
- package/esm/table-dom-utils.js +64 -10
- package/esm/table-dom-utils.js.map +1 -1
- package/esm/table-header/useTableHeader.js +1 -1
- package/esm/table-header/useTableHeader.js.map +1 -1
- package/esm/useCellFocus.js +54 -0
- package/esm/useCellFocus.js.map +1 -0
- package/esm/useControlledTableNavigation.js +3 -2
- package/esm/useControlledTableNavigation.js.map +1 -1
- package/esm/useDataSource.js +13 -0
- package/esm/useDataSource.js.map +1 -1
- package/esm/useKeyboardNavigation.js +8 -82
- package/esm/useKeyboardNavigation.js.map +1 -1
- package/esm/useMeasuredHeight.js +5 -5
- package/esm/useMeasuredHeight.js.map +1 -1
- package/esm/useTable.js +63 -16
- package/esm/useTable.js.map +1 -1
- package/esm/useTableContextMenu.js +2 -1
- package/esm/useTableContextMenu.js.map +1 -1
- package/esm/useTableScroll.js.map +1 -1
- package/esm/useTableViewport.js +31 -13
- package/esm/useTableViewport.js.map +1 -1
- package/package.json +9 -9
- package/types/Table.d.ts +40 -0
- package/types/cell-block/CellBlock.d.ts +6 -0
- package/types/cell-block/cellblock-utils.d.ts +37 -0
- package/types/cell-block/useCellBlockSelection.d.ts +16 -0
- package/types/index.d.ts +1 -0
- package/types/moving-window.d.ts +3 -1
- package/types/pagination/PaginationControl.d.ts +6 -0
- package/types/pagination/index.d.ts +1 -0
- package/types/pagination/usePagination.d.ts +9 -0
- package/types/table-dom-utils.d.ts +6 -1
- package/types/useCellFocus.d.ts +13 -0
- package/types/useControlledTableNavigation.d.ts +1 -0
- package/types/useKeyboardNavigation.d.ts +5 -5
- package/types/useMeasuredHeight.d.ts +2 -2
- package/types/useTable.d.ts +13 -11
- package/types/useTableScroll.d.ts +1 -0
- package/types/useTableViewport.d.ts +3 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableScroll.js","sources":["../src/useTableScroll.ts"],"sourcesContent":["import {\n getColumnsInViewport,\n getRowElementAtIndex,\n itemsChanged,\n RowAtPositionFunc,\n} from \"@vuu-ui/vuu-utils\";\nimport type { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ForwardedRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type { ViewportMeasurements } from \"./useTableViewport\";\nimport { howFarIsRowOutsideViewport } from \"./table-dom-utils\";\nimport type { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport type ScrollDirectionVertical = \"up\" | \"down\";\nexport type ScrollDirectionHorizontal = \"left\" | \"right\";\nexport type ScrollDirection =\n | ScrollDirectionVertical\n | ScrollDirectionHorizontal;\n\n/**\n * scroll into view the row at given index posiiton.\n */\nexport interface ScrollRequestRow {\n rowIndex: number;\n type: \"scroll-row\";\n}\nexport interface ScrollRequestEnd {\n type: \"scroll-end\";\n direction: \"home\" | \"end\";\n}\n\nexport interface ScrollRequestPage {\n type: \"scroll-page\";\n direction: ScrollDirectionVertical;\n}\n\nexport type ScrollRequest =\n | ScrollRequestPage\n | ScrollRequestEnd\n | ScrollRequestRow;\n\nexport type ScrollRequestHandler = (request: ScrollRequest) => void;\n\nexport interface ScrollingAPI {\n scrollToIndex: (itemIndex: number) => void;\n scrollToKey: (rowKey: string) => void;\n}\n\n/** How far we allow horizontal scroll movement before we recheck the rendered columns */\nconst SCROLL_MOVE_CHECK_THRESHOLD = 100;\n\n/** The buffer size in pixels that we allow for rendering columns just outside the viewport */\nconst HORIZONTAL_SCROLL_BUFFER = 200;\n\n/**\n * Return the maximum scroll positions for gioven container\n * @param container\n * @returns [maxScrollLeft, maxScrollTop]\n */\nconst getMaxScroll = (container: HTMLElement) => {\n const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;\n return [scrollWidth - clientWidth, scrollHeight - clientHeight];\n};\n\nconst getScrollDirection = (\n prevScrollPositions: ScrollPos | undefined,\n scrollPos: number,\n) => {\n if (prevScrollPositions === undefined) {\n return undefined;\n } else {\n const { scrollTop: prevTop } = prevScrollPositions;\n return scrollPos > prevTop ? \"fwd\" : \"bwd\";\n }\n};\n\nconst getPctScroll = (container: HTMLElement, currentScrollPos?: ScrollPos) => {\n const {\n clientHeight,\n clientWidth,\n scrollHeight,\n scrollLeft,\n scrollTop,\n scrollWidth,\n } = container;\n\n const maxScrollLeft = scrollWidth - clientWidth;\n const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);\n const maxScrollTop = scrollHeight - clientHeight;\n let pctScrollTop = scrollTop / (scrollHeight - clientHeight);\n\n const scrollDirection = getScrollDirection(currentScrollPos, scrollTop);\n\n if (scrollDirection === \"fwd\" && pctScrollTop > 0.99) {\n pctScrollTop = 1;\n } else if (scrollDirection === \"bwd\" && pctScrollTop < 0.02) {\n pctScrollTop = 0;\n }\n\n return [\n scrollLeft,\n pctScrollLeft,\n maxScrollLeft,\n scrollTop,\n pctScrollTop,\n maxScrollTop,\n ];\n};\n\nexport const noScrolling: ScrollingAPI = {\n scrollToIndex: () => undefined,\n scrollToKey: () => undefined,\n};\n\ninterface CallbackRefHookProps<T = HTMLElement> {\n onAttach?: (el: T) => void;\n onDetach: (el: T) => void;\n label?: string;\n}\n\nconst useCallbackRef = <T = HTMLElement>({\n onAttach,\n onDetach,\n}: CallbackRefHookProps<T>) => {\n const ref = useRef<T | null>(null);\n const callbackRef = useCallback(\n (el: T | null) => {\n if (el) {\n ref.current = el;\n onAttach?.(el);\n } else if (ref.current) {\n const { current: originalRef } = ref;\n ref.current = el;\n onDetach?.(originalRef);\n }\n },\n [onAttach, onDetach],\n );\n return callbackRef;\n};\n\ntype ScrollPos = {\n scrollLeft: number;\n scrollTop: number;\n};\n\nexport interface TableScrollHookProps {\n columns: RuntimeColumnDescriptor[];\n getRowAtPosition: RowAtPositionFunc;\n onHorizontalScroll?: (scrollLeft: number) => void;\n onVerticalScroll?: (scrollTop: number, pctScrollTop: number) => void;\n /**\n * When we have a virtualized scroll container, keyboard navigation is\n * performed `in situ`. We shift the range of rows rendered within the\n * viewport, whithout actually moving the scroll position\n */\n onVerticalScrollInSitu?: (rowIndexOffsetCount: number) => void;\n rowHeight: number;\n scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n setRange: (range: VuuRange) => void;\n viewportMeasurements: ViewportMeasurements;\n}\n\nexport const useTableScroll = ({\n columns,\n getRowAtPosition,\n onHorizontalScroll,\n onVerticalScroll,\n onVerticalScrollInSitu,\n rowHeight,\n scrollingApiRef,\n setRange,\n viewportMeasurements,\n}: TableScrollHookProps) => {\n const firstRowRef = useRef<number>(0);\n const rowHeightRef = useRef(rowHeight);\n const contentContainerScrolledRef = useRef(false);\n const contentContainerPosRef = useRef<ScrollPos>({\n scrollTop: 0,\n scrollLeft: 0,\n });\n const scrollbarContainerScrolledRef = useRef(false);\n const scrollbarContainerPosRef = useRef<ScrollPos>({\n scrollTop: 0,\n scrollLeft: 0,\n });\n const scrollbarContainerRef = useRef<HTMLDivElement | null>(null);\n const contentContainerRef = useRef<HTMLDivElement | null>(null);\n const lastHorizontalScrollCheckPoint = useRef(0);\n\n const {\n appliedPageSize,\n isVirtualScroll,\n rowCount: viewportRowCount,\n totalHeaderHeight,\n usesMeasuredHeaderHeight,\n viewportWidth,\n } = viewportMeasurements;\n\n const columnsWithinViewportRef = useRef<RuntimeColumnDescriptor[]>([]);\n const [, forceRefresh] = useState({});\n\n const preSpanRef = useRef(0);\n\n useMemo(() => {\n const [visibleColumns, offset] = getColumnsInViewport(\n columns,\n contentContainerPosRef.current.scrollLeft,\n contentContainerPosRef.current.scrollLeft +\n viewportWidth +\n HORIZONTAL_SCROLL_BUFFER,\n );\n preSpanRef.current = offset;\n columnsWithinViewportRef.current = visibleColumns;\n }, [viewportWidth, columns]);\n\n const handleHorizontalScroll = useCallback(\n (scrollLeft: number) => {\n contentContainerPosRef.current.scrollLeft = scrollLeft;\n onHorizontalScroll?.(scrollLeft);\n\n if (\n Math.abs(scrollLeft - lastHorizontalScrollCheckPoint.current) >\n SCROLL_MOVE_CHECK_THRESHOLD\n ) {\n lastHorizontalScrollCheckPoint.current = scrollLeft;\n\n const [visibleColumns, pre] = getColumnsInViewport(\n columns,\n scrollLeft,\n scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER,\n );\n\n if (itemsChanged(columnsWithinViewportRef.current, visibleColumns)) {\n preSpanRef.current = pre;\n columnsWithinViewportRef.current = visibleColumns;\n forceRefresh({});\n }\n }\n },\n [columns, onHorizontalScroll, viewportWidth],\n );\n const handleVerticalScroll = useCallback(\n (scrollTop: number, pctScrollTop: number) => {\n contentContainerPosRef.current.scrollTop = scrollTop;\n\n onVerticalScroll?.(scrollTop, pctScrollTop);\n const firstRow = getRowAtPosition(scrollTop);\n if (firstRow !== firstRowRef.current) {\n firstRowRef.current = firstRow;\n setRange({ from: firstRow, to: firstRow + viewportRowCount });\n }\n onVerticalScrollInSitu?.(0);\n },\n [\n getRowAtPosition,\n onVerticalScroll,\n onVerticalScrollInSitu,\n setRange,\n viewportRowCount,\n ],\n );\n\n const handleScrollbarContainerScroll = useCallback(() => {\n const { current: contentContainer } = contentContainerRef;\n const { current: scrollbarContainer } = scrollbarContainerRef;\n const { current: contentContainerScrolled } = contentContainerScrolledRef;\n const { current: scrollPos } = scrollbarContainerPosRef;\n\n if (contentContainerScrolled) {\n contentContainerScrolledRef.current = false;\n } else if (contentContainer && scrollbarContainer) {\n scrollbarContainerScrolledRef.current = true;\n const [scrollLeft, pctScrollLeft, , scrollTop, pctScrollTop] =\n getPctScroll(scrollbarContainer, scrollPos);\n\n scrollPos.scrollLeft = scrollLeft;\n scrollPos.scrollTop = scrollTop;\n\n const [maxScrollLeft, maxScrollTop] = getMaxScroll(scrollbarContainer);\n const contentScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);\n const contentScrollTop = pctScrollTop * maxScrollTop;\n\n contentContainer.scrollTo({\n left: contentScrollLeft,\n top: contentScrollTop,\n behavior: \"auto\",\n });\n }\n onVerticalScrollInSitu?.(0);\n }, [onVerticalScrollInSitu]);\n\n const handleContentContainerScroll = useCallback(() => {\n const { current: scrollbarContainerScrolled } =\n scrollbarContainerScrolledRef;\n const { current: contentContainer } = contentContainerRef;\n const { current: scrollbarContainer } = scrollbarContainerRef;\n const { current: scrollPos } = contentContainerPosRef;\n\n if (contentContainer && scrollbarContainer) {\n const [\n scrollLeft,\n pctScrollLeft,\n maxScrollLeft,\n scrollTop,\n pctScrollTop,\n maxScrollTop,\n ] = getPctScroll(contentContainer);\n\n contentContainerScrolledRef.current = true;\n\n if (scrollbarContainerScrolled) {\n scrollbarContainerScrolledRef.current = false;\n } else {\n scrollbarContainer.scrollLeft = Math.round(\n pctScrollLeft * maxScrollLeft,\n );\n scrollbarContainer.scrollTop = pctScrollTop * maxScrollTop;\n }\n\n if (scrollPos.scrollTop !== scrollTop) {\n handleVerticalScroll(scrollTop, pctScrollTop);\n }\n if (scrollPos.scrollLeft !== scrollLeft) {\n handleHorizontalScroll(scrollLeft);\n }\n }\n }, [handleVerticalScroll, handleHorizontalScroll]);\n\n const handleAttachScrollbarContainer = useCallback(\n (el: HTMLDivElement) => {\n scrollbarContainerRef.current = el;\n el.addEventListener(\"scroll\", handleScrollbarContainerScroll, {\n passive: true,\n });\n },\n [handleScrollbarContainerScroll],\n );\n\n const handleDetachScrollbarContainer = useCallback(\n (el: HTMLDivElement) => {\n scrollbarContainerRef.current = null;\n el.removeEventListener(\"scroll\", handleScrollbarContainerScroll);\n },\n [handleScrollbarContainerScroll],\n );\n\n const handleAttachContentContainer = useCallback(\n (el: HTMLDivElement) => {\n contentContainerRef.current = el;\n el.addEventListener(\"scroll\", handleContentContainerScroll, {\n passive: true,\n });\n },\n [handleContentContainerScroll],\n );\n\n const handleDetachContentContainer = useCallback(\n (el: HTMLDivElement) => {\n contentContainerRef.current = null;\n el.removeEventListener(\"scroll\", handleContentContainerScroll);\n },\n [handleContentContainerScroll],\n );\n\n const contentContainerCallbackRef = useCallbackRef({\n onAttach: handleAttachContentContainer,\n onDetach: handleDetachContentContainer,\n });\n\n const scrollbarContainerCallbackRef = useCallbackRef({\n onAttach: handleAttachScrollbarContainer,\n onDetach: handleDetachScrollbarContainer,\n });\n\n const requestScroll: ScrollRequestHandler = useCallback(\n (scrollRequest) => {\n const { current: contentContainer } = contentContainerRef;\n if (contentContainer) {\n const [maxScrollLeft, maxScrollTop] = getMaxScroll(contentContainer);\n const { scrollLeft, scrollTop } = contentContainer;\n contentContainerScrolledRef.current = false;\n if (scrollRequest.type === \"scroll-row\") {\n const activeRow = getRowElementAtIndex(\n contentContainer,\n scrollRequest.rowIndex,\n );\n\n if (activeRow !== null) {\n const [direction, distance] = howFarIsRowOutsideViewport(\n activeRow,\n totalHeaderHeight,\n );\n if (direction && distance) {\n if (isVirtualScroll) {\n const offset = direction === \"down\" ? 1 : -1;\n onVerticalScrollInSitu?.(offset);\n const firstRow = firstRowRef.current + offset;\n firstRowRef.current = firstRow;\n setRange({\n from: firstRow,\n to: firstRow + viewportRowCount,\n });\n } else {\n let newScrollLeft = scrollLeft;\n let newScrollTop = scrollTop;\n if (direction === \"up\" || direction === \"down\") {\n newScrollTop = Math.min(\n Math.max(0, scrollTop + distance),\n maxScrollTop,\n );\n } else {\n newScrollLeft = Math.min(\n Math.max(0, scrollLeft + distance),\n maxScrollLeft,\n );\n }\n contentContainer.scrollTo({\n top: newScrollTop,\n left: newScrollLeft,\n behavior: \"smooth\",\n });\n }\n }\n }\n } else if (scrollRequest.type === \"scroll-page\") {\n const { direction } = scrollRequest;\n if (isVirtualScroll) {\n const offset =\n direction === \"down\" ? viewportRowCount : -viewportRowCount;\n onVerticalScrollInSitu?.(offset);\n const firstRow = firstRowRef.current + offset;\n firstRowRef.current = firstRow;\n setRange({ from: firstRow, to: firstRow + viewportRowCount });\n } else {\n const scrollBy =\n direction === \"down\" ? appliedPageSize : -appliedPageSize;\n const newScrollTop = Math.min(\n Math.max(0, scrollTop + scrollBy),\n maxScrollTop,\n );\n contentContainer.scrollTo({\n top: newScrollTop,\n left: scrollLeft,\n behavior: \"auto\",\n });\n }\n } else if (scrollRequest.type === \"scroll-end\") {\n const { direction } = scrollRequest;\n const scrollTo = direction === \"end\" ? maxScrollTop : 0;\n contentContainer.scrollTo({\n top: scrollTo,\n left: contentContainer.scrollLeft,\n behavior: \"auto\",\n });\n }\n }\n },\n [\n appliedPageSize,\n isVirtualScroll,\n onVerticalScrollInSitu,\n setRange,\n totalHeaderHeight,\n viewportRowCount,\n ],\n );\n\n const scrollHandles: ScrollingAPI = useMemo(\n // TODO not complete yet\n () => ({\n scrollToIndex: (rowIndex: number) => {\n if (scrollbarContainerRef.current) {\n // TODO hardcoded rowHeight\n const scrollPos = (rowIndex - 30) * 20;\n scrollbarContainerRef.current.scrollTop = scrollPos;\n }\n },\n scrollToKey: (rowKey: string) => {\n console.log(`scrollToKey ${rowKey}`);\n },\n }),\n [],\n );\n\n useImperativeHandle(scrollingApiRef, () => {\n if (scrollbarContainerRef.current) {\n return scrollHandles;\n } else {\n return noScrolling;\n }\n }, [scrollHandles]);\n\n useEffect(() => {\n if (rowHeight !== rowHeightRef.current) {\n rowHeightRef.current = rowHeight;\n if (contentContainerPosRef.current.scrollTop > 0) {\n if (contentContainerRef.current) {\n contentContainerRef.current.scrollTop = 0;\n }\n }\n } else if (usesMeasuredHeaderHeight) {\n const { current: from } = firstRowRef;\n const rowRange = { from, to: from + viewportRowCount };\n setRange(rowRange);\n }\n }, [rowHeight, setRange, usesMeasuredHeaderHeight, viewportRowCount]);\n\n return {\n columnsWithinViewport: columnsWithinViewportRef.current,\n /** Ref to be assigned to ScrollbarContainer */\n scrollbarContainerRef: scrollbarContainerCallbackRef,\n /** Ref to be assigned to ContentContainer */\n contentContainerRef: contentContainerCallbackRef,\n /** Scroll the table */\n requestScroll,\n /** number of leading columns not rendered because of virtualization */\n virtualColSpan: preSpanRef.current,\n };\n};\n"],"names":["useRef","useCallback","useState","useMemo","getColumnsInViewport","itemsChanged","getRowElementAtIndex","howFarIsRowOutsideViewport","useImperativeHandle","useEffect"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useTableScroll.js","sources":["../src/useTableScroll.ts"],"sourcesContent":["import {\n getColumnsInViewport,\n getRowElementAtIndex,\n itemsChanged,\n RowAtPositionFunc,\n} from \"@vuu-ui/vuu-utils\";\nimport type { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ForwardedRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport type { ViewportMeasurements } from \"./useTableViewport\";\nimport { howFarIsRowOutsideViewport } from \"./table-dom-utils\";\nimport type { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport type ScrollDirectionVertical = \"up\" | \"down\";\nexport type ScrollDirectionHorizontal = \"left\" | \"right\";\nexport type ScrollDirection =\n | ScrollDirectionVertical\n | ScrollDirectionHorizontal;\n\n/**\n * scroll into view the row at given index posiiton.\n */\nexport interface ScrollRequestRow {\n rowIndex: number;\n type: \"scroll-row\";\n}\nexport interface ScrollRequestEnd {\n type: \"scroll-end\";\n direction: \"home\" | \"end\";\n}\n\nexport interface ScrollRequestPage {\n type: \"scroll-page\";\n direction: ScrollDirectionVertical;\n}\n\nexport type ScrollRequest =\n | ScrollRequestPage\n | ScrollRequestEnd\n | ScrollRequestRow;\n\nexport type ScrollRequestHandler = (request: ScrollRequest) => void;\n\nexport interface ScrollingAPI {\n scrollToIndex: (itemIndex: number) => void;\n scrollToKey: (rowKey: string) => void;\n}\n\n/** How far we allow horizontal scroll movement before we recheck the rendered columns */\nconst SCROLL_MOVE_CHECK_THRESHOLD = 100;\n\n/** The buffer size in pixels that we allow for rendering columns just outside the viewport */\nconst HORIZONTAL_SCROLL_BUFFER = 200;\n\n/**\n * Return the maximum scroll positions for gioven container\n * @param container\n * @returns [maxScrollLeft, maxScrollTop]\n */\nconst getMaxScroll = (container: HTMLElement) => {\n const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;\n return [scrollWidth - clientWidth, scrollHeight - clientHeight];\n};\n\nconst getScrollDirection = (\n prevScrollPositions: ScrollPos | undefined,\n scrollPos: number,\n) => {\n if (prevScrollPositions === undefined) {\n return undefined;\n } else {\n const { scrollTop: prevTop } = prevScrollPositions;\n return scrollPos > prevTop ? \"fwd\" : \"bwd\";\n }\n};\n\nconst getPctScroll = (container: HTMLElement, currentScrollPos?: ScrollPos) => {\n const {\n clientHeight,\n clientWidth,\n scrollHeight,\n scrollLeft,\n scrollTop,\n scrollWidth,\n } = container;\n\n const maxScrollLeft = scrollWidth - clientWidth;\n const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);\n const maxScrollTop = scrollHeight - clientHeight;\n let pctScrollTop = scrollTop / (scrollHeight - clientHeight);\n\n const scrollDirection = getScrollDirection(currentScrollPos, scrollTop);\n\n if (scrollDirection === \"fwd\" && pctScrollTop > 0.99) {\n pctScrollTop = 1;\n } else if (scrollDirection === \"bwd\" && pctScrollTop < 0.02) {\n pctScrollTop = 0;\n }\n\n return [\n scrollLeft,\n pctScrollLeft,\n maxScrollLeft,\n scrollTop,\n pctScrollTop,\n maxScrollTop,\n ];\n};\n\nexport const noScrolling: ScrollingAPI = {\n scrollToIndex: () => undefined,\n scrollToKey: () => undefined,\n};\n\ninterface CallbackRefHookProps<T = HTMLElement> {\n onAttach?: (el: T) => void;\n onDetach: (el: T) => void;\n label?: string;\n}\n\nconst useCallbackRef = <T = HTMLElement>({\n onAttach,\n onDetach,\n}: CallbackRefHookProps<T>) => {\n const ref = useRef<T | null>(null);\n const callbackRef = useCallback(\n (el: T | null) => {\n if (el) {\n ref.current = el;\n onAttach?.(el);\n } else if (ref.current) {\n const { current: originalRef } = ref;\n ref.current = el;\n onDetach?.(originalRef);\n }\n },\n [onAttach, onDetach],\n );\n return callbackRef;\n};\n\ntype ScrollPos = {\n scrollLeft: number;\n scrollTop: number;\n};\n\nexport interface TableScrollHookProps {\n columns: RuntimeColumnDescriptor[];\n getRowAtPosition: RowAtPositionFunc;\n onHorizontalScroll?: (scrollLeft: number) => void;\n onVerticalScroll?: (scrollTop: number, pctScrollTop: number) => void;\n /**\n * When we have a virtualized scroll container, keyboard navigation is\n * performed `in situ`. We shift the range of rows rendered within the\n * viewport, whithout actually moving the scroll position\n */\n onVerticalScrollInSitu?: (rowIndexOffsetCount: number) => void;\n rowHeight: number;\n scrollingApiRef?: ForwardedRef<ScrollingAPI>;\n setRange: (range: VuuRange) => void;\n showPaginationControls?: boolean;\n viewportMeasurements: ViewportMeasurements;\n}\n\nexport const useTableScroll = ({\n columns,\n getRowAtPosition,\n onHorizontalScroll,\n onVerticalScroll,\n onVerticalScrollInSitu,\n rowHeight,\n scrollingApiRef,\n setRange,\n viewportMeasurements,\n}: TableScrollHookProps) => {\n const firstRowRef = useRef<number>(0);\n const rowHeightRef = useRef(rowHeight);\n const contentContainerScrolledRef = useRef(false);\n const contentContainerPosRef = useRef<ScrollPos>({\n scrollTop: 0,\n scrollLeft: 0,\n });\n const scrollbarContainerScrolledRef = useRef(false);\n const scrollbarContainerPosRef = useRef<ScrollPos>({\n scrollTop: 0,\n scrollLeft: 0,\n });\n const scrollbarContainerRef = useRef<HTMLDivElement | null>(null);\n const contentContainerRef = useRef<HTMLDivElement | null>(null);\n const lastHorizontalScrollCheckPoint = useRef(0);\n\n const {\n appliedPageSize,\n isVirtualScroll,\n rowCount: viewportRowCount,\n totalHeaderHeight,\n usesMeasuredHeaderHeight,\n viewportWidth,\n } = viewportMeasurements;\n\n const columnsWithinViewportRef = useRef<RuntimeColumnDescriptor[]>([]);\n const [, forceRefresh] = useState({});\n\n const preSpanRef = useRef(0);\n\n useMemo(() => {\n const [visibleColumns, offset] = getColumnsInViewport(\n columns,\n contentContainerPosRef.current.scrollLeft,\n contentContainerPosRef.current.scrollLeft +\n viewportWidth +\n HORIZONTAL_SCROLL_BUFFER,\n );\n preSpanRef.current = offset;\n columnsWithinViewportRef.current = visibleColumns;\n }, [viewportWidth, columns]);\n\n const handleHorizontalScroll = useCallback(\n (scrollLeft: number) => {\n contentContainerPosRef.current.scrollLeft = scrollLeft;\n onHorizontalScroll?.(scrollLeft);\n\n if (\n Math.abs(scrollLeft - lastHorizontalScrollCheckPoint.current) >\n SCROLL_MOVE_CHECK_THRESHOLD\n ) {\n lastHorizontalScrollCheckPoint.current = scrollLeft;\n\n const [visibleColumns, pre] = getColumnsInViewport(\n columns,\n scrollLeft,\n scrollLeft + viewportWidth + HORIZONTAL_SCROLL_BUFFER,\n );\n\n if (itemsChanged(columnsWithinViewportRef.current, visibleColumns)) {\n preSpanRef.current = pre;\n columnsWithinViewportRef.current = visibleColumns;\n forceRefresh({});\n }\n }\n },\n [columns, onHorizontalScroll, viewportWidth],\n );\n const handleVerticalScroll = useCallback(\n (scrollTop: number, pctScrollTop: number) => {\n contentContainerPosRef.current.scrollTop = scrollTop;\n\n onVerticalScroll?.(scrollTop, pctScrollTop);\n const firstRow = getRowAtPosition(scrollTop);\n if (firstRow !== firstRowRef.current) {\n firstRowRef.current = firstRow;\n setRange({ from: firstRow, to: firstRow + viewportRowCount });\n }\n onVerticalScrollInSitu?.(0);\n },\n [\n getRowAtPosition,\n onVerticalScroll,\n onVerticalScrollInSitu,\n setRange,\n viewportRowCount,\n ],\n );\n\n const handleScrollbarContainerScroll = useCallback(() => {\n const { current: contentContainer } = contentContainerRef;\n const { current: scrollbarContainer } = scrollbarContainerRef;\n const { current: contentContainerScrolled } = contentContainerScrolledRef;\n const { current: scrollPos } = scrollbarContainerPosRef;\n\n if (contentContainerScrolled) {\n contentContainerScrolledRef.current = false;\n } else if (contentContainer && scrollbarContainer) {\n scrollbarContainerScrolledRef.current = true;\n const [scrollLeft, pctScrollLeft, , scrollTop, pctScrollTop] =\n getPctScroll(scrollbarContainer, scrollPos);\n\n scrollPos.scrollLeft = scrollLeft;\n scrollPos.scrollTop = scrollTop;\n\n const [maxScrollLeft, maxScrollTop] = getMaxScroll(scrollbarContainer);\n const contentScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);\n const contentScrollTop = pctScrollTop * maxScrollTop;\n\n contentContainer.scrollTo({\n left: contentScrollLeft,\n top: contentScrollTop,\n behavior: \"auto\",\n });\n }\n onVerticalScrollInSitu?.(0);\n }, [onVerticalScrollInSitu]);\n\n const handleContentContainerScroll = useCallback(() => {\n const { current: scrollbarContainerScrolled } =\n scrollbarContainerScrolledRef;\n const { current: contentContainer } = contentContainerRef;\n const { current: scrollbarContainer } = scrollbarContainerRef;\n const { current: scrollPos } = contentContainerPosRef;\n if (contentContainer && scrollbarContainer) {\n const [\n scrollLeft,\n pctScrollLeft,\n maxScrollLeft,\n scrollTop,\n pctScrollTop,\n maxScrollTop,\n ] = getPctScroll(contentContainer);\n\n contentContainerScrolledRef.current = true;\n\n if (scrollbarContainerScrolled) {\n scrollbarContainerScrolledRef.current = false;\n } else {\n scrollbarContainer.scrollLeft = Math.round(\n pctScrollLeft * maxScrollLeft,\n );\n scrollbarContainer.scrollTop = pctScrollTop * maxScrollTop;\n }\n\n if (scrollPos.scrollTop !== scrollTop) {\n handleVerticalScroll(scrollTop, pctScrollTop);\n }\n if (scrollPos.scrollLeft !== scrollLeft) {\n handleHorizontalScroll(scrollLeft);\n }\n }\n }, [handleVerticalScroll, handleHorizontalScroll]);\n\n const handleAttachScrollbarContainer = useCallback(\n (el: HTMLDivElement) => {\n scrollbarContainerRef.current = el;\n el.addEventListener(\"scroll\", handleScrollbarContainerScroll, {\n passive: true,\n });\n },\n [handleScrollbarContainerScroll],\n );\n\n const handleDetachScrollbarContainer = useCallback(\n (el: HTMLDivElement) => {\n scrollbarContainerRef.current = null;\n el.removeEventListener(\"scroll\", handleScrollbarContainerScroll);\n },\n [handleScrollbarContainerScroll],\n );\n\n const handleAttachContentContainer = useCallback(\n (el: HTMLDivElement) => {\n contentContainerRef.current = el;\n el.addEventListener(\"scroll\", handleContentContainerScroll, {\n passive: true,\n });\n },\n [handleContentContainerScroll],\n );\n\n const handleDetachContentContainer = useCallback(\n (el: HTMLDivElement) => {\n contentContainerRef.current = null;\n el.removeEventListener(\"scroll\", handleContentContainerScroll);\n },\n [handleContentContainerScroll],\n );\n\n const contentContainerCallbackRef = useCallbackRef({\n onAttach: handleAttachContentContainer,\n onDetach: handleDetachContentContainer,\n });\n\n const scrollbarContainerCallbackRef = useCallbackRef({\n onAttach: handleAttachScrollbarContainer,\n onDetach: handleDetachScrollbarContainer,\n });\n\n const requestScroll: ScrollRequestHandler = useCallback(\n (scrollRequest) => {\n const { current: contentContainer } = contentContainerRef;\n if (contentContainer) {\n const [maxScrollLeft, maxScrollTop] = getMaxScroll(contentContainer);\n const { scrollLeft, scrollTop } = contentContainer;\n contentContainerScrolledRef.current = false;\n if (scrollRequest.type === \"scroll-row\") {\n const activeRow = getRowElementAtIndex(\n contentContainer,\n scrollRequest.rowIndex,\n );\n\n if (activeRow !== null) {\n const [direction, distance] = howFarIsRowOutsideViewport(\n activeRow,\n totalHeaderHeight,\n );\n if (direction && distance) {\n if (isVirtualScroll) {\n const offset = direction === \"down\" ? 1 : -1;\n onVerticalScrollInSitu?.(offset);\n const firstRow = firstRowRef.current + offset;\n firstRowRef.current = firstRow;\n setRange({\n from: firstRow,\n to: firstRow + viewportRowCount,\n });\n } else {\n let newScrollLeft = scrollLeft;\n let newScrollTop = scrollTop;\n if (direction === \"up\" || direction === \"down\") {\n newScrollTop = Math.min(\n Math.max(0, scrollTop + distance),\n maxScrollTop,\n );\n } else {\n newScrollLeft = Math.min(\n Math.max(0, scrollLeft + distance),\n maxScrollLeft,\n );\n }\n contentContainer.scrollTo({\n top: newScrollTop,\n left: newScrollLeft,\n behavior: \"smooth\",\n });\n }\n }\n }\n } else if (scrollRequest.type === \"scroll-page\") {\n const { direction } = scrollRequest;\n if (isVirtualScroll) {\n const offset =\n direction === \"down\" ? viewportRowCount : -viewportRowCount;\n onVerticalScrollInSitu?.(offset);\n const firstRow = firstRowRef.current + offset;\n firstRowRef.current = firstRow;\n setRange({ from: firstRow, to: firstRow + viewportRowCount });\n } else {\n const scrollBy =\n direction === \"down\" ? appliedPageSize : -appliedPageSize;\n const newScrollTop = Math.min(\n Math.max(0, scrollTop + scrollBy),\n maxScrollTop,\n );\n contentContainer.scrollTo({\n top: newScrollTop,\n left: scrollLeft,\n behavior: \"auto\",\n });\n }\n } else if (scrollRequest.type === \"scroll-end\") {\n const { direction } = scrollRequest;\n const scrollTo = direction === \"end\" ? maxScrollTop : 0;\n contentContainer.scrollTo({\n top: scrollTo,\n left: contentContainer.scrollLeft,\n behavior: \"auto\",\n });\n }\n }\n },\n [\n appliedPageSize,\n isVirtualScroll,\n onVerticalScrollInSitu,\n setRange,\n totalHeaderHeight,\n viewportRowCount,\n ],\n );\n\n const scrollHandles: ScrollingAPI = useMemo(\n // TODO not complete yet\n () => ({\n scrollToIndex: (rowIndex: number) => {\n if (scrollbarContainerRef.current) {\n // TODO hardcoded rowHeight\n const scrollPos = (rowIndex - 30) * 20;\n scrollbarContainerRef.current.scrollTop = scrollPos;\n }\n },\n scrollToKey: (rowKey: string) => {\n console.log(`scrollToKey ${rowKey}`);\n },\n }),\n [],\n );\n\n useImperativeHandle(scrollingApiRef, () => {\n if (scrollbarContainerRef.current) {\n return scrollHandles;\n } else {\n return noScrolling;\n }\n }, [scrollHandles]);\n\n useEffect(() => {\n if (rowHeight !== rowHeightRef.current) {\n rowHeightRef.current = rowHeight;\n if (contentContainerPosRef.current.scrollTop > 0) {\n if (contentContainerRef.current) {\n contentContainerRef.current.scrollTop = 0;\n }\n }\n } else if (usesMeasuredHeaderHeight) {\n const { current: from } = firstRowRef;\n const rowRange = { from, to: from + viewportRowCount };\n setRange(rowRange);\n }\n }, [rowHeight, setRange, usesMeasuredHeaderHeight, viewportRowCount]);\n\n return {\n columnsWithinViewport: columnsWithinViewportRef.current,\n /** Ref to be assigned to ScrollbarContainer */\n scrollbarContainerRef: scrollbarContainerCallbackRef,\n /** Ref to be assigned to ContentContainer */\n contentContainerRef: contentContainerCallbackRef,\n /** Scroll the table */\n requestScroll,\n /** number of leading columns not rendered because of virtualization */\n virtualColSpan: preSpanRef.current,\n };\n};\n"],"names":["useRef","useCallback","useState","useMemo","getColumnsInViewport","itemsChanged","getRowElementAtIndex","howFarIsRowOutsideViewport","useImperativeHandle","useEffect"],"mappings":"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"}
|
package/cjs/useTableViewport.js
CHANGED
|
@@ -23,19 +23,36 @@ const UNMEASURED_VIEWPORT = {
|
|
|
23
23
|
viewportBodyHeight: 0,
|
|
24
24
|
viewportWidth: 0
|
|
25
25
|
};
|
|
26
|
+
const getViewportHeightProps = (rowCount, rowHeight, size, showPaginationControls = false) => {
|
|
27
|
+
if (showPaginationControls) {
|
|
28
|
+
return {
|
|
29
|
+
pixelContentHeight: size.height,
|
|
30
|
+
virtualContentHeight: size.height,
|
|
31
|
+
virtualisedExtent: 0
|
|
32
|
+
};
|
|
33
|
+
} else {
|
|
34
|
+
const virtualContentHeight = rowCount * rowHeight;
|
|
35
|
+
const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);
|
|
36
|
+
const virtualisedExtent = virtualContentHeight - pixelContentHeight;
|
|
37
|
+
return {
|
|
38
|
+
pixelContentHeight,
|
|
39
|
+
virtualContentHeight,
|
|
40
|
+
virtualisedExtent
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
};
|
|
26
44
|
const useTableViewport = ({
|
|
27
45
|
columns,
|
|
28
46
|
headerHeight,
|
|
29
47
|
rowCount,
|
|
30
48
|
rowHeight,
|
|
31
49
|
selectionEndSize = 4,
|
|
50
|
+
showPaginationControls,
|
|
32
51
|
size
|
|
33
52
|
}) => {
|
|
34
53
|
const inSituRowOffsetRef = react.useRef(0);
|
|
35
54
|
const pctScrollTopRef = react.useRef(0);
|
|
36
|
-
const virtualContentHeight = rowCount
|
|
37
|
-
const pixelContentHeight = Math.min(virtualContentHeight, MAX_PIXEL_HEIGHT);
|
|
38
|
-
const virtualisedExtent = virtualContentHeight - pixelContentHeight;
|
|
55
|
+
const { virtualContentHeight, pixelContentHeight, virtualisedExtent } = getViewportHeightProps(rowCount, rowHeight, size, showPaginationControls);
|
|
39
56
|
const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = react.useMemo(
|
|
40
57
|
() => vuuUtils.measurePinnedColumns(columns, selectionEndSize),
|
|
41
58
|
[columns, selectionEndSize]
|
|
@@ -70,10 +87,10 @@ const useTableViewport = ({
|
|
|
70
87
|
const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
|
|
71
88
|
const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
|
|
72
89
|
const measuredHeaderHeight = headerHeight === -1 ? 0 : headerHeight;
|
|
73
|
-
const visibleRows = (size.height -
|
|
90
|
+
const visibleRows = showPaginationControls ? Math.floor((pixelContentHeight - headerHeight) / rowHeight) : (size.height - headerHeight) / rowHeight;
|
|
74
91
|
const count = Number.isInteger(visibleRows) ? visibleRows : Math.ceil(visibleRows);
|
|
75
92
|
const viewportBodyHeight = size.height - measuredHeaderHeight;
|
|
76
|
-
const verticalScrollbarWidth = pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;
|
|
93
|
+
const verticalScrollbarWidth = showPaginationControls ? 0 : pixelContentHeight > viewportBodyHeight ? scrollbarSize : 0;
|
|
77
94
|
const appliedPageSize = count * rowHeight * (pixelContentHeight / virtualContentHeight);
|
|
78
95
|
const viewportWidth = size.width;
|
|
79
96
|
return {
|
|
@@ -99,19 +116,20 @@ const useTableViewport = ({
|
|
|
99
116
|
return UNMEASURED_VIEWPORT;
|
|
100
117
|
}
|
|
101
118
|
}, [
|
|
102
|
-
|
|
103
|
-
getRowOffset,
|
|
104
|
-
headerHeight,
|
|
105
|
-
isVirtualScroll,
|
|
119
|
+
size,
|
|
106
120
|
pinnedWidthLeft,
|
|
107
121
|
unpinnedWidth,
|
|
108
122
|
pinnedWidthRight,
|
|
109
|
-
|
|
123
|
+
headerHeight,
|
|
110
124
|
rowHeight,
|
|
125
|
+
showPaginationControls,
|
|
126
|
+
pixelContentHeight,
|
|
127
|
+
virtualContentHeight,
|
|
128
|
+
getRowAtPosition,
|
|
129
|
+
getRowOffset,
|
|
130
|
+
isVirtualScroll,
|
|
111
131
|
setInSituRowOffset,
|
|
112
|
-
setScrollTop
|
|
113
|
-
size,
|
|
114
|
-
virtualContentHeight
|
|
132
|
+
setScrollTop
|
|
115
133
|
]);
|
|
116
134
|
};
|
|
117
135
|
|
|
@@ -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 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\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 measuredHeaderHeight = headerHeight === -1 ? 0 : headerHeight;\n const visibleRows = (size.height - measuredHeaderHeight) / rowHeight;\n const count = Number.isInteger(visibleRows)\n ? visibleRows\n : Math.ceil(visibleRows);\n const viewportBodyHeight = size.height - measuredHeaderHeight;\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 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 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":";;;;;AAqDA,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,wBAA0B,EAAA,KAAA;AAAA,EAC1B,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,oBAAA,GAAuB,YAAiB,KAAA,CAAA,CAAA,GAAK,CAAI,GAAA,YAAA,CAAA;AACvD,MAAM,MAAA,WAAA,GAAA,CAAe,IAAK,CAAA,MAAA,GAAS,oBAAwB,IAAA,SAAA,CAAA;AAC3D,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,oBAAA,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,0BAA0B,YAAiB,KAAA,CAAA,CAAA;AAAA,QAC3C,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;;;;"}
|
|
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 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 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 = (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 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/Row.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var rowCss = ".vuuTableRow {\n background: var(--row-background, var(--table-background));\n
|
|
1
|
+
var rowCss = ".vuuTableRow {\n background: var(--row-background, var(--table-background));\n border-bottom: 1px solid var(--row-borderColor, var(--table-background));\n box-sizing: border-box;\n color: var(--salt-content-secondary-foreground);\n contain: layout;\n /* contain-intrinsic-height: var(--row-height);\n content-visibility: auto; */\n height: var(--row-height);\n line-height: var(--row-height);\n position: absolute;\n top: 0;\n white-space: nowrap;\n width: 100%;\n}\n\n.vuuTableRow-proxy {\n position: absolute !important;\n visibility: hidden;\n}\n\n.vuuTableRow-even {\n --row-background: var(--row-background-even);\n}\n\n.vuuTableRow-highlighted {\n background: var(--salt-selectable-background-hover);\n}\n\n.vuuTableRow-selected,\n.vuuTableRow-selectedEnd {\n /* --row-borderColor: var(--salt-separable-secondary-borderColor); */\n background-color: var(--salt-selectable-background-selected);\n}\n\n.vuuTableRow-selectedEnd {\n z-index: 1;\n}\n\n.vuuTableRow-selectedStart {\n --selection-decorator-marginTop: 1px;\n --vuu-selection-decorator-left-radius: 5px 0 0 0;\n --vuu-selection-decorator-right-radius: 0 5px 0 0;\n\n border-radius: 5px 5px 0 0;\n}\n\n.vuuTableRow-selectedEnd {\n --vuu-selection-decorator-left-radius: 0 0 0 5px;\n --vuu-selection-decorator-right-radius: 0 0 5px 0;\n border-radius: 0 0 5px 5px;\n}\n\n.vuuTableRow-selectedStart.vuuTableRow-selectedEnd {\n --vuu-selection-decorator-left-radius: 5px 0 0 5px;\n --vuu-selection-decorator-right-radius: 0 5px 5px 0;\n border-radius: 5px 5px 5px 5px;\n}\n\n.vuuTableRow-selectedStart:after {\n content: \"\";\n position: absolute;\n top: 0px;\n left: 4px;\n height: 1px;\n background: var(--vuuTableRow-selectionBlock-borderColor);\n width: calc(var(--content-width) - 8px);\n z-index: 1;\n}\n\n.vuuTableRow-selectedEnd {\n border-bottom-color: var(\n --vuuTableRow-selectionBlock-borderColor,\n var(--row-borderColor)\n );\n}\n\n.vuuTableRow-selectedStart.vuuTableRow-selectedEnd {\n .vuuTableRow-selectionDecorator {\n height: calc(var(--row-height) - 1px);\n }\n}\n\n.vuuTableRow-selectionDecorator {\n background: var(--table-background);\n display: inline-block;\n position: relative;\n height: var(--row-height);\n margin-top: var(--selection-decorator-marginTop, 0px);\n width: 4px;\n z-index: 2;\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyLeft {\n left: 0;\n position: sticky;\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyRight {\n right: 0;\n position: sticky;\n}\n\n.vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,\n.vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before {\n content: \"\";\n inset: -1px 0 0 0;\n position: absolute;\n background: var(--table-background);\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyLeft:before {\n border-radius: var(--vuu-selection-decorator-left-radius, 0);\n}\n\n.vuuTableRow-selectionDecorator.vuuStickyRight:before {\n border-radius: var(--vuu-selection-decorator-right-radius, 0);\n}\n\n.vuuTableRow-expanded {\n --toggle-icon-transform: rotate(90deg);\n}\n\n.vuuDraggable .vuuTableRow {\n --cell-borderColor: transparent;\n --vuu-selection-decorator-bg: transparent;\n transform: none !important;\n z-index: 1;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { rowCss as default };
|
|
4
4
|
//# sourceMappingURL=Row.css.js.map
|
package/esm/Row.js
CHANGED
|
@@ -79,7 +79,7 @@ const Row = memo(
|
|
|
79
79
|
[`${classBase}-selectedEnd`]: selectionStatus & Last
|
|
80
80
|
}
|
|
81
81
|
);
|
|
82
|
-
const style = {
|
|
82
|
+
const style = { top: offset };
|
|
83
83
|
const handleGroupCellClick = useCallback(
|
|
84
84
|
(evt, column) => {
|
|
85
85
|
if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {
|
package/esm/Row.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Row.js","sources":["../src/Row.tsx"],"sourcesContent":["import { RowProps, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n isGroupColumn,\n isJsonColumn,\n isJsonGroup,\n isNotHidden,\n metadataKeys,\n RowSelected,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, memo, MouseEvent, useCallback } from \"react\";\nimport { TableCell, TableGroupCell } from \"./table-cell\";\n\nimport rowCss from \"./Row.css\";\nimport { VirtualColSpan } from \"./VirtualColSpan\";\n\nconst { IDX, IS_EXPANDED, SELECTED } = metadataKeys;\nconst classBase = \"vuuTableRow\";\n\n// A dummy Table Row rendered once and not visible. We measure this to\n// determine height of Row(s) and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const RowProxy = forwardRef<HTMLDivElement, { height?: number }>(\n function RowProxy({ height }, forwardedRef) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-row\",\n css: rowCss,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden\n className={cx(classBase, `${classBase}-proxy`)}\n ref={forwardedRef}\n style={{ height }}\n />\n );\n },\n);\n\n// export const Row = memo(\nexport const Row = memo(\n ({\n className: classNameProp,\n classNameGenerator,\n columnMap,\n columns,\n highlighted,\n row,\n offset,\n onClick,\n onDataEdited,\n onToggleGroup,\n virtualColSpan = 0,\n zebraStripes = false,\n ...htmlAttributes\n }: RowProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-row\",\n css: rowCss,\n window: targetWindow,\n });\n\n const {\n [IDX]: rowIndex,\n [IS_EXPANDED]: isExpanded,\n [SELECTED]: selectionStatus,\n } = row;\n\n const handleRowClick = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n const rangeSelect = evt.shiftKey;\n const keepExistingSelection = evt.ctrlKey || evt.metaKey; /* mac only */\n onClick?.(evt, row, rangeSelect, keepExistingSelection);\n },\n [onClick, row],\n );\n\n const { True, First, Last } = RowSelected;\n\n const className = cx(\n classBase,\n classNameProp,\n classNameGenerator?.(row, columnMap),\n {\n [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,\n [`${classBase}-expanded`]: isExpanded,\n [`${classBase}-highlighted`]: highlighted,\n [`${classBase}-selected`]: selectionStatus & True,\n [`${classBase}-selectedStart`]: selectionStatus & First,\n [`${classBase}-selectedEnd`]: selectionStatus & Last,\n },\n );\n\n const style = { transform: `translate3d(0px, ${offset}px, 0px)` };\n\n const handleGroupCellClick = useCallback(\n (evt: MouseEvent, column: RuntimeColumnDescriptor) => {\n if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {\n evt.stopPropagation();\n onToggleGroup?.(row, column);\n }\n },\n [columnMap, onToggleGroup, row],\n );\n\n return (\n <div\n {...htmlAttributes}\n role=\"row\"\n className={className}\n onClick={handleRowClick}\n style={style}\n >\n <span className={`${classBase}-selectionDecorator vuuStickyLeft`} />\n <VirtualColSpan width={virtualColSpan} />\n {columns.filter(isNotHidden).map((column) => {\n const isGroup = isGroupColumn(column);\n const isJsonCell = isJsonColumn(column);\n const Cell = isGroup ? TableGroupCell : TableCell;\n\n return (\n <Cell\n column={column}\n columnMap={columnMap}\n key={column.name}\n onClick={isGroup || isJsonCell ? handleGroupCellClick : undefined}\n onDataEdited={onDataEdited}\n row={row}\n />\n );\n })}\n <span className={`${classBase}-selectionDecorator vuuStickyRight`} />\n </div>\n );\n },\n);\nRow.displayName = \"Row\";\n"],"names":["RowProxy"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Row.js","sources":["../src/Row.tsx"],"sourcesContent":["import { RowProps, RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n isGroupColumn,\n isJsonColumn,\n isJsonGroup,\n isNotHidden,\n metadataKeys,\n RowSelected,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, memo, MouseEvent, useCallback } from \"react\";\nimport { TableCell, TableGroupCell } from \"./table-cell\";\n\nimport rowCss from \"./Row.css\";\nimport { VirtualColSpan } from \"./VirtualColSpan\";\n\nconst { IDX, IS_EXPANDED, SELECTED } = metadataKeys;\nconst classBase = \"vuuTableRow\";\n\n// A dummy Table Row rendered once and not visible. We measure this to\n// determine height of Row(s) and monitor it for size changes (in\n// case of runtime density switch). This allows ListItem height to\n// be controlled purely through CSS.\nexport const RowProxy = forwardRef<HTMLDivElement, { height?: number }>(\n function RowProxy({ height }, forwardedRef) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-row\",\n css: rowCss,\n window: targetWindow,\n });\n\n return (\n <div\n aria-hidden\n className={cx(classBase, `${classBase}-proxy`)}\n ref={forwardedRef}\n style={{ height }}\n />\n );\n },\n);\n\n// export const Row = memo(\nexport const Row = memo(\n ({\n className: classNameProp,\n classNameGenerator,\n columnMap,\n columns,\n highlighted,\n row,\n offset,\n onClick,\n onDataEdited,\n onToggleGroup,\n virtualColSpan = 0,\n zebraStripes = false,\n ...htmlAttributes\n }: RowProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-table-row\",\n css: rowCss,\n window: targetWindow,\n });\n\n const {\n [IDX]: rowIndex,\n [IS_EXPANDED]: isExpanded,\n [SELECTED]: selectionStatus,\n } = row;\n\n const handleRowClick = useCallback(\n (evt: MouseEvent<HTMLDivElement>) => {\n const rangeSelect = evt.shiftKey;\n const keepExistingSelection = evt.ctrlKey || evt.metaKey; /* mac only */\n onClick?.(evt, row, rangeSelect, keepExistingSelection);\n },\n [onClick, row],\n );\n\n const { True, First, Last } = RowSelected;\n\n const className = cx(\n classBase,\n classNameProp,\n classNameGenerator?.(row, columnMap),\n {\n [`${classBase}-even`]: zebraStripes && rowIndex % 2 === 0,\n [`${classBase}-expanded`]: isExpanded,\n [`${classBase}-highlighted`]: highlighted,\n [`${classBase}-selected`]: selectionStatus & True,\n [`${classBase}-selectedStart`]: selectionStatus & First,\n [`${classBase}-selectedEnd`]: selectionStatus & Last,\n },\n );\n\n // const style = { transform: `translate3d(0px, ${offset}px, 0px)` };\n const style = { top: offset };\n\n const handleGroupCellClick = useCallback(\n (evt: MouseEvent, column: RuntimeColumnDescriptor) => {\n if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {\n evt.stopPropagation();\n onToggleGroup?.(row, column);\n }\n },\n [columnMap, onToggleGroup, row],\n );\n\n return (\n <div\n {...htmlAttributes}\n role=\"row\"\n className={className}\n onClick={handleRowClick}\n style={style}\n >\n <span className={`${classBase}-selectionDecorator vuuStickyLeft`} />\n <VirtualColSpan width={virtualColSpan} />\n {columns.filter(isNotHidden).map((column) => {\n const isGroup = isGroupColumn(column);\n const isJsonCell = isJsonColumn(column);\n const Cell = isGroup ? TableGroupCell : TableCell;\n\n return (\n <Cell\n column={column}\n columnMap={columnMap}\n key={column.name}\n onClick={isGroup || isJsonCell ? handleGroupCellClick : undefined}\n onDataEdited={onDataEdited}\n row={row}\n />\n );\n })}\n <span className={`${classBase}-selectionDecorator vuuStickyRight`} />\n </div>\n );\n },\n);\nRow.displayName = \"Row\";\n"],"names":["RowProxy"],"mappings":"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"}
|
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(--salt-palette-neutral-secondary-background);\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var(--salt-separable-tertiary-borderColor);\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
|
|
1
|
+
var tableCss = ".vuuTable {\n --vuu-table-footer-height: 0px;\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 &.vuuTable-viewportRowLimit {\n height: fit-content;\n /* With a viewportRowLimit, table is content sized, not container sized. */\n .vuuTable-contentContainer {\n height: calc(var(--measured-px-height) + var(--total-header-height));\n }\n .vuuTable-scrollbarContainer {\n height: calc(\n var(--measured-px-height) + var(--horizontal-scrollbar-height)\n );\n }\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n\n &.vuuTable-maxViewportRowLimit {\n /* With a maxVviewportRowLimit, table is content sized, not container sized. */\n height: fit-content;\n padding-bottom: var(--horizontal-scrollbar-height);\n\n .vuuTable-contentContainer {\n height: min(\n calc(var(--measured-px-height) + var(--total-header-height)),\n calc(var(--content-height) + var(--total-header-height))\n );\n }\n .vuuTable-scrollbarContainer {\n height: min(\n calc(var(--measured-px-height) + var(--horizontal-scrollbar-height)),\n calc(var(--content-height) + var(--horizontal-scrollbar-height))\n );\n }\n\n .vuuTable-scrollbarFiller {\n height: var(--horizontal-scrollbar-height);\n }\n }\n}\n\n.vuuTable-zebra {\n --row-background-even: var(--salt-palette-neutral-secondary-background);\n}\n\n.vuuTable-colLines {\n --cell-borderColor: var(--salt-separable-tertiary-borderColor);\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 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(\n 100% - var(--horizontal-scrollbar-height) - var(--vuu-table-footer-height)\n );\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 border-bottom: solid 1px\n var(\n --vuuTableColHeaders-borderColor,\n var(--salt-separable-secondary-borderColor)\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\n.vuuTable-pagination {\n --vuu-table-footer-height: 32px;\n .vuuTable-col-headings {\n position: relative;\n }\n\n .vuuTable-body {\n height: calc(var(--content-height) - var(--total-header-height));\n position: relative;\n }\n\n .vuuTableRow {\n position: relative;\n top: auto;\n }\n}\n\n.vuuTable-footer {\n align-items: center;\n display: flex;\n height: var(--vuu-table-footer-height);\n justify-content: flex-end;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { tableCss as default };
|
|
4
4
|
//# sourceMappingURL=Table.css.js.map
|