react-native-gesture-handler
Version:
Declarative API exposing native platform touch and gesture system to React Native
305 lines (267 loc) • 14.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _gestureObjects = require("../handlers/gestures/gestureObjects");
var _GestureDetector = require("../handlers/gestures/GestureDetector");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _reactNative = require("react-native");
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const DRAG_TOSS = 0.05;
var SwipeDirection;
(function (SwipeDirection) {
SwipeDirection["LEFT"] = "left";
SwipeDirection["RIGHT"] = "right";
})(SwipeDirection || (SwipeDirection = {}));
const Swipeable = /*#__PURE__*/(0, _react.forwardRef)(function Swipeable(props, ref) {
const defaultProps = {
friction: 1,
overshootFriction: 1,
dragOffset: 10,
enableTrackpadTwoFingerGesture: false
};
const {
leftThreshold,
rightThreshold,
enabled,
containerStyle,
childrenContainerStyle,
animationOptions,
overshootLeft,
overshootRight,
testID,
children,
enableTrackpadTwoFingerGesture = defaultProps.enableTrackpadTwoFingerGesture,
dragOffsetFromLeftEdge = defaultProps.dragOffset,
dragOffsetFromRightEdge = defaultProps.dragOffset,
friction = defaultProps.friction,
overshootFriction = defaultProps.overshootFriction,
onSwipeableOpenStartDrag,
onSwipeableCloseStartDrag,
onSwipeableWillOpen,
onSwipeableWillClose,
onSwipeableOpen,
onSwipeableClose,
renderLeftActions,
renderRightActions,
...remainingProps
} = props;
const rowState = (0, _reactNativeReanimated.useSharedValue)(0);
const userDrag = (0, _reactNativeReanimated.useSharedValue)(0);
const appliedTranslation = (0, _reactNativeReanimated.useSharedValue)(0);
const rowWidth = (0, _reactNativeReanimated.useSharedValue)(0);
const leftWidth = (0, _reactNativeReanimated.useSharedValue)(0);
const rightWidth = (0, _reactNativeReanimated.useSharedValue)(0); // used for synchronizing layout measurements between JS and UI
const rightOffset = (0, _reactNativeReanimated.useSharedValue)(null);
const showLeftProgress = (0, _reactNativeReanimated.useSharedValue)(0);
const showRightProgress = (0, _reactNativeReanimated.useSharedValue)(0);
const updateRightElementWidth = (0, _react.useCallback)(() => {
'worklet';
if (rightOffset.value === null) {
rightOffset.value = rowWidth.value;
}
rightWidth.value = Math.max(0, rowWidth.value - rightOffset.value);
}, [rightOffset, rightWidth, rowWidth]);
const updateAnimatedEvent = (0, _react.useCallback)(() => {
'worklet';
const shouldOvershootLeft = overshootLeft !== null && overshootLeft !== void 0 ? overshootLeft : leftWidth.value > 0;
const shouldOvershootRight = overshootRight !== null && overshootRight !== void 0 ? overshootRight : rightWidth.value > 0;
const startOffset = rowState.value === 1 ? leftWidth.value : rowState.value === -1 ? -rightWidth.value : 0;
const offsetDrag = userDrag.value / friction + startOffset;
appliedTranslation.value = (0, _reactNativeReanimated.interpolate)(offsetDrag, [-rightWidth.value - 1, -rightWidth.value, leftWidth.value, leftWidth.value + 1], [-rightWidth.value - (shouldOvershootRight ? 1 / overshootFriction : 0), -rightWidth.value, leftWidth.value, leftWidth.value + (shouldOvershootLeft ? 1 / overshootFriction : 0)]);
showLeftProgress.value = leftWidth.value > 0 ? (0, _reactNativeReanimated.interpolate)(appliedTranslation.value, [-1, 0, leftWidth.value], [0, 0, 1]) : 0;
showRightProgress.value = rightWidth.value > 0 ? (0, _reactNativeReanimated.interpolate)(appliedTranslation.value, [-rightWidth.value, 0, 1], [1, 0, 0]) : 0;
}, [appliedTranslation, friction, leftWidth, overshootFriction, rightWidth, rowState, showLeftProgress, showRightProgress, userDrag, overshootLeft, overshootRight]);
const dispatchImmediateEvents = (0, _react.useCallback)((fromValue, toValue) => {
'worklet';
if (toValue > 0 && onSwipeableWillOpen) {
(0, _reactNativeReanimated.runOnJS)(onSwipeableWillOpen)(SwipeDirection.RIGHT);
} else if (toValue < 0 && onSwipeableWillOpen) {
(0, _reactNativeReanimated.runOnJS)(onSwipeableWillOpen)(SwipeDirection.LEFT);
} else if (onSwipeableWillClose) {
(0, _reactNativeReanimated.runOnJS)(onSwipeableWillClose)(fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT);
}
}, [onSwipeableWillClose, onSwipeableWillOpen]);
const dispatchEndEvents = (0, _react.useCallback)((fromValue, toValue) => {
'worklet';
if (toValue > 0 && onSwipeableOpen) {
(0, _reactNativeReanimated.runOnJS)(onSwipeableOpen)(SwipeDirection.RIGHT);
} else if (toValue < 0 && onSwipeableOpen) {
(0, _reactNativeReanimated.runOnJS)(onSwipeableOpen)(SwipeDirection.LEFT);
} else if (onSwipeableClose) {
(0, _reactNativeReanimated.runOnJS)(onSwipeableClose)(fromValue > 0 ? SwipeDirection.LEFT : SwipeDirection.RIGHT);
}
}, [onSwipeableClose, onSwipeableOpen]);
const animateRow = (0, _react.useCallback)((toValue, velocityX) => {
'worklet';
const translationSpringConfig = {
duration: 1000,
dampingRatio: 0.9,
stiffness: 500,
velocity: velocityX,
overshootClamping: true,
...animationOptions
};
const isClosing = toValue === 0;
const moveToRight = isClosing ? rowState.value < 0 : toValue > 0;
const usedWidth = isClosing ? moveToRight ? rightWidth.value : leftWidth.value : moveToRight ? leftWidth.value : rightWidth.value;
const progressSpringConfig = { ...translationSpringConfig,
restDisplacementThreshold: 0.01,
restSpeedThreshold: 0.01,
velocity: velocityX && (0, _reactNativeReanimated.interpolate)(velocityX, [-usedWidth, usedWidth], [-1, 1])
};
const frozenRowState = rowState.value;
appliedTranslation.value = (0, _reactNativeReanimated.withSpring)(toValue, translationSpringConfig, isFinished => {
if (isFinished) {
dispatchEndEvents(frozenRowState, toValue);
}
});
const progressTarget = toValue === 0 ? 0 : 1;
showLeftProgress.value = leftWidth.value > 0 ? (0, _reactNativeReanimated.withSpring)(progressTarget, progressSpringConfig) : 0;
showRightProgress.value = rightWidth.value > 0 ? (0, _reactNativeReanimated.withSpring)(progressTarget, progressSpringConfig) : 0;
dispatchImmediateEvents(frozenRowState, toValue);
rowState.value = Math.sign(toValue);
}, [rowState, animationOptions, appliedTranslation, showLeftProgress, leftWidth, showRightProgress, rightWidth, dispatchImmediateEvents, dispatchEndEvents]);
const swipeableMethods = (0, _react.useMemo)(() => ({
close() {
'worklet';
animateRow(0);
},
openLeft() {
'worklet';
animateRow(leftWidth.value);
},
openRight() {
'worklet'; // rightOffset and rowWidth are already much sooner than rightWidth
var _rightOffset$value;
animateRow(((_rightOffset$value = rightOffset.value) !== null && _rightOffset$value !== void 0 ? _rightOffset$value : 0) - rowWidth.value);
},
reset() {
'worklet';
userDrag.value = 0;
showLeftProgress.value = 0;
appliedTranslation.value = 0;
rowState.value = 0;
}
}), [leftWidth, rightOffset, rowWidth, userDrag, showLeftProgress, appliedTranslation, rowState, animateRow]);
const onRowLayout = (0, _react.useCallback)(({
nativeEvent
}) => {
rowWidth.value = nativeEvent.layout.width;
}, [rowWidth]);
const leftElement = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: [styles.leftActions]
}, renderLeftActions === null || renderLeftActions === void 0 ? void 0 : renderLeftActions(showLeftProgress, appliedTranslation, swipeableMethods), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
onLayout: ({
nativeEvent
}) => leftWidth.value = nativeEvent.layout.x
})), [appliedTranslation, leftWidth, renderLeftActions, showLeftProgress, swipeableMethods]);
const rightElement = (0, _react.useCallback)(() => /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: [styles.rightActions]
}, renderRightActions === null || renderRightActions === void 0 ? void 0 : renderRightActions(showRightProgress, appliedTranslation, swipeableMethods), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
onLayout: ({
nativeEvent
}) => {
rightOffset.value = nativeEvent.layout.x;
}
})), [appliedTranslation, renderRightActions, rightOffset, showRightProgress, swipeableMethods]);
const handleRelease = (0, _react.useCallback)(event => {
'worklet';
const {
velocityX
} = event;
userDrag.value = event.translationX;
updateRightElementWidth();
const leftThresholdProp = leftThreshold !== null && leftThreshold !== void 0 ? leftThreshold : leftWidth.value / 2;
const rightThresholdProp = rightThreshold !== null && rightThreshold !== void 0 ? rightThreshold : rightWidth.value / 2;
const translationX = (userDrag.value + DRAG_TOSS * velocityX) / friction;
let toValue = 0;
if (rowState.value === 0) {
if (translationX > leftThresholdProp) {
toValue = leftWidth.value;
} else if (translationX < -rightThresholdProp) {
toValue = -rightWidth.value;
}
} else if (rowState.value === 1) {
// Swiped to left
if (translationX > -leftThresholdProp) {
toValue = leftWidth.value;
}
} else {
// Swiped to right
if (translationX < rightThresholdProp) {
toValue = -rightWidth.value;
}
}
animateRow(toValue, velocityX / friction);
}, [animateRow, friction, leftThreshold, leftWidth, rightThreshold, rightWidth, rowState, userDrag, updateRightElementWidth]);
const close = (0, _react.useCallback)(() => {
'worklet';
animateRow(0);
}, [animateRow]);
const dragStarted = (0, _reactNativeReanimated.useSharedValue)(false);
const tapGesture = (0, _react.useMemo)(() => _gestureObjects.GestureObjects.Tap().shouldCancelWhenOutside(true).onStart(() => {
if (rowState.value !== 0) {
close();
}
}), [close, rowState]);
const panGesture = (0, _react.useMemo)(() => _gestureObjects.GestureObjects.Pan().enabled(enabled !== false).enableTrackpadTwoFingerGesture(enableTrackpadTwoFingerGesture).activeOffsetX([-dragOffsetFromRightEdge, dragOffsetFromLeftEdge]).onStart(() => {
updateRightElementWidth();
}).onUpdate(event => {
userDrag.value = event.translationX;
const direction = rowState.value === -1 ? SwipeDirection.RIGHT : rowState.value === 1 ? SwipeDirection.LEFT : event.translationX > 0 ? SwipeDirection.RIGHT : SwipeDirection.LEFT;
if (!dragStarted.value) {
dragStarted.value = true;
if (rowState.value === 0 && onSwipeableOpenStartDrag) {
(0, _reactNativeReanimated.runOnJS)(onSwipeableOpenStartDrag)(direction);
} else if (onSwipeableCloseStartDrag) {
(0, _reactNativeReanimated.runOnJS)(onSwipeableCloseStartDrag)(direction);
}
}
updateAnimatedEvent();
}).onEnd(event => {
handleRelease(event);
}).onFinalize(() => {
dragStarted.value = false;
}), [dragOffsetFromLeftEdge, dragOffsetFromRightEdge, dragStarted, enableTrackpadTwoFingerGesture, enabled, handleRelease, onSwipeableCloseStartDrag, onSwipeableOpenStartDrag, rowState, updateAnimatedEvent, updateRightElementWidth, userDrag]);
(0, _react.useImperativeHandle)(ref, () => swipeableMethods, [swipeableMethods]);
const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
transform: [{
translateX: appliedTranslation.value
}],
pointerEvents: rowState.value === 0 ? 'auto' : 'box-only'
}), [appliedTranslation, rowState]);
const swipeableComponent = /*#__PURE__*/_react.default.createElement(_GestureDetector.GestureDetector, {
gesture: panGesture,
touchAction: "pan-y"
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, _extends({}, remainingProps, {
onLayout: onRowLayout,
style: [styles.container, containerStyle]
}), leftElement(), rightElement(), /*#__PURE__*/_react.default.createElement(_GestureDetector.GestureDetector, {
gesture: tapGesture,
touchAction: "pan-y"
}, /*#__PURE__*/_react.default.createElement(_reactNativeReanimated.default.View, {
style: [animatedStyle, childrenContainerStyle]
}, children))));
return testID ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
testID: testID
}, swipeableComponent) : swipeableComponent;
});
var _default = Swipeable;
exports.default = _default;
const styles = _reactNative.StyleSheet.create({
container: {
overflow: 'hidden'
},
leftActions: { ..._reactNative.StyleSheet.absoluteFillObject,
flexDirection: _reactNative.I18nManager.isRTL ? 'row-reverse' : 'row'
},
rightActions: { ..._reactNative.StyleSheet.absoluteFillObject,
flexDirection: _reactNative.I18nManager.isRTL ? 'row' : 'row-reverse'
}
});
//# sourceMappingURL=ReanimatedSwipeable.js.map