react-native-draglist
Version:
FlatList that reorders items by dragging
716 lines (706 loc) • 28.1 kB
JavaScript
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var reactNative = require('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__default.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 = React.useMemo(function () {
return {
activeData: activeData,
keyExtractor: keyExtractor,
pan: pan,
hoverBus: hoverBus,
layouts: layouts,
horizontal: horizontal
};
}, [activeData, keyExtractor, pan, hoverBus, layouts, horizontal]);
return React__default.createElement(DragListContext.Provider, {
value: value
}, children);
}
function useDragListContext() {
var value = React.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 = React.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__default.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 && reactNative.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 ? reactNative.FlatList : _props$CustomFlatList,
rest = _objectWithoutPropertiesLoose(props, _excluded);
var activeDataRef = React.useRef(null);
var isReorderingRef = React.useRef(false);
var panIndex = React.useRef(-1);
var hoverBus = React.useRef(createHoverBus()).current;
var _useState = React.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 = React.useRef({}).current;
var panGrantedRef = React.useRef(false);
var grantScrollPosRef = React.useRef(0);
var grantActiveCenterOffsetRef = React.useRef(0);
var autoScrollFrameRef = React.useRef(null);
var autoScrollVelocityRef = React.useRef(0);
var autoScrollOffsetRef = React.useRef(0);
var autoScrollScrollPosRef = React.useRef(0);
var autoScrollSeededRef = React.useRef(false);
var autoScrollTrailingInsetRef = React.useRef(0);
var autoScrollLeadingInsetRef = React.useRef(0);
var autoScrollPinnedRef = React.useRef(false);
var autoScrollTimeRef = React.useRef(0);
var autoScrollMirroredRef = React.useRef(false);
var contentExtentRef = React.useRef(0);
var moveGeometryRef = React.useRef(null);
var graceResetTimerRef = React.useRef(null);
var clearGraceResetTimer = React.useCallback(function () {
if (graceResetTimerRef.current) {
clearTimeout(graceResetTimerRef.current);
graceResetTimerRef.current = null;
}
}, []);
var hoverRef = React.useRef(props.onHoverChanged);
hoverRef.current = props.onHoverChanged;
var reorderRef = React.useRef(props.onReordered);
reorderRef.current = props.onReordered;
var keyExtractorRef = React.useRef(keyExtractor);
keyExtractorRef.current = keyExtractor;
var onDragBeginRef = React.useRef(onDragBegin);
onDragBeginRef.current = onDragBegin;
var onDragEndRef = React.useRef(onDragEnd);
onDragEndRef.current = onDragEnd;
var dragEndOwedRef = React.useRef(false);
var fireOwedDragEnd = React.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 = React.useCallback(function (item, index) {
return keyExtractorRef.current(item, index);
}, []);
var dataRef = React.useRef(data);
dataRef.current = data;
var lastDataRef = React.useRef(data);
var flatRef = React.useRef(null);
var flatWrapRef = React.useRef(null);
var flatWrapLayout = React.useRef({
pos: 0,
extent: 1
});
var flatWrapRefPosUpdatedRef = React.useRef(false);
var scrollPos = React.useRef(0);
var flowScrollPos = React.useRef(0);
var pan = React.useRef(new reactNative.Animated.Value(0)).current;
var setPan = React.useCallback(function (value) {
pan.setValue(value);
}, [pan]);
var shouldCapturePan = React.useCallback(function () {
return !!activeDataRef.current && !isReorderingRef.current && !graceResetTimerRef.current;
}, []);
var effectiveScrollPos = React.useCallback(function () {
return autoScrollSeededRef.current ? autoScrollScrollPosRef.current : scrollPos.current;
}, []);
var updateRendering = React.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 = React.useCallback(function () {
if (autoScrollFrameRef.current !== null) {
cancelAnimationFrame(autoScrollFrameRef.current);
autoScrollFrameRef.current = null;
}
autoScrollVelocityRef.current = 0;
autoScrollPinnedRef.current = false;
}, []);
var autoScrollFrame = React.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 = React.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 = React.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 = React.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 = React.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 = React.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 = React.useRef(reactNative.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 = React.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);
}
React.useEffect(function () {
return function () {
clearGraceResetTimer();
stopAutoScroll();
fireOwedDragEnd();
};
}, [clearGraceResetTimer, stopAutoScroll, fireOwedDragEnd]);
React.useLayoutEffect(function () {
setPan(0);
fireOwedDragEnd();
}, [data]);
var startDrag = React.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 = React.useCallback(function () {
if (activeDataRef.current && !panGrantedRef.current) {
reset();
}
}, []);
var renderDragItem = React.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__default.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 = React.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 = React.useCallback(function (width, height) {
contentExtentRef.current = props.horizontal ? width : height;
resumeAutoScrollIfPinned();
if (onContentSizeChange) {
onContentSizeChange(width, height);
}
}, [onContentSizeChange]);
var onDragLayout = React.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__default.createElement(DragListProvider, {
activeData: activeDataRef.current,
keyExtractor: keyExtractorRef.current,
pan: pan,
hoverBus: hoverBus,
layouts: layouts,
horizontal: props.horizontal
}, React__default.createElement(reactNative.View, Object.assign({
ref: flatWrapRef,
style: containerStyle
}, panResponder.panHandlers, {
onLayout: onDragLayout
}), React__default.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 reactNative.Animated.Value(0);
var ANIM_VALUE_ONE = new reactNative.Animated.Value(1);
var ANIM_VALUE_NINER = new reactNative.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 = React.useRef(null);
var key = keyExtractor(item, index);
var isActive = key === (activeData === null || activeData === void 0 ? void 0 : activeData.key);
var anim = React.useRef(new reactNative.Animated.Value(0)).current;
var style = React.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 = React.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 = React.useRef(0);
React.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 {
reactNative.Animated.timing(anim, {
duration: SLIDE_MILLIS,
easing: reactNative.Easing.inOut(reactNative.Easing.linear),
toValue: target,
useNativeDriver: false
}).start();
}
};
applySlide(hoverBus.index);
return hoverBus.subscribe(applySlide);
}, [index, isActive, activeData, hoverBus]);
if (reactNative.Platform.OS == "web") {
React.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__default.createElement(reactNative.Animated.View, Object.assign({}, rest, {
style: style,
onLayout: onCellLayout,
ref: cellRef,
key: key
}), children);
}
var DragList = React__default.forwardRef(DragListImpl);
module.exports = DragList;
//# sourceMappingURL=index.js.map