create-expo-cljs-app
Version:
Create a react native application with Expo and Shadow-CLJS!
177 lines (157 loc) • 5.08 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _StyleSheet = _interopRequireDefault(require("../StyleSheet"));
var _createElement = _interopRequireDefault(require("../createElement"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { 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; }
/**
* Copyright (c) Nicolas Gallagher.
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/
var ANIMATION_DURATION = 300;
function getAnimationStyle(animationType, visible) {
if (animationType === 'slide') {
return visible ? animatedSlideInStyles : animatedSlideOutStyles;
}
if (animationType === 'fade') {
return visible ? animatedFadeInStyles : animatedFadeOutStyles;
}
return visible ? styles.container : styles.hidden;
}
function ModalAnimation(props) {
var animationType = props.animationType,
children = props.children,
onDismiss = props.onDismiss,
onShow = props.onShow,
visible = props.visible;
var _React$useState = React.useState(false),
isRendering = _React$useState[0],
setIsRendering = _React$useState[1];
var wasVisible = React.useRef(false);
var isAnimated = animationType && animationType !== 'none';
var animationEndCallback = React.useCallback(function (e) {
if (e && e.currentTarget !== e.target) {
// If the event was generated for something NOT this element we
// should ignore it as it's not relevant to us
return;
}
if (visible) {
if (onShow) {
onShow();
}
} else {
setIsRendering(false);
if (onDismiss) {
onDismiss();
}
}
}, [onDismiss, onShow, visible]);
React.useEffect(function () {
if (visible) {
setIsRendering(true);
}
if (visible !== wasVisible.current && !isAnimated) {
// Manually call `animationEndCallback` if no animation is used
animationEndCallback();
}
wasVisible.current = visible;
}, [isAnimated, visible, animationEndCallback]);
return isRendering || visible ? (0, _createElement.default)('div', {
style: isRendering ? getAnimationStyle(animationType, visible) : styles.hidden,
onAnimationEnd: animationEndCallback,
children: children
}) : null;
}
var styles = _StyleSheet.default.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
}
});
var animatedSlideInStyles = [styles.container, styles.animatedIn, styles.slideIn];
var animatedSlideOutStyles = [styles.container, styles.animatedOut, styles.slideOut];
var animatedFadeInStyles = [styles.container, styles.animatedIn, styles.fadeIn];
var animatedFadeOutStyles = [styles.container, styles.animatedOut, styles.fadeOut];
var _default = ModalAnimation;
exports.default = _default;
module.exports = exports.default;