@r3l/app
Version:
242 lines (200 loc) • 9.03 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BottomSheet = BottomSheet;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactNativeWeb = require("react-native-web");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
var USE_NATIVE_DRIVER = true;
var windowHeight = _reactNativeWeb.Dimensions.get('window').height;
BottomSheet.propTypes = {
children: _propTypes.default.node,
close: _propTypes.default.func
};
function BottomSheet(_ref) {
var children = _ref.children,
close = _ref.close;
var _useState = (0, _react.useState)(0),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
height = _useState2[0],
setHeight = _useState2[1];
var _useState3 = (0, _react.useState)(true),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
showBg = _useState4[0],
setShowBg = _useState4[1];
var SnapPointsFromTop = Math.round(height) <= Math.round(windowHeight) ? [windowHeight - height, windowHeight] : [50, windowHeight * 0.4, windowHeight];
var masterdrawer = (0, _react.useRef)();
var drawer = (0, _react.useRef)();
var _useSafeAreaInsets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)(),
bottom = _useSafeAreaInsets.bottom;
var scroll = /*#__PURE__*/_react.default.createRef();
var START = SnapPointsFromTop[0];
var END = SnapPointsFromTop[SnapPointsFromTop.length - 1];
var _useState5 = (0, _react.useState)(END),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
lastSnap = _useState6[0],
setSnap = _useState6[1];
var lastScrollYValue = 0;
var _useState7 = (0, _react.useState)(new _reactNativeWeb.Animated.Value(0)),
_useState8 = (0, _slicedToArray2.default)(_useState7, 1),
lastScrollY = _useState8[0];
var onRegisterLastScroll = _reactNativeWeb.Animated.event([{
nativeEvent: {
contentOffset: {
y: lastScrollY
}
}
}], {
useNativeDriver: USE_NATIVE_DRIVER
});
lastScrollY.addListener(function (_ref2) {
var value = _ref2.value;
lastScrollYValue = value;
});
var _useState9 = (0, _react.useState)(new _reactNativeWeb.Animated.Value(0)),
_useState10 = (0, _slicedToArray2.default)(_useState9, 1),
dragY = _useState10[0];
var onGestureEvent = _reactNativeWeb.Animated.event([{
nativeEvent: {
translationY: dragY
}
}], {
useNativeDriver: USE_NATIVE_DRIVER
});
var _useState11 = (0, _react.useState)(_reactNativeWeb.Animated.multiply(new _reactNativeWeb.Animated.Value(-1), lastScrollY)),
_useState12 = (0, _slicedToArray2.default)(_useState11, 1),
reverseLastScrollY = _useState12[0];
var _useState13 = (0, _react.useState)(new _reactNativeWeb.Animated.Value(END)),
_useState14 = (0, _slicedToArray2.default)(_useState13, 1),
translateYOffset = _useState14[0];
var translateY = _reactNativeWeb.Animated.add(translateYOffset, _reactNativeWeb.Animated.add(dragY, reverseLastScrollY)).interpolate({
inputRange: [START, END],
outputRange: [START, END] // extrapolate: 'clamp'
});
var onHandlerStateChange = function onHandlerStateChange(_ref3) {
var nativeEvent = _ref3.nativeEvent;
// eslint-disable-next-line
if (nativeEvent.oldState === _reactNativeGestureHandler.State.ACTIVE) {
var velocityY = nativeEvent.velocityY;
var translationY = nativeEvent.translationY;
translationY -= lastScrollYValue;
var dragToss = 0.1;
var endOffsetY = lastSnap + translationY + dragToss * velocityY;
var destSnapPoint = SnapPointsFromTop[0];
SnapPointsFromTop.forEach(function (snapPoint) {
var distFromSnap = Math.abs(snapPoint - endOffsetY);
if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
destSnapPoint = snapPoint;
}
});
setSnap(destSnapPoint); // Sets the offset value to the base value,
// and resets the base value to zero. The final output of the value is unchanged.
translateYOffset.extractOffset();
translateYOffset.setValue(translationY); // Merges the offset value into the base value
// and resets the offset to zero. The final output of the value is unchanged.
translateYOffset.flattenOffset();
dragY.setValue(0);
if (destSnapPoint === END) return closeModal(velocityY);
return animateView({
offset: translateYOffset,
velocityY: velocityY,
destSnapPoint: destSnapPoint
});
}
return null;
};
function closeModal(_ref4) {
var _ref4$velocityY = _ref4.velocityY,
velocityY = _ref4$velocityY === void 0 ? 0 : _ref4$velocityY;
setShowBg(false);
animateView({
offset: translateYOffset,
velocityY: velocityY,
destSnapPoint: END,
callback: close
});
}
(0, _react.useEffect)(function () {
if (height === 0) return;
setSnap(START);
animateView({
offset: translateYOffset,
velocityY: 0,
destSnapPoint: START
});
}, [START, translateYOffset, height]);
return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TapGestureHandler, {
maxDurationMs: 100000,
ref: masterdrawer,
maxDeltaY: lastSnap - SnapPointsFromTop[0],
style: [_reactNativeWeb.StyleSheet.absoluteFillObject]
}, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.View, {
style: [_reactNativeWeb.StyleSheet.absoluteFillObject, showBg && {
backgroundColor: 'hsla(0,0%,0%,.4)'
}],
pointerEvents: 'box-none'
}, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.Animated.View, {
style: [_reactNativeWeb.StyleSheet.absoluteFillObject, {
transform: [{
translateY: translateY
}]
}]
}, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.PanGestureHandler, {
ref: drawer,
simultaneousHandlers: [scroll, masterdrawer],
shouldCancelWhenOutside: false,
onGestureEvent: onGestureEvent,
onHandlerStateChange: onHandlerStateChange
}, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.Animated.View, {
style: {
flex: 1
}
}, /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.NativeViewGestureHandler, {
ref: scroll,
waitFor: masterdrawer,
simultaneousHandlers: drawer
}, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.Animated.ScrollView, {
style: [{
flex: 1,
backgroundColor: 'white',
paddingBottom: bottom
}],
bounces: false,
onScrollBeginDrag: onRegisterLastScroll,
scrollEventThrottle: 1
}, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.TouchableWithoutFeedback, null, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.View, {
style: [{
paddingVertical: 48,
paddingHorizontal: 32
}],
onLayout: function onLayout(e) {
return setHeight(e.nativeEvent.layout.height + bottom);
},
flex: 1
}, children)))))))));
}
function animateView(_ref5) {
var offset = _ref5.offset,
velocityY = _ref5.velocityY,
destSnapPoint = _ref5.destSnapPoint,
callback = _ref5.callback;
_reactNativeWeb.Animated.spring(offset, {
velocity: velocityY,
tension: 86,
friction: 10,
toValue: destSnapPoint,
useNativeDriver: USE_NATIVE_DRIVER
}).start(function (_ref6) {
var finished = _ref6.finished;
finished && callback && callback();
});
}
//# sourceMappingURL=bottomSheet.js.map