@tamagui/react-native-web-lite
Version:
React Native for Web
115 lines (114 loc) • 3.4 kB
JavaScript
import * as React from "react";
import { StyleSheet } from "@tamagui/react-native-web-internals";
import createElement from "../createElement/index.mjs";
var ANIMATION_DURATION = 300;
function getAnimationStyle(animationType, visible) {
return animationType === "slide" ? visible ? animatedSlideInStyles : animatedSlideOutStyles : animationType === "fade" ? visible ? animatedFadeInStyles : animatedFadeOutStyles : visible ? styles.container : styles.hidden;
}
function ModalAnimation(props) {
var animationType = props.animationType,
children = props.children,
onDismiss = props.onDismiss,
onShow = props.onShow,
visible = props.visible,
_React$useState = React.useState(!1),
isRendering = _React$useState[0],
setIsRendering = _React$useState[1],
wasVisible = React.useRef(!1),
isAnimated = animationType && animationType !== "none",
animationEndCallback = React.useCallback(e => {
e && e.currentTarget !== e.target || (visible ? onShow && onShow() : (setIsRendering(!1), onDismiss && onDismiss()));
}, [onDismiss, onShow, visible]);
return React.useEffect(() => {
visible && setIsRendering(!0), visible !== wasVisible.current && !isAnimated && animationEndCallback(), wasVisible.current = visible;
}, [isAnimated, visible, animationEndCallback]), isRendering || visible ? createElement("div", {
style: isRendering ? getAnimationStyle(animationType, visible) : styles.hidden,
onAnimationEnd: animationEndCallback,
children
}) : null;
}
var styles = StyleSheet.create({
container: {
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: 9999
},
animatedIn: {
animationDuration: ANIMATION_DURATION + "ms",
animationTimingFunction: "ease-in"
},
animatedOut: {
pointerEvents: "none",
animationDuration: ANIMATION_DURATION + "ms",
animationTimingFunction: "ease-out"
},
fadeIn: {
opacity: 1,
animationKeyframes: {
"0%": {
opacity: 0
},
"100%": {
opacity: 1
}
}
},
fadeOut: {
opacity: 0,
animationKeyframes: {
"0%": {
opacity: 1
},
"100%": {
opacity: 0
}
}
},
slideIn: {
transform: [{
translateY: "0%"
}],
animationKeyframes: {
"0%": {
transform: [{
translateY: "100%"
}]
},
"100%": {
transform: [{
translateY: "0%"
}]
}
}
},
slideOut: {
transform: [{
translateY: "100%"
}],
animationKeyframes: {
"0%": {
transform: [{
translateY: "0%"
}]
},
"100%": {
transform: [{
translateY: "100%"
}]
}
}
},
hidden: {
opacity: 0
}
}),
animatedSlideInStyles = [styles.container, styles.animatedIn, styles.slideIn],
animatedSlideOutStyles = [styles.container, styles.animatedOut, styles.slideOut],
animatedFadeInStyles = [styles.container, styles.animatedIn, styles.fadeIn],
animatedFadeOutStyles = [styles.container, styles.animatedOut, styles.fadeOut],
ModalAnimation_default = ModalAnimation;
export { ModalAnimation_default as default };
//# sourceMappingURL=ModalAnimation.mjs.map