/** * 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. * * */ import * as React from 'react'; import { forwardRef, useContext, useRef } from 'react'; import createElement from '../createElement'; import css from '../StyleSheet/css'; import pick from '../../modules/pick'; import useElementLayout from '../../hooks/useElementLayout'; import useMergeRefs from '../../modules/useMergeRefs'; import usePlatformMethods from '../../hooks/usePlatformMethods'; import useResponderEvents from '../../hooks/useResponderEvents'; import StyleSheet from '../StyleSheet'; import TextAncestorContext from '../Text/TextAncestorContext'; var forwardPropsList = { accessibilityLabel: true, accessibilityLiveRegion: true, accessibilityRole: true, accessibilityState: true, accessibilityValue: true, accessible: true, children: true, classList: true, disabled: true, importantForAccessibility: true, nativeID: true, onBlur: true, onClick: true, onClickCapture: true, onContextMenu: true, onFocus: true, onKeyDown: true, onKeyUp: true, onTouchCancel: true, onTouchCancelCapture: true, onTouchEnd: true, onTouchEndCapture: true, onTouchMove: true, onTouchMoveCapture: true, onTouchStart: true, onTouchStartCapture: true, pointerEvents: true, ref: true, style: true, testID: true, // unstable dataSet: true, onMouseDown: true, onMouseEnter: true, onMouseLeave: true, onMouseMove: true, onMouseOver: true, onMouseOut: true, onMouseUp: true, onScroll: true, onWheel: true, href: true, rel: true, target: true }; var pickProps = function pickProps(props) { return pick(props, forwardPropsList); }; var View = forwardRef(function (props, forwardedRef) { var onLayout = props.onLayout, onMoveShouldSetResponder = props.onMoveShouldSetResponder, onMoveShouldSetResponderCapture = props.onMoveShouldSetResponderCapture, onResponderEnd = props.onResponderEnd, onResponderGrant = props.onResponderGrant, onResponderMove = props.onResponderMove, onResponderReject = props.onResponderReject, onResponderRelease = props.onResponderRelease, onResponderStart = props.onResponderStart, onResponderTerminate = props.onResponderTerminate, onResponderTerminationRequest = props.onResponderTerminationRequest, onScrollShouldSetResponder = props.onScrollShouldSetResponder, onScrollShouldSetResponderCapture = props.onScrollShouldSetResponderCapture, onSelectionChangeShouldSetResponder = props.onSelectionChangeShouldSetResponder, onSelectionChangeShouldSetResponderCapture = props.onSelectionChangeShouldSetResponderCapture, onStartShouldSetResponder = props.onStartShouldSetResponder, onStartShouldSetResponderCapture = props.onStartShouldSetResponderCapture; if (process.env.NODE_ENV !== 'production') { React.Children.toArray(props.children).forEach(function (item) { if (typeof item === 'string') { console.error("Unexpected text node: " + item + ". A text node cannot be a child of a ."); } }); } var hasTextAncestor = useContext(TextAncestorContext); var hostRef = useRef(null); var classList = [classes.view]; var style = StyleSheet.compose(hasTextAncestor && styles.inline, props.style); useElementLayout(hostRef, onLayout); useResponderEvents(hostRef, { onMoveShouldSetResponder: onMoveShouldSetResponder, onMoveShouldSetResponderCapture: onMoveShouldSetResponderCapture, onResponderEnd: onResponderEnd, onResponderGrant: onResponderGrant, onResponderMove: onResponderMove, onResponderReject: onResponderReject, onResponderRelease: onResponderRelease, onResponderStart: onResponderStart, onResponderTerminate: onResponderTerminate, onResponderTerminationRequest: onResponderTerminationRequest, onScrollShouldSetResponder: onScrollShouldSetResponder, onScrollShouldSetResponderCapture: onScrollShouldSetResponderCapture, onSelectionChangeShouldSetResponder: onSelectionChangeShouldSetResponder, onSelectionChangeShouldSetResponderCapture: onSelectionChangeShouldSetResponderCapture, onStartShouldSetResponder: onStartShouldSetResponder, onStartShouldSetResponderCapture: onStartShouldSetResponderCapture }); var supportedProps = pickProps(props); supportedProps.classList = classList; supportedProps.style = style; var platformMethodsRef = usePlatformMethods(supportedProps); var setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef); supportedProps.ref = setRef; return createElement('div', supportedProps); }); View.displayName = 'View'; var classes = css.create({ view: { alignItems: 'stretch', border: '0 solid black', boxSizing: 'border-box', display: 'flex', flexBasis: 'auto', flexDirection: 'column', flexShrink: 0, margin: 0, minHeight: 0, minWidth: 0, padding: 0, position: 'relative', zIndex: 0 } }); var styles = StyleSheet.create({ inline: { display: 'inline-flex' } }); export default View;