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

Powerful Sortable Components for Flexible Content Reordering in React Native

"use strict";

import React from "react";
import { useCallback, useEffect } from 'react';
import { View } from 'react-native';
import { GestureDetector } from 'react-native-gesture-handler';
import { runOnUI, useAnimatedRef } from 'react-native-reanimated';
import { useCustomHandleContext, useIsInPortalOutlet, useItemContext } from '../../providers';
import { error } from '../../utils';

/** Props for the Sortable Handle component */
import { jsx as _jsx } from "react/jsx-runtime";
export default function CustomHandle({
  children,
  mode,
  style
}) {
  // The item is teleported when it is rendered within the PortalOutlet
  // component
  const isTeleported = useIsInPortalOutlet();

  // In case of teleported handle items, we want to render just the
  // handle component without any functionality
  return isTeleported ? /*#__PURE__*/_jsx(View, {
    style: style,
    children: children
  }) : /*#__PURE__*/_jsx(CustomHandleComponent, {
    mode: mode,
    style: style,
    children: children
  });
}
function CustomHandleComponent({
  children,
  mode = 'draggable',
  style
}) {
  const customHandleContext = useCustomHandleContext();
  if (!customHandleContext) {
    throw error('Please add a `customHandle` property on the Sortable component to use a custom handle component.');
  }
  const {
    gesture,
    isActive,
    itemKey
  } = useItemContext();
  const handleRef = useAnimatedRef();
  const {
    registerHandle,
    updateActiveHandleMeasurements
  } = customHandleContext;
  const dragEnabled = mode === 'draggable';
  useEffect(() => {
    return registerHandle(itemKey, handleRef, mode === 'fixed-order');
  }, [handleRef, itemKey, registerHandle, mode]);
  const onLayout = useCallback(() => {
    'worklet';

    if (isActive.value) {
      updateActiveHandleMeasurements(itemKey);
    }
  }, [itemKey, isActive, updateActiveHandleMeasurements]);
  return /*#__PURE__*/_jsx(GestureDetector, {
    gesture: gesture.enabled(dragEnabled),
    userSelect: "none",
    children: /*#__PURE__*/_jsx(View, {
      collapsable: false,
      ref: handleRef,
      style: style,
      onLayout: runOnUI(onLayout),
      children: children
    })
  });
}
//# sourceMappingURL=CustomHandle.js.map