react-native-sortables/dist/module/components/shared/SortableContainer.js

Powerful Sortable Components for Flexible Content Reordering in React Native

"use strict";

import React, { createElement as _createElement } from "react";
import { memo, useSyncExternalStore } from 'react';
import Animated, { LinearTransition, useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { EMPTY_OBJECT, IS_WEB } from '../../constants';
import { DebugOutlet } from '../../debug';
import { useCommonValuesContext, useItemsContext } from '../../providers';
import AnimatedOnLayoutView from './AnimatedOnLayoutView';
import { DraggableView } from './DraggableView';
import DropIndicator from './DropIndicator';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function SortableContainer({
  containerStyle,
  debug,
  dimensionsAnimationType,
  DropIndicatorComponent,
  dropIndicatorStyle,
  itemEntering,
  itemExiting,
  itemStyle,
  onLayout,
  overflow,
  showDropIndicator
}) {
  const {
    activeItemDropped,
    activeItemKey,
    containerHeight,
    containerRef,
    containerWidth,
    controlledContainerDimensions,
    shouldAnimateLayout,
    usesAbsoluteLayout
  } = useCommonValuesContext();
  const animateWorklet = dimensionsAnimationType === 'worklet';
  const animateLayout = dimensionsAnimationType === 'layout';
  const outerContainerStyle = useAnimatedStyle(() => {
    if (!usesAbsoluteLayout.value) {
      return EMPTY_OBJECT;
    }
    const maybeAnimate = (value, animate) => animate && shouldAnimateLayout.value && value !== null ? withTiming(value) : value;
    return {
      height: maybeAnimate(controlledContainerDimensions.height ? containerHeight.value : null, animateWorklet),
      overflow: activeItemKey.value !== null || !activeItemDropped.value ? 'visible' : overflow,
      width: maybeAnimate(controlledContainerDimensions.width ? containerWidth.value : null, animateWorklet)
    };
  });
  const innerContainerStyle = useAnimatedStyle(() => ({
    ...(controlledContainerDimensions.height && containerHeight.value !== null && {
      height: containerHeight.value
    }),
    ...(controlledContainerDimensions.width && containerWidth.value !== null && {
      width: containerWidth.value
    })
  }));
  return /*#__PURE__*/_jsxs(Animated.View, {
    layout: animateLayout ? LinearTransition : undefined,
    style: [outerContainerStyle, !controlledContainerDimensions.width && {
      minWidth: '100%'
    },
    // @ts-expect-error - contain is a correct CSS prop on web
    IS_WEB && {
      contain: 'layout'
    }],
    children: [showDropIndicator && /*#__PURE__*/_jsx(DropIndicator, {
      DropIndicatorComponent: DropIndicatorComponent,
      style: dropIndicatorStyle
    }), /*#__PURE__*/_jsx(AnimatedOnLayoutView, {
      ref: containerRef,
      style: [containerStyle, innerContainerStyle],
      onLayout: ({
        nativeEvent: {
          layout
        }
      }) => onLayout(layout.width, layout.height),
      children: /*#__PURE__*/_jsx(ItemsOutlet, {
        itemEntering: itemEntering,
        itemExiting: itemExiting,
        itemStyle: itemStyle
      })
    }), debug && /*#__PURE__*/_jsx(DebugOutlet, {})]
  });
}
const ItemsOutlet = /*#__PURE__*/memo(function ItemsOutlet({
  itemStyle,
  ...rest
}) {
  const {
    getKeys,
    subscribeKeys
  } = useItemsContext();

  // Re-render the list of cells only if the keys array changes
  const keys = useSyncExternalStore(subscribeKeys, getKeys, getKeys // SSR fallback
  );
  return keys.map(key => /*#__PURE__*/_createElement(DraggableView, {
    ...rest,
    itemKey: key,
    key: key,
    style: itemStyle
  }));
});
//# sourceMappingURL=SortableContainer.js.map