@estuary-solutions/rn-core-ui 0.0.4 → 0.1.0

package/lib/module/DraggableFlatList/DraggableFlatList.js

@@ -0,0 +1,346 @@
+"use strict";
+
+import React from 'react';
+import { InteractionManager } from 'react-native';
+import { FlatList, Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedReaction, useAnimatedScrollHandler, useSharedValue, withSpring } from 'react-native-reanimated';
+import CellRendererComponent from './CellRendererComponent';
+import PlaceholderItem from './PlaceholderItem';
+import RowItem from './RowItem';
+import ScrollOffsetListener from './ScrollOffsetListener';
+import { typedMemo } from '../utils/DraggableFlatList/typedMemo';
+import { useStableCallback } from '../hooks/DraggableFlatList/useStableCallback';
+import { useAutoScroll } from '../hooks/DraggableFlatList/useAutoScroll';
+import DraggableFlatListProvider from '../context/DraggableFlatList/draggableFlatListContext';
+import { DEFAULT_PROPS } from '../constants/DraggableFlatList/constants';
+import PropsProvider from '../context/DraggableFlatList/propsContext';
+import AnimatedValueProvider, { useAnimatedValues } from '../context/DraggableFlatList/animatedValueContext';
+import RefProvider, { useRefs } from '../context/DraggableFlatList/refContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
+function DraggableFlatListInner(props) {
+  const {
+    cellDataRef,
+    containerRef,
+    flatlistRef,
+    keyToIndexRef,
+    propsRef,
+    animationConfigRef
+  } = useRefs();
+  const {
+    activeCellOffset,
+    activeCellSize,
+    activeIndexAnim,
+    containerSize,
+    scrollOffset,
+    scrollViewSize,
+    spacerIndexAnim,
+    horizontalAnim,
+    placeholderOffset,
+    touchTranslate,
+    autoScrollDistance,
+    panGestureState,
+    isTouchActiveNative,
+    viewableIndexMin,
+    viewableIndexMax,
+    disabled
+  } = useAnimatedValues();
+  const reset = useStableCallback(() => {
+    activeIndexAnim.value = -1;
+    spacerIndexAnim.value = -1;
+    touchTranslate.value = 0;
+    activeCellSize.value = -1;
+    activeCellOffset.value = -1;
+    setActiveKey(null);
+  });
+  const {
+    dragHitSlop = DEFAULT_PROPS.dragHitSlop,
+    scrollEnabled = DEFAULT_PROPS.scrollEnabled,
+    activationDistance: activationDistanceProp = DEFAULT_PROPS.activationDistance
+  } = props;
+  let [activeKey, setActiveKey] = React.useState(null);
+  const [layoutAnimationDisabled, setLayoutAnimationDisabled] = React.useState(!propsRef.current.enableLayoutAnimationExperimental);
+  const keyExtractor = useStableCallback((item, index) => {
+    if (!props.keyExtractor) {
+      throw new Error('You must provide a keyExtractor to DraggableFlatList');
+    }
+    return props.keyExtractor(item, index);
+  });
+  const dataRef = React.useRef(props.data);
+  const dataHasChanged = dataRef.current.map(keyExtractor).join('') !== props.data.map(keyExtractor).join('');
+  dataRef.current = props.data;
+  if (dataHasChanged) {
+    // When data changes make sure `activeKey` is nulled out in the same render pass
+    activeKey = null;
+    InteractionManager.runAfterInteractions(() => {
+      reset();
+    });
+  }
+  React.useEffect(() => {
+    if (!propsRef.current.enableLayoutAnimationExperimental) {
+      return;
+    }
+    if (activeKey) {
+      setLayoutAnimationDisabled(true);
+    } else {
+      // setTimeout result of trial-and-error to determine how long to wait before
+      // re-enabling layout animations so that a drag reorder does not trigger it.
+      setTimeout(() => {
+        setLayoutAnimationDisabled(false);
+      }, 100);
+    }
+  }, [activeKey]);
+  React.useLayoutEffect(() => {
+    props.data.forEach((d, i) => {
+      const key = keyExtractor(d, i);
+      keyToIndexRef.current.set(key, i);
+    });
+  }, [props.data, keyExtractor, keyToIndexRef]);
+  const drag = useStableCallback(activeKey => {
+    if (disabled.value) {
+      return;
+    }
+    const index = keyToIndexRef.current.get(activeKey);
+    const cellData = cellDataRef.current.get(activeKey);
+    if (cellData) {
+      activeCellOffset.value = cellData.measurements.offset;
+      activeCellSize.value = cellData.measurements.size;
+    }
+    const {
+      onDragBegin
+    } = propsRef.current;
+    if (index !== undefined) {
+      spacerIndexAnim.value = index;
+      activeIndexAnim.value = index;
+      setActiveKey(activeKey);
+      onDragBegin?.(index);
+    }
+  });
+  const onContainerLayout = ({
+    nativeEvent: {
+      layout
+    }
+  }) => {
+    const {
+      width,
+      height
+    } = layout;
+    containerSize.value = props.horizontal ? width : height;
+    props.onContainerLayout?.({
+      layout,
+      containerRef
+    });
+  };
+  const onListContentSizeChange = (w, h) => {
+    scrollViewSize.value = props.horizontal ? w : h;
+    props.onContentSizeChange?.(w, h);
+  };
+  const onContainerTouchStart = () => {
+    if (!disabled.value) {
+      isTouchActiveNative.value = true;
+    }
+    return false;
+  };
+  const onContainerTouchEnd = () => {
+    isTouchActiveNative.value = false;
+  };
+  const extraData = React.useMemo(() => ({
+    activeKey,
+    extraData: props.extraData
+  }), [activeKey, props.extraData]);
+  const renderItem = React.useCallback(({
+    item,
+    index
+  }) => {
+    const key = keyExtractor(item, index);
+    if (index !== keyToIndexRef.current.get(key)) {
+      keyToIndexRef.current.set(key, index);
+    }
+    return /*#__PURE__*/_jsx(RowItem, {
+      item: item,
+      itemKey: key,
+      renderItem: props.renderItem,
+      drag: drag,
+      extraData: props.extraData
+    });
+  }, [props.renderItem, props.extraData, drag, keyExtractor]);
+  const onRelease = useStableCallback(index => {
+    props.onRelease?.(index);
+  });
+  const onDragEnd = useStableCallback(({
+    from,
+    to
+  }) => {
+    const {
+      onDragEnd,
+      data
+    } = props;
+    const newData = [...data];
+    if (from !== to) {
+      newData.splice(from, 1);
+      newData.splice(to, 0, data[from]);
+    }
+    onDragEnd?.({
+      from,
+      to,
+      data: newData
+    });
+    setActiveKey(null);
+  });
+  const onPlaceholderIndexChange = useStableCallback(index => {
+    props.onPlaceholderIndexChange?.(index);
+  });
+
+  // Handle case where user ends drag without moving their finger.
+  useAnimatedReaction(() => {
+    return isTouchActiveNative.value;
+  }, (cur, prev) => {
+    if (cur !== prev && !cur) {
+      const hasMoved = !!touchTranslate.value;
+      if (!hasMoved && activeIndexAnim.value >= 0 && !disabled.value) {
+        runOnJS(onRelease)(activeIndexAnim.value);
+        runOnJS(onDragEnd)({
+          from: activeIndexAnim.value,
+          to: spacerIndexAnim.value
+        });
+      }
+    }
+  }, [isTouchActiveNative, onDragEnd, onRelease]);
+  useAnimatedReaction(() => {
+    return spacerIndexAnim.value;
+  }, (cur, prev) => {
+    if (prev !== null && cur !== prev && cur >= 0 && prev >= 0) {
+      runOnJS(onPlaceholderIndexChange)(cur);
+    }
+  }, [spacerIndexAnim]);
+  const gestureDisabled = useSharedValue(false);
+  const panGesture = Gesture.Pan().onBegin(evt => {
+    gestureDisabled.value = disabled.value;
+    if (gestureDisabled.value) {
+      return;
+    }
+    panGestureState.value = evt.state;
+  }).onUpdate(evt => {
+    if (gestureDisabled.value) {
+      return;
+    }
+    panGestureState.value = evt.state;
+    const translation = horizontalAnim.value ? evt.translationX : evt.translationY;
+    touchTranslate.value = translation;
+  }).onEnd(evt => {
+    if (gestureDisabled.value) {
+      return;
+    }
+    // Set touch val to current translate val
+    isTouchActiveNative.value = false;
+    const translation = horizontalAnim.value ? evt.translationX : evt.translationY;
+    touchTranslate.value = translation + autoScrollDistance.value;
+    panGestureState.value = evt.state;
+
+    // Only call onDragEnd if actually dragging a cell
+    if (activeIndexAnim.value === -1 || disabled.value) {
+      return;
+    }
+    disabled.value = true;
+    runOnJS(onRelease)(activeIndexAnim.value);
+    const springTo = placeholderOffset.value - activeCellOffset.value;
+    touchTranslate.value = withSpring(springTo, animationConfigRef.value, () => {
+      runOnJS(onDragEnd)({
+        from: activeIndexAnim.value,
+        to: spacerIndexAnim.value
+      });
+      disabled.value = false;
+    });
+  }).onTouchesDown(() => {
+    runOnJS(onContainerTouchStart)();
+  }).onTouchesUp(() => {
+    // Turning this into a worklet causes timing issues. We want it to run
+    // just after the finger lifts.
+    runOnJS(onContainerTouchEnd)();
+  });
+  if (dragHitSlop) {
+    panGesture.hitSlop(dragHitSlop);
+  }
+  if (activationDistanceProp) {
+    const activeOffset = [-activationDistanceProp, activationDistanceProp];
+    if (props.horizontal) {
+      panGesture.activeOffsetX(activeOffset);
+    } else {
+      panGesture.activeOffsetY(activeOffset);
+    }
+  }
+  const onScroll = useStableCallback(scrollOffset => {
+    props.onScrollOffsetChange?.(scrollOffset);
+  });
+  const scrollHandler = useAnimatedScrollHandler({
+    onScroll: evt => {
+      scrollOffset.value = horizontalAnim.value ? evt.contentOffset.x : evt.contentOffset.y;
+      runOnJS(onScroll)(scrollOffset.value);
+    }
+  }, [horizontalAnim]);
+  useAutoScroll();
+  const onViewableItemsChanged = useStableCallback(info => {
+    const viewableIndices = info.viewableItems.filter(item => item.isViewable).map(item => item.index).filter(index => typeof index === 'number');
+    const min = Math.min(...viewableIndices);
+    const max = Math.max(...viewableIndices);
+    viewableIndexMin.value = min;
+    viewableIndexMax.value = max;
+    props.onViewableItemsChanged?.(info);
+  });
+  return /*#__PURE__*/_jsx(DraggableFlatListProvider, {
+    activeKey: activeKey,
+    keyExtractor: keyExtractor,
+    horizontal: !!props.horizontal,
+    layoutAnimationDisabled: layoutAnimationDisabled,
+    children: /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        style: props.containerStyle,
+        ref: containerRef,
+        onLayout: onContainerLayout,
+        children: [props.renderPlaceholder && /*#__PURE__*/_jsx(PlaceholderItem, {
+          renderPlaceholder: props.renderPlaceholder
+        }), /*#__PURE__*/_jsx(AnimatedFlatList, {
+          ...props,
+          data: props.data,
+          onViewableItemsChanged: onViewableItemsChanged,
+          CellRendererComponent: CellRendererComponent,
+          ref: flatlistRef,
+          onContentSizeChange: onListContentSizeChange,
+          scrollEnabled: !activeKey && scrollEnabled,
+          renderItem: renderItem,
+          extraData: extraData,
+          keyExtractor: keyExtractor,
+          onScroll: scrollHandler,
+          scrollEventThrottle: 16,
+          simultaneousHandlers: props.simultaneousHandlers,
+          removeClippedSubviews: false
+        }), !!props.onScrollOffsetChange && /*#__PURE__*/_jsx(ScrollOffsetListener, {
+          onScrollOffsetChange: props.onScrollOffsetChange,
+          scrollOffset: scrollOffset
+        })]
+      })
+    })
+  });
+}
+function DraggableFlatList(props, ref) {
+  // Use web version if available and on web platform
+
+  return /*#__PURE__*/_jsx(PropsProvider, {
+    ...props,
+    children: /*#__PURE__*/_jsx(AnimatedValueProvider, {
+      children: /*#__PURE__*/_jsx(RefProvider, {
+        flatListRef: ref,
+        children: /*#__PURE__*/_jsx(MemoizedInner, {
+          ...props
+        })
+      })
+    })
+  });
+}
+const MemoizedInner = typedMemo(DraggableFlatListInner);
+
+// Generic forwarded ref type assertion taken from:
+// https://fettblog.eu/typescript-react-generic-forward-refs/#option-1%3A-type-assertion
+export default /*#__PURE__*/React.forwardRef(DraggableFlatList);
+//# sourceMappingURL=DraggableFlatList.js.map

package/lib/module/DraggableFlatList/DraggableFlatList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","InteractionManager","FlatList","Gesture","GestureDetector","Animated","runOnJS","useAnimatedReaction","useAnimatedScrollHandler","useSharedValue","withSpring","CellRendererComponent","PlaceholderItem","RowItem","ScrollOffsetListener","typedMemo","useStableCallback","useAutoScroll","DraggableFlatListProvider","DEFAULT_PROPS","PropsProvider","AnimatedValueProvider","useAnimatedValues","RefProvider","useRefs","jsx","_jsx","jsxs","_jsxs","AnimatedFlatList","createAnimatedComponent","DraggableFlatListInner","props","cellDataRef","containerRef","flatlistRef","keyToIndexRef","propsRef","animationConfigRef","activeCellOffset","activeCellSize","activeIndexAnim","containerSize","scrollOffset","scrollViewSize","spacerIndexAnim","horizontalAnim","placeholderOffset","touchTranslate","autoScrollDistance","panGestureState","isTouchActiveNative","viewableIndexMin","viewableIndexMax","disabled","reset","value","setActiveKey","dragHitSlop","scrollEnabled","activationDistance","activationDistanceProp","activeKey","useState","layoutAnimationDisabled","setLayoutAnimationDisabled","current","enableLayoutAnimationExperimental","keyExtractor","item","index","Error","dataRef","useRef","data","dataHasChanged","map","join","runAfterInteractions","useEffect","setTimeout","useLayoutEffect","forEach","d","i","key","set","drag","get","cellData","measurements","offset","size","onDragBegin","undefined","onContainerLayout","nativeEvent","layout","width","height","horizontal","onListContentSizeChange","w","h","onContentSizeChange","onContainerTouchStart","onContainerTouchEnd","extraData","useMemo","renderItem","useCallback","itemKey","onRelease","onDragEnd","from","to","newData","splice","onPlaceholderIndexChange","cur","prev","hasMoved","gestureDisabled","panGesture","Pan","onBegin","evt","state","onUpdate","translation","translationX","translationY","onEnd","springTo","onTouchesDown","onTouchesUp","hitSlop","activeOffset","activeOffsetX","activeOffsetY","onScroll","onScrollOffsetChange","scrollHandler","contentOffset","x","y","onViewableItemsChanged","info","viewableIndices","viewableItems","filter","isViewable","min","Math","max","children","gesture","View","style","containerStyle","ref","onLayout","renderPlaceholder","scrollEventThrottle","simultaneousHandlers","removeClippedSubviews","DraggableFlatList","flatListRef","MemoizedInner","forwardRef"],"sourceRoot":"../../../src","sources":["DraggableFlatList/DraggableFlatList.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/DraggableFlatList/DraggableFlatList.web.js

@@ -0,0 +1,306 @@
+"use strict";
+
+/// <reference lib="dom" /> TODO: DO NOT REMOVE THIS LINE
+
+import React from 'react';
+import { CellProvider } from '../context/DraggableFlatList/cellContext';
+import DraggableFlatListProvider from '../context/DraggableFlatList/draggableFlatListContext';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function DraggableFlatListWeb({
+  data,
+  renderItem,
+  keyExtractor,
+  onDragEnd,
+  onDragBegin,
+  onRelease,
+  onPlaceholderIndexChange,
+  activationDistance: _activationDistance,
+  containerStyle,
+  horizontal = false,
+  ...props
+}) {
+  const [draggedIndex, setDraggedIndex] = React.useState(null);
+  const [tempData, setTempData] = React.useState(null);
+  const placeholderIndexRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const itemRefs = React.useRef(new Map());
+  const currentIndexRef = React.useRef(null);
+  const draggedKeyRef = React.useRef(null);
+  const positionsRef = React.useRef(new Map());
+  const lastReorderIndexRef = React.useRef(null);
+  const lastPointerRef = React.useRef(null);
+  const dragAnchorRef = React.useRef(null);
+  const containerRectRef = React.useRef(null);
+  const [dragGhost, setDragGhost] = React.useState(null);
+  const activeKey = draggedKeyRef.current;
+  const getKey = React.useCallback((item, index) => {
+    return keyExtractor(item, index);
+  }, [keyExtractor]);
+  const handleDragStart = React.useCallback((e, index) => {
+    setDraggedIndex(index);
+    const key = keyExtractor(data[index], index);
+    draggedKeyRef.current = key;
+    currentIndexRef.current = index;
+    setTempData([...data]);
+    placeholderIndexRef.current = index;
+    onDragBegin?.(index);
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', index.toString());
+    const el = itemRefs.current.get(key);
+    if (el) {
+      const rect = el.getBoundingClientRect();
+      const container = containerRef.current;
+      if (container) {
+        containerRectRef.current = container.getBoundingClientRect();
+      }
+      const img = new Image();
+      img.src = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>";
+      e.dataTransfer.setDragImage(img, 0, 0);
+      const anchor = dragAnchorRef.current;
+      setDragGhost({
+        x: e.clientX,
+        y: e.clientY,
+        offsetX: anchor?.offsetX ?? rect.width / 2,
+        offsetY: anchor?.offsetY ?? rect.height / 2,
+        width: rect.width,
+        height: rect.height,
+        item: data[index],
+        index,
+        key
+      });
+    }
+  }, [onDragBegin, data, keyExtractor]);
+  const handleDragEnd = React.useCallback(() => {
+    if (draggedIndex !== null) {
+      onRelease?.(draggedIndex);
+    }
+    placeholderIndexRef.current = null;
+    lastPointerRef.current = null;
+    setDraggedIndex(null);
+    setDragGhost(null);
+    lastReorderIndexRef.current = null;
+  }, [draggedIndex, onRelease]);
+  const handleContainerDragOver = React.useCallback(e => {
+    e.preventDefault();
+    setDragGhost(prev => {
+      const rect = containerRectRef.current;
+      if (!prev || !rect) {
+        return prev;
+      }
+      return {
+        ...prev,
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      };
+    });
+    if (!tempData || !draggedKeyRef.current) {
+      return;
+    }
+    const mouseY = e.clientY;
+    const mouseX = e.clientX;
+    let nextIndex = null;
+    if (lastPointerRef.current) {
+      const dx = Math.abs(mouseX - lastPointerRef.current.x);
+      const dy = Math.abs(mouseY - lastPointerRef.current.y);
+      if (dx < 2 && dy < 2) {
+        return;
+      }
+    }
+    lastPointerRef.current = {
+      x: mouseX,
+      y: mouseY
+    };
+    for (let i = 0; i < tempData.length; i++) {
+      const key = keyExtractor(tempData[i], i);
+      const el = itemRefs.current.get(key);
+      if (!el) {
+        continue;
+      }
+      const rect = el.getBoundingClientRect();
+      const isInside = horizontal ? mouseX >= rect.left && mouseX <= rect.right : mouseY >= rect.top && mouseY <= rect.bottom;
+      if (!isInside) {
+        continue;
+      }
+      const isAfter = horizontal ? mouseX > rect.left + rect.width / 1.5 : mouseY > rect.top + rect.height / 1.5;
+      nextIndex = isAfter ? i + 1 : i;
+      break;
+    }
+    if (nextIndex === null || placeholderIndexRef.current === nextIndex || lastReorderIndexRef.current === nextIndex) {
+      return;
+    }
+    positionsRef.current.clear();
+    tempData.forEach((item, index) => {
+      const key = keyExtractor(item, index);
+      const el = itemRefs.current.get(key);
+      if (el) {
+        positionsRef.current.set(key, el.getBoundingClientRect());
+      }
+    });
+    placeholderIndexRef.current = nextIndex;
+    onPlaceholderIndexChange?.(nextIndex);
+    setTempData(prev => {
+      if (!prev || !draggedKeyRef.current) {
+        return prev;
+      }
+      const from = prev.findIndex((item, index) => keyExtractor(item, index) === draggedKeyRef.current);
+      if (from === -1 || from === nextIndex) {
+        return prev;
+      }
+      const arr = [...prev];
+      const [item] = arr.splice(from, 1);
+      arr.splice(nextIndex, 0, item);
+      return arr;
+    });
+    lastReorderIndexRef.current = nextIndex;
+    requestAnimationFrame(() => {
+      positionsRef.current.forEach((prevRect, key) => {
+        if (key === draggedKeyRef.current) {
+          return;
+        }
+        const el = itemRefs.current.get(key);
+        if (!el) {
+          return;
+        }
+        const nextRect = el.getBoundingClientRect();
+        const dx = prevRect.left - nextRect.left;
+        const dy = prevRect.top - nextRect.top;
+        if (!dx && !dy) {
+          return;
+        }
+        el.style.transform = `translate(${dx}px, ${dy}px)`;
+        el.style.transition = 'none';
+        requestAnimationFrame(() => {
+          el.style.transform = '';
+          el.style.transition = 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)';
+        });
+      });
+    });
+  }, [tempData, horizontal, keyExtractor, onPlaceholderIndexChange]);
+  const workingData = tempData ?? data;
+  const getItemStyle = key => key === draggedKeyRef.current ? {
+    opacity: 0
+  } : {};
+  React.useLayoutEffect(() => {
+    if (draggedKeyRef.current !== null) {
+      return;
+    }
+    itemRefs.current.forEach(el => {
+      el.style.transform = '';
+      el.style.transition = '';
+    });
+  }, [workingData]);
+  return /*#__PURE__*/_jsx(DraggableFlatListProvider, {
+    activeKey: activeKey,
+    keyExtractor: keyExtractor,
+    horizontal: !!horizontal,
+    layoutAnimationDisabled: false,
+    children: /*#__PURE__*/_jsxs("div", {
+      ref: containerRef,
+      style: {
+        display: horizontal ? 'flex' : 'block',
+        overflow: horizontal ? 'auto' : 'visible',
+        minHeight: horizontal ? 'auto' : '100%',
+        ...containerStyle
+      },
+      onDragOver: handleContainerDragOver,
+      onDrop: e => {
+        e.preventDefault();
+        if (!tempData || !draggedKeyRef.current) {
+          return;
+        }
+        const from = data.findIndex(item => keyExtractor(item, 0) === draggedKeyRef.current);
+        const to = placeholderIndexRef.current;
+        if (from === -1 || to == null) {
+          return;
+        }
+        const newData = [...data];
+        const [item] = newData.splice(from, 1);
+        newData.splice(to, 0, item);
+        onDragEnd?.({
+          from,
+          to,
+          data: newData
+        });
+        draggedKeyRef.current = null;
+        currentIndexRef.current = null;
+        placeholderIndexRef.current = null;
+        setDragGhost(null);
+        setDraggedIndex(null);
+        setTempData(null);
+        lastReorderIndexRef.current = null;
+        itemRefs.current.forEach(el => {
+          el.style.transform = '';
+          el.style.transition = '';
+        });
+        lastPointerRef.current = null;
+        onRelease?.(from);
+      },
+      ...props,
+      children: [workingData.map((item, index) => {
+        const key = getKey(item, index);
+        const isActive = key === draggedKeyRef.current;
+        return /*#__PURE__*/_jsx(CellProvider, {
+          isActive: isActive,
+          children: /*#__PURE__*/_jsx("div", {
+            ref: el => {
+              if (el) {
+                itemRefs.current.set(key, el);
+              } else {
+                itemRefs.current.delete(key);
+              }
+            },
+            draggable: draggedIndex === null,
+            onMouseDown: e => {
+              const el = itemRefs.current.get(key);
+              if (!el) {
+                return;
+              }
+              const rect = el.getBoundingClientRect();
+              dragAnchorRef.current = {
+                offsetX: e.clientX - rect.left,
+                offsetY: e.clientY - rect.top
+              };
+            },
+            onDragStart: e => {
+              handleDragStart(e, index);
+            },
+            onDragEnd: handleDragEnd,
+            style: {
+              cursor: draggedIndex === null ? 'grab' : 'grabbing',
+              userSelect: 'none',
+              position: 'relative',
+              ...getItemStyle(key)
+            },
+            children: renderItem({
+              item,
+              getIndex: () => index,
+              drag: () => {},
+              isActive
+            })
+          })
+        }, key);
+      }), dragGhost && /*#__PURE__*/_jsx(CellProvider, {
+        isActive: true,
+        children: /*#__PURE__*/_jsx("div", {
+          style: {
+            position: 'absolute',
+            left: dragGhost.x - dragGhost.offsetX,
+            top: dragGhost.y - dragGhost.offsetY,
+            width: dragGhost.width,
+            height: dragGhost.height,
+            pointerEvents: 'none',
+            zIndex: 9999
+          },
+          children: renderItem({
+            item: dragGhost.item,
+            getIndex: () => dragGhost.index,
+            drag: () => {},
+            isActive: true
+          })
+        })
+      })]
+    })
+  });
+}
+export default DraggableFlatListWeb;
+//# sourceMappingURL=DraggableFlatList.web.js.map