UNPKG

create-expo-cljs-app

Version:

Create a react native application with Expo and Shadow-CLJS!

177 lines (157 loc) 5.08 kB
"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;