Permalink
Browse files

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
  • Loading branch information...
TheSavior authored and facebook-github-bot committed Mar 13, 2018
1 parent 0459e4f commit ab92c00245c0ce717819ddb0ab8b9204d4c13c34
Showing with 59 additions and 48 deletions.
  1. +59 −48 Libraries/Text/Text.js
View
@@ -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,

0 comments on commit ab92c00

Please sign in to comment.