react-native-reorderable-list 0.4.0 → 0.5.0

package/dist/components/ReorderableList.js

@@ -1,314 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { FlatList, StatusBar, unstable_batchedUpdates, Platform, } from 'react-native';
-import { NativeViewGestureHandler, PanGestureHandler, State, } from 'react-native-gesture-handler';
-import Animated, { useAnimatedGestureHandler, useSharedValue, useAnimatedReaction, runOnJS, useAnimatedStyle, useAnimatedRef, useAnimatedScrollHandler, scrollTo, withTiming, Easing, runOnUI, } from 'react-native-reanimated';
-import composeRefs from '@seznam/compose-react-refs';
-import memoize from 'fast-memoize';
-import ReorderableListItem from './ReorderableListItem';
-import useAnimatedSharedValues from '../hooks/useAnimatedSharedValues';
-import { ReorderableListState } from '../types/misc';
-const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
-const ReorderableList = (_a, ref) => {
-    var { data, containerStyle, scrollAreaSize = 0.1, scrollSpeed = 2, dragScale = 1, renderItem, onLayout, onReorder, keyExtractor } = _a, rest = __rest(_a, ["data", "containerStyle", "scrollAreaSize", "scrollSpeed", "dragScale", "renderItem", "onLayout", "onReorder", "keyExtractor"]);
-    const container = useAnimatedRef();
-    const flatList = useAnimatedRef();
-    const nativeHandler = useRef(null);
-    const itemSeparators = useRef([]);
-    const gestureState = useSharedValue(State.UNDETERMINED);
-    const currentY = useSharedValue(0);
-    const startY = useSharedValue(0);
-    const containerPositionX = useSharedValue(0);
-    const containerPositionY = useSharedValue(0);
-    const scrollOffset = useSharedValue(0);
-    const itemOffsets = useAnimatedSharedValues(() => ({ length: 0, offset: 0 }), data.length);
-    const topMoveThreshold = useSharedValue(0);
-    const bottomMoveThreshold = useSharedValue(0);
-    const flatListHeight = useSharedValue(0);
-    const offsetY = useSharedValue(0);
-    const draggedTranslateY = useSharedValue(null);
-    const currentIndex = useSharedValue(-1);
-    const draggedIndex = useSharedValue(-1);
-    const draggedInfoIndex = useSharedValue(-1);
-    const state = useSharedValue(ReorderableListState.IDLE);
-    const autoScrollOffset = useSharedValue(-1);
-    const autoScrollSpeed = useSharedValue(Math.max(0, scrollSpeed));
-    const enabledOpacity = useSharedValue(false);
-    const draggedItemScale = useSharedValue(1);
-    const [dragged, setDragged] = useState(false);
-    const relativeToContainer = (y, x) => {
-        'worklet';
-        return {
-            y: y - containerPositionY.value - (StatusBar.currentHeight || 0),
-            x: x - containerPositionX.value,
-        };
-    };
-    const handleGestureEvent = useAnimatedGestureHandler({
-        onStart: (e, ctx) => {
-            if (state.value !== ReorderableListState.RELEASING) {
-                const { y } = relativeToContainer(e.absoluteY, e.absoluteX);
-                ctx.startY = y;
-                startY.value = y;
-                currentY.value = y;
-                gestureState.value = e.state;
-            }
-        },
-        onActive: (e, ctx) => {
-            if (state.value !== ReorderableListState.RELEASING) {
-                currentY.value = ctx.startY + e.translationY;
-                gestureState.value = e.state;
-            }
-        },
-        onEnd: (e) => (gestureState.value = e.state),
-        onFinish: (e) => (gestureState.value = e.state),
-        onCancel: (e) => (gestureState.value = e.state),
-        onFail: (e) => (gestureState.value = e.state),
-    });
-    useEffect(() => {
-        if (!dragged) {
-            runOnUI(() => {
-                'worklet';
-                state.value = ReorderableListState.IDLE;
-            })();
-        }
-    }, [dragged, state, enabledOpacity]);
-    useEffect(() => {
-        runOnUI(() => {
-            'worklet';
-            enabledOpacity.value = dragged;
-            if (dragged) {
-                draggedItemScale.value = withTiming(dragScale, {
-                    duration: 100,
-                    easing: Easing.out(Easing.ease),
-                });
-            }
-        })();
-    }, [dragged, draggedItemScale, enabledOpacity, dragScale]);
-    const enableDragged = useCallback((enabled) => {
-        flatList.current.setNativeProps({ scrollEnabled: !enabled });
-        setDragged(enabled);
-    }, [setDragged, flatList]);
-    const reorder = (fromIndex, toIndex) => {
-        if (fromIndex !== toIndex) {
-            unstable_batchedUpdates(() => {
-                onReorder({ fromIndex, toIndex });
-                enableDragged(false);
-            });
-        }
-        else {
-            enableDragged(false);
-        }
-    };
-    const endDrag = () => {
-        'worklet';
-        const draggedIndexTemp = draggedIndex.value;
-        const currentIndexTemp = currentIndex.value;
-        draggedIndex.value = -1;
-        currentIndex.value = -1;
-        enabledOpacity.value = false;
-        draggedInfoIndex.value = currentIndexTemp;
-        runOnJS(reorder)(draggedIndexTemp, currentIndexTemp);
-    };
-    const getIndexFromY = (y, scrollY) => {
-        'worklet';
-        const maxOffset = itemOffsets[itemOffsets.length - 1].value;
-        const relativeY = Math.max(0, Math.min((scrollY || scrollOffset.value) + y, maxOffset.offset + maxOffset.length));
-        const index = itemOffsets.findIndex((x, i) => ((x === null || x === void 0 ? void 0 : x.value.offset) && i === 0 && relativeY < x.value.offset) ||
-            (i === itemOffsets.length - 1 && relativeY > x.value.offset) ||
-            (relativeY >= x.value.offset &&
-                relativeY <= x.value.offset + x.value.length));
-        return { index, relativeY };
-    };
-    useAnimatedReaction(() => gestureState.value, () => {
-        if (gestureState.value !== State.ACTIVE &&
-            gestureState.value !== State.BEGAN &&
-            (state.value === ReorderableListState.DRAGGING ||
-                state.value === ReorderableListState.AUTO_SCROLL)) {
-            state.value = ReorderableListState.RELEASING;
-            const offsetCorrection = currentIndex.value > draggedIndex.value
-                ? itemOffsets[currentIndex.value].value.length -
-                    itemOffsets[draggedIndex.value].value.length
-                : 0;
-            const newTopPosition = itemOffsets[currentIndex.value].value.offset +
-                offsetCorrection -
-                scrollOffset.value;
-            const duration = 100;
-            draggedItemScale.value = withTiming(1, {
-                duration,
-                easing: Easing.out(Easing.ease),
-            }, () => {
-                if (draggedTranslateY.value === newTopPosition) {
-                    endDrag();
-                }
-            });
-            if (draggedTranslateY.value !== newTopPosition) {
-                draggedTranslateY.value = withTiming(newTopPosition, {
-                    duration,
-                    easing: Easing.out(Easing.ease),
-                }, () => {
-                    endDrag();
-                });
-            }
-        }
-    });
-    useAnimatedReaction(() => currentY.value, (y) => {
-        if (state.value === ReorderableListState.DRAGGING ||
-            state.value === ReorderableListState.AUTO_SCROLL) {
-            draggedTranslateY.value = y - offsetY.value;
-            const { index } = getIndexFromY(y);
-            currentIndex.value = index;
-            if (y <= topMoveThreshold.value || y >= bottomMoveThreshold.value) {
-                state.value = ReorderableListState.AUTO_SCROLL;
-                autoScrollOffset.value = scrollOffset.value;
-            }
-            else {
-                state.value = ReorderableListState.DRAGGING;
-                autoScrollOffset.value = -1;
-            }
-        }
-    });
-    useAnimatedReaction(() => autoScrollOffset.value, () => {
-        if (state.value === ReorderableListState.AUTO_SCROLL) {
-            let speed = 0;
-            if (currentY.value <= topMoveThreshold.value) {
-                speed = -autoScrollSpeed.value;
-            }
-            else if (currentY.value >= bottomMoveThreshold.value) {
-                speed = autoScrollSpeed.value;
-            }
-            if (speed !== 0) {
-                scrollTo(flatList, 0, autoScrollOffset.value + speed, Platform.OS === 'android');
-                autoScrollOffset.value += speed;
-            }
-            const { index } = getIndexFromY(currentY.value, autoScrollOffset.value);
-            currentIndex.value = index;
-        }
-    });
-    const scrollHandler = useAnimatedScrollHandler({
-        onScroll: (e) => {
-            scrollOffset.value = e.contentOffset.y;
-        },
-    });
-    const handleItemLayout = useCallback(memoize((index, onLayoutCell) => (e) => {
-        itemOffsets[index].value = {
-            offset: e.nativeEvent.layout.y,
-            length: e.nativeEvent.layout.height,
-        };
-        if (onLayoutCell) {
-            onLayoutCell(e);
-        }
-    }), [itemOffsets]);
-    const drag = useCallback(memoize((index) => () => runOnUI(() => {
-        'worklet';
-        offsetY.value =
-            startY.value -
-                (itemOffsets[index].value.offset - scrollOffset.value);
-        draggedTranslateY.value = startY.value - offsetY.value;
-        draggedIndex.value = index;
-        draggedInfoIndex.value = index;
-        currentIndex.value = index;
-        state.value = ReorderableListState.DRAGGING;
-        runOnJS(enableDragged)(true);
-    })()), [
-        offsetY,
-        startY,
-        scrollOffset,
-        draggedTranslateY,
-        draggedIndex,
-        draggedInfoIndex,
-        currentIndex,
-        state,
-        itemOffsets,
-        enableDragged,
-    ]);
-    const renderAnimatedCell = useCallback((_a) => {
-        var { index, children } = _a, cellProps = __rest(_a, ["index", "children"]);
-        return (React.createElement(ReorderableListItem, { key: cellProps.keyExtractor
-                ? cellProps.keyExtractor(cellProps.data[index], index)
-                : index, index: index, currentIndex: currentIndex, draggedIndex: draggedIndex, itemOffsets: itemOffsets, enabledOpacity: enabledOpacity, onLayout: handleItemLayout(index, cellProps.onLayout), children: children }));
-    }, [currentIndex, draggedIndex, itemOffsets, enabledOpacity, handleItemLayout]);
-    const renderDraggableItem = useCallback((info) => {
-        itemSeparators.current[info.index] = info.separators;
-        return renderItem(Object.assign(Object.assign({}, info), { drag: drag(info.index) }));
-    }, [renderItem, drag]);
-    const handleContainerLayout = () => {
-        container.current.measureInWindow((x, y) => {
-            containerPositionX.value = x;
-            containerPositionY.value = y;
-        });
-    };
-    const handleFlatListLayout = useCallback((e) => {
-        const { height } = e.nativeEvent.layout;
-        const portion = height * Math.max(0, Math.min(scrollAreaSize, 0.5));
-        topMoveThreshold.value = portion;
-        bottomMoveThreshold.value = height - portion;
-        flatListHeight.value = height;
-        if (onLayout) {
-            onLayout(e);
-        }
-    }, [
-        bottomMoveThreshold,
-        topMoveThreshold,
-        flatListHeight,
-        onLayout,
-        scrollAreaSize,
-    ]);
-    const draggedItemStyle = useAnimatedStyle(() => {
-        if (draggedTranslateY.value !== null) {
-            return {
-                transform: [
-                    { translateY: draggedTranslateY.value },
-                    { scale: draggedItemScale.value },
-                ],
-            };
-        }
-        return {};
-    });
-    const draggedItemInfo = {
-        index: draggedInfoIndex.value,
-        item: data[draggedInfoIndex.value],
-        separators: itemSeparators.current[draggedInfoIndex.value],
-        isDragged: true,
-    };
-    const draggedItemFallbackStyle = {
-        transform: itemOffsets[draggedInfoIndex.value]
-            ? [
-                {
-                    translateY: itemOffsets[draggedInfoIndex.value].value.offset -
-                        scrollOffset.value,
-                },
-            ]
-            : undefined,
-    };
-    return (React.createElement(PanGestureHandler, { maxPointers: 1, onGestureEvent: handleGestureEvent, onHandlerStateChange: handleGestureEvent, simultaneousHandlers: nativeHandler },
-        React.createElement(Animated.View, { ref: container, style: containerStyle, onLayout: handleContainerLayout },
-            React.createElement(NativeViewGestureHandler, { ref: nativeHandler },
-                React.createElement(AnimatedFlatList, Object.assign({}, rest, { ref: composeRefs(flatList, ref), data: data, CellRendererComponent: renderAnimatedCell, renderItem: renderDraggableItem, onLayout: handleFlatListLayout, onScroll: scrollHandler, keyExtractor: keyExtractor, scrollEventThrottle: 1, horizontal: false, numColumns: 1 }))),
-            dragged && (React.createElement(Animated.View, { style: [
-                    styles.draggedItem,
-                    draggedItemFallbackStyle,
-                    draggedItemStyle,
-                ] }, renderItem(draggedItemInfo))))));
-};
-const styles = {
-    draggedItem: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        top: 0,
-    },
-    dragged: {
-        opacity: 0,
-    },
-};
-export default React.memo(React.forwardRef(ReorderableList));

package/dist/components/ReorderableListItem.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
-import { ItemOffset } from '../types/misc';
-interface ReorderableListItemProps extends Animated.AnimateProps<ViewProps> {
-    index: number;
-    itemOffsets: Animated.SharedValue<ItemOffset>[];
-    draggedIndex: Animated.SharedValue<number>;
-    currentIndex: Animated.SharedValue<number>;
-    enabledOpacity: Animated.SharedValue<boolean>;
-    children: React.ReactNode;
-}
-declare const ReorderableListItem: React.FC<ReorderableListItemProps>;
-export default ReorderableListItem;

package/dist/components/ReorderableListItem.js

@@ -1,57 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import Animated, { useAnimatedStyle, withTiming, Easing, useSharedValue, useAnimatedReaction, } from 'react-native-reanimated';
-const ReorderableListItem = (_a) => {
-    var { index, itemOffsets, draggedIndex, currentIndex, enabledOpacity, children } = _a, rest = __rest(_a, ["index", "itemOffsets", "draggedIndex", "currentIndex", "enabledOpacity", "children"]);
-    const translateY = useSharedValue(0);
-    const opacity = useSharedValue(1);
-    useAnimatedReaction(() => currentIndex.value, () => {
-        if (currentIndex.value >= 0 && draggedIndex.value >= 0) {
-            const moveDown = currentIndex.value > draggedIndex.value;
-            const startMove = Math.min(draggedIndex.value, currentIndex.value);
-            const endMove = Math.max(draggedIndex.value, currentIndex.value);
-            let newValue = 0;
-            if (index === draggedIndex.value) {
-                for (let i = startMove; i < endMove; i++) {
-                    newValue = moveDown
-                        ? newValue + itemOffsets[i].value.length
-                        : newValue - itemOffsets[i].value.length;
-                }
-                const offsetCorrection = moveDown
-                    ? itemOffsets[currentIndex.value].value.length -
-                        itemOffsets[draggedIndex.value].value.length
-                    : 0;
-                newValue += offsetCorrection;
-            }
-            else if (index >= startMove && index <= endMove) {
-                const draggedHeight = itemOffsets[draggedIndex.value].value.length;
-                newValue = moveDown ? -draggedHeight : draggedHeight;
-            }
-            if (newValue !== translateY.value) {
-                translateY.value = withTiming(newValue, {
-                    duration: 100,
-                    easing: Easing.out(Easing.ease),
-                });
-            }
-        }
-    });
-    useAnimatedReaction(() => enabledOpacity.value, (enabled) => {
-        opacity.value = enabled && index === draggedIndex.value ? 0 : 1;
-    }, [index]);
-    const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: translateY.value }],
-        opacity: opacity.value,
-    }));
-    return (React.createElement(Animated.View, Object.assign({}, rest, { style: [rest.style, animatedStyle] }), children));
-};
-export default ReorderableListItem;

package/dist/hooks/useAnimatedSharedValues.d.ts

@@ -1,3 +0,0 @@
-import Animated from 'react-native-reanimated';
-declare function useAnimatedSharedValues<T>(initFunc: (index: number) => T, size: number, shrink?: boolean): Animated.SharedValue<T>[];
-export default useAnimatedSharedValues;

package/dist/hooks/useAnimatedSharedValues.js

@@ -1,33 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { cancelAnimation, makeMutable } from 'react-native-reanimated';
-function useAnimatedSharedValues(initFunc, size, shrink = true) {
-    const ref = useRef([]);
-    if (size !== 0 && ref.current.length === 0) {
-        ref.current = [];
-        for (let i = 0; i < size; i++) {
-            ref.current[i] = makeMutable(initFunc(i));
-        }
-    }
-    useEffect(() => {
-        if (size > ref.current.length) {
-            for (let i = ref.current.length; i < size; i++) {
-                ref.current[i] = makeMutable(initFunc(i));
-            }
-        }
-        else if (shrink && size < ref.current.length) {
-            for (let i = size; i < ref.current.length; i++) {
-                cancelAnimation(ref.current[i]);
-            }
-            ref.current.splice(size, ref.current.length - size);
-        }
-    }, [size, initFunc, shrink]);
-    useEffect(() => {
-        return () => {
-            for (let i = 0; i < ref.current.length; i++) {
-                cancelAnimation(ref.current[i]);
-            }
-        };
-    }, []);
-    return ref.current;
-}
-export default useAnimatedSharedValues;

package/dist/index.d.ts

@@ -1,4 +0,0 @@
-import ReorderableList from './components/ReorderableList';
-import { ReorderableListProps, ReorderableListRenderItemInfo, ReorderableListReorderEvent } from './types/props';
-export { ReorderableListProps, ReorderableListRenderItemInfo, ReorderableListReorderEvent, };
-export default ReorderableList;

package/dist/index.js

@@ -1,2 +0,0 @@
-import ReorderableList from './components/ReorderableList';
-export default ReorderableList;

package/dist/types/misc.d.ts

@@ -1,15 +0,0 @@
-export interface ItemOffset {
-    length: number;
-    offset: number;
-}
-export interface ItemSeparators {
-    highlight: () => void;
-    unhighlight: () => void;
-    updateProps: (select: 'leading' | 'trailing', newProps: any) => void;
-}
-export declare enum ReorderableListState {
-    IDLE = 0,
-    DRAGGING = 1,
-    RELEASING = 2,
-    AUTO_SCROLL = 3
-}

package/dist/types/misc.js

@@ -1,7 +0,0 @@
-export var ReorderableListState;
-(function (ReorderableListState) {
-    ReorderableListState[ReorderableListState["IDLE"] = 0] = "IDLE";
-    ReorderableListState[ReorderableListState["DRAGGING"] = 1] = "DRAGGING";
-    ReorderableListState[ReorderableListState["RELEASING"] = 2] = "RELEASING";
-    ReorderableListState[ReorderableListState["AUTO_SCROLL"] = 3] = "AUTO_SCROLL";
-})(ReorderableListState || (ReorderableListState = {}));

package/dist/types/props.d.ts

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-import { FlatListProps, ListRenderItemInfo, StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
-import Animated from 'react-native-reanimated';
-export interface CellProps<T> {
-    index: number;
-    children?: React.ReactElement;
-    data: T[];
-    onLayout?: (e: LayoutChangeEvent) => void;
-    keyExtractor?: (item: T, index: number) => string;
-}
-export interface ReorderableListRenderItemInfo<T> extends ListRenderItemInfo<T> {
-    drag?: () => void;
-    isDragged?: boolean;
-}
-export interface ReorderableListReorderEvent {
-    fromIndex: number;
-    toIndex: number;
-}
-declare type UnsupportedProps = 'horizontal' | 'onScroll' | 'scrollEventThrottle' | 'numColumns';
-export interface ReorderableListProps<T> extends Omit<FlatListProps<T>, UnsupportedProps> {
-    data: T[];
-    containerStyle?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
-    scrollAreaSize?: number;
-    scrollSpeed?: number;
-    dragScale?: number;
-    renderItem: (info: ReorderableListRenderItemInfo<T>) => React.ReactElement;
-    onReorder: (event: ReorderableListReorderEvent) => void;
-}
-export {};

package/dist/types/props.js

@@ -1 +0,0 @@
-export {};