react-native-sortables/dist/module/providers/shared/hooks/useItemDecoration.js

Powerful Sortable Components for Flexible Content Reordering in React Native

"use strict";

import { interpolate, interpolateColor, useDerivedValue, withTiming } from 'react-native-reanimated';
import { IS_ANDROID, IS_WEB } from '../../../constants';
import { useCommonValuesContext } from '../CommonValuesProvider';
export default function useItemDecoration(key, isActive, activationAnimationProgress) {
  const {
    activationAnimationDuration,
    activeItemOpacity,
    activeItemScale,
    activeItemShadowOpacity,
    inactiveAnimationProgress,
    inactiveItemOpacity,
    inactiveItemScale,
    prevActiveItemKey
  } = useCommonValuesContext();
  const adjustedInactiveProgress = useDerivedValue(() => {
    if (isActive.value || prevActiveItemKey.value === key) {
      return withTiming(0, {
        duration: activationAnimationDuration.value
      });
    }
    return interpolate(activationAnimationProgress.value, [0, 1], [inactiveAnimationProgress.value, 0]);
  });
  return useDerivedValue(() => {
    const progress = activationAnimationProgress.value;
    const zeroProgressOpacity = interpolate(adjustedInactiveProgress.value, [0, 1], [1, inactiveItemOpacity.value]);
    const zeroProgressScale = interpolate(adjustedInactiveProgress.value, [0, 1], [1, inactiveItemScale.value]);
    let shadow;
    if (!IS_ANDROID) {
      const shadowColor = interpolateColor(interpolate(progress, [0, 1], [0, activeItemShadowOpacity.value]), [0, 1], ['transparent', 'black']);
      shadow = IS_WEB ? {
        filter: `drop-shadow(0px 0px 5px ${shadowColor})`
      } : {
        shadowColor
      };
    }
    return {
      ...shadow,
      opacity: interpolate(progress, [0, 1], [zeroProgressOpacity, activeItemOpacity.value]),
      transform: [{
        scale: interpolate(progress, [0, 1], [zeroProgressScale, activeItemScale.value])
      }]
    };
  });
}
//# sourceMappingURL=useItemDecoration.js.map