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

Powerful Sortable Components for Flexible Content Reordering in React Native

"use strict";

import React from "react";
import Animated, { LinearTransition, useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { EMPTY_OBJECT, IS_WEB } from '../../constants';
import { DebugOutlet } from '../../debug';
import { useCommonValuesContext } from '../../providers';
import AnimatedOnLayoutView from './AnimatedOnLayoutView';
import DropIndicator from './DropIndicator';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function SortableContainer({
  children,
  debug,
  dimensionsAnimationType,
  DropIndicatorComponent,
  dropIndicatorStyle,
  onLayout,
  overflow,
  showDropIndicator,
  style
}) {
  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)
    };
  }, [dimensionsAnimationType]);
  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
    // @ts-expect-error - contain is a correct CSS prop on web
    ,
    style: [outerContainerStyle, IS_WEB && {
      contain: 'layout'
    }],
    children: [showDropIndicator && /*#__PURE__*/_jsx(DropIndicator, {
      DropIndicatorComponent: DropIndicatorComponent,
      style: dropIndicatorStyle
    }), /*#__PURE__*/_jsx(AnimatedOnLayoutView, {
      ref: containerRef,
      style: [style, innerContainerStyle],
      onLayout: ({
        nativeEvent: {
          layout
        }
      }) => {
        onLayout(layout.width, layout.height);
      },
      children: children
    }), debug && /*#__PURE__*/_jsx(DebugOutlet, {})]
  });
}
//# sourceMappingURL=SortableContainer.js.map