Convert Text to ES6 Class

Summary: Utilizing ES6 Classes instead of createReactClass lets us actually enforce the way Text is used via Flow. Reviewed By: fkgozali Differential Revision: D7227755 fbshipit-source-id: 8e8285f9ebb3783a0dc4837c37c163178910ff9f
facebook · Mar 13, 2018 · ab92c00 · ab92c00
1 parent 0459e4f
commit ab92c00
Showing 1 changed file with 59 additions and 48 deletions.
diff --git 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<TextProps, State> {
+  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<any> {
     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,28 +160,33 @@ 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);
           }.bind(this),
           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 <RCTText {...newProps} />;
     }
-  },
-});
-
-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,