1/** 2 * Copyright (c) Expo. 3 * Copyright (c) Nicolas Gallagher. 4 * Copyright (c) Facebook, Inc. and its affiliates. 5 * 6 * This source code is licensed under the MIT license found in the 7 * LICENSE file in the root directory of this source tree. 8 */ 9import * as React from 'react'; 10import StyleSheet from 'react-native-web/dist/exports/StyleSheet'; 11import css from 'react-native-web/dist/exports/StyleSheet/css'; 12import TextAncestorContext from 'react-native-web/dist/exports/Text/TextAncestorContext'; 13import createElement from 'react-native-web/dist/exports/createElement'; 14import * as forwardedProps from 'react-native-web/dist/modules/forwardedProps'; 15import pick from 'react-native-web/dist/modules/pick'; 16import useElementLayout from 'react-native-web/dist/modules/useElementLayout'; 17import useMergeRefs from 'react-native-web/dist/modules/useMergeRefs'; 18import usePlatformMethods from 'react-native-web/dist/modules/usePlatformMethods'; 19import useResponderEvents from 'react-native-web/dist/modules/useResponderEvents'; 20const forwardPropsList = { 21 ...forwardedProps.defaultProps, 22 ...forwardedProps.accessibilityProps, 23 ...forwardedProps.clickProps, 24 ...forwardedProps.focusProps, 25 ...forwardedProps.keyboardProps, 26 ...forwardedProps.mouseProps, 27 ...forwardedProps.touchProps, 28 ...forwardedProps.styleProps, 29 lang: true, 30 onScroll: true, 31 onWheel: true, 32 pointerEvents: true, 33}; 34const pickProps = (props) => pick(props, forwardPropsList); 35/** 36 * This is the View from react-native-web copied out in order to supply a custom `__element` property. 37 * In the past, you could use `createElement` to create an element with a custom HTML element, but this changed 38 * somewhere between 0.14...0.17. 39 */ 40// @ts-ignore 41const View = React.forwardRef((props, forwardedRef) => { 42 const { onLayout, onMoveShouldSetResponder, onMoveShouldSetResponderCapture, onResponderEnd, onResponderGrant, onResponderMove, onResponderReject, onResponderRelease, onResponderStart, onResponderTerminate, onResponderTerminationRequest, onScrollShouldSetResponder, onScrollShouldSetResponderCapture, onSelectionChangeShouldSetResponder, onSelectionChangeShouldSetResponderCapture, onStartShouldSetResponder, onStartShouldSetResponderCapture, __element, } = props; 43 const hasTextAncestor = React.useContext(TextAncestorContext); 44 const hostRef = React.useRef(null); 45 useElementLayout(hostRef, onLayout); 46 useResponderEvents(hostRef, { 47 onMoveShouldSetResponder, 48 onMoveShouldSetResponderCapture, 49 onResponderEnd, 50 onResponderGrant, 51 onResponderMove, 52 onResponderReject, 53 onResponderRelease, 54 onResponderStart, 55 onResponderTerminate, 56 onResponderTerminationRequest, 57 onScrollShouldSetResponder, 58 onScrollShouldSetResponderCapture, 59 onSelectionChangeShouldSetResponder, 60 onSelectionChangeShouldSetResponderCapture, 61 onStartShouldSetResponder, 62 onStartShouldSetResponderCapture, 63 }); 64 const style = StyleSheet.compose(hasTextAncestor && styles.inline, 65 // @ts-ignore: untyped 66 props.style); 67 const supportedProps = pickProps(props); 68 supportedProps.classList = classList; 69 supportedProps.style = style; 70 const platformMethodsRef = usePlatformMethods(supportedProps); 71 const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef); 72 supportedProps.ref = setRef; 73 return createElement(__element, supportedProps); 74}); 75View.displayName = 'View'; 76const classes = css.create({ 77 view: { 78 alignItems: 'stretch', 79 border: '0 solid black', 80 boxSizing: 'border-box', 81 display: 'flex', 82 flexBasis: 'auto', 83 flexDirection: 'column', 84 flexShrink: 0, 85 margin: 0, 86 minHeight: 0, 87 minWidth: 0, 88 padding: 0, 89 position: 'relative', 90 zIndex: 0, 91 }, 92}); 93const classList = [classes.view]; 94const styles = StyleSheet.create({ 95 inline: { 96 display: 'inline-flex', 97 }, 98}); 99export default View; 100//# sourceMappingURL=RNWView.js.map