370 lines
13 KiB
React
370 lines
13 KiB
React
// Metro module 5609 (f5610).
|
|
import _classCallCheck from "./_classCallCheck";
|
|
import _createClass from "./_createClass";
|
|
import _possibleConstructorReturn from "./_possibleConstructorReturn";
|
|
import _getPrototypeOf from "./_getPrototypeOf";
|
|
import _inherits from "./_inherits";
|
|
import { Component, createRef } from "react";
|
|
import { Platform, StyleSheet, Animated, InteractionManager, View } from "react-native";
|
|
import { jsx } from "react/jsx-runtime";
|
|
import getInvertedMultiplier from "./getInvertedMultiplier";
|
|
import getDistanceForDirection from "./getDistanceForDirection";
|
|
import { GestureState, PanGestureHandler } from "./Module5575";
|
|
import memoize from "./memoize_5607";
|
|
import Color from "./Color";
|
|
import Module5620 from "./Module5620";
|
|
import Module5621 from "./Module5621";
|
|
import * as _Module5622 from "./Module5622";
|
|
let _excluded, c3454_16, styles;
|
|
let Card;
|
|
let env3454 = {};
|
|
env3454[15] = function _isNativeReflectConstruct() {
|
|
let c14943_0;
|
|
try {
|
|
c14943_0 = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
|
|
} catch ($e) {}
|
|
const _isNativeReflectConstruct2 = function _isNativeReflectConstruct() {
|
|
return !!c14943_0;
|
|
};
|
|
env3454[15] = _isNativeReflectConstruct2;
|
|
return _isNativeReflectConstruct2();
|
|
};
|
|
_excluded = ["styleInterpolator", "interpolationIndex", "current", "gesture", "next", "layout", "insets", "overlay", "overlayEnabled", "shadowEnabled", "gestureEnabled", "gestureDirection", "pageOverflowEnabled", "headerDarkContent", "children", "containerStyle", "contentStyle"];
|
|
Platform;
|
|
const StyleSheet2 = StyleSheet;
|
|
c3454_16 = true;
|
|
Card = function Card(...args) {
|
|
_classCallCheck(this, Card);
|
|
const r13 = [...args];
|
|
const r12 = _getPrototypeOf(Card);
|
|
const r30 = _possibleConstructorReturn(this, (0, env3454[15])() ? Reflect.construct(r12, r13, _getPrototypeOf(this).constructor) : r12.apply(this, r13));
|
|
r30.isCurrentlyMounted = false;
|
|
r30.isClosing = new Animated.Value(0);
|
|
r30.inverted = new Animated.Value(getInvertedMultiplier(r30.props.gestureDirection));
|
|
r30.layout = {
|
|
width: new Animated.Value(r30.props.layout.width),
|
|
height: new Animated.Value(r30.props.layout.height)
|
|
};
|
|
r30.isSwiping = new Animated.Value(0);
|
|
r30.animate = ({ closing, velocity }) => {
|
|
const props = this.props;
|
|
const { gesture, transitionSpec, onOpen, onClose, onTransition } = props;
|
|
const animateToValue = this.getAnimateToValue({
|
|
...this.props,
|
|
closing
|
|
});
|
|
this.lastToValue = animateToValue;
|
|
this.isClosing.setValue(closing ? 1 : 0);
|
|
const r25 = closing ? transitionSpec.close : transitionSpec.open;
|
|
const r30 = r25.animation === "spring" ? Animated.spring : Animated.timing;
|
|
this.setPointerEventsEnabled(!closing);
|
|
this.handleStartInteraction();
|
|
clearTimeout(this.pendingGestureCallback);
|
|
if (onTransition != null) {
|
|
onTransition({
|
|
closing,
|
|
gesture: velocity !== void 0
|
|
});
|
|
}
|
|
r30(gesture, {
|
|
...r25.config,
|
|
velocity,
|
|
toValue: animateToValue,
|
|
useNativeDriver: c3454_16,
|
|
isInteraction: false
|
|
}).start(({ finished }) => {
|
|
this.handleEndInteraction();
|
|
clearTimeout(this.pendingGestureCallback);
|
|
if (finished) {
|
|
if (closing) {
|
|
onClose();
|
|
} else {
|
|
onOpen();
|
|
}
|
|
if (this.isCurrentlyMounted) {
|
|
this.forceUpdate();
|
|
}
|
|
}
|
|
});
|
|
};
|
|
r30.getAnimateToValue = ({ closing: closing2, layout, gestureDirection }) => closing2 ? getDistanceForDirection(layout, gestureDirection) : 0;
|
|
r30.setPointerEventsEnabled = (a0) => {
|
|
const r3 = a0 ? "box-none" : "none";
|
|
const current = this.ref.current;
|
|
if (current != null) {
|
|
current.setPointerEvents(r3);
|
|
}
|
|
};
|
|
r30.handleStartInteraction = () => {
|
|
if (this.interactionHandle === void 0) {
|
|
this.interactionHandle = InteractionManager.createInteractionHandle();
|
|
}
|
|
};
|
|
r30.handleEndInteraction = () => {
|
|
if (this.interactionHandle !== void 0) {
|
|
InteractionManager.clearInteractionHandle(this.interactionHandle);
|
|
this.interactionHandle = void 0;
|
|
}
|
|
};
|
|
r30.handleGestureStateChange = ({ nativeEvent }) => {
|
|
let translationX, velocityX, width;
|
|
const props = this.props;
|
|
const { layout, onClose: onClose2, onGestureBegin, onGestureCanceled, onGestureEnd, gestureDirection, gestureVelocityImpact } = props;
|
|
const state = nativeEvent.state;
|
|
if (GestureState.ACTIVE === state) {
|
|
this.isSwiping.setValue(1);
|
|
this.handleStartInteraction();
|
|
if (onGestureBegin != null) {
|
|
onGestureBegin();
|
|
}
|
|
} else if (GestureState.CANCELLED === state) {
|
|
this.isSwiping.setValue(0);
|
|
this.handleEndInteraction();
|
|
this.animate({
|
|
closing: this.props.closing,
|
|
velocity: gestureDirection !== "vertical" && gestureDirection !== "vertical-inverted" ? nativeEvent.velocityX : nativeEvent.velocityY
|
|
});
|
|
if (onGestureCanceled != null) {
|
|
onGestureCanceled();
|
|
}
|
|
} else if (GestureState.END === state) {
|
|
this.isSwiping.setValue(0);
|
|
if (gestureDirection !== "vertical" && gestureDirection !== "vertical-inverted") {
|
|
width = layout.width;
|
|
translationX = nativeEvent.translationX;
|
|
velocityX = nativeEvent.velocityX;
|
|
} else {
|
|
width = layout.height;
|
|
translationX = nativeEvent.translationY;
|
|
velocityX = nativeEvent.velocityY;
|
|
}
|
|
const closing2 = (translationX + velocityX * gestureVelocityImpact) * getInvertedMultiplier(gestureDirection) > width / 2 ? velocityX !== 0 || translationX !== 0 : this.props.closing;
|
|
this.animate({
|
|
closing: closing2,
|
|
velocity: velocityX
|
|
});
|
|
if (closing2) {
|
|
this.pendingGestureCallback = setTimeout(() => {
|
|
onClose2();
|
|
this.forceUpdate();
|
|
}, 32);
|
|
}
|
|
if (onGestureEnd != null) {
|
|
onGestureEnd();
|
|
}
|
|
}
|
|
};
|
|
r30.getInterpolatedStyle = memoize((a0, a1) => a0(a1));
|
|
r30.getCardAnimation = memoize((a0, a1, a2, a3, a4, a5, a6, a7) => {
|
|
const next = a2 ? {
|
|
progress: a2
|
|
} : a2;
|
|
return {
|
|
index: a0,
|
|
current: {
|
|
progress: a1
|
|
},
|
|
next,
|
|
closing: this.isClosing,
|
|
swiping: this.isSwiping,
|
|
inverted: this.inverted,
|
|
layouts: {
|
|
screen: a3
|
|
},
|
|
insets: {
|
|
top: a4,
|
|
right: a5,
|
|
bottom: a6,
|
|
left: a7
|
|
}
|
|
};
|
|
});
|
|
r30.ref = createRef();
|
|
return r30;
|
|
};
|
|
_inherits(Card, Component);
|
|
const r56 = _createClass(Card, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
this.animate({
|
|
closing: this.props.closing
|
|
});
|
|
this.isCurrentlyMounted = true;
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(a0) {
|
|
const props = this.props;
|
|
const { layout, gestureDirection, closing: closing2 } = props;
|
|
const { width, height } = layout;
|
|
if (width !== a0.layout.width) {
|
|
this.layout.width.setValue(width);
|
|
}
|
|
if (height !== a0.layout.height) {
|
|
this.layout.height.setValue(height);
|
|
}
|
|
if (gestureDirection !== a0.gestureDirection) {
|
|
this.inverted.setValue(getInvertedMultiplier(gestureDirection));
|
|
}
|
|
const animateToValue = this.getAnimateToValue(this.props);
|
|
if (!(this.getAnimateToValue(a0) === animateToValue && this.lastToValue === animateToValue)) {
|
|
this.animate({
|
|
closing: closing2
|
|
});
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
this.props.gesture.stopAnimation();
|
|
this.isCurrentlyMounted = false;
|
|
this.handleEndInteraction();
|
|
}
|
|
}, {
|
|
key: "gestureActivationCriteria",
|
|
value: function gestureActivationCriteria() {
|
|
const props = this.props;
|
|
const { layout, gestureDirection, gestureResponseDistance = gestureDirection !== "vertical" ? gestureDirection === "vertical-inverted" ? 135 : 50 : 135 } = props;
|
|
if (gestureDirection === "vertical") {
|
|
return {
|
|
maxDeltaX: 15,
|
|
minOffsetY: 5,
|
|
hitSlop: {
|
|
bottom: -layout.height + gestureResponseDistance
|
|
},
|
|
enableTrackpadTwoFingerGesture: true
|
|
};
|
|
}
|
|
if (gestureDirection === "vertical-inverted") {
|
|
return {
|
|
maxDeltaX: 15,
|
|
minOffsetY: -5,
|
|
hitSlop: {
|
|
top: -layout.height + gestureResponseDistance
|
|
},
|
|
enableTrackpadTwoFingerGesture: true
|
|
};
|
|
}
|
|
const right = -layout.width + gestureResponseDistance;
|
|
return getInvertedMultiplier(gestureDirection) === 1 ? {
|
|
minOffsetX: 5,
|
|
maxDeltaY: 20,
|
|
hitSlop: {
|
|
right
|
|
},
|
|
enableTrackpadTwoFingerGesture: true
|
|
} : {
|
|
minOffsetX: -5,
|
|
maxDeltaY: 20,
|
|
hitSlop: {
|
|
left: right
|
|
},
|
|
enableTrackpadTwoFingerGesture: true
|
|
};
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
const props = this.props;
|
|
const { styleInterpolator, interpolationIndex, current, gesture, next, layout, insets, overlay: overlay2, overlayEnabled, shadowEnabled, gestureEnabled, gestureDirection, pageOverflowEnabled } = props;
|
|
props.headerDarkContent;
|
|
const { children, containerStyle, contentStyle, ...rest } = props;
|
|
const cardAnimation = this.getCardAnimation(interpolationIndex, current, next, layout, insets.top, insets.right, insets.bottom, insets.left);
|
|
const interpolatedStyle = this.getInterpolatedStyle(styleInterpolator, cardAnimation);
|
|
const { containerStyle: containerStyle2, cardStyle, overlayStyle, shadowStyle } = interpolatedStyle;
|
|
const onGestureEvent = gestureEnabled ? Animated.event([{
|
|
nativeEvent: gestureDirection !== "vertical" && gestureDirection !== "vertical-inverted" ? {
|
|
translationX: gesture
|
|
} : {
|
|
translationY: gesture
|
|
}
|
|
}], {
|
|
useNativeDriver: c3454_16
|
|
}) : void 0;
|
|
const backgroundColor = StyleSheet.flatten(contentStyle || {}).backgroundColor;
|
|
const r63 = typeof backgroundColor === "string" ? Color(backgroundColor).alpha() === 0 : typeof backgroundColor === "string";
|
|
const r82 = [null, <Animated.View style={{
|
|
opacity: current
|
|
}} collapsable={false} />, ,];
|
|
const r93 = [overlayEnabled ? <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
|
|
{overlay2({
|
|
style: overlayStyle
|
|
})}
|
|
</View> : null, ,];
|
|
const View2 = Animated.View;
|
|
const props2 = {
|
|
enabled: layout.width !== 0 && gestureEnabled,
|
|
onGestureEvent,
|
|
onHandlerStateChange: this.handleGestureStateChange,
|
|
...this.gestureActivationCriteria()
|
|
};
|
|
props2.children = <Animated.View needsOffscreenAlphaCompositing={!!cardStyle && StyleSheet.flatten(cardStyle).opacity != null} style={[styles.container, cardStyle]}>
|
|
{shadowEnabled ? shadowStyle ? r63 ? null : <Animated.View style={[styles.shadow, gestureDirection === "horizontal" ? [styles.shadowHorizontal, styles.shadowLeft] : gestureDirection === "horizontal-inverted" ? [styles.shadowHorizontal, styles.shadowRight] : gestureDirection === "vertical" ? [styles.shadowVertical, styles.shadowTop] : [styles.shadowVertical, styles.shadowBottom], {
|
|
backgroundColor
|
|
}, shadowStyle]} pointerEvents="none" /> : null : null}
|
|
<Module5621 ref={this.ref} enabled={pageOverflowEnabled} layout={layout} style={contentStyle}>{children}</Module5621>
|
|
</Animated.View>;
|
|
r93[1] = <View2 style={[styles.container, containerStyle2, containerStyle]} pointerEvents="box-none">
|
|
<PanGestureHandler {...props2} />
|
|
</View2>;
|
|
r82[2] = <View pointerEvents="box-none" collapsable={false} {...rest}>{r93}</View>;
|
|
return <Module5620.Provider value={cardAnimation}>{r82}</Module5620.Provider>;
|
|
}
|
|
}]);
|
|
r56.defaultProps = {
|
|
shadowEnabled: false,
|
|
gestureEnabled: true,
|
|
gestureVelocityImpact: 0.3,
|
|
overlay: ({ style }) => style ? (0, jsx)(Animated.View, {
|
|
pointerEvents: "none",
|
|
style: [styles.overlay, style]
|
|
}) : null
|
|
};
|
|
styles = StyleSheet2.create({
|
|
container: {
|
|
flex: 1
|
|
},
|
|
overlay: {
|
|
flex: 1,
|
|
backgroundColor: "#000"
|
|
},
|
|
shadow: {
|
|
position: "absolute",
|
|
shadowRadius: 5,
|
|
shadowColor: "#000",
|
|
shadowOpacity: 0.3
|
|
},
|
|
shadowHorizontal: {
|
|
top: 0,
|
|
bottom: 0,
|
|
width: 3,
|
|
shadowOffset: {
|
|
width: -1,
|
|
height: 1
|
|
}
|
|
},
|
|
shadowLeft: {
|
|
left: 0
|
|
},
|
|
shadowRight: {
|
|
right: 0
|
|
},
|
|
shadowVertical: {
|
|
left: 0,
|
|
right: 0,
|
|
height: 3,
|
|
shadowOffset: {
|
|
width: 1,
|
|
height: -1
|
|
}
|
|
},
|
|
shadowTop: {
|
|
top: 0
|
|
},
|
|
shadowBottom: {
|
|
bottom: 0
|
|
}
|
|
});
|
|
export default r56;
|
|
export const getIsModalPresentation = (a0) => a0 === _Module5622.forModalPresentationIOS || a0.name === "forModalPresentationIOS";
|