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 { Dimensions, StyleSheet } from 'react-native';
import Animated, { LinearTransition, useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { EMPTY_OBJECT, IS_WEB } from '../../constants';
import { DebugOutlet } from '../../debug';
import { useCommonValuesContext, useMeasurementsContext } from '../../providers';
import AnimatedOnLayoutView from './AnimatedOnLayoutView';
import DropIndicator from './DropIndicator';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SCREEN_DIMENSIONS = Dimensions.get('screen');
export default function SortableContainer({
  children,
  debug,
  dimensionsAnimationType,
  DropIndicatorComponent,
  dropIndicatorStyle,
  overflow,
  showDropIndicator,
  style
}) {
  const {
    activeItemDropped,
    activeItemKey,
    containerHeight,
    containerRef,
    containerWidth,
    controlledContainerDimensions,
    shouldAnimateLayout,
    usesAbsoluteLayout
  } = useCommonValuesContext();
  const {
    handleHelperContainerMeasurement,
    measurementsContainerRef
  } = useMeasurementsContext();
  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;
    const ctrl = controlledContainerDimensions.value;
    return {
      height: maybeAnimate(ctrl.height ? containerHeight.value : null, animateWorklet),
      overflow: activeItemKey.value !== null || !activeItemDropped.value ? 'visible' : overflow,
      width: maybeAnimate(ctrl.width ? containerWidth.value : null, animateWorklet)
    };
  }, [dimensionsAnimationType]);
  const innerContainerStyle = useAnimatedStyle(() => {
    if (!usesAbsoluteLayout.value) {
      return EMPTY_OBJECT;
    }
    const minHeight =
    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
    containerHeight.value || SCREEN_DIMENSIONS.height;
    const minWidth =
    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
    containerWidth.value || SCREEN_DIMENSIONS.width;
    return {
      minHeight,
      minWidth
    };
  });
  const animatedMeasurementsContainerStyle = useAnimatedStyle(() => {
    const ctrl = controlledContainerDimensions.value;
    const height = ctrl.height ? containerHeight.value : undefined;
    const width = ctrl.width ? containerWidth.value : undefined;
    if (!height && !width) {
      return EMPTY_OBJECT;
    }
    return {
      height,
      width
    };
  });
  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: measurementsContainerRef,
      style: [StyleSheet.absoluteFill, animatedMeasurementsContainerStyle],
      onLayout: handleHelperContainerMeasurement
    }), /*#__PURE__*/_jsx(Animated.View, {
      ref: containerRef,
      style: [style, innerContainerStyle],
      children: children
    }), debug && /*#__PURE__*/_jsx(DebugOutlet, {})]
  });
}
//# sourceMappingURL=SortableContainer.js.map