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