Masonry: Revamp Dynamic Heights (#3890)

pinterest · Nov 22, 2024 · ad9e92a · ad9e92a
1 parent fc9160e
commit ad9e92a
Show file tree

Hide file tree

Showing 6 changed files with 550 additions and 20 deletions.
diff --git a/docs/integration-test-helpers/masonry/MasonryContainer.tsx b/docs/integration-test-helpers/masonry/MasonryContainer.tsx
@@ -27,6 +27,10 @@ type Props<T> = {
   collage?: boolean;
   // Constrains the width of the grid rendering.
   constrained?: boolean;
+  // Enable DynamicHeights
+  dynamicHeights?: boolean;
+  // Enable DynamicHeights and their v2 version
+  dynamicHeightsV2?: boolean;
   // Whether or not to use an external cache
   externalCache?: boolean;
   // Does not allow infinite scroll.
@@ -326,6 +330,8 @@ export default class MasonryContainer extends Component<Props<Record<any, any>>,
       MasonryComponent,
       collage,
       constrained,
+      dynamicHeights,
+      dynamicHeightsV2,
       externalCache,
       finiteLength,
       flexible,
@@ -408,6 +414,8 @@ export default class MasonryContainer extends Component<Props<Record<any, any>>,
         {mountGrid && (
           <MasonryComponent
             ref={this.gridRef}
+            _dynamicHeights={dynamicHeights || dynamicHeightsV2}
+            _dynamicHeightsV2Experiment={dynamicHeightsV2}
             _getColumnSpanConfig={(item) => {
               const columnSpan = item.columnSpan as number | undefined;
               return columnSpan ?? 1;

diff --git a/docs/pages/integration-test/masonry.tsx b/docs/pages/integration-test/masonry.tsx
@@ -70,6 +70,8 @@ export default function TestPage({
   const {
     constrained,
     deferMount,
+    dynamicHeights,
+    dynamicHeightsV2,
     externalCache,
     experimental,
     finiteLength,
@@ -111,6 +113,8 @@ export default function TestPage({
         <MasonryContainer
           // @ts-expect-error - TS2345 - Argument of type 'string | string[] | undefined' is not assignable to parameter of type 'string'.
           constrained={booleanize(constrained)}
+          dynamicHeights={dynamicHeights}
+          dynamicHeightsV2={dynamicHeightsV2}
           // @ts-expect-error - TS2345 - Argument of type 'string | string[] | undefined' is not assignable to parameter of type 'string'.
           externalCache={booleanize(externalCache)}
           // @ts-expect-error - TS2345 - Argument of type 'string | string[] | undefined' is not assignable to parameter of type 'string'.

diff --git a/packages/gestalt/src/Masonry.tsx b/packages/gestalt/src/Masonry.tsx
@@ -4,6 +4,7 @@ import FetchItems from './FetchItems';
 import styles from './Masonry.css';
 import { Cache } from './Masonry/Cache';
 import recalcHeights from './Masonry/dynamicHeightsUtils';
+import recalcHeightsV2 from './Masonry/dynamicHeightsV2Utils';
 import getLayoutAlgorithm from './Masonry/getLayoutAlgorithm';
 import ItemResizeObserverWrapper from './Masonry/ItemResizeObserverWrapper';
 import MeasurementStore from './Masonry/MeasurementStore';
@@ -148,6 +149,12 @@ type Props<T> = {
    */
   _dynamicHeights?: boolean;
   /**
+   * Experimental flag to enable an experiment to use a revamped version of dynamic heights (This needs _dynamicHeights enabled)
+   */
+  _dynamicHeightsV2Experiment?: boolean;
+  /**
+  /**
+   *
    * Experimental prop to enable early bailout when positioning multicolumn modules
    *
    * This is an experimental prop and may be removed or changed in the future
@@ -225,14 +232,34 @@ export default class Masonry<T> extends ReactComponent<Props<T>, State<T>> {
                 const changedItem: T = this.state.items[idx]!;
                 const newHeight = contentRect.height;
 
-                triggerUpdate =
-                  recalcHeights({
-                    items: this.state.items,
-                    changedItem,
-                    newHeight,
-                    positionStore: this.positionStore,
-                    measurementStore: this.state.measurementStore,
-                  }) || triggerUpdate;
+                // TODO: DefaultGutter comes from getLayoutAlgorithm and their utils, everything should be in one place (this.gutter?)
+                const { layout, gutterWidth } = this.props;
+                let defaultGutter = 14;
+                if ((layout && layout === 'flexible') || layout === 'serverRenderedFlexible') {
+                  defaultGutter = 0;
+                }
+
+                /* eslint-disable-next-line no-underscore-dangle */
+                if (props._dynamicHeightsV2Experiment) {
+                  triggerUpdate =
+                    recalcHeightsV2({
+                      items: this.state.items,
+                      changedItem,
+                      newHeight,
+                      positionStore: this.positionStore,
+                      measurementStore: this.state.measurementStore,
+                      gutterWidth: gutterWidth ?? defaultGutter,
+                    }) || triggerUpdate;
+                } else {
+                  triggerUpdate =
+                    recalcHeights({
+                      items: this.state.items,
+                      changedItem,
+                      newHeight,
+                      positionStore: this.positionStore,
+                      measurementStore: this.state.measurementStore,
+                    }) || triggerUpdate;
+                }
               }
             });
             if (triggerUpdate) {