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 | 1x 68x 68x 62x 62x 5x 3x 3x 3x 62x 62x 68x 31x 68x 1x | /**
* 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 { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
import View from '../View';
import StyleSheet from '../StyleSheet';
export type ModalContentProps = {|
active?: ?(boolean | (() => boolean)),
children?: any,
onRequestClose?: ?() => void,
transparent?: ?boolean
|};
const ModalContent: React.AbstractComponent<
ModalContentProps,
React.ElementRef<typeof View>
> = React.forwardRef((props, forwardedRef) => {
const { active, children, onRequestClose, transparent } = props;
React.useEffect(() => {
Eif (canUseDOM) {
const closeOnEscape = (e: KeyboardEvent) => {
if (active && e.key === 'Escape') {
e.stopPropagation();
Eif (onRequestClose) {
onRequestClose();
}
}
};
document.addEventListener('keyup', closeOnEscape, false);
return () => document.removeEventListener('keyup', closeOnEscape, false);
}
}, [active, onRequestClose]);
const style = React.useMemo(() => {
return [styles.modal, transparent ? styles.modalTransparent : styles.modalOpaque];
}, [transparent]);
return (
<View accessibilityRole={active ? 'dialog' : null} aria-modal ref={forwardedRef} style={style}>
<View style={styles.container}>{children}</View>
</View>
);
});
const styles = StyleSheet.create({
modal: {
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0
},
modalTransparent: {
backgroundColor: 'transparent'
},
modalOpaque: {
backgroundColor: 'white'
},
container: {
top: 0,
flex: 1
}
});
export default ModalContent;
|