react-native-draglist/dist/index.modern.js

FlatList that reorders items by dragging

import React, { useMemo, useContext, useCallback, useRef, useState, useEffect, useLayoutEffect } from 'react';
import { Animated, PanResponder, View, Platform, FlatList, I18nManager, Easing } from 'react-native';

function _extends() {
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
    for (var e = 1; e < arguments.length; e++) {
      var t = arguments[e];
      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
    }
    return n;
  }, _extends.apply(null, arguments);
}
function _objectWithoutPropertiesLoose(r, e) {
  if (null == r) return {};
  var t = {};
  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
    if (e.includes(n)) continue;
    t[n] = r[n];
  }
  return t;
}

// A type of promise-like that resolves synchronously and supports only one observer

const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";

const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";

// Asynchronously await a promise and pass the result to a finally continuation
function _finallyRethrows(body, finalizer) {
	try {
		var result = body();
	} catch (e) {
		return finalizer(true, e);
	}
	if (result && result.then) {
		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
	}
	return finalizer(false, result);
}

function createHoverBus() {
  var listeners = new Set();
  return {
    index: -1,
    subscribe: function subscribe(cb) {
      listeners.add(cb);
      return function () {
        listeners["delete"](cb);
      };
    },
    notify: function notify(hoverIndex) {
      this.index = hoverIndex;
      listeners.forEach(function (cb) {
        return cb(hoverIndex);
      });
    }
  };
}
var DragListContext = React.createContext(undefined);
function DragListProvider(_ref) {
  var activeData = _ref.activeData,
    keyExtractor = _ref.keyExtractor,
    pan = _ref.pan,
    hoverBus = _ref.hoverBus,
    layouts = _ref.layouts,
    horizontal = _ref.horizontal,
    children = _ref.children;
  var value = useMemo(function () {
    return {
      activeData: activeData,
      keyExtractor: keyExtractor,
      pan: pan,
      hoverBus: hoverBus,
      layouts: layouts,
      horizontal: horizontal
    };
  }, [activeData, keyExtractor, pan, hoverBus, layouts, horizontal]);
  return React.createElement(DragListContext.Provider, {
    value: value
  }, children);
}
function useDragListContext() {
  var value = useContext(DragListContext);
  if (!value) {
    throw new Error("useDragListContext must be called within DragListProvider");
  }
  return value;
}

var _excluded = ["containerStyle", "data", "keyExtractor", "onDragBegin", "onDragEnd", "onScroll", "onLayout", "onContentSizeChange", "renderItem", "CustomFlatList"],
  _excluded2 = ["item", "index", "children", "onLayout"];
function DragListItemImpl(props) {
  var item = props.item,
    index = props.index,
    itemKey = props.itemKey,
    isActive = props.isActive,
    separators = props.separators,
    renderItem = props.renderItem,
    startDrag = props.startDrag,
    endDrag = props.endDrag;
  var onDragStart = useCallback(function () {
    return startDrag(index, itemKey);
  }, [startDrag, index, itemKey]);
  return renderItem({
    item: item,
    index: index,
    separators: separators,
    onDragStart: onDragStart,
    onStartDrag: onDragStart,
    onDragEnd: endDrag,
    onEndDrag: endDrag,
    isActive: isActive
  });
}
var DragListItem = React.memo(DragListItemImpl, function (prev, next) {
  return prev.item === next.item && prev.index === next.index && prev.itemKey === next.itemKey && prev.isActive === next.isActive && prev.renderItem === next.renderItem && prev.startDrag === next.startDrag && prev.endDrag === next.endDrag && prev.extraData === next.extraData && prev.numItems === next.numItems;
});
function isLayoutMirrored(horizontal) {
  return !!horizontal && I18nManager.isRTL;
}
function flowTrailingEdge(layout, mirrored) {
  return mirrored ? -layout.pos : layout.pos + layout.extent;
}
function DragListImpl(props, _ref3) {
  var _activeDataRef$curren, _activeDataRef$curren2, _props$scrollEnabled;
  var containerStyle = props.containerStyle,
    data = props.data,
    keyExtractor = props.keyExtractor,
    onDragBegin = props.onDragBegin,
    onDragEnd = props.onDragEnd,
    onScroll = props.onScroll,
    onLayout = props.onLayout,
    onContentSizeChange = props.onContentSizeChange,
    renderItem = props.renderItem,
    _props$CustomFlatList = props.CustomFlatList,
    CustomFlatList = _props$CustomFlatList === void 0 ? FlatList : _props$CustomFlatList,
    rest = _objectWithoutPropertiesLoose(props, _excluded);
  var activeDataRef = useRef(null);
  var isReorderingRef = useRef(false);
  var panIndex = useRef(-1);
  var hoverBus = useRef(createHoverBus()).current;
  var _useState = useState({
      activeKey: (_activeDataRef$curren = (_activeDataRef$curren2 = activeDataRef.current) === null || _activeDataRef$curren2 === void 0 ? void 0 : _activeDataRef$curren2.key) != null ? _activeDataRef$curren : null
    }),
    extra = _useState[0],
    setExtra = _useState[1];
  var layouts = useRef({}).current;
  var panGrantedRef = useRef(false);
  var grantScrollPosRef = useRef(0);
  var grantActiveCenterOffsetRef = useRef(0);
  var autoScrollFrameRef = useRef(null);
  var autoScrollVelocityRef = useRef(0);
  var autoScrollOffsetRef = useRef(0);
  var autoScrollScrollPosRef = useRef(0);
  var autoScrollSeededRef = useRef(false);
  var autoScrollTrailingInsetRef = useRef(0);
  var autoScrollLeadingInsetRef = useRef(0);
  var autoScrollPinnedRef = useRef(false);
  var autoScrollTimeRef = useRef(0);
  var autoScrollMirroredRef = useRef(false);
  var contentExtentRef = useRef(0);
  var moveGeometryRef = useRef(null);
  var graceResetTimerRef = useRef(null);
  var clearGraceResetTimer = useCallback(function () {
    if (graceResetTimerRef.current) {
      clearTimeout(graceResetTimerRef.current);
      graceResetTimerRef.current = null;
    }
  }, []);
  var hoverRef = useRef(props.onHoverChanged);
  hoverRef.current = props.onHoverChanged;
  var reorderRef = useRef(props.onReordered);
  reorderRef.current = props.onReordered;
  var keyExtractorRef = useRef(keyExtractor);
  keyExtractorRef.current = keyExtractor;
  var onDragBeginRef = useRef(onDragBegin);
  onDragBeginRef.current = onDragBegin;
  var onDragEndRef = useRef(onDragEnd);
  onDragEndRef.current = onDragEnd;
  var dragEndOwedRef = useRef(false);
  var fireOwedDragEnd = useCallback(function () {
    if (dragEndOwedRef.current) {
      var _onDragEndRef$current;
      dragEndOwedRef.current = false;
      (_onDragEndRef$current = onDragEndRef.current) === null || _onDragEndRef$current === void 0 ? void 0 : _onDragEndRef$current.call(onDragEndRef);
    }
  }, []);
  var stableKeyExtractor = useCallback(function (item, index) {
    return keyExtractorRef.current(item, index);
  }, []);
  var dataRef = useRef(data);
  dataRef.current = data;
  var lastDataRef = useRef(data);
  var flatRef = useRef(null);
  var flatWrapRef = useRef(null);
  var flatWrapLayout = useRef({
    pos: 0,
    extent: 1
  });
  var flatWrapRefPosUpdatedRef = useRef(false);
  var scrollPos = useRef(0);
  var flowScrollPos = useRef(0);
  var pan = useRef(new Animated.Value(0)).current;
  var setPan = useCallback(function (value) {
    pan.setValue(value);
  }, [pan]);
  var shouldCapturePan = useCallback(function () {
    return !!activeDataRef.current && !isReorderingRef.current && !graceResetTimerRef.current;
  }, []);
  var effectiveScrollPos = useCallback(function () {
    return autoScrollSeededRef.current ? autoScrollScrollPosRef.current : scrollPos.current;
  }, []);
  var updateRendering = useCallback(function () {
    var geometry = moveGeometryRef.current;
    if (!geometry) {
      return;
    }
    var pos = geometry.pos,
      wrapPos = geometry.wrapPos,
      mirrored = geometry.mirrored;
    var scrolled = effectiveScrollPos();
    var panAmount = scrolled - grantScrollPosRef.current + pos;
    setPan(panAmount);
    var clientPos = wrapPos + scrolled;
    var dragCenter = clientPos + grantActiveCenterOffsetRef.current;
    var flowDragCenter = mirrored ? -dragCenter : dragCenter;
    var curIndex = 0;
    var key;
    while (curIndex < dataRef.current.length && layouts.hasOwnProperty(key = keyExtractorRef.current(dataRef.current[curIndex], curIndex)) && flowTrailingEdge(layouts[key], mirrored) < flowDragCenter) {
      curIndex++;
    }
    if (panIndex.current != curIndex) {
      var _hoverRef$current;
      panIndex.current = curIndex;
      hoverBus.notify(curIndex);
      (_hoverRef$current = hoverRef.current) === null || _hoverRef$current === void 0 ? void 0 : _hoverRef$current.call(hoverRef, curIndex);
    }
  }, []);
  var stopAutoScroll = useCallback(function () {
    if (autoScrollFrameRef.current !== null) {
      cancelAnimationFrame(autoScrollFrameRef.current);
      autoScrollFrameRef.current = null;
    }
    autoScrollVelocityRef.current = 0;
    autoScrollPinnedRef.current = false;
  }, []);
  var autoScrollFrame = useCallback(function () {
    var _flatRef$current;
    autoScrollFrameRef.current = null;
    autoScrollPinnedRef.current = false;
    if (!activeDataRef.current || autoScrollVelocityRef.current === 0) {
      return;
    }
    var now = Date.now();
    var elapsed = Math.min(now - autoScrollTimeRef.current, AUTO_SCROLL_MAX_FRAME_MILLIS);
    autoScrollTimeRef.current = now;
    if (elapsed <= 0) {
      autoScrollFrameRef.current = requestAnimationFrame(autoScrollFrame);
      return;
    }
    var mirrored = autoScrollMirroredRef.current;
    var travel = autoScrollVelocityRef.current * elapsed / 1000;
    var minOffset = -Math.max(autoScrollLeadingInsetRef.current, 0);
    var offset = Math.min(Math.max(autoScrollOffsetRef.current + (mirrored ? -travel : travel), minOffset), contentExtentRef.current ? Math.max(minOffset, contentExtentRef.current - flatWrapLayout.current.extent + autoScrollTrailingInsetRef.current) : Number.POSITIVE_INFINITY);
    var applied = offset - autoScrollOffsetRef.current;
    if (applied === 0) {
      autoScrollPinnedRef.current = true;
      return;
    }
    autoScrollOffsetRef.current = offset;
    autoScrollScrollPosRef.current += mirrored ? -applied : applied;
    (_flatRef$current = flatRef.current) === null || _flatRef$current === void 0 ? void 0 : _flatRef$current.scrollToOffset({
      animated: false,
      offset: offset
    });
    updateRendering();
    autoScrollFrameRef.current = requestAnimationFrame(autoScrollFrame);
  }, []);
  var resumeAutoScrollIfPinned = useCallback(function () {
    if (activeDataRef.current && autoScrollPinnedRef.current && autoScrollVelocityRef.current !== 0 && autoScrollFrameRef.current === null) {
      autoScrollPinnedRef.current = false;
      autoScrollTimeRef.current = Date.now();
      autoScrollFrameRef.current = requestAnimationFrame(autoScrollFrame);
    }
  }, []);
  var setAutoScrollVelocity = useCallback(function (overshoot, dragItemExtent, mirrored) {
    if (overshoot === 0) {
      stopAutoScroll();
      return;
    }
    var ramp = Math.min(Math.max(dragItemExtent, AUTO_SCROLL_MIN_RAMP_PIXELS), AUTO_SCROLL_MAX_RAMP_PIXELS);
    var intensity = Math.min(Math.abs(overshoot) / ramp, 1);
    autoScrollVelocityRef.current = Math.sign(overshoot) * (AUTO_SCROLL_MIN_PIXELS_PER_SEC + (AUTO_SCROLL_MAX_PIXELS_PER_SEC - AUTO_SCROLL_MIN_PIXELS_PER_SEC) * intensity);
    if (!autoScrollSeededRef.current) {
      autoScrollSeededRef.current = true;
      autoScrollMirroredRef.current = mirrored;
      autoScrollOffsetRef.current = mirrored ? flowScrollPos.current : scrollPos.current;
      autoScrollScrollPosRef.current = scrollPos.current;
    }
    if (autoScrollFrameRef.current === null) {
      autoScrollTimeRef.current = Date.now();
      autoScrollFrameRef.current = requestAnimationFrame(autoScrollFrame);
    }
  }, []);
  var onPanResponderGrant = useCallback(function (_, gestate) {
    var _flatWrapRef$current, _onDragBeginRef$curre;
    grantScrollPosRef.current = scrollPos.current;
    setPan(0);
    panGrantedRef.current = true;
    flatWrapRefPosUpdatedRef.current = false;
    (_flatWrapRef$current = flatWrapRef.current) === null || _flatWrapRef$current === void 0 ? void 0 : _flatWrapRef$current.measure(function (_x, _y, _width, _height, pageX, pageY) {
      flatWrapLayout.current = _extends({}, flatWrapLayout.current, {
        pos: props.horizontal ? pageX : pageY
      });
      if (activeDataRef.current && layouts.hasOwnProperty(activeDataRef.current.key)) {
        var itemLayout = layouts[activeDataRef.current.key];
        var screenPos = props.horizontal ? gestate.x0 : gestate.y0;
        var clientViewPos = screenPos - flatWrapLayout.current.pos;
        var clientPos = clientViewPos + scrollPos.current;
        var posOnActiveItem = clientPos - itemLayout.pos;
        grantActiveCenterOffsetRef.current = itemLayout.extent / 2 - posOnActiveItem;
      } else {
        grantActiveCenterOffsetRef.current = 0;
      }
      flatWrapRefPosUpdatedRef.current = true;
    });
    dragEndOwedRef.current = true;
    (_onDragBeginRef$curre = onDragBeginRef.current) === null || _onDragBeginRef$curre === void 0 ? void 0 : _onDragBeginRef$curre.call(onDragBeginRef);
  }, []);
  var onPanResponderMove = useCallback(function (_, gestate) {
    if (!flatWrapRefPosUpdatedRef.current || !activeDataRef.current || !layouts.hasOwnProperty(activeDataRef.current.key)) {
      return;
    }
    var mirrored = isLayoutMirrored(props.horizontal);
    var posOrigin = props.horizontal ? gestate.x0 : gestate.y0;
    var pos = props.horizontal ? gestate.dx : gestate.dy;
    var wrapPos = posOrigin + pos - flatWrapLayout.current.pos;
    var dragItemExtent = layouts[activeDataRef.current.key].extent;
    var pointerOffsetWithinItem = dragItemExtent / 2 - grantActiveCenterOffsetRef.current;
    if (props.scrollEnabled === false && flatWrapLayout.current.extent > 0) {
      var minWrapPos = pointerOffsetWithinItem;
      var maxWrapPos = Math.max(minWrapPos, flatWrapLayout.current.extent - (dragItemExtent - pointerOffsetWithinItem));
      var clampedWrapPos = Math.min(Math.max(wrapPos, minWrapPos), maxWrapPos);
      if (clampedWrapPos !== wrapPos) {
        wrapPos = clampedWrapPos;
        pos = clampedWrapPos - posOrigin + flatWrapLayout.current.pos;
      }
    }
    var leadingEdge = wrapPos - dragItemExtent / 2;
    var trailingEdge = wrapPos + dragItemExtent / 2;
    var overshoot = 0;
    if (props.scrollEnabled === false) {
      overshoot = 0;
    } else if (leadingEdge < 0) {
      overshoot = leadingEdge;
    } else if (trailingEdge > flatWrapLayout.current.extent) {
      overshoot = trailingEdge - flatWrapLayout.current.extent;
    }
    moveGeometryRef.current = {
      pos: pos,
      wrapPos: wrapPos,
      mirrored: mirrored
    };
    setAutoScrollVelocity(overshoot, dragItemExtent, mirrored);
    updateRendering();
  }, []);
  var onPanResponderRelease = useCallback(function (_, _gestate) {
    try {
      var releasedData = activeDataRef.current;
      var activeIndex = releasedData === null || releasedData === void 0 ? void 0 : releasedData.index;
      var reorderCallback;
      stopAutoScroll();
      fireOwedDragEnd();
      var _temp2 = function () {
        if (activeIndex != null && activeIndex !== panIndex.current && !(activeIndex === dataRef.current.length - 1 && panIndex.current > activeIndex)) {
          var _temp = _finallyRethrows(function () {
            var _reorderCallback;
            isReorderingRef.current = true;
            reorderCallback = reorderRef.current;
            return Promise.resolve((_reorderCallback = reorderCallback) === null || _reorderCallback === void 0 ? void 0 : _reorderCallback(activeIndex, panIndex.current)).then(function () {});
          }, function (_wasThrown, _result) {
            isReorderingRef.current = false;
            if (activeDataRef.current && activeDataRef.current === releasedData) {
              if (!reorderCallback) {
                reset();
              } else {
                clearGraceResetTimer();
                graceResetTimerRef.current = setTimeout(function () {
                  graceResetTimerRef.current = null;
                  if (activeDataRef.current) {
                    reset();
                  }
                }, REORDER_RESET_GRACE_MILLIS);
              }
            }
            if (_wasThrown) throw _result;
            return _result;
          });
          if (_temp && _temp.then) return _temp.then(function () {});
        } else {
          reset();
        }
      }();
      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
    } catch (e) {
      return Promise.reject(e);
    }
  }, []);
  var panResponder = useRef(PanResponder.create({
    onStartShouldSetPanResponderCapture: shouldCapturePan,
    onStartShouldSetPanResponder: shouldCapturePan,
    onMoveShouldSetPanResponder: shouldCapturePan,
    onMoveShouldSetPanResponderCapture: shouldCapturePan,
    onPanResponderGrant: onPanResponderGrant,
    onPanResponderMove: onPanResponderMove,
    onPanResponderRelease: onPanResponderRelease,
    onPanResponderTerminationRequest: function onPanResponderTerminationRequest() {
      return false;
    },
    onPanResponderTerminate: onPanResponderRelease
  })).current;
  var reset = useCallback(function (shouldSetExtra) {
    if (shouldSetExtra === void 0) {
      shouldSetExtra = true;
    }
    clearGraceResetTimer();
    activeDataRef.current = null;
    panIndex.current = -1;
    hoverBus.index = -1;
    if (shouldSetExtra) {
      setExtra({
        activeKey: null,
        detritus: Math.random().toString()
      });
    }
    panGrantedRef.current = false;
    grantActiveCenterOffsetRef.current = 0;
    moveGeometryRef.current = null;
    autoScrollSeededRef.current = false;
    stopAutoScroll();
  }, []);
  if (lastDataRef.current !== data) {
    lastDataRef.current = data;
    var currentKeys = new Set(data.map(function (item, index) {
      return keyExtractorRef.current(item, index);
    }));
    Object.keys(layouts).forEach(function (key) {
      if (!currentKeys.has(key)) {
        delete layouts[key];
      }
    });
    reset(false);
  }
  useEffect(function () {
    return function () {
      clearGraceResetTimer();
      stopAutoScroll();
      fireOwedDragEnd();
    };
  }, [clearGraceResetTimer, stopAutoScroll, fireOwedDragEnd]);
  useLayoutEffect(function () {
    setPan(0);
    fireOwedDragEnd();
  }, [data]);
  var startDrag = useCallback(function (index, key) {
    if (dataRef.current.length > 1) {
      clearGraceResetTimer();
      panGrantedRef.current = false;
      autoScrollSeededRef.current = false;
      moveGeometryRef.current = null;
      stopAutoScroll();
      pan.setValue(0);
      activeDataRef.current = {
        index: index,
        key: key
      };
      panIndex.current = index;
      hoverBus.index = index;
      setExtra({
        activeKey: key
      });
    }
  }, []);
  var endDrag = useCallback(function () {
    if (activeDataRef.current && !panGrantedRef.current) {
      reset();
    }
  }, []);
  var renderDragItem = useCallback(function (info) {
    var _activeDataRef$curren3;
    var key = keyExtractorRef.current(info.item, info.index);
    var isActive = key === ((_activeDataRef$curren3 = activeDataRef.current) === null || _activeDataRef$curren3 === void 0 ? void 0 : _activeDataRef$curren3.key);
    return React.createElement(DragListItem, {
      item: info.item,
      index: info.index,
      itemKey: key,
      isActive: isActive,
      separators: info.separators,
      renderItem: renderItem,
      startDrag: startDrag,
      endDrag: endDrag,
      extraData: props.extraData,
      numItems: data.length
    });
  }, [renderItem, props.extraData, data.length]);
  var onDragScroll = useCallback(function (event) {
    var _ref, _ref2;
    var _event$nativeEvent = event.nativeEvent,
      contentOffset = _event$nativeEvent.contentOffset,
      contentSize = _event$nativeEvent.contentSize,
      layoutMeasurement = _event$nativeEvent.layoutMeasurement,
      contentInset = _event$nativeEvent.contentInset;
    var mirroredLayout = isLayoutMirrored(props.horizontal);
    scrollPos.current = props.horizontal ? contentOffset.x : contentOffset.y;
    flowScrollPos.current = mirroredLayout ? contentSize.width - (contentOffset.x + layoutMeasurement.width) : scrollPos.current;
    contentExtentRef.current = props.horizontal ? contentSize.width : contentSize.height;
    autoScrollTrailingInsetRef.current = mirroredLayout ? 0 : (_ref = props.horizontal ? contentInset === null || contentInset === void 0 ? void 0 : contentInset.right : contentInset === null || contentInset === void 0 ? void 0 : contentInset.bottom) != null ? _ref : 0;
    autoScrollLeadingInsetRef.current = mirroredLayout ? 0 : (_ref2 = props.horizontal ? contentInset === null || contentInset === void 0 ? void 0 : contentInset.left : contentInset === null || contentInset === void 0 ? void 0 : contentInset.top) != null ? _ref2 : 0;
    resumeAutoScrollIfPinned();
    if (onScroll) {
      onScroll(event);
    }
  }, [onScroll]);
  var onDragContentSizeChange = useCallback(function (width, height) {
    contentExtentRef.current = props.horizontal ? width : height;
    resumeAutoScrollIfPinned();
    if (onContentSizeChange) {
      onContentSizeChange(width, height);
    }
  }, [onContentSizeChange]);
  var onDragLayout = useCallback(function (evt) {
    var _flatWrapRef$current2;
    (_flatWrapRef$current2 = flatWrapRef.current) === null || _flatWrapRef$current2 === void 0 ? void 0 : _flatWrapRef$current2.measure(function (_x, _y, width, height, pageX, pageY) {
      flatWrapLayout.current = props.horizontal ? {
        pos: pageX,
        extent: width
      } : {
        pos: pageY,
        extent: height
      };
      resumeAutoScrollIfPinned();
    });
    if (onLayout) {
      onLayout(evt);
    }
  }, [onLayout]);
  return React.createElement(DragListProvider, {
    activeData: activeDataRef.current,
    keyExtractor: keyExtractorRef.current,
    pan: pan,
    hoverBus: hoverBus,
    layouts: layouts,
    horizontal: props.horizontal
  }, React.createElement(View, Object.assign({
    ref: flatWrapRef,
    style: containerStyle
  }, panResponder.panHandlers, {
    onLayout: onDragLayout
  }), React.createElement(CustomFlatList, Object.assign({
    ref: function ref(r) {
      flatRef.current = r;
      if (!!_ref3) {
        if (typeof _ref3 === "function") {
          _ref3(r);
        } else {
          _ref3.current = r;
        }
      }
    },
    keyExtractor: stableKeyExtractor,
    data: data,
    renderItem: renderDragItem,
    CellRendererComponent: CellRendererComponent,
    extraData: extra,
    onScroll: onDragScroll,
    onContentSizeChange: onDragContentSizeChange,
    scrollEventThrottle: 16,
    removeClippedSubviews: false
  }, rest, {
    scrollEnabled: activeDataRef.current ? false : (_props$scrollEnabled = props.scrollEnabled) != null ? _props$scrollEnabled : true
  }))));
}
var SLIDE_MILLIS = 200;
var AUTO_SCROLL_MIN_PIXELS_PER_SEC = 90;
var AUTO_SCROLL_MAX_PIXELS_PER_SEC = 850;
var AUTO_SCROLL_MIN_RAMP_PIXELS = 40;
var AUTO_SCROLL_MAX_RAMP_PIXELS = 200;
var AUTO_SCROLL_MAX_FRAME_MILLIS = 50;
var REORDER_RESET_GRACE_MILLIS = 1500;
var ANIM_VALUE_ZERO = new Animated.Value(0);
var ANIM_VALUE_ONE = new Animated.Value(1);
var ANIM_VALUE_NINER = new Animated.Value(999);
function CellRendererComponent(props) {
  var item = props.item,
    index = props.index,
    children = props.children,
    onLayout = props.onLayout,
    rest = _objectWithoutPropertiesLoose(props, _excluded2);
  var _useDragListContext = useDragListContext(),
    keyExtractor = _useDragListContext.keyExtractor,
    activeData = _useDragListContext.activeData,
    pan = _useDragListContext.pan,
    hoverBus = _useDragListContext.hoverBus,
    layouts = _useDragListContext.layouts,
    horizontal = _useDragListContext.horizontal;
  var cellRef = useRef(null);
  var key = keyExtractor(item, index);
  var isActive = key === (activeData === null || activeData === void 0 ? void 0 : activeData.key);
  var anim = useRef(new Animated.Value(0)).current;
  var style = useMemo(function () {
    return [props.style, isActive ? {
      elevation: ANIM_VALUE_ONE,
      zIndex: ANIM_VALUE_NINER,
      transform: [horizontal ? {
        translateX: pan
      } : {
        translateY: pan
      }]
    } : activeData ? {
      elevation: ANIM_VALUE_ZERO,
      zIndex: ANIM_VALUE_ZERO,
      transform: [horizontal ? {
        translateX: anim
      } : {
        translateY: anim
      }]
    } : {
      elevation: ANIM_VALUE_ZERO,
      zIndex: ANIM_VALUE_ZERO,
      transform: [horizontal ? {
        translateX: 0
      } : {
        translateY: 0
      }]
    }];
  }, [props.style, isActive, !!activeData, horizontal, pan, anim]);
  var onCellLayout = useCallback(function (evt) {
    if (onLayout) {
      onLayout(evt);
    }
    var layout = evt.nativeEvent.layout;
    layouts[key] = horizontal ? {
      pos: layout.x,
      extent: layout.width
    } : {
      pos: layout.y,
      extent: layout.height
    };
  }, [onLayout, horizontal, key, layouts]);
  var slideTargetRef = useRef(0);
  useEffect(function () {
    if (activeData == null) {
      slideTargetRef.current = 0;
      anim.setValue(0);
      return;
    }
    var activeKey = activeData.key;
    var activeIndex = activeData.index;
    var applySlide = function applySlide(hoverIndex) {
      var target = 0;
      if (!isActive && layouts.hasOwnProperty(activeKey)) {
        var slot = isLayoutMirrored(horizontal) ? -layouts[activeKey].extent : layouts[activeKey].extent;
        if (index >= hoverIndex && index <= activeIndex) {
          target = slot;
        } else if (index >= activeIndex && index <= hoverIndex) {
          target = -slot;
        }
      }
      if (target === slideTargetRef.current) {
        return;
      }
      slideTargetRef.current = target;
      if (target === 0) {
        anim.setValue(0);
      } else {
        Animated.timing(anim, {
          duration: SLIDE_MILLIS,
          easing: Easing.inOut(Easing.linear),
          toValue: target,
          useNativeDriver: false
        }).start();
      }
    };
    applySlide(hoverBus.index);
    return hoverBus.subscribe(applySlide);
  }, [index, isActive, activeData, hoverBus]);
  if (Platform.OS == "web") {
    useEffect(function () {
      var _cellRef$current;
      (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : _cellRef$current.measure(function (x, y, w, h) {
        layouts[key] = horizontal ? {
          pos: x,
          extent: w
        } : {
          pos: y,
          extent: h
        };
      });
    }, [index]);
  }
  return React.createElement(Animated.View, Object.assign({}, rest, {
    style: style,
    onLayout: onCellLayout,
    ref: cellRef,
    key: key
  }), children);
}
var DragList = React.forwardRef(DragListImpl);

export default DragList;
//# sourceMappingURL=index.modern.js.map