diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 7d34417875ece5..681922ea13fdde 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -10,14 +10,13 @@ 'use strict'; +import {NativeText, NativeVirtualText} from './TextNativeComponent'; + const DeprecatedTextPropTypes = require('../DeprecatedPropTypes/DeprecatedTextPropTypes'); const React = require('react'); -const ReactNativeViewAttributes = require('../Components/View/ReactNativeViewAttributes'); const TextAncestor = require('./TextAncestor'); const Touchable = require('../Components/Touchable/Touchable'); -const UIManager = require('../ReactNative/UIManager'); -const createReactNativeComponentClass = require('../Renderer/shims/createReactNativeComponentClass'); const nullthrows = require('nullthrows'); const processColor = require('../StyleSheet/processColor'); @@ -27,7 +26,7 @@ import type {PressRetentionOffset, TextProps} from './TextProps'; type ResponseHandlers = $ReadOnly<{| onStartShouldSetResponder: () => boolean, - onResponderGrant: (event: PressEvent, dispatchID: string) => void, + onResponderGrant: (event: PressEvent) => void, onResponderMove: (event: PressEvent) => void, onResponderRelease: (event: PressEvent) => void, onResponderTerminate: (event: PressEvent) => void, @@ -36,7 +35,7 @@ type ResponseHandlers = $ReadOnly<{| type Props = $ReadOnly<{| ...TextProps, - forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>, + forwardedRef: ?React.Ref, |}>; type State = {| @@ -51,36 +50,6 @@ type State = {| const PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; -const viewConfig = { - validAttributes: { - ...ReactNativeViewAttributes.UIView, - isHighlighted: true, - numberOfLines: true, - ellipsizeMode: true, - allowFontScaling: true, - maxFontSizeMultiplier: true, - disabled: true, - selectable: true, - selectionColor: true, - adjustsFontSizeToFit: true, - minimumFontScale: true, - textBreakStrategy: true, - onTextLayout: true, - onInlineViewLayout: true, - dataDetectorType: true, - android_hyphenationFrequency: true, - }, - directEventTypes: { - topTextLayout: { - registrationName: 'onTextLayout', - }, - topInlineViewLayout: { - registrationName: 'onInlineViewLayout', - }, - }, - uiViewClassName: 'RCTText', -}; - /** * A React component for displaying text. * @@ -122,21 +91,19 @@ class TouchableText extends React.Component { : null; } - static viewConfig = viewConfig; - render(): React.Node { - let props = this.props; - if (isTouchable(props)) { + let {forwardedRef, selectionColor, ...props} = this.props; + if (isTouchable(this.props)) { props = { ...props, ...this.state.responseHandlers, isHighlighted: this.state.isHighlighted, }; } - if (props.selectionColor != null) { + if (selectionColor != null) { props = { ...props, - selectionColor: processColor(props.selectionColor), + selectionColor: processColor(selectionColor), }; } if (__DEV__) { @@ -151,16 +118,17 @@ class TouchableText extends React.Component { {hasTextAncestor => hasTextAncestor ? ( - ) : ( - + ) } @@ -263,26 +231,9 @@ const isTouchable = (props: Props): boolean => props.onLongPress != null || props.onStartShouldSetResponder != null; -const RCTText = createReactNativeComponentClass( - viewConfig.uiViewClassName, - () => viewConfig, -); - -const RCTVirtualText = - UIManager.getViewManagerConfig('RCTVirtualText') == null - ? RCTText - : createReactNativeComponentClass('RCTVirtualText', () => ({ - validAttributes: { - ...ReactNativeViewAttributes.UIView, - isHighlighted: true, - maxFontSizeMultiplier: true, - }, - uiViewClassName: 'RCTVirtualText', - })); - const Text = ( props: TextProps, - forwardedRef: ?React.Ref<'RCTText' | 'RCTVirtualText'>, + forwardedRef: ?React.Ref, ) => { return ; }; diff --git a/Libraries/Text/TextNativeComponent.js b/Libraries/Text/TextNativeComponent.js new file mode 100644 index 00000000000000..eafc7ddf8d1483 --- /dev/null +++ b/Libraries/Text/TextNativeComponent.js @@ -0,0 +1,68 @@ +/** + * 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 + * @format + */ + +'use strict'; + +import ReactNativeViewAttributes from '../Components/View/ReactNativeViewAttributes'; +import UIManager from '../ReactNative/UIManager'; +import {type HostComponent} from '../Renderer/shims/ReactNativeTypes'; +import createReactNativeComponentClass from '../Renderer/shims/createReactNativeComponentClass'; +import {type ProcessedColorValue} from '../StyleSheet/processColor'; +import {type TextProps} from './TextProps'; + +type NativeTextProps = $ReadOnly<{ + ...TextProps, + isHighlighted?: ?boolean, + selectionColor?: ?ProcessedColorValue, +}>; + +export const NativeText: HostComponent = (createReactNativeComponentClass( + 'RCTText', + () => ({ + validAttributes: { + ...ReactNativeViewAttributes.UIView, + isHighlighted: true, + numberOfLines: true, + ellipsizeMode: true, + allowFontScaling: true, + maxFontSizeMultiplier: true, + disabled: true, + selectable: true, + selectionColor: true, + adjustsFontSizeToFit: true, + minimumFontScale: true, + textBreakStrategy: true, + onTextLayout: true, + onInlineViewLayout: true, + dataDetectorType: true, + }, + directEventTypes: { + topTextLayout: { + registrationName: 'onTextLayout', + }, + topInlineViewLayout: { + registrationName: 'onInlineViewLayout', + }, + }, + uiViewClassName: 'RCTText', + }), +): any); + +export const NativeVirtualText: HostComponent = + UIManager.getViewManagerConfig('RCTVirtualText') == null + ? NativeText + : (createReactNativeComponentClass('RCTVirtualText', () => ({ + validAttributes: { + ...ReactNativeViewAttributes.UIView, + isHighlighted: true, + maxFontSizeMultiplier: true, + }, + uiViewClassName: 'RCTVirtualText', + })): any);