chore(pivot-table): determine title scroll width when element is mounted

dhis2 · Sep 26, 2023 · 338b549 · 338b549
1 parent adba099
commit 338b549
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/__demo__/PivotTable.stories.js b/src/__demo__/PivotTable.stories.js
@@ -1123,6 +1123,13 @@ storiesOf('PivotTable', module).add('DEGS', (_, { pivotTableOptions }) => {
 storiesOf('PivotTable', module).add(
     'Truncated header cell',
     (_, { pivotTableOptions }) => {
+        const widths = [250, 200, 400]
+        const [width, setWidth] = useState(250)
+        const toggleWidth = () =>
+            setWidth(
+                (currentWidth) =>
+                    widths[widths.indexOf(currentWidth) + 1] ?? widths[0]
+            )
         const visualization = {
             ...narrativeVisualization,
             ...visualizationReset,
@@ -1139,7 +1146,15 @@ storiesOf('PivotTable', module).add(
         }
 
         return (
-            <div style={{ width: 250, height: 600, marginTop: 50 }}>
+            <div
+                style={{
+                    width,
+                    height: 600,
+                    marginTop: 50,
+                    transition: 'width 150ms',
+                }}
+            >
+                <button onClick={toggleWidth}>Toggle width</button>
                 <PivotTable data={data} visualization={visualization} />
             </div>
         )

diff --git a/src/components/PivotTable/PivotTableTitleRow.js b/src/components/PivotTable/PivotTableTitleRow.js
@@ -1,6 +1,6 @@
 import { Tooltip } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import React, { useRef, useMemo } from 'react'
+import React, { useRef, useMemo, useCallback } from 'react'
 import { PivotTableCell } from './PivotTableCell.js'
 import { usePivotTableEngine } from './PivotTableEngineContext.js'
 import { cell as cellStyle } from './styles/PivotTable.style.js'
@@ -12,6 +12,13 @@ export const PivotTableTitleRow = ({
     totalWidth,
 }) => {
     const containerRef = useRef(null)
+    const initialScrollWidthRef = useRef(null)
+    const handleContainerMount = useCallback((node) => {
+        if (node) {
+            containerRef.current = node
+            initialScrollWidthRef.current = node.scrollWidth
+        }
+    }, [])
     const engine = usePivotTableEngine()
     const columnCount = engine.width + engine.rowDepth
     const maxWidth = useMemo(
@@ -27,7 +34,7 @@ export const PivotTableTitleRow = ({
         [containerWidth, scrollPosition.x, totalWidth]
     )
     const titleIsTruncated =
-        containerRef.current?.scrollWidth > containerRef.current?.clientWidth
+        initialScrollWidthRef.current > containerRef.current?.clientWidth
 
     return (
         <tr>
@@ -39,7 +46,7 @@ export const PivotTableTitleRow = ({
             >
                 <div
                     style={{ marginLeft, maxWidth }}
-                    ref={containerRef}
+                    ref={handleContainerMount}
                     data-test="visualization-title"
                     className="title-cell-content"
                 >