diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js index 866f46819e9bce..83b02877b88386 100644 --- a/Libraries/Text/Text.js +++ b/Libraries/Text/Text.js @@ -10,19 +10,35 @@ */ 'use strict'; -const NativeMethodsMixin = require('NativeMethodsMixin'); const React = require('React'); +const ReactNative = require('ReactNative'); const ReactNativeViewAttributes = require('ReactNativeViewAttributes'); const TextPropTypes = require('TextPropTypes'); const Touchable = require('Touchable'); const UIManager = require('UIManager'); -const createReactClass = require('create-react-class'); const createReactNativeComponentClass = require('createReactNativeComponentClass'); const mergeFast = require('mergeFast'); const processColor = require('processColor'); const {ViewContextTypes} = require('ViewContext'); +import type {PressEvent} from 'CoreEventTypes'; +import type {TextProps} from 'TextProps'; +import type {ViewChildContext} from 'ViewContext'; + +type State = { + isHighlighted: boolean, +}; + +type RectOffset = { + top: number, + left: number, + right: number, + bottom: number, +}; + +const PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; + const viewConfig = { validAttributes: mergeFast(ReactNativeViewAttributes.UIView, { isHighlighted: true, @@ -39,54 +55,54 @@ const viewConfig = { uiViewClassName: 'RCTText', }; -import type {ViewChildContext} from 'ViewContext'; - /** * A React component for displaying text. * * See https://facebook.github.io/react-native/docs/text.html */ +class Text extends ReactNative.NativeComponent { + static propTypes = TextPropTypes; + static childContextTypes = ViewContextTypes; + static contextTypes = ViewContextTypes; + + static defaultProps = { + accessible: true, + allowFontScaling: true, + ellipsizeMode: 'tail', + }; + + state = mergeFast(Touchable.Mixin.touchableGetInitialState(), { + isHighlighted: false, + }); + + viewConfig = viewConfig; -const Text = createReactClass({ - displayName: 'Text', - propTypes: TextPropTypes, - getDefaultProps(): Object { - return { - accessible: true, - allowFontScaling: true, - ellipsizeMode: 'tail', - }; - }, - getInitialState: function(): Object { - return mergeFast(Touchable.Mixin.touchableGetInitialState(), { - isHighlighted: false, - }); - }, - mixins: [NativeMethodsMixin], - viewConfig: viewConfig, getChildContext(): ViewChildContext { return { isInAParentText: true, }; - }, - childContextTypes: ViewContextTypes, - contextTypes: ViewContextTypes, - /** - * Only assigned if touch is needed. - */ - _handlers: (null: ?Object), + } + + _handlers: ?Object; + _hasPressHandler(): boolean { return !!this.props.onPress || !!this.props.onLongPress; - }, + } /** * These are assigned lazily the first time the responder is set to make plain * text nodes as cheap as possible. */ - touchableHandleActivePressIn: (null: ?Function), - touchableHandleActivePressOut: (null: ?Function), - touchableHandlePress: (null: ?Function), - touchableHandleLongPress: (null: ?Function), - touchableGetPressRectOffset: (null: ?Function), + touchableHandleActivePressIn: ?Function; + touchableHandleActivePressOut: ?Function; + touchableHandlePress: ?Function; + touchableHandleLongPress: ?Function; + touchableHandleResponderGrant: ?Function; + touchableHandleResponderMove: ?Function; + touchableHandleResponderRelease: ?Function; + touchableHandleResponderTerminate: ?Function; + touchableHandleResponderTerminationRequest: ?Function; + touchableGetPressRectOffset: ?Function; + render(): React.Element { let newProps = this.props; if (this.props.onStartShouldSetResponder || this._hasPressHandler()) { @@ -95,7 +111,6 @@ const Text = createReactClass({ onStartShouldSetResponder: (): boolean => { const shouldSetFromProps = this.props.onStartShouldSetResponder && - // $FlowFixMe(>=0.41.0) this.props.onStartShouldSetResponder(); const setResponder = shouldSetFromProps || this._hasPressHandler(); if (setResponder && !this.touchableHandleActivePressIn) { @@ -130,11 +145,11 @@ const Text = createReactClass({ }); }; - this.touchableHandlePress = (e: SyntheticEvent<>) => { + this.touchableHandlePress = (e: PressEvent) => { this.props.onPress && this.props.onPress(e); }; - this.touchableHandleLongPress = (e: SyntheticEvent<>) => { + this.touchableHandleLongPress = (e: PressEvent) => { this.props.onLongPress && this.props.onLongPress(e); }; @@ -145,21 +160,25 @@ const Text = createReactClass({ return setResponder; }, onResponderGrant: function(e: SyntheticEvent<>, dispatchID: string) { + // $FlowFixMe TouchableMixin handlers couldn't actually be null this.touchableHandleResponderGrant(e, dispatchID); this.props.onResponderGrant && this.props.onResponderGrant.apply(this, arguments); }.bind(this), onResponderMove: function(e: SyntheticEvent<>) { + // $FlowFixMe TouchableMixin handlers couldn't actually be null this.touchableHandleResponderMove(e); this.props.onResponderMove && this.props.onResponderMove.apply(this, arguments); }.bind(this), onResponderRelease: function(e: SyntheticEvent<>) { + // $FlowFixMe TouchableMixin handlers couldn't actually be null this.touchableHandleResponderRelease(e); this.props.onResponderRelease && this.props.onResponderRelease.apply(this, arguments); }.bind(this), onResponderTerminate: function(e: SyntheticEvent<>) { + // $FlowFixMe TouchableMixin handlers couldn't actually be null this.touchableHandleResponderTerminate(e); this.props.onResponderTerminate && this.props.onResponderTerminate.apply(this, arguments); @@ -167,6 +186,7 @@ const Text = createReactClass({ onResponderTerminationRequest: function(): boolean { // Allow touchable or props.onResponderTerminationRequest to deny // the request + // $FlowFixMe TouchableMixin handlers couldn't actually be null var allowTermination = this.touchableHandleResponderTerminationRequest(); if (allowTermination && this.props.onResponderTerminationRequest) { allowTermination = this.props.onResponderTerminationRequest.apply( @@ -201,17 +221,8 @@ const Text = createReactClass({ } else { return ; } - }, -}); - -type RectOffset = { - top: number, - left: number, - right: number, - bottom: number, -}; - -var PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30}; + } +} var RCTText = createReactNativeComponentClass( viewConfig.uiViewClassName,