Masonry: Enable whitespaceThreshold prop (#3825)

pinterest · Oct 24, 2024 · e61f6df · e61f6df
1 parent 756ab41
commit e61f6df
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/packages/gestalt/src/Masonry.tsx b/packages/gestalt/src/Masonry.tsx
@@ -149,6 +149,12 @@ type Props<T> = {
    * Experimental flag to enable dynamic heights on items. This only works if multi column items are enabled.
    */
   _dynamicHeights?: boolean;
+  /**
+   * Experimental prop to define how much whitespace is good enough to position multicolumn modules
+   *
+   * This is an experimental prop and may be removed or changed in the future
+   */
+  _whitespaceThreshold?: number;
 };
 
 type State<T> = {
@@ -585,6 +591,7 @@ export default class Masonry<T> extends ReactComponent<Props<T>, State<T>> {
       _getColumnSpanConfig,
       _loadingStateItems = [],
       _renderLoadingStateItems,
+      _whitespaceThreshold,
     } = this.props;
     const { hasPendingMeasurements, measurementStore, width } = this.state;
     const { positionStore } = this;
@@ -607,6 +614,7 @@ export default class Masonry<T> extends ReactComponent<Props<T>, State<T>> {
         logWhitespace: _logTwoColWhitespace,
         _getColumnSpanConfig,
         renderLoadingState,
+        whitespaceThreshold: _whitespaceThreshold,
       });
     } else if (layout === 'uniformRow') {
       getPositions = uniformRowLayout({
@@ -631,6 +639,7 @@ export default class Masonry<T> extends ReactComponent<Props<T>, State<T>> {
         logWhitespace: _logTwoColWhitespace,
         _getColumnSpanConfig,
         renderLoadingState,
+        whitespaceThreshold: _whitespaceThreshold,
       });
     }
 

diff --git a/packages/gestalt/src/Masonry/getLayoutAlgorithm.ts b/packages/gestalt/src/Masonry/getLayoutAlgorithm.ts
@@ -19,6 +19,7 @@ export default function getLayoutAlgorithm<T>({
   _logTwoColWhitespace,
   _loadingStateItems = [],
   renderLoadingState,
+  _whitespaceThreshold,
 }: {
   align: Align;
   columnWidth: number;
@@ -37,6 +38,7 @@ export default function getLayoutAlgorithm<T>({
   ) => void;
   _loadingStateItems?: ReadonlyArray<LoadingStateItem>;
   renderLoadingState?: boolean;
+  _whitespaceThreshold?: number;
 }): (items: ReadonlyArray<T> | ReadonlyArray<LoadingStateItem>) => ReadonlyArray<Position> {
   if ((layout === 'flexible' || layout === 'serverRenderedFlexible') && width !== null) {
     return fullWidthLayout({
@@ -49,6 +51,7 @@ export default function getLayoutAlgorithm<T>({
       logWhitespace: _logTwoColWhitespace,
       _getColumnSpanConfig,
       renderLoadingState,
+      whitespaceThreshold: _whitespaceThreshold,
     });
   }
   if (layout === 'uniformRow') {
@@ -74,5 +77,6 @@ export default function getLayoutAlgorithm<T>({
     width,
     _getColumnSpanConfig,
     renderLoadingState,
+    whitespaceThreshold: _whitespaceThreshold,
   });
 }
diff --git a/packages/gestalt/src/MasonryV2.tsx b/packages/gestalt/src/MasonryV2.tsx
@@ -161,6 +161,12 @@ type Props<T> = {
    * Experimental flag to enable dynamic heights on items. This only works if multi column items are enabled.
    */
   _dynamicHeights?: boolean;
+  /**
+   * Experimental prop to define how much whitespace is good enough to position multicolumn modules
+   *
+   * This is an experimental prop and may be removed or changed in the future
+   */
+  _whitespaceThreshold?: number;
 };
 
 type MasonryRef = {
@@ -370,6 +376,7 @@ function useLayout<T>({
   _getColumnSpanConfig,
   _loadingStateItems = [],
   _renderLoadingStateItems,
+  _whitespaceThreshold,
 }: {
   align: Align;
   columnWidth: number;
@@ -391,6 +398,7 @@ function useLayout<T>({
   _getColumnSpanConfig?: (item: T) => ColumnSpanConfig;
   _loadingStateItems?: ReadonlyArray<LoadingStateItem>;
   _renderLoadingStateItems?: Props<T>['_renderLoadingStateItems'];
+  _whitespaceThreshold?: number;
 }): {
   height: number;
   hasPendingMeasurements: boolean;
@@ -416,6 +424,7 @@ function useLayout<T>({
     _logTwoColWhitespace,
     _loadingStateItems,
     renderLoadingState,
+    _whitespaceThreshold,
   });
 
   const hasMultiColumnItems =
@@ -692,6 +701,7 @@ function Masonry<T>(
     _dynamicHeights,
     _loadingStateItems = [],
     _renderLoadingStateItems,
+    _whitespaceThreshold,
   }: Props<T>,
   ref:
     | {
@@ -815,6 +825,7 @@ function Masonry<T>(
       _getColumnSpanConfig,
       _loadingStateItems,
       _renderLoadingStateItems,
+      _whitespaceThreshold,
     });
 
   useFetchOnScroll({