UNPKG

create-expo-cljs-app

Version:

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

78 lines (75 loc) 2.68 kB
/** * 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. * * @flow */ import * as React from 'react'; import ModalPortal from './ModalPortal'; import ModalAnimation from './ModalAnimation'; import ModalContent from './ModalContent'; import ModalFocusTrap from './ModalFocusTrap'; export type ModalProps = {| animationType?: 'none' | 'slide' | 'fade', children: any, hardwareAccelerated?: ?boolean, onDismiss?: ?() => mixed, onOrientationChange?: ?(e: {| orientation: 'portrait' | 'landscape' |}) => void, onRequestClose?: ?() => void, onShow?: ?() => void, presentationStyle?: ?('fullScreen' | 'pageSheet' | 'formSheet' | 'overFullScreen'), statusBarTranslucent?: ?boolean, supportedOrientations?: ?Array<'portrait' | 'portrait-upside-down' | 'landscape' | 'landscape-left' | 'landscape-right'>, transparent?: ?boolean, visible?: ?boolean, |}; let uniqueModalIdentifier = 0; const activeModalStack = []; const activeModalListeners = {}; declare function notifyActiveModalListeners(): any; declare function removeActiveModal(modalId: any): any; declare function addActiveModal(modalId: any, listener: any): any; const Modal: React.AbstractComponent<ModalProps, React.ElementRef<typeof ModalContent>> = React.forwardRef((props, forwardedRef) => { const { animationType, children, onDismiss, onRequestClose, onShow, transparent, visible = true } = props; // Set a unique model identifier so we can correctly route // dismissals and check the layering of modals. const modalId = React.useMemo(() => uniqueModalIdentifier++, []); const [isActive, setIsActive] = React.useState(false); const onDismissCallback = React.useCallback(() => { removeActiveModal(modalId); if (onDismiss) { onDismiss(); } }, [modalId, onDismiss]); const onShowCallback = React.useCallback(() => { addActiveModal(modalId, setIsActive); if (onShow) { onShow(); } }, [modalId, onShow]); React.useEffect(() => { return () => removeActiveModal(modalId); }, [modalId]); return <ModalPortal> <ModalAnimation animationType={animationType} onDismiss={onDismissCallback} onShow={onShowCallback} visible={visible}> <ModalFocusTrap active={isActive}> <ModalContent active={isActive} onRequestClose={onRequestClose} ref={forwardedRef} transparent={transparent}> {children} </ModalContent> </ModalFocusTrap> </ModalAnimation> </ModalPortal>; }); export default Modal;