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

package/src/DraggableFlatList/DraggableFlatList.web.tsx

@@ -0,0 +1,404 @@
+/// <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 { WebDraggableFlatListProps } from '../constants/DraggableFlatList/types.web';
+
+function DraggableFlatListWeb<T>({
+  data,
+  renderItem,
+  keyExtractor,
+  onDragEnd,
+  onDragBegin,
+  onRelease,
+  onPlaceholderIndexChange,
+  activationDistance: _activationDistance,
+  containerStyle,
+  horizontal = false,
+  ...props
+}: WebDraggableFlatListProps<T>) {
+  const [draggedIndex, setDraggedIndex] = React.useState<number | null>(null);
+  const [tempData, setTempData] = React.useState<T[] | null>(null);
+
+  const placeholderIndexRef = React.useRef<number | null>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const itemRefs = React.useRef<Map<string, HTMLDivElement>>(new Map());
+  const currentIndexRef = React.useRef<number | null>(null);
+  const draggedKeyRef = React.useRef<string | null>(null);
+
+  const positionsRef = React.useRef<Map<string, DOMRect>>(new Map());
+  const lastReorderIndexRef = React.useRef<number | null>(null);
+  const lastPointerRef = React.useRef<{ x: number; y: number } | null>(null);
+
+  const dragAnchorRef = React.useRef<{
+    offsetX: number;
+    offsetY: number;
+  } | null>(null);
+
+  const containerRectRef = React.useRef<DOMRect | null>(null);
+
+  const [dragGhost, setDragGhost] = React.useState<{
+    x: number;
+    y: number;
+    offsetX: number;
+    offsetY: number;
+    width: number;
+    height: number;
+    item: T;
+    index: number;
+    key: string;
+  } | null>(null);
+
+  const activeKey = draggedKeyRef.current;
+
+  const getKey = React.useCallback(
+    (item: T, index: number) => {
+      return keyExtractor(item, index);
+    },
+    [keyExtractor],
+  );
+
+  const handleDragStart = React.useCallback(
+    (e: React.DragEvent, index: number) => {
+      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: React.DragEvent) => {
+      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: number | null = 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: string): React.CSSProperties =>
+    key === draggedKeyRef.current ? { opacity: 0 } : {};
+
+  React.useLayoutEffect(() => {
+    if (draggedKeyRef.current !== null) {
+      return;
+    }
+
+    itemRefs.current.forEach(el => {
+      el.style.transform = '';
+      el.style.transition = '';
+    });
+  }, [workingData]);
+
+  return (
+    <DraggableFlatListProvider
+      activeKey={activeKey}
+      keyExtractor={keyExtractor}
+      horizontal={!!horizontal}
+      layoutAnimationDisabled={false}>
+      <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 as React.HTMLAttributes<HTMLDivElement>)}>
+        {workingData.map((item, index) => {
+          const key = getKey(item, index);
+          const isActive = key === draggedKeyRef.current;
+
+          return (
+            <CellProvider isActive={isActive} key={key}>
+              <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),
+                }}>
+                {renderItem({
+                  item,
+                  getIndex: () => index,
+                  drag: () => {},
+                  isActive,
+                })}
+              </div>
+            </CellProvider>
+          );
+        })}
+        {dragGhost && (
+          <CellProvider isActive={true}>
+            <div
+              style={{
+                position: 'absolute',
+                left: dragGhost.x - dragGhost.offsetX,
+                top: dragGhost.y - dragGhost.offsetY,
+                width: dragGhost.width,
+                height: dragGhost.height,
+                pointerEvents: 'none',
+                zIndex: 9999,
+              }}>
+              {renderItem({
+                item: dragGhost.item,
+                getIndex: () => dragGhost.index,
+                drag: () => {},
+                isActive: true,
+              })}
+            </div>
+          </CellProvider>
+        )}
+      </div>
+    </DraggableFlatListProvider>
+  );
+}
+
+export default DraggableFlatListWeb;

package/src/DraggableFlatList/NestableDraggableFlatList.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { findNodeHandle, LogBox } from 'react-native';
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { FlatList } from 'react-native-gesture-handler';
+
+import { useStableCallback } from '../hooks/DraggableFlatList/useStableCallback';
+import { useNestedAutoScroll } from '../hooks/DraggableFlatList/useNestedAutoScroll';
+import { useSafeNestableScrollContainerContext } from '../context/DraggableFlatList/nestableScrollContainerContext';
+import { DraggableFlatListProps } from '../constants/DraggableFlatList/types';
+import DraggableFlatList from './DraggableFlatList';
+
+function NestableDraggableFlatListInner<T>(
+  props: DraggableFlatListProps<T>,
+  ref?: React.ForwardedRef<FlatList<T>>,
+) {
+  const hasSuppressedWarnings = React.useRef(false);
+
+  if (!hasSuppressedWarnings.current) {
+    LogBox.ignoreLogs([
+      'VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing',
+    ]); // Ignore log notification by message
+    //@ts-ignore
+    console.reportErrorsAsExceptions = false;
+    hasSuppressedWarnings.current = true;
+  }
+
+  const { scrollableRef, outerScrollOffset, setOuterScrollEnabled } =
+    useSafeNestableScrollContainerContext();
+
+  const listVerticalOffset = useSharedValue(0);
+  const [animVals, setAnimVals] = React.useState({});
+  const defaultHoverOffset = useSharedValue(0);
+  const [listHoverOffset, setListHoverOffset] =
+    React.useState(defaultHoverOffset);
+
+  const hoverOffset = useDerivedValue(() => {
+    return listHoverOffset.value + listVerticalOffset.value;
+  }, [listHoverOffset]);
+
+  useNestedAutoScroll({
+    ...animVals,
+    hoverOffset,
+  });
+
+  const onListContainerLayout = useStableCallback(async ({ containerRef }) => {
+    const nodeHandle = findNodeHandle(scrollableRef.current);
+
+    const onSuccess = (_x: number, y: number) => {
+      listVerticalOffset.value = y;
+    };
+    const onFail = () => {
+      console.log('## nested draggable list measure fail');
+    };
+
+    //@ts-ignore
+    containerRef.current.measureLayout(nodeHandle, onSuccess, onFail);
+  });
+
+  const onDragBegin: DraggableFlatListProps<T>['onDragBegin'] =
+    useStableCallback(params => {
+      setOuterScrollEnabled(false);
+      props.onDragBegin?.(params);
+    });
+
+  const onDragEnd: DraggableFlatListProps<T>['onDragEnd'] = useStableCallback(
+    params => {
+      setOuterScrollEnabled(true);
+      props.onDragEnd?.(params);
+    },
+  );
+
+  const onAnimValInit: DraggableFlatListProps<T>['onAnimValInit'] =
+    useStableCallback(params => {
+      setListHoverOffset(params.hoverOffset);
+      setAnimVals({
+        ...params,
+        hoverOffset,
+      });
+      props.onAnimValInit?.(params);
+    });
+
+  return (
+    <DraggableFlatList
+      ref={ref}
+      onContainerLayout={onListContainerLayout}
+      activationDistance={props.activationDistance || 20}
+      scrollEnabled={false}
+      {...props}
+      outerScrollOffset={outerScrollOffset}
+      onDragBegin={onDragBegin}
+      onDragEnd={onDragEnd}
+      onAnimValInit={onAnimValInit}
+    />
+  );
+}
+
+export const NestableDraggableFlatList = React.forwardRef(
+  NestableDraggableFlatListInner,
+) as <T>(
+  props: DraggableFlatListProps<T> & { ref?: React.ForwardedRef<FlatList<T>> },
+) => ReturnType<typeof NestableDraggableFlatListInner>;

package/src/DraggableFlatList/NestableScrollContainer.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { LayoutChangeEvent, ScrollViewProps } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';
+
+import { useStableCallback } from '../hooks/DraggableFlatList/useStableCallback';
+import {
+  NestableScrollContainerProvider,
+  useSafeNestableScrollContainerContext,
+} from '../context/DraggableFlatList/nestableScrollContainerContext';
+
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+
+function NestableScrollContainerInner(props: ScrollViewProps) {
+  const {
+    outerScrollOffset,
+    containerSize,
+    scrollViewSize,
+    scrollableRef,
+    outerScrollEnabled,
+  } = useSafeNestableScrollContainerContext();
+
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: ({ contentOffset }) => {
+      outerScrollOffset.value = contentOffset.y;
+    },
+  });
+
+  const onLayout = useStableCallback((event: LayoutChangeEvent) => {
+    const {
+      nativeEvent: { layout },
+    } = event;
+    containerSize.value = layout.height;
+  });
+
+  const onContentSizeChange = useStableCallback((w: number, h: number) => {
+    scrollViewSize.value = h;
+    props.onContentSizeChange?.(w, h);
+  });
+
+  return (
+    <AnimatedScrollView
+      {...props}
+      onLayout={onLayout}
+      onContentSizeChange={onContentSizeChange}
+      scrollEnabled={outerScrollEnabled}
+      ref={scrollableRef}
+      scrollEventThrottle={1}
+      onScroll={onScroll}
+    />
+  );
+}
+
+export const NestableScrollContainer = React.forwardRef(
+  (props: ScrollViewProps, forwardedRef?: React.ForwardedRef<ScrollView>) => {
+    return (
+      <NestableScrollContainerProvider
+        forwardedRef={
+          (forwardedRef as React.MutableRefObject<ScrollView>) || undefined
+        }>
+        <NestableScrollContainerInner {...props} />
+      </NestableScrollContainerProvider>
+    );
+  },
+);

package/src/DraggableFlatList/PlaceholderItem.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+
+import { typedMemo } from '../utils/DraggableFlatList/typedMemo';
+import { RenderPlaceholder } from '../constants/DraggableFlatList/types';
+import { useRefs } from '../context/DraggableFlatList/refContext';
+import { useDraggableFlatListContext } from '../context/DraggableFlatList/draggableFlatListContext';
+import { useAnimatedValues } from '../context/DraggableFlatList/animatedValueContext';
+
+type Props<T> = {
+  renderPlaceholder?: RenderPlaceholder<T>;
+};
+
+function PlaceholderItem<T>({ renderPlaceholder }: Props<T>) {
+  const [size, setSize] = React.useState(0);
+  const {
+    activeCellSize,
+    placeholderOffset,
+    spacerIndexAnim,
+    horizontalAnim,
+    scrollOffset,
+  } = useAnimatedValues();
+  const { keyToIndexRef, propsRef } = useRefs<T>();
+  const { activeKey, horizontal } = useDraggableFlatListContext();
+
+  // Size does not seem to be respected when it is an animated style
+  useAnimatedReaction(
+    () => {
+      return activeCellSize.value;
+    },
+    (cur, prev) => {
+      if (cur !== prev) {
+        runOnJS(setSize)(cur);
+      }
+    },
+  );
+
+  const activeIndex = activeKey
+    ? keyToIndexRef.current.get(activeKey)
+    : undefined;
+  const activeItem =
+    activeIndex === undefined ? null : propsRef.current?.data[activeIndex];
+
+  const animStyle = useAnimatedStyle(() => {
+    const offset = placeholderOffset.value - scrollOffset.value;
+    return {
+      opacity: size >= 0 ? 1 : 0,
+      overflow: 'hidden',
+      transform: [
+        horizontalAnim.value ? { translateX: offset } : { translateY: offset },
+      ],
+    };
+  }, [spacerIndexAnim, placeholderOffset, horizontalAnim, scrollOffset, size]);
+
+  const extraStyle = React.useMemo(() => {
+    return horizontal ? { width: size } : { height: size };
+  }, [horizontal, size]);
+
+  return (
+    <Animated.View
+      pointerEvents={activeKey ? 'auto' : 'none'}
+      style={[StyleSheet.absoluteFill, animStyle, extraStyle]}>
+      {!activeItem || activeIndex === undefined
+        ? null
+        : renderPlaceholder?.({ item: activeItem, index: activeIndex })}
+    </Animated.View>
+  );
+}
+
+export default typedMemo(PlaceholderItem);