chore: Sortable grid and flex providers refactor (#445)

## Description

This PR adds `FlexProvider` and `GridProvider` components to clean up
implementation of the `SortableFlex` and `SortableGrid` components and
for easier implementation of the grid or flex specific providers.

Author: MatiPl01

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

@@ -9,13 +9,9 @@ import {
 } from '../constants';
 import { useDragEndHandler } from '../hooks';
 import {
-  FLEX_STRATEGIES,
-  FlexLayoutProvider,
-  OrderUpdaterComponent,
-  SharedProvider,
+  FlexProvider,
   useCommonValuesContext,
-  useMeasurementsContext,
-  useStrategyKey
+  useMeasurementsContext
 } from '../providers';
 import type { DropIndicatorSettings, SortableFlexProps } from '../types';
 import { getPropsWithDefaults, orderItems, validateChildren } from '../utils';
@@ -28,14 +24,7 @@ const CONTROLLED_ITEM_DIMENSIONS = {
 
 function SortableFlex(props: SortableFlexProps) {
   const {
-    rest: {
-      children,
-      height,
-      onDragEnd: _onDragEnd,
-      strategy,
-      width,
-      ...styleProps
-    },
+    rest: { children, onDragEnd: _onDragEnd, strategy, ...styleProps },
     sharedProps: {
       debug,
       dimensionsAnimationType,
@@ -44,7 +33,6 @@ function SortableFlex(props: SortableFlexProps) {
       itemEntering,
       itemExiting,
       overflow,
-      reorderTriggerOrigin,
       showDropIndicator,
       ...sharedProps
     }
@@ -53,7 +41,7 @@ function SortableFlex(props: SortableFlexProps) {
   const childrenArray = validateChildren(children);
   const itemKeys = childrenArray.map(([key]) => key);
 
-  const { flexDirection, flexWrap } = styleProps;
+  const { flexDirection, flexWrap, height, width, ...restStyle } = styleProps;
   const isColumn = flexDirection.startsWith('column');
 
   const controlledContainerDimensions = useMemo(() => {
@@ -73,41 +61,39 @@ function SortableFlex(props: SortableFlexProps) {
       }
   });
 
+  const containerStyle = [
+    restStyle,
+    {
+      flexDirection,
+      flexWrap,
+      height: height === 'fill' ? undefined : height,
+      width: width === 'fill' ? undefined : width
+    }
+  ];
+
   return (
-    <SharedProvider
+    <FlexProvider
       {...sharedProps}
       controlledContainerDimensions={controlledContainerDimensions}
       controlledItemDimensions={CONTROLLED_ITEM_DIMENSIONS}
       debug={debug}
       itemKeys={itemKeys}
+      strategy={strategy}
+      styleProps={styleProps}
       onDragEnd={onDragEnd}>
-      <FlexLayoutProvider {...styleProps} itemsCount={itemKeys.length}>
-        <OrderUpdaterComponent
-          key={useStrategyKey(strategy)}
-          predefinedStrategies={FLEX_STRATEGIES}
-          strategy={strategy}
-          triggerOrigin={reorderTriggerOrigin}
-        />
-        <SortableFlexInner
-          childrenArray={childrenArray}
-          debug={debug}
-          dimensionsAnimationType={dimensionsAnimationType}
-          DropIndicatorComponent={DropIndicatorComponent}
-          dropIndicatorStyle={dropIndicatorStyle}
-          itemEntering={itemEntering}
-          itemExiting={itemExiting}
-          overflow={overflow}
-          showDropIndicator={showDropIndicator}
-          style={[
-            styleProps,
-            {
-              height: height === 'fill' ? undefined : height,
-              width: width === 'fill' ? undefined : width
-            }
-          ]}
-        />
-      </FlexLayoutProvider>
-    </SharedProvider>
+      <SortableFlexInner
+        childrenArray={childrenArray}
+        debug={debug}
+        dimensionsAnimationType={dimensionsAnimationType}
+        DropIndicatorComponent={DropIndicatorComponent}
+        dropIndicatorStyle={dropIndicatorStyle}
+        itemEntering={itemEntering}
+        itemExiting={itemExiting}
+        overflow={overflow}
+        showDropIndicator={showDropIndicator}
+        style={containerStyle}
+      />
+    </FlexProvider>
   );
 }
 
@@ -184,8 +170,8 @@ function SortableFlexInner({
       })}>
       {childrenArray.map(([key, child]) => (
         <DraggableView
-          entering={itemEntering ?? undefined}
-          exiting={itemExiting ?? undefined}
+          itemEntering={itemEntering}
+          itemExiting={itemExiting}
           itemKey={key}
           key={key}
           style={styles.styleOverride}>

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

@@ -7,14 +7,7 @@ import { runOnUI, useAnimatedStyle } from 'react-native-reanimated';
 import { DEFAULT_SORTABLE_GRID_PROPS, IS_WEB } from '../constants';
 import { useDragEndHandler } from '../hooks';
 import { useAnimatableValue } from '../integrations/reanimated';
-import {
-  GRID_STRATEGIES,
-  GridLayoutProvider,
-  OrderUpdaterComponent,
-  SharedProvider,
-  useMeasurementsContext,
-  useStrategyKey
-} from '../providers';
+import { GridProvider, useMeasurementsContext } from '../providers';
 import type {
   DropIndicatorSettings,
   SortableGridProps,
@@ -97,47 +90,40 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
   });
 
   return (
-    <SharedProvider
+    <GridProvider
       {...sharedProps}
+      columnGap={columnGapValue}
       controlledContainerDimensions={controlledContainerDimensions}
       controlledItemDimensions={controlledItemDimensions}
       debug={debug}
+      isVertical={isVertical}
       itemKeys={itemKeys}
+      numGroups={groups}
+      numItems={data.length}
+      reorderTriggerOrigin={reorderTriggerOrigin}
+      rowGap={rowGapValue}
+      rowHeight={rowHeight} // must be specified for horizontal grids
+      strategy={strategy}
       onDragEnd={onDragEnd}>
-      <GridLayoutProvider
+      <SortableGridInner
         columnGap={columnGapValue}
+        data={data}
+        debug={debug}
+        dimensionsAnimationType={dimensionsAnimationType}
+        DropIndicatorComponent={DropIndicatorComponent}
+        dropIndicatorStyle={dropIndicatorStyle}
+        groups={groups}
         isVertical={isVertical}
-        numGroups={groups}
-        numItems={data.length}
+        itemEntering={itemEntering}
+        itemExiting={itemExiting}
+        itemKeys={itemKeys}
+        overflow={overflow}
+        renderItem={renderItem}
         rowGap={rowGapValue}
-        rowHeight={rowHeight} // horizontal grid only
-      >
-        <OrderUpdaterComponent
-          key={useStrategyKey(strategy)}
-          predefinedStrategies={GRID_STRATEGIES}
-          strategy={strategy}
-          triggerOrigin={reorderTriggerOrigin}
-        />
-        <SortableGridInner
-          columnGap={columnGapValue}
-          data={data}
-          debug={debug}
-          dimensionsAnimationType={dimensionsAnimationType}
-          DropIndicatorComponent={DropIndicatorComponent}
-          dropIndicatorStyle={dropIndicatorStyle}
-          groups={groups}
-          isVertical={isVertical}
-          itemEntering={itemEntering}
-          itemExiting={itemExiting}
-          itemKeys={itemKeys}
-          overflow={overflow}
-          renderItem={renderItem}
-          rowGap={rowGapValue}
-          rowHeight={rowHeight!} // must be specified for horizontal grids
-          showDropIndicator={showDropIndicator}
-        />
-      </GridLayoutProvider>
-    </SharedProvider>
+        rowHeight={rowHeight!} // must be specified for horizontal grids
+        showDropIndicator={showDropIndicator}
+      />
+    </GridProvider>
   );
 }
 
@@ -210,6 +196,19 @@ function SortableGridInner<I>({
       : { height: rowHeight }
   );
 
+  const itemStyle = useMemo(
+    () => [animatedItemStyle, !isVertical && styles.horizontalStyleOverride],
+    [animatedItemStyle, isVertical]
+  );
+
+  const sharedItemProps = {
+    itemEntering,
+    itemExiting,
+    itemKeys,
+    renderItem,
+    style: itemStyle
+  };
+
   return (
     <SortableContainer
       {...containerProps}
@@ -222,17 +221,11 @@ function SortableGridInner<I>({
       })}>
       {zipArrays(data, itemKeys).map(([item, key], index) => (
         <SortableGridItem
-          entering={itemEntering ?? undefined}
-          exiting={itemExiting ?? undefined}
+          {...sharedItemProps}
           index={index}
           item={item}
           itemKey={key}
           key={key}
-          renderItem={renderItem}
-          style={[
-            animatedItemStyle,
-            !isVertical && styles.horizontalStyleOverride
-          ]}
         />
       ))}
     </SortableContainer>

packages/react-native-sortables/src/components/shared/DraggableView/DraggableView.tsx

@@ -32,16 +32,17 @@ const CommonValuesContextProvider = getContextProvider(CommonValuesContext);
 
 export type DraggableViewProps = PropsWithChildren<{
   itemKey: string;
-  entering: LayoutAnimation | undefined;
-  exiting: LayoutAnimation | undefined;
+  itemEntering: LayoutAnimation | null;
+  itemExiting: LayoutAnimation | null;
   style?: AnimatedStyleProp;
 }>;
 
 function DraggableView({
   children,
+  itemEntering,
+  itemExiting,
   itemKey: key,
-  style,
-  ...layoutAnimations
+  style
 }: DraggableViewProps) {
   const portalContext = usePortalContext();
   const commonValuesContext = useCommonValuesContext();
@@ -112,9 +113,10 @@ function DraggableView({
   const renderItemCell = (hidden = false) => {
     const innerComponent = (
       <ItemCell
-        {...layoutAnimations}
         {...sharedCellProps}
         cellStyle={[style, itemStyles]}
+        entering={itemEntering ?? undefined}
+        exiting={itemExiting ?? undefined}
         hidden={hidden}>
         <LayoutAnimationConfig skipEntering={false} skipExiting={false}>
           {children}

packages/react-native-sortables/src/components/shared/SortableContainer.tsx

@@ -17,7 +17,7 @@ import type {
 import AnimatedOnLayoutView from './AnimatedOnLayoutView';
 import DropIndicator from './DropIndicator';
 
-type AnimatedHeightContainerProps = PropsWithChildren<
+export type SortableContainerProps = PropsWithChildren<
   DropIndicatorSettings & {
     dimensionsAnimationType: DimensionsAnimation;
     overflow: Overflow;
@@ -37,7 +37,7 @@ export default function SortableContainer({
   overflow,
   showDropIndicator,
   style
-}: AnimatedHeightContainerProps) {
+}: SortableContainerProps) {
   const {
     activeItemDropped,
     activeItemKey,

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

@@ -3,7 +3,10 @@ export {
   type CustomHandleProps
 } from './CustomHandle';
 export * from './DraggableView';
-export { default as SortableContainer } from './SortableContainer';
+export {
+  default as SortableContainer,
+  type SortableContainerProps
+} from './SortableContainer';
 export {
   default as SortableLayer,
   type SortableLayerProps