diff --git a/packages/gestalt/src/Masonry/defaultTwoColumnModuleLayout.js b/packages/gestalt/src/Masonry/defaultTwoColumnModuleLayout.js index d04b47e8de..d589ebcddb 100644 --- a/packages/gestalt/src/Masonry/defaultTwoColumnModuleLayout.js +++ b/packages/gestalt/src/Masonry/defaultTwoColumnModuleLayout.js @@ -40,23 +40,6 @@ function calculateTwoColumnModuleWidth(columnWidth: number, gutter: number): num return columnWidth * 2 + gutter; } -function calculateSplitIndex( - itemsWithoutPositions: $ReadOnlyArray, -): number { - // Currently we only support one two column item at the same time, more items will be supporped soon - const twoColumnIndex = itemsWithoutPositions.findIndex((item) => item.columnSpan === 2); - - if (twoColumnIndex < TWO_COL_ITEMS_MEASURE_BATCH_SIZE) { - return 0; - } - - if (twoColumnIndex + TWO_COL_ITEMS_MEASURE_BATCH_SIZE > itemsWithoutPositions.length) { - return itemsWithoutPositions.length - TWO_COL_ITEMS_MEASURE_BATCH_SIZE; - } - - return twoColumnIndex; -} - function initializeHeightsArray({ centerOffset, columnCount, @@ -302,8 +285,16 @@ const defaultTwoColumnModuleLayout = ({ if (hasTwoColumnItems) { // If the number of items to position is greater that the batch size // we identify the batch with the two column item and apply the graph only to those items - const splitIndex = calculateSplitIndex(itemsWithoutPositions); + // Currently we only support one two column item at the same time, more items will be supporped soon + const twoColumnIndex = itemsWithoutPositions.indexOf(twoColumnItems[0]); + + // If the number of items to position is greater that the batch size + // we identify the batch with the two column item and apply the graph only to those items const shouldBatchItems = itemsWithoutPositions.length > TWO_COL_ITEMS_MEASURE_BATCH_SIZE; + const splitIndex = + twoColumnIndex + TWO_COL_ITEMS_MEASURE_BATCH_SIZE > itemsWithoutPositions.length + ? itemsWithoutPositions.length - TWO_COL_ITEMS_MEASURE_BATCH_SIZE + : twoColumnIndex; const pre = shouldBatchItems ? itemsWithoutPositions.slice(0, splitIndex) : []; const batchWithTwoColumnItems = shouldBatchItems ? itemsWithoutPositions.slice(splitIndex, splitIndex + TWO_COL_ITEMS_MEASURE_BATCH_SIZE) diff --git a/packages/gestalt/src/Masonry/defaultTwoColumnModuleLayout.test.js b/packages/gestalt/src/Masonry/defaultTwoColumnModuleLayout.test.js index 22b0014043..cc049ef8db 100644 --- a/packages/gestalt/src/Masonry/defaultTwoColumnModuleLayout.test.js +++ b/packages/gestalt/src/Masonry/defaultTwoColumnModuleLayout.test.js @@ -277,7 +277,7 @@ describe('two column layout test cases', () => { ]); }); - test('returns positions for all items when two columns item is on a large batch', () => { + test('correctly positions two column items regardless of on where they are in the batch', () => { const measurementStore = new MeasurementStore<{ ... }, number>(); const positionCache = new MeasurementStore<{ ... }, Position>(); const heightsCache = new HeightsStore(); @@ -351,6 +351,7 @@ describe('two column layout test cases', () => { measurementStore.set(item, item.height); }); layout(mockItems); + // third row, first column expect(positionCache.get(mockItems[twoColumnModuleIndex])).toEqual({ height: 200, left: 99, @@ -373,10 +374,11 @@ describe('two column layout test cases', () => { measurementStore.set(item, item.height); }); layout(mockItems); + // item 5 so second row, second column expect(positionCache.get(mockItems[twoColumnModuleIndex])).toEqual({ height: 200, - left: 99, - top: 0, + left: 353, + top: 214, width: 494, }); });