chore: Clean up order updaters and sort strategies management (#415)

## Description

Just some cleanup and code improvements

Author: MatiPl01

example/app/src/examples/SortableGrid/PlaygroundExample.tsx

@@ -6,19 +6,13 @@ import Sortable from 'react-native-sortables';
 import { ScrollScreen } from '@/components';
 import { colors, radius, sizes, spacing, text } from '@/theme';
 
-const DATA = [
-  { height: 50, id: 1 },
-  { height: 50, id: 2 },
-  { height: 50, id: 3 },
-  { height: 300, id: 4 },
-  { height: 50, id: 5 }
-];
+const DATA = Array.from({ length: 12 }, (_, index) => `Item ${index + 1}`);
 
 export default function PlaygroundExample() {
-  const renderItem = useCallback<SortableGridRenderItem<(typeof DATA)[number]>>(
+  const renderItem = useCallback<SortableGridRenderItem<string>>(
     ({ item }) => (
-      <View style={[styles.card, { height: item.height }]}>
-        <Text style={styles.text}>{item.id}</Text>
+      <View style={styles.card}>
+        <Text style={styles.text}>{item}</Text>
       </View>
     ),
     []
@@ -32,8 +26,6 @@ export default function PlaygroundExample() {
         data={DATA}
         renderItem={renderItem}
         rowGap={10}
-        strategy='swap'
-        debug
       />
     </ScrollScreen>
   );

packages/react-native-sortables/src/components/SortableFlex.tsx

@@ -14,7 +14,6 @@ import {
   OrderUpdaterComponent,
   SharedProvider,
   useCommonValuesContext,
-  useFlexLayoutContext,
   useStrategyKey
 } from '../providers';
 import type { DropIndicatorSettings, SortableFlexProps } from '../types';
@@ -79,7 +78,6 @@ function SortableFlex(props: SortableFlexProps) {
           predefinedStrategies={FLEX_STRATEGIES}
           strategy={strategy}
           triggerOrigin={reorderTriggerOrigin}
-          useAdditionalValues={useFlexLayoutContext}
         />
         <SortableFlexInner
           childrenArray={childrenArray}

packages/react-native-sortables/src/components/SortableGrid.tsx

@@ -104,7 +104,6 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
           predefinedStrategies={GRID_STRATEGIES}
           strategy={strategy}
           triggerOrigin={reorderTriggerOrigin}
-          useAdditionalValues={useGridLayoutContext}
         />
         <SortableGridInner
           columnGap={columnGapValue}

packages/react-native-sortables/src/index.ts

@@ -6,11 +6,23 @@ import {
   SortableLayer,
   SortableTouchable
 } from './components';
-export { useItemContext } from './providers';
+import { MultiZoneProvider, PortalProvider } from './providers';
 
-import { MultiZoneProvider, PortalProvider, useZoneContext } from './providers';
 export type { CustomHandleProps, SortableLayerProps } from './components';
 export * from './constants/layoutAnimations';
+export { useItemContext } from './providers';
+export {
+  useAutoScrollContext,
+  useCommonValuesContext,
+  useCustomHandleContext,
+  useDragContext,
+  useFlexLayoutContext,
+  useGridLayoutContext,
+  useIsInPortalOutlet,
+  useMeasurementsContext,
+  usePortalContext,
+  useZoneContext
+} from './providers';
 export type {
   ActiveItemDroppedCallback,
   ActiveItemDroppedParams,
@@ -28,15 +40,14 @@ export type {
   SortableFlexDragEndParams,
   SortableFlexProps,
   SortableFlexStrategy,
-  SortableFlexStrategyFactory,
   SortableFlexStyle,
   SortableGridDragEndCallback,
   SortableGridDragEndParams,
   SortableGridProps,
   SortableGridRenderItem,
   SortableGridRenderItemInfo,
   SortableGridStrategy,
-  SortableGridStrategyFactory
+  SortStrategyFactory
 } from './types';
 export { DragActivationState } from './types';
 
@@ -232,6 +243,4 @@ const Sortable = {
   Touchable: SortableTouchable
 };
 
-export { useZoneContext };
-
 export default Sortable;

packages/react-native-sortables/src/providers/layout/flex/updates/insert/index.ts

@@ -6,7 +6,7 @@ import type {
   Coordinate,
   Dimension,
   FlexLayout,
-  SortableFlexStrategyFactory
+  SortStrategyFactory
 } from '../../../../../types';
 import {
   error,
@@ -16,29 +16,32 @@ import {
 } from '../../../../../utils';
 import {
   getAdditionalSwapOffset,
+  useCommonValuesContext,
+  useCustomHandleContext,
   useDebugBoundingBox
 } from '../../../../shared';
+import { useFlexLayoutContext } from '../../FlexLayoutProvider';
 import type { ItemGroupSwapProps, ItemGroupSwapResult } from './utils';
 import {
   getSwappedToGroupAfterIndices,
   getSwappedToGroupBeforeIndices,
   getTotalGroupSize
 } from './utils';
 
-const useInsertStrategy: SortableFlexStrategyFactory = ({
-  activeItemKey,
-  appliedLayout,
-  calculateFlexLayout,
-  columnGap,
-  fixedItemKeys,
-  flexDirection,
-  indexToKey,
-  itemDimensions,
-  keyToGroup,
-  keyToIndex,
-  rowGap,
-  useFlexLayoutReaction
-}) => {
+const useInsertStrategy: SortStrategyFactory = () => {
+  const { activeItemKey, indexToKey, itemDimensions, keyToIndex } =
+    useCommonValuesContext();
+  const {
+    appliedLayout,
+    calculateFlexLayout,
+    columnGap,
+    flexDirection,
+    keyToGroup,
+    rowGap,
+    useFlexLayoutReaction
+  } = useFlexLayoutContext();
+  const { fixedItemKeys } = useCustomHandleContext() ?? {};
+
   useAnimatedReaction(
     () => fixedItemKeys?.value,
     fixedKeys => {

packages/react-native-sortables/src/providers/layout/grid/updates/common.ts

@@ -4,28 +4,35 @@ import type {
   Coordinate,
   Dimension,
   ReorderFunction,
-  SortableGridStrategyFactory
+  SortStrategyFactory
 } from '../../../../types';
-import { getAdditionalSwapOffset, useDebugBoundingBox } from '../../../shared';
+import {
+  getAdditionalSwapOffset,
+  useCommonValuesContext,
+  useCustomHandleContext,
+  useDebugBoundingBox
+} from '../../../shared';
+import { useGridLayoutContext } from '../GridLayoutProvider';
 import { getCrossIndex, getMainIndex } from '../utils';
 
 export const createGridStrategy =
   (
     useInactiveIndexToKey: () => SharedValue<Array<string>>,
     reorder: ReorderFunction
-  ): SortableGridStrategyFactory =>
-  ({
-    containerHeight,
-    containerWidth,
-    crossGap,
-    fixedItemKeys,
-    indexToKey,
-    isVertical,
-    mainGap,
-    mainGroupSize,
-    numGroups,
-    useGridLayout
-  }) => {
+  ): SortStrategyFactory =>
+  () => {
+    const { containerHeight, containerWidth, indexToKey } =
+      useCommonValuesContext();
+    const {
+      crossGap,
+      isVertical,
+      mainGap,
+      mainGroupSize,
+      numGroups,
+      useGridLayout
+    } = useGridLayoutContext();
+    const { fixedItemKeys } = useCustomHandleContext() ?? {};
+
     const othersIndexToKey = useInactiveIndexToKey();
     const othersLayout = useGridLayout(othersIndexToKey);
     const debugBox = useDebugBoundingBox();

packages/react-native-sortables/src/providers/shared/components/OrderUpdaterComponent.tsx

@@ -1,17 +1,14 @@
 import { useMemo, useRef } from 'react';
 
-import { useDebugContext } from '../../../debug';
 import type {
-  AnyStrategyFactory,
   OrderUpdaterProps,
-  PredefinedStrategies
+  PredefinedStrategies,
+  SortStrategyFactory
 } from '../../../types';
 import { error, typedMemo } from '../../../utils';
-import { useCommonValuesContext } from '../CommonValuesProvider';
-import { useCustomHandleContext } from '../CustomHandleProvider';
 import { useOrderUpdater } from '../hooks';
 
-export function useStrategyKey(strategy: AnyStrategyFactory | string) {
+export function useStrategyKey(strategy: SortStrategyFactory | string) {
   const counterRef = useRef(0);
 
   return useMemo(
@@ -24,23 +21,16 @@ export function useStrategyKey(strategy: AnyStrategyFactory | string) {
 function OrderUpdaterComponent<P extends PredefinedStrategies>({
   predefinedStrategies,
   strategy,
-  triggerOrigin,
-  useAdditionalValues
+  triggerOrigin
 }: OrderUpdaterProps<P>) {
-  const factory =
+  const useStrategy =
     typeof strategy === 'string' ? predefinedStrategies[strategy] : strategy;
 
-  if (!factory && typeof strategy === 'string') {
-    throw error(`'${strategy}' is not a valid ordering strategy`);
+  if (!useStrategy || typeof useStrategy !== 'function') {
+    throw error(`'${String(useStrategy)}' is not a valid ordering strategy`);
   }
 
-  const updater = (factory as AnyStrategyFactory)({
-    debugContext: useDebugContext(),
-    ...useCommonValuesContext(),
-    ...useCustomHandleContext(),
-    ...useAdditionalValues()
-  });
-
+  const updater = useStrategy();
   useOrderUpdater(updater, triggerOrigin);
 
   return null;

packages/react-native-sortables/src/providers/shared/index.ts

@@ -1,4 +1,4 @@
-export { AutoScrollProvider } from './AutoScrollProvider';
+export { AutoScrollProvider, useAutoScrollContext } from './AutoScrollProvider';
 export {
   CommonValuesContext,
   CommonValuesProvider,

packages/react-native-sortables/src/types/props/flex.ts

@@ -8,13 +8,7 @@ import type {
   FlexWrap,
   JustifyContent
 } from '../layout/flex';
-import type {
-  CommonValuesContextType,
-  CustomHandleContextType,
-  DebugContextType,
-  FlexLayoutContextType,
-  OrderUpdater
-} from '../providers';
+import type { SortStrategyFactory } from '../providers';
 import type { DragEndParams, SharedProps } from './shared';
 
 /** Parameters passed to the onDragEnd callback of a sortable flex container */
@@ -37,24 +31,12 @@ export type SortableFlexDragEndCallback = (
   params: SortableFlexDragEndParams
 ) => void;
 
-/** Factory function for creating custom reordering strategies
- * @param props Context values and layout information
- * @returns Function to update item order
- */
-export type SortableFlexStrategyFactory = (
-  props: Simplify<
-    CommonValuesContextType &
-      FlexLayoutContextType &
-      Partial<CustomHandleContextType> & { debugContext?: DebugContextType }
-  >
-) => OrderUpdater;
-
 /** Strategy to use for reordering items:
  * - 'insert': Shifts all items between the dragged item and the target
  * position to make space for the dragged item
  * - Or a custom strategy factory function
  */
-export type SortableFlexStrategy = 'insert' | SortableFlexStrategyFactory;
+export type SortableFlexStrategy = 'insert' | SortStrategyFactory;
 
 /** Style properties for the flex container */
 export type SortableFlexStyle = {

packages/react-native-sortables/src/types/props/grid.ts

@@ -2,13 +2,7 @@ import type { ReactNode } from 'react';
 
 import type { Simplify } from '../../helperTypes';
 import type { AnimatableProps } from '../../integrations/reanimated';
-import type {
-  CommonValuesContextType,
-  CustomHandleContextType,
-  DebugContextType,
-  GridLayoutContextType,
-  OrderUpdater
-} from '../providers';
+import type { SortStrategyFactory } from '../providers';
 import type { DragEndParams, SharedProps } from './shared';
 
 /** Parameters passed to the onDragEnd callback of a sortable grid */
@@ -61,28 +55,13 @@ export type SortableGridRenderItem<I> = (
   info: SortableGridRenderItemInfo<I>
 ) => ReactNode;
 
-/** Factory function for creating custom reordering strategies
- * @param props Context values and layout information
- * @returns Function to update item order
- */
-export type SortableGridStrategyFactory = (
-  props: Simplify<
-    CommonValuesContextType &
-      GridLayoutContextType &
-      Partial<CustomHandleContextType> & { debugContext?: DebugContextType }
-  >
-) => OrderUpdater;
-
 /** Strategy to use for reordering items:
  * - 'insert': Shifts all items between the dragged item and the target
  * position to make space for the dragged item
  * - 'swap': Swaps the dragged item with the item at the target position
  * - Or a custom strategy factory function
  */
-export type SortableGridStrategy =
-  | 'insert'
-  | 'swap'
-  | SortableGridStrategyFactory;
+export type SortableGridStrategy = 'insert' | 'swap' | SortStrategyFactory;
 
 /** Props for the SortableGrid component */
 export type SortableGridProps<I> = Simplify<