@gorhom/bottom-sheet
Version:
A performant interactive bottom sheet with fully configurable options 🚀
82 lines (80 loc) • 3.4 kB
JavaScript
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); }
import React, { useMemo, memo } from 'react';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';
import { BottomSheetDraggableContext } from '../../contexts/gesture';
import { useBottomSheetGestureHandlers, useBottomSheetInternal } from '../../hooks';
const BottomSheetDraggableViewComponent = ({
nativeGestureRef,
refreshControlGestureRef,
style,
children,
...rest
}) => {
//#region hooks
const {
enableContentPanningGesture,
simultaneousHandlers: _providedSimultaneousHandlers,
waitFor,
activeOffsetX,
activeOffsetY,
failOffsetX,
failOffsetY
} = useBottomSheetInternal();
const {
contentPanGestureHandler
} = useBottomSheetGestureHandlers();
//#endregion
//#region variables
const simultaneousHandlers = useMemo(() => {
const refs = [];
if (nativeGestureRef) {
refs.push(nativeGestureRef);
}
if (refreshControlGestureRef) {
refs.push(refreshControlGestureRef);
}
if (_providedSimultaneousHandlers) {
if (Array.isArray(_providedSimultaneousHandlers)) {
refs.push(..._providedSimultaneousHandlers);
} else {
refs.push(_providedSimultaneousHandlers);
}
}
return refs;
}, [_providedSimultaneousHandlers, nativeGestureRef, refreshControlGestureRef]);
const draggableGesture = useMemo(() => {
let gesture = Gesture.Pan().enabled(enableContentPanningGesture).shouldCancelWhenOutside(false).runOnJS(false).onStart(contentPanGestureHandler.handleOnStart).onChange(contentPanGestureHandler.handleOnChange).onEnd(contentPanGestureHandler.handleOnEnd).onFinalize(contentPanGestureHandler.handleOnFinalize);
if (waitFor) {
gesture = gesture.requireExternalGestureToFail(waitFor);
}
if (simultaneousHandlers) {
gesture = gesture.simultaneousWithExternalGesture(simultaneousHandlers);
}
if (activeOffsetX) {
gesture = gesture.activeOffsetX(activeOffsetX);
}
if (activeOffsetY) {
gesture = gesture.activeOffsetY(activeOffsetY);
}
if (failOffsetX) {
gesture = gesture.failOffsetX(failOffsetX);
}
if (failOffsetY) {
gesture = gesture.failOffsetY(failOffsetY);
}
return gesture;
}, [activeOffsetX, activeOffsetY, enableContentPanningGesture, failOffsetX, failOffsetY, simultaneousHandlers, waitFor, contentPanGestureHandler.handleOnChange, contentPanGestureHandler.handleOnEnd, contentPanGestureHandler.handleOnFinalize, contentPanGestureHandler.handleOnStart]);
//#endregion
return /*#__PURE__*/React.createElement(GestureDetector, {
gesture: draggableGesture
}, /*#__PURE__*/React.createElement(BottomSheetDraggableContext.Provider, {
value: draggableGesture
}, /*#__PURE__*/React.createElement(Animated.View, _extends({
style: style
}, rest), children)));
};
const BottomSheetDraggableView = /*#__PURE__*/memo(BottomSheetDraggableViewComponent);
BottomSheetDraggableView.displayName = 'BottomSheetDraggableView';
export default BottomSheetDraggableView;
//# sourceMappingURL=BottomSheetDraggableView.js.map