Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 1x 1x 1x 62x 26x 36x 36x 41x 41x 70x 31x 31x 70x 70x 31x 31x 31x 31x 31x 31x 1x 85x 85x 85x 85x 3x 3x 1x 85x 31x 31x 2x 85x 36x 85x | /**
* 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 = {};
function notifyActiveModalListeners() {
if (activeModalStack.length === 0) {
return;
}
const activeModalId = activeModalStack[activeModalStack.length - 1];
activeModalStack.forEach((modalId) => {
Eif (modalId in activeModalListeners) {
activeModalListeners[modalId](modalId === activeModalId);
}
});
}
function removeActiveModal(modalId) {
if (modalId in activeModalListeners) {
// Before removing this listener we should probably tell it
// that it's no longer the active modal for sure.
activeModalListeners[modalId](false);
delete activeModalListeners[modalId];
}
const index = activeModalStack.indexOf(modalId);
if (index !== -1) {
activeModalStack.splice(index, 1);
notifyActiveModalListeners();
}
}
function addActiveModal(modalId, listener) {
removeActiveModal(modalId);
activeModalStack.push(modalId);
activeModalListeners[modalId] = listener;
notifyActiveModalListeners();
}
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;
|