Refactor layout providers, remove main group size in grid

MatiPl01 · MatiPl01 · commit b692a2806f1d · 2025-08-11T09:56:54.000+02:00
diff --git a/packages/react-native-sortables/src/providers/flex/layout/updates/insert/index.ts b/packages/react-native-sortables/src/providers/flex/layout/updates/insert/index.ts
@@ -3,10 +3,10 @@ import { useAnimatedReaction, useDerivedValue } from 'react-native-reanimated';
 
 import { useMutableValue } from '../../../../../integrations/reanimated';
 import type {
-  ControlledSizes,
   Coordinate,
   Dimension,
   FlexLayout,
+  ItemSizes,
   SortStrategyFactory
 } from '../../../../../types';
 import {
@@ -53,7 +53,7 @@ const useInsertStrategy: SortStrategyFactory = () => {
   let mainDimension: Dimension;
   let crossDimension: Dimension;
   let mainGap: SharedValue<number>;
-  let mainItemSizes: SharedValue<ControlledSizes>;
+  let mainItemSizes: SharedValue<ItemSizes>;
 
   if (isRow) {
     mainCoordinate = 'x';
diff --git a/packages/react-native-sortables/src/providers/flex/layout/updates/insert/utils.ts b/packages/react-native-sortables/src/providers/flex/layout/updates/insert/utils.ts
@@ -1,4 +1,4 @@
-import type { ControlledSizes } from '../../../../../types';
+import type { ItemSizes } from '../../../../../types';
 import { reorderInsert, resolveDimension } from '../../../../../utils';
 
 export type ItemGroupSwapProps = {
@@ -8,7 +8,7 @@ export type ItemGroupSwapProps = {
   groupSizeLimit: number;
   indexToKey: Array<string>;
   keyToIndex: Record<string, number>;
-  mainItemSizes: ControlledSizes;
+  mainItemSizes: ItemSizes;
   itemGroups: Array<Array<string>>;
   mainGap: number;
   fixedKeys: Record<string, boolean> | undefined;
@@ -35,7 +35,7 @@ const getGroupItemIndex = (
 
 export const getTotalGroupSize = (
   group: Array<string>,
-  mainItemSizes: ControlledSizes,
+  mainItemSizes: ItemSizes,
   gap: number
 ) => {
   'worklet';
diff --git a/packages/react-native-sortables/src/providers/flex/layout/utils/debug.ts b/packages/react-native-sortables/src/providers/flex/layout/utils/debug.ts
@@ -1,6 +1,6 @@
 import type { DebugRectUpdater } from '../../../../debug';
 import type {
-  ControlledSizes,
+  ItemSizes,
   FlexDirection,
   FlexLayout,
   Vector
@@ -17,8 +17,8 @@ export const updateLayoutDebugRects = (
   layout: FlexLayout,
   debugCrossAxisGapRects: Array<DebugRectUpdater>,
   debugMainAxisGapRects: Array<DebugRectUpdater>,
-  itemWidths: ControlledSizes,
-  itemHeights: ControlledSizes
+  itemWidths: ItemSizes,
+  itemHeights: ItemSizes
 ) => {
   'worklet';
   const isRow = flexDirection.startsWith('row');
diff --git a/packages/react-native-sortables/src/providers/flex/layout/utils/layout.ts b/packages/react-native-sortables/src/providers/flex/layout/utils/layout.ts
@@ -2,7 +2,7 @@ import { IS_WEB } from '../../../../constants';
 import type {
   AlignContent,
   AlignItems,
-  ControlledSizes,
+  ItemSizes,
   Direction,
   FlexAlignments,
   FlexLayout,
@@ -16,8 +16,8 @@ type AxisDirections = { cross: Direction; main: Direction };
 
 const createGroups = (
   indexToKey: Array<string>,
-  mainItemSizes: ControlledSizes,
-  crossItemSizes: ControlledSizes,
+  mainItemSizes: ItemSizes,
+  crossItemSizes: ItemSizes,
   gap: number,
   groupMainSizeLimit: number
 ): null | {
@@ -141,8 +141,8 @@ const calculateAlignment = (
 const handleLayoutCalculation = (
   groups: Array<Array<string>>,
   crossAxisGroupSizes: Array<number>,
-  mainItemSizes: ControlledSizes,
-  crossItemSizes: ControlledSizes,
+  mainItemSizes: ItemSizes,
+  crossItemSizes: ItemSizes,
   gaps: FlexLayoutProps['gaps'],
   axisDirections: AxisDirections,
   { alignContent, alignItems, justifyContent }: FlexAlignments,
diff --git a/packages/react-native-sortables/src/providers/grid/layout/GridLayoutProvider.tsx b/packages/react-native-sortables/src/providers/grid/layout/GridLayoutProvider.tsx
@@ -4,10 +4,7 @@ import { useAnimatedReaction } from 'react-native-reanimated';
 import { IS_WEB } from '../../../constants';
 import { useDebugContext } from '../../../debug';
 import type { Animatable } from '../../../integrations/reanimated';
-import {
-  useAnimatableValue,
-  useMutableValue
-} from '../../../integrations/reanimated';
+import { useAnimatableValue } from '../../../integrations/reanimated';
 import type { GridLayoutContextType } from '../../../types';
 import { useCommonValuesContext, useMeasurementsContext } from '../../shared';
 import { createProvider } from '../../utils';
@@ -59,13 +56,6 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
   const mainGap = isVertical ? columnGap : rowGap;
   const crossGap = isVertical ? rowGap : columnGap;
 
-  /**
-   * Size of the group of items determined by the parent container size.
-   * width - in vertical orientation (default) (columns are groups)
-   * height - in horizontal orientation (rows are groups)
-   */
-  const mainGroupSize = useMutableValue<null | number>(rowHeight ?? null);
-
   // MAIN GROUP SIZE UPDATER
   useAnimatedReaction(
     () => {
@@ -84,7 +74,6 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
         return;
       }
 
-      mainGroupSize.value = value;
       if (isVertical) {
         itemWidths.value = value;
       } else {
@@ -118,7 +107,6 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
       isVertical,
       itemHeights: itemHeights.value,
       itemWidths: itemWidths.value,
-      mainGroupSize: mainGroupSize.value,
       numGroups
     }),
     (props, previousProps) => {
@@ -128,10 +116,13 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
       // (e.g. skip animation when the browser window is resized)
       shouldAnimateLayout.value =
         !IS_WEB ||
-        !previousProps?.mainGroupSize ||
-        props.mainGroupSize === previousProps.mainGroupSize;
+        !previousProps?.itemHeights ||
+        !previousProps?.itemWidths ||
+        isVertical
+          ? props.itemWidths === previousProps?.itemWidths
+          : props.itemHeights === previousProps?.itemHeights;
 
-      if (!layout || mainGroupSize.value === null) {
+      if (!layout || !itemHeights.value || !itemWidths.value) {
         return;
       }
 
@@ -160,7 +151,6 @@ const { GridLayoutProvider, useGridLayoutContext } = createProvider(
       crossGap,
       isVertical,
       mainGap,
-      mainGroupSize,
       numGroups
     }
   };
diff --git a/packages/react-native-sortables/src/providers/grid/layout/updates/common.ts b/packages/react-native-sortables/src/providers/grid/layout/updates/common.ts
@@ -28,8 +28,7 @@ export const createGridStrategy =
       itemHeights,
       itemWidths
     } = useCommonValuesContext();
-    const { crossGap, isVertical, mainGap, mainGroupSize, numGroups } =
-      useGridLayoutContext();
+    const { crossGap, isVertical, mainGap, numGroups } = useGridLayoutContext();
     const { fixedItemKeys } = useCustomHandleContext() ?? {};
 
     const othersIndexToKey = useInactiveIndexToKey();
@@ -43,7 +42,6 @@ export const createGridStrategy =
         isVertical,
         itemHeights: itemHeights.value,
         itemWidths: itemWidths.value,
-        mainGroupSize: mainGroupSize.value,
         numGroups
       })
     );
@@ -71,11 +69,14 @@ export const createGridStrategy =
 
     return ({ activeIndex, dimensions, position }) => {
       'worklet';
+      const mainGroupSize = (isVertical ? itemWidths : itemHeights).value;
+
       if (
         !othersLayout.value ||
         crossContainerSize.value === null ||
         mainContainerSize.value === null ||
-        mainGroupSize.value === null
+        mainGroupSize === null ||
+        typeof mainGroupSize !== 'number'
       ) {
         return;
       }
@@ -162,7 +163,7 @@ export const createGridStrategy =
         if (mainBeforeBound !== Infinity) {
           mainIndex--;
         }
-        mainBeforeOffset = mainIndex * (mainGroupSize.value + mainGap.value);
+        mainBeforeOffset = mainIndex * (mainGroupSize + mainGap.value);
         mainBeforeBound = mainBeforeOffset - additionalOffset;
       } while (
         mainBeforeBound > 0 &&
@@ -178,8 +179,7 @@ export const createGridStrategy =
           mainIndex++;
         }
         mainAfterOffset =
-          mainIndex * (mainGroupSize.value + mainGap.value) +
-          mainGroupSize.value;
+          mainIndex * (mainGroupSize + mainGap.value) + mainGroupSize;
         mainAfterBound = mainAfterOffset + additionalOffset;
       } while (
         mainAfterBound < mainContainerSize.value &&
diff --git a/packages/react-native-sortables/src/providers/grid/layout/utils/layout.ts b/packages/react-native-sortables/src/providers/grid/layout/utils/layout.ts
@@ -13,10 +13,13 @@ export const calculateLayout = ({
   isVertical,
   itemHeights,
   itemWidths,
-  mainGroupSize,
   numGroups
 }: GridLayoutProps): GridLayout | null => {
   'worklet';
+  const mainGroupSize = (isVertical ? itemWidths : itemHeights) as
+    | null
+    | number;
+
   if (!mainGroupSize) {
     return null;
   }
diff --git a/packages/react-native-sortables/src/providers/shared/CommonValuesProvider.ts b/packages/react-native-sortables/src/providers/shared/CommonValuesProvider.ts
@@ -12,9 +12,9 @@ import type {
   ActiveItemSnapSettings,
   CommonValuesContextType,
   ControlledDimensions,
-  ControlledSizes,
   Dimensions,
   ItemDragSettings,
+  ItemSizes,
   ItemsLayoutTransitionMode,
   Vector
 } from '../../types';
@@ -76,10 +76,10 @@ const { CommonValuesContext, CommonValuesProvider, useCommonValuesContext } =
     // DIMENSIONS
     const containerWidth = useMutableValue<null | number>(null);
     const containerHeight = useMutableValue<null | number>(null);
-    const itemWidths = useMutableValue<ControlledSizes>(
+    const itemWidths = useMutableValue<ItemSizes>(
       controlledItemDimensions.width ? null : {}
     );
-    const itemHeights = useMutableValue<ControlledSizes>(
+    const itemHeights = useMutableValue<ItemSizes>(
       controlledItemDimensions.height ? null : {}
     );
     const activeItemDimensions = useMutableValue<Dimensions | null>(null);
diff --git a/packages/react-native-sortables/src/types/layout/flex.ts b/packages/react-native-sortables/src/types/layout/flex.ts
@@ -1,7 +1,7 @@
 import type { ViewStyle } from 'react-native';
 
 import type { NoUndef } from '../../helperTypes';
-import type { ControlledSizes, Dimensions, Vector } from './shared';
+import type { ItemSizes, Dimensions, Vector } from './shared';
 
 export type AlignContent = Exclude<
   NoUndef<ViewStyle['alignContent']>,
@@ -37,8 +37,8 @@ export type FlexLayoutProps = {
     row: number;
     column: number;
   };
-  itemWidths: ControlledSizes;
-  itemHeights: ControlledSizes;
+  itemWidths: ItemSizes;
+  itemHeights: ItemSizes;
   indexToKey: Array<string>;
   flexDirection: FlexDirection;
   flexWrap: FlexWrap;
diff --git a/packages/react-native-sortables/src/types/layout/grid.ts b/packages/react-native-sortables/src/types/layout/grid.ts
@@ -1,13 +1,12 @@
-import type { ControlledSizes, Dimensions, Vector } from './shared';
+import type { Dimensions, ItemSizes, Vector } from './shared';
 
 export type GridLayoutProps = {
-  mainGroupSize: null | number;
   gaps: {
     main: number;
     cross: number;
   };
-  itemHeights: ControlledSizes;
-  itemWidths: ControlledSizes;
+  itemHeights: ItemSizes;
+  itemWidths: ItemSizes;
   indexToKey: Array<string>;
   isVertical: boolean;
   numGroups: number;
diff --git a/packages/react-native-sortables/src/types/layout/shared.ts b/packages/react-native-sortables/src/types/layout/shared.ts
@@ -3,7 +3,7 @@ export type Dimensions = {
   height: number;
 };
 
-export type ControlledSizes = null | number | Record<string, number>;
+export type ItemSizes = null | number | Record<string, number>;
 
 export type MeasureCallback = (width: number, height: number) => void;
 
diff --git a/packages/react-native-sortables/src/types/providers/flex.ts b/packages/react-native-sortables/src/types/providers/flex.ts
@@ -2,14 +2,6 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import type { FlexDirection, FlexLayout } from '../layout';
 
-export type GridLayoutContextType = {
-  mainGroupSize: SharedValue<null | number>;
-  numGroups: number;
-  mainGap: SharedValue<number>;
-  crossGap: SharedValue<number>;
-  isVertical: boolean;
-};
-
 export type FlexLayoutContextType = {
   flexDirection: FlexDirection;
   columnGap: SharedValue<number>;
diff --git a/packages/react-native-sortables/src/types/providers/grid.ts b/packages/react-native-sortables/src/types/providers/grid.ts
@@ -0,0 +1,8 @@
+import type { SharedValue } from 'react-native-reanimated';
+
+export type GridLayoutContextType = {
+  numGroups: number;
+  mainGap: SharedValue<number>;
+  crossGap: SharedValue<number>;
+  isVertical: boolean;
+};
diff --git a/packages/react-native-sortables/src/types/providers/index.ts b/packages/react-native-sortables/src/types/providers/index.ts
@@ -1,2 +1,3 @@
-export type * from './layout';
+export type * from './flex';
+export type * from './grid';
 export type * from './shared';
diff --git a/packages/react-native-sortables/src/types/providers/shared.ts b/packages/react-native-sortables/src/types/providers/shared.ts
@@ -18,7 +18,7 @@ import type {
   DebugRectUpdater,
   DebugViews
 } from '../debug';
-import type { ControlledSizes, Dimensions, Vector } from '../layout/shared';
+import type { Dimensions, ItemSizes, Vector } from '../layout/shared';
 import type {
   ActiveItemDecorationSettings,
   ActiveItemSnapSettings,
@@ -60,8 +60,8 @@ export type CommonValuesContextType =
       controlledItemDimensions: ControlledDimensions;
       containerWidth: SharedValue<null | number>;
       containerHeight: SharedValue<null | number>;
-      itemWidths: SharedValue<ControlledSizes>;
-      itemHeights: SharedValue<ControlledSizes>;
+      itemWidths: SharedValue<ItemSizes>;
+      itemHeights: SharedValue<ItemSizes>;
       activeItemDimensions: SharedValue<Dimensions | null>;
 
       // DRAG STATE
diff --git a/packages/react-native-sortables/src/utils/dimensions.ts b/packages/react-native-sortables/src/utils/dimensions.ts
@@ -1,6 +1,6 @@
-import type { ControlledSizes, Dimensions } from '../types';
+import type { ItemSizes, Dimensions } from '../types';
 
-export const resolveDimension = (dimension: ControlledSizes, key: string) => {
+export const resolveDimension = (dimension: ItemSizes, key: string) => {
   'worklet';
   return (
     dimension &&
@@ -10,8 +10,8 @@ export const resolveDimension = (dimension: ControlledSizes, key: string) => {
 
 export const getItemDimensions = (
   key: string,
-  itemWidths: ControlledSizes,
-  itemHeights: ControlledSizes
+  itemWidths: ItemSizes,
+  itemHeights: ItemSizes
 ): Dimensions | null => {
   'worklet';
   const itemWidth = resolveDimension(itemWidths, key);
