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

package/src/DraggableFlatList/CellRendererComponent.tsx

@@ -0,0 +1,205 @@
+import React from 'react';
+import {
+  findNodeHandle,
+  LayoutChangeEvent,
+  MeasureLayoutOnSuccessCallback,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import Animated, {
+  runOnUI,
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import { typedMemo } from '../utils/DraggableFlatList/typedMemo';
+import { WEB } from '../utils';
+import { CellProvider } from '../context/DraggableFlatList/cellContext';
+import { useRefs } from '../context/DraggableFlatList/refContext';
+import { useDraggableFlatListContext } from '../context/DraggableFlatList/draggableFlatListContext';
+import { useAnimatedValues } from '../context/DraggableFlatList/animatedValueContext';
+import { useStableCallback } from '../hooks/DraggableFlatList/useStableCallback';
+import { useCellTranslate } from '../hooks/DraggableFlatList/useCellTranslate';
+
+type Props<T> = {
+  item: T;
+  index: number;
+  children: React.ReactNode;
+  onLayout?: (e: LayoutChangeEvent) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+function CellRendererComponent<T>(props: Props<T>) {
+  const { item, index, onLayout, children, ...rest } = props;
+
+  const viewRef = React.useRef<Animated.View>(null);
+  const { cellDataRef, propsRef, containerRef } = useRefs<T>();
+
+  const { horizontalAnim, scrollOffset } = useAnimatedValues();
+  const { activeKey, keyExtractor, horizontal, layoutAnimationDisabled } =
+    useDraggableFlatListContext<T>();
+
+  const key = keyExtractor(item, index);
+  const offset = useSharedValue(-1);
+  const size = useSharedValue(-1);
+  const heldTanslate = useSharedValue(0);
+
+  const translate = useCellTranslate({
+    cellOffset: offset,
+    cellSize: size,
+    cellIndex: index,
+  });
+
+  const isActive = activeKey === key;
+
+  const animStyle = useAnimatedStyle(() => {
+    // When activeKey becomes null at the end of a drag and the list reorders,
+    // the animated style may apply before the next paint, causing a flicker.
+    // Solution is to hold over the last animated value until the next onLayout.
+    // (Not required in web)
+    if (translate.value && !WEB) {
+      heldTanslate.value = translate.value;
+    }
+    const t = activeKey ? translate.value : heldTanslate.value;
+    return {
+      transform: [horizontalAnim.value ? { translateX: t } : { translateY: t }],
+    };
+  }, [translate, activeKey]);
+
+  const updateCellMeasurements = useStableCallback(() => {
+    const onSuccess: MeasureLayoutOnSuccessCallback = (x, y, w, h) => {
+      if (WEB && horizontal) {
+        x += scrollOffset.value;
+      }
+      const cellOffset = horizontal ? x : y;
+      const cellSize = horizontal ? w : h;
+      cellDataRef.current.set(key, {
+        measurements: { size: cellSize, offset: cellOffset },
+      });
+
+      size.value = cellSize;
+      offset.value = cellOffset;
+    };
+
+    const onFail = () => {
+      if (propsRef.current?.debug) {
+        console.log(`## on measure fail, index: ${index}`);
+      }
+    };
+
+    const containerNode = containerRef.current;
+    const viewNode = viewRef.current;
+    const nodeHandle = containerNode;
+
+    if (viewNode && nodeHandle) {
+      //@ts-ignore
+      viewNode.measureLayout(nodeHandle, onSuccess, onFail);
+    }
+  });
+
+  const onCellLayout = useStableCallback((e?: LayoutChangeEvent) => {
+    heldTanslate.value = 0;
+    updateCellMeasurements();
+    if (onLayout && e) {
+      onLayout(e);
+    }
+  });
+
+  React.useEffect(() => {
+    if (WEB) {
+      // onLayout isn't called on web when the cell index changes, so we manually re-measure
+      requestAnimationFrame(() => {
+        onCellLayout();
+      });
+    }
+  }, [index, onCellLayout]);
+
+  const baseStyle = React.useMemo(() => {
+    return {
+      elevation: isActive ? 1 : 0,
+      zIndex: isActive ? 999 : 0,
+      flexDirection: horizontal ? ('row' as const) : ('column' as const),
+    };
+  }, [isActive, horizontal]);
+
+  const { itemEnteringAnimation, itemExitingAnimation, itemLayoutAnimation } =
+    propsRef.current;
+
+  React.useEffect(() => {
+    // NOTE: Keep an eye on reanimated LayoutAnimation refactor:
+    // https://github.com/software-mansion/react-native-reanimated/pull/3332/files
+    // We might have to change the way we register/unregister LayouAnimations:
+    // - get native module: https://github.com/software-mansion/react-native-reanimated/blob/cf59766460d05eb30357913455318d8a95909468/src/reanimated2/NativeReanimated/NativeReanimated.ts#L18
+    // - register layout animation for tag: https://github.com/software-mansion/react-native-reanimated/blob/cf59766460d05eb30357913455318d8a95909468/src/reanimated2/NativeReanimated/NativeReanimated.ts#L99
+    if (!propsRef.current.enableLayoutAnimationExperimental) {
+      return;
+    }
+    const tag = findNodeHandle(viewRef.current);
+
+    runOnUI((t: number | null, _layoutDisabled) => {
+      'worklet';
+      if (!t) {
+        return;
+      }
+      const config = global.LayoutAnimationRepository.configs[t];
+      if (config) {
+        stashConfig(t, config);
+      }
+      const stashedConfig = getStashedConfig(t);
+      if (_layoutDisabled) {
+        global.LayoutAnimationRepository.removeConfig(t);
+      } else if (stashedConfig) {
+        global.LayoutAnimationRepository.registerConfig(t, stashedConfig);
+      }
+    })(tag, layoutAnimationDisabled);
+  }, [layoutAnimationDisabled]);
+
+  return (
+    <Animated.View
+      {...rest}
+      ref={viewRef}
+      onLayout={onCellLayout}
+      entering={itemEnteringAnimation}
+      exiting={itemExitingAnimation}
+      layout={
+        propsRef.current.enableLayoutAnimationExperimental
+          ? itemLayoutAnimation
+          : undefined
+      }
+      style={[props.style, baseStyle, animStyle]}
+      pointerEvents={activeKey ? 'none' : 'auto'}>
+      <CellProvider isActive={isActive}>{children}</CellProvider>
+    </Animated.View>
+  );
+}
+
+export default typedMemo(CellRendererComponent);
+
+declare global {
+  namespace NodeJS {
+    interface Global {
+      RNDFLLayoutAnimationConfigStash: Record<string, unknown>;
+    }
+  }
+}
+
+runOnUI(() => {
+  'worklet';
+  global.RNDFLLayoutAnimationConfigStash = {};
+})();
+
+function stashConfig(tag: number, config: unknown) {
+  'worklet';
+  if (!global.RNDFLLayoutAnimationConfigStash) {
+    global.RNDFLLayoutAnimationConfigStash = {};
+  }
+  global.RNDFLLayoutAnimationConfigStash[tag] = config;
+}
+
+function getStashedConfig(tag: number) {
+  'worklet';
+  if (!global.RNDFLLayoutAnimationConfigStash) {
+    return null;
+  }
+  return global.RNDFLLayoutAnimationConfigStash[tag] as Record<string, unknown>;
+}

package/src/DraggableFlatList/DraggableFlatList.tsx

@@ -0,0 +1,446 @@
+import React from 'react';
+import {
+  ListRenderItem,
+  FlatListProps,
+  LayoutChangeEvent,
+  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 { DraggableFlatListProps } from '../constants/DraggableFlatList/types';
+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';
+
+type RNGHFlatListProps<T> = Animated.AnimateProps<
+  FlatListProps<T> & {
+    ref: React.Ref<FlatList<T>>;
+    simultaneousHandlers?: React.Ref<any> | React.Ref<any>[];
+  }
+>;
+
+type OnViewableItemsChangedCallback<T> = Exclude<
+  FlatListProps<T>['onViewableItemsChanged'],
+  undefined | null
+>;
+
+const AnimatedFlatList = Animated.createAnimatedComponent(
+  FlatList,
+) as unknown as <T>(props: RNGHFlatListProps<T>) => React.ReactElement;
+
+function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
+  const {
+    cellDataRef,
+    containerRef,
+    flatlistRef,
+    keyToIndexRef,
+    propsRef,
+    animationConfigRef,
+  } = useRefs<T>();
+  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<string | null>(null);
+  const [layoutAnimationDisabled, setLayoutAnimationDisabled] = React.useState(
+    !propsRef.current.enableLayoutAnimationExperimental,
+  );
+
+  const keyExtractor = useStableCallback((item: T, index: number) => {
+    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: string) => {
+    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 },
+  }: LayoutChangeEvent) => {
+    const { width, height } = layout;
+    containerSize.value = props.horizontal ? width : height;
+    props.onContainerLayout?.({ layout, containerRef });
+  };
+
+  const onListContentSizeChange = (w: number, h: number) => {
+    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: ListRenderItem<T> = React.useCallback(
+    ({ item, index }) => {
+      const key = keyExtractor(item, index);
+      if (index !== keyToIndexRef.current.get(key)) {
+        keyToIndexRef.current.set(key, index);
+      }
+
+      return (
+        <RowItem
+          item={item}
+          itemKey={key}
+          renderItem={props.renderItem}
+          drag={drag}
+          extraData={props.extraData}
+        />
+      );
+    },
+    [props.renderItem, props.extraData, drag, keyExtractor],
+  );
+
+  const onRelease = useStableCallback((index: number) => {
+    props.onRelease?.(index);
+  });
+
+  const onDragEnd = useStableCallback(
+    ({ from, to }: { from: number; to: number }) => {
+      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: number) => {
+    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: [number, number] = [
+      -activationDistanceProp,
+      activationDistanceProp,
+    ];
+    if (props.horizontal) {
+      panGesture.activeOffsetX(activeOffset);
+    } else {
+      panGesture.activeOffsetY(activeOffset);
+    }
+  }
+
+  const onScroll = useStableCallback((scrollOffset: number) => {
+    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<
+    OnViewableItemsChangedCallback<T>
+  >(info => {
+    const viewableIndices = info.viewableItems
+      .filter(item => item.isViewable)
+      .map(item => item.index)
+      .filter((index): index is number => typeof index === 'number');
+
+    const min = Math.min(...viewableIndices);
+    const max = Math.max(...viewableIndices);
+    viewableIndexMin.value = min;
+    viewableIndexMax.value = max;
+    props.onViewableItemsChanged?.(info);
+  });
+
+  return (
+    <DraggableFlatListProvider
+      activeKey={activeKey}
+      keyExtractor={keyExtractor}
+      horizontal={!!props.horizontal}
+      layoutAnimationDisabled={layoutAnimationDisabled}>
+      <GestureDetector gesture={panGesture}>
+        <Animated.View
+          style={props.containerStyle}
+          ref={containerRef}
+          onLayout={onContainerLayout}>
+          {props.renderPlaceholder && (
+            <PlaceholderItem renderPlaceholder={props.renderPlaceholder} />
+          )}
+          <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 && (
+            <ScrollOffsetListener
+              onScrollOffsetChange={props.onScrollOffsetChange}
+              scrollOffset={scrollOffset}
+            />
+          )}
+        </Animated.View>
+      </GestureDetector>
+    </DraggableFlatListProvider>
+  );
+}
+
+function DraggableFlatList<T>(
+  props: DraggableFlatListProps<T>,
+  ref?: React.ForwardedRef<FlatList<T>> | null,
+) {
+  // Use web version if available and on web platform
+
+  return (
+    <PropsProvider {...props}>
+      <AnimatedValueProvider>
+        <RefProvider flatListRef={ref}>
+          <MemoizedInner {...props} />
+        </RefProvider>
+      </AnimatedValueProvider>
+    </PropsProvider>
+  );
+}
+
+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 React.forwardRef(DraggableFlatList) as <T>(
+  props: DraggableFlatListProps<T> & { ref?: React.ForwardedRef<FlatList<T>> },
+) => ReturnType<typeof DraggableFlatList>;