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

Powerful Sortable Components for Flexible Content Reordering in React Native

"use strict";

import React from "react";
import { memo } from 'react';
import { StyleSheet } from 'react-native';
import Animated, { Easing, useAnimatedReaction, useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';
import { useMutableValue } from '../../integrations/reanimated';
import { useCommonValuesContext, useItemDimensions } from '../../providers';
import { jsx as _jsx } from "react/jsx-runtime";
const DEFAULT_STYLE = {
  opacity: 0
};
function DropIndicator({
  DropIndicatorComponent,
  style
}) {
  const {
    activeAnimationProgress,
    activeItemDropped,
    activeItemKey,
    indexToKey,
    itemPositions,
    keyToIndex
  } = useCommonValuesContext();

  // Clone the array in order to prevent user from mutating the internal state
  const orderedItemKeys = useDerivedValue(() => [...indexToKey.value]);
  const dropIndex = useMutableValue(0);
  const dropPosition = useMutableValue({
    x: 0,
    y: 0
  });
  const prevUpdateItemKey = useMutableValue(null);
  const dimensions = useItemDimensions(activeItemKey);
  const x = useMutableValue(null);
  const y = useMutableValue(null);
  useAnimatedReaction(() => ({
    dropped: activeItemDropped.value,
    key: activeItemKey.value,
    kToI: keyToIndex.value,
    positions: itemPositions.value
  }), ({
    dropped,
    key,
    kToI,
    positions
  }) => {
    if (key !== null) {
      dropIndex.value = kToI[key] ?? 0;
      dropPosition.value = positions[key] ?? {
        x: 0,
        y: 0
      };
      const update = (target, value) => {
        if (target.value === null || prevUpdateItemKey.value === null) {
          target.value = value;
        } else {
          target.value = withTiming(value, {
            easing: Easing.out(Easing.ease)
          });
        }
      };
      update(x, dropPosition.value.x);
      update(y, dropPosition.value.y);
    } else if (dropped) {
      x.value = null;
      y.value = null;
    }
    prevUpdateItemKey.value = key;
  });
  const animatedStyle = useAnimatedStyle(() => {
    const translateX = x.value;
    const translateY = y.value;
    if (translateX === null || translateY === null || activeItemDropped.value) {
      return DEFAULT_STYLE;
    }
    return {
      ...dimensions.value,
      opacity: 1,
      transform: [{
        translateX
      }, {
        translateY
      }]
    };
  });
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [styles.container, animatedStyle],
    children: /*#__PURE__*/_jsx(DropIndicatorComponent, {
      activeAnimationProgress: activeAnimationProgress,
      activeItemKey: activeItemKey,
      dropIndex: dropIndex,
      dropPosition: dropPosition,
      orderedItemKeys: orderedItemKeys,
      style: style
    })
  });
}
const styles = StyleSheet.create({
  container: {
    position: 'absolute'
  }
});
export default /*#__PURE__*/memo(DropIndicator);
//# sourceMappingURL=DropIndicator.js.map