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

Powerful Sortable Components for Flexible Content Reordering in React Native

"use strict";

import React from "react";
import { Fragment, memo, useCallback, useEffect, useState } from 'react';
import { GestureDetector } from 'react-native-gesture-handler';
import { LayoutAnimationConfig, runOnUI, useDerivedValue } from 'react-native-reanimated';
import { useMutableValue } from '../../../integrations/reanimated';
import { ItemContextProvider, ItemOutlet, useCommonValuesContext, useDragContext, useItemLayout, useItemPanGesture, useMeasurementsContext, usePortalContext } from '../../../providers';
import ActiveItemPortal from './ActiveItemPortal';
import ItemCell from './ItemCell';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function DraggableView({
  itemEntering,
  itemExiting,
  itemKey: key,
  style
}) {
  const portalContext = usePortalContext();
  const commonValuesContext = useCommonValuesContext();
  const {
    handleItemMeasurement,
    removeItemMeasurements
  } = useMeasurementsContext();
  const {
    handleDragEnd
  } = useDragContext();
  const {
    activeItemKey,
    customHandle
  } = commonValuesContext;
  const [isHidden, setIsHidden] = useState(false);
  const activationAnimationProgress = useMutableValue(0);
  const isActive = useDerivedValue(() => activeItemKey.value === key);
  const layoutStyleValue = useItemLayout(key, isActive, activationAnimationProgress);
  const gesture = useItemPanGesture(key, activationAnimationProgress);
  useEffect(() => {
    return () => {
      removeItemMeasurements(key);
      runOnUI(() => {
        handleDragEnd(key, activationAnimationProgress);
      })();
    };
  }, [activationAnimationProgress, handleDragEnd, key, removeItemMeasurements]);
  const onLayout = useCallback(({
    nativeEvent: {
      layout: {
        height,
        width
      }
    }
  }) => handleItemMeasurement(key, {
    height,
    width
  }), [handleItemMeasurement, key]);
  const renderItemCell = (hidden = false) => {
    const innerComponent = /*#__PURE__*/_jsx(ItemCell, {
      activationAnimationProgress: activationAnimationProgress,
      baseStyle: style,
      entering: itemEntering ?? undefined,
      exiting: itemExiting ?? undefined,
      hidden: hidden,
      isActive: isActive,
      itemKey: key,
      layoutStyleValue: layoutStyleValue,
      onLayout: onLayout,
      children: /*#__PURE__*/_jsx(LayoutAnimationConfig, {
        skipEntering: false,
        skipExiting: false,
        children: /*#__PURE__*/_jsx(ItemOutlet, {
          itemKey: key
        })
      })
    });
    return /*#__PURE__*/_jsx(ItemContextProvider, {
      activationAnimationProgress: activationAnimationProgress,
      gesture: gesture,
      isActive: isActive,
      itemKey: key,
      children: customHandle ? innerComponent : /*#__PURE__*/_jsx(GestureDetector, {
        gesture: gesture,
        userSelect: "none",
        children: innerComponent
      })
    });
  };

  // NORMAL CASE (no portal)

  if (!portalContext) {
    return renderItemCell();
  }

  // PORTAL CASE

  return /*#__PURE__*/_jsxs(Fragment, {
    children: [renderItemCell(isHidden), /*#__PURE__*/_jsx(ActiveItemPortal, {
      activationAnimationProgress: activationAnimationProgress,
      baseStyle: style,
      commonValuesContext: commonValuesContext,
      gesture: gesture,
      isActive: isActive,
      itemKey: key,
      onTeleport: setIsHidden
    })]
  });
}
export default /*#__PURE__*/memo(DraggableView);
//# sourceMappingURL=DraggableView.js.map