react-native-sortables/dist/module/components/shared/DraggableView/ItemCell.js

Powerful Sortable Components for Flexible Content Reordering in React Native

"use strict";

import React from "react";
import { Platform, StyleSheet } from 'react-native';
import Animated, { useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
import { HIDDEN_X_OFFSET } from '../../../constants';
import { useCommonValuesContext, useItemDecoration } from '../../../providers';
import { resolveDimension } from '../../../utils';
import AnimatedOnLayoutView from '../AnimatedOnLayoutView';
import { jsx as _jsx } from "react/jsx-runtime";
export default function ItemCell({
  activationAnimationProgress,
  cellStyle,
  children,
  entering,
  exiting,
  hidden,
  isActive,
  itemKey,
  onLayout
}) {
  const {
    controlledItemDimensions,
    itemHeights,
    itemWidths
  } = useCommonValuesContext();
  const decoration = useItemDecoration(itemKey, isActive, activationAnimationProgress);
  const controlledDimensions = useDerivedValue(() => {
    const result = {};
    if (controlledItemDimensions.width) {
      result.width = resolveDimension(itemWidths.value, itemKey) ?? undefined;
    }
    if (controlledItemDimensions.height) {
      result.height = resolveDimension(itemHeights.value, itemKey) ?? undefined;
    }
    return result;
  });
  const decorationStyle = useAnimatedStyle(() => decoration.value);
  const dimensionsStyle = useAnimatedStyle(() => controlledDimensions.value);
  return /*#__PURE__*/_jsx(Animated.View, {
    style: cellStyle,
    children: /*#__PURE__*/_jsx(AnimatedOnLayoutView, {
      entering: entering,
      exiting: exiting,
      style: [styles.decoration, decorationStyle, dimensionsStyle, hidden && styles.hidden],
      onLayout: hidden ? undefined : onLayout,
      children: children
    })
  });
}
const styles = StyleSheet.create({
  decoration: Platform.select({
    android: {
      elevation: 5
    },
    default: {},
    native: {
      shadowOffset: {
        height: 0,
        width: 0
      },
      shadowOpacity: 1,
      shadowRadius: 5
    },
    web: {
      flex: 1
    }
  }),
  hidden: {
    // We change the x position to hide items when teleported (we can't use
    // non-layout props like opacity as they are sometimes not updated via
    // Reanimated on the Old Architecture; we also can't use any props that
    // affect item dimensions, etc., so the safest way is to put the item
    // far away from the viewport to hide it)
    left: HIDDEN_X_OFFSET
  }
});
//# sourceMappingURL=ItemCell.js.map