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 } from 'react-native-reanimated';
import { HIDDEN_X_OFFSET, IS_WEB } from '../../../constants';
import { useCommonValuesContext, useItemDecoration } from '../../../providers';
import AnimatedOnLayoutView from '../AnimatedOnLayoutView';
import { jsx as _jsx } from "react/jsx-runtime";
export default function ItemCell({
  activationAnimationProgress,
  baseStyle,
  children,
  entering,
  exiting,
  hidden,
  isActive,
  itemKey,
  layoutStyleValue,
  onLayout
}) {
  const {
    overriddenCellDimensions
  } = useCommonValuesContext();
  const decorationStyleValue = useItemDecoration(itemKey, isActive, activationAnimationProgress);
  const animatedCellStyle = useAnimatedStyle(() => ({
    ...decorationStyleValue.value,
    ...layoutStyleValue.value,
    transform: [...(layoutStyleValue.value.transform ?? []), ...(decorationStyleValue.value.transform ?? [])],
    ...(!IS_WEB && overriddenCellDimensions.value)
  }));
  let innerAnimatedStyle;
  if (IS_WEB) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    innerAnimatedStyle = useAnimatedStyle(() => overriddenCellDimensions.value);
  }
  return /*#__PURE__*/_jsx(Animated.View, {
    style: [baseStyle, styles.decoration, animatedCellStyle],
    children: /*#__PURE__*/_jsx(AnimatedOnLayoutView, {
      entering: entering,
      exiting: exiting,
      style: [styles.inner, innerAnimatedStyle, hidden && styles.hidden],
      onLayout: onLayout,
      children: children
    })
  });
}
const styles = StyleSheet.create({
  decoration: Platform.select({
    android: {},
    default: {},
    native: {
      shadowOffset: {
        height: 0,
        width: 0
      },
      shadowOpacity: 1,
      shadowRadius: 5
    }
  }),
  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
  },
  inner: Platform.select({
    default: {},
    web: {
      flex: 1
    }
  })
});
//# sourceMappingURL=ItemCell.js.map