Convert from React.createClass to ES6 classes

Reviewed By: cpojer

Differential Revision: D3619143

fbshipit-source-id: e14e81468d467437ee3d79c34c34b7780a46ca1c

Libraries/Experimental/SwipeableRow/SwipeableListView.js

@@ -48,22 +48,25 @@ const {PropTypes} = React;
  * - It can bounce the 1st row of the list so users know it's swipeable
  * - More to come
  */
-const SwipeableListView = React.createClass({
-  statics: {
-    getNewDataSource(): Object {
-      return new SwipeableListViewDataSource({
-        getRowData: (data, sectionID, rowID) => data[sectionID][rowID],
-        getSectionHeaderData: (data, sectionID) => data[sectionID],
-        sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
-        rowHasChanged: (row1, row2) => row1 !== row2,
-      });
-    },
-  },
+class SwipeableListView extends React.Component {
+  props: {
+    bounceFirstRowOnMount: boolean,
+    dataSource: SwipeableListViewDataSource,
+    maxSwipeDistance: number,
+    renderRow: Function,
+    renderQuickActions: Function,
+  };
 
-  _listViewRef: (null: ?string),
-  _shouldBounceFirstRowOnMount: false,
+  static getNewDataSource(): Object {
+    return new SwipeableListViewDataSource({
+      getRowData: (data, sectionID, rowID) => data[sectionID][rowID],
+      getSectionHeaderData: (data, sectionID) => data[sectionID],
+      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
+      rowHasChanged: (row1, row2) => row1 !== row2,
+    });
+  }
 
-  propTypes: {
+  static propTypes = {
     /**
      * To alert the user that swiping is possible, the first row can bounce
      * on component mount.
@@ -80,24 +83,23 @@ const SwipeableListView = React.createClass({
     renderRow: PropTypes.func.isRequired,
     // Callback method to render the view that will be unveiled on swipe
     renderQuickActions: PropTypes.func.isRequired,
-  },
+  };
 
-  getDefaultProps(): Object {
-    return {
-      bounceFirstRowOnMount: false,
-      renderQuickActions: () => null,
-    };
-  },
+  static defaultProps = {
+    bounceFirstRowOnMount: false,
+    renderQuickActions: () => null,
+  };
 
-  getInitialState(): Object {
-    return {
-      dataSource: this.props.dataSource,
-    };
-  },
+  state: Object = {
+    dataSource: this.props.dataSource,
+  };
+
+  _listViewRef: ?string = null;
+  _shouldBounceFirstRowOnMount = false;
 
   componentWillMount(): void {
     this._shouldBounceFirstRowOnMount = this.props.bounceFirstRowOnMount;
-  },
+  }
 
   componentWillReceiveProps(nextProps: Object): void {
     if (
@@ -107,7 +109,7 @@ const SwipeableListView = React.createClass({
         dataSource: nextProps.dataSource,
       });
     }
-  },
+  }
 
   render(): ReactElement<any> {
     return (
@@ -121,7 +123,7 @@ const SwipeableListView = React.createClass({
         scrollEnabled={this.state.scrollEnabled}
       />
     );
-  },
+  }
 
   /**
    * This is a work-around to lock vertical `ListView` scrolling on iOS and
@@ -129,26 +131,22 @@ const SwipeableListView = React.createClass({
    * scrolling is active allows us to significantly improve framerates
    * (from high 20s to almost consistently 60 fps)
    */
-  _setListViewScrollable(value: boolean): void {
+  _setListViewScrollable = (value: boolean): void => {
     if (this._listViewRef && this._listViewRef.setNativeProps) {
       this._listViewRef.setNativeProps({
         scrollEnabled: value,
       });
     }
-  },
+  };
 
   // Passing through ListView's getScrollResponder() function
-  getScrollResponder(): ?Object {
+  getScrollResponder = (): ?Object => {
     if (this._listViewRef && this._listViewRef.getScrollResponder) {
       return this._listViewRef.getScrollResponder();
     }
-  },
+  };
 
-  _renderRow(
-    rowData: Object,
-    sectionID: string,
-    rowID: string,
-  ): ReactElement<any> {
+  _renderRow = (rowData: Object, sectionID: string, rowID: string): ReactElement<any> => {
     const slideoutView = this.props.renderQuickActions(rowData, sectionID, rowID);
 
     // If renderRowSlideout is unspecified or returns falsey, don't allow swipe
@@ -157,6 +155,7 @@ const SwipeableListView = React.createClass({
     }
 
     let shouldBounceOnMount = false;
+    // $FlowFixMe found when converting React.createClass to ES6
     if (this._shouldBounceFirstRowOnMount) {
       this._shouldBounceFirstRowOnMount = false;
       shouldBounceOnMount = rowID === this.props.dataSource.getFirstRowID();
@@ -175,13 +174,13 @@ const SwipeableListView = React.createClass({
         {this.props.renderRow(rowData, sectionID, rowID)}
       </SwipeableRow>
     );
-  },
+  };
 
-  _onOpen(rowID: string): void {
+  _onOpen = (rowID: string): void => {
     this.setState({
       dataSource: this.state.dataSource.setOpenRowID(rowID),
     });
-  },
-});
+  };
+}
 
 module.exports = SwipeableListView;

Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js

@@ -36,8 +36,19 @@ const {PropTypes} = React;
  * with SwipeableListView. Each button takes an image and text with optional
  * formatting.
  */
-const SwipeableQuickActionButton = React.createClass({
-  propTypes: {
+class SwipeableQuickActionButton extends React.Component {
+  props: {
+    accessibilityLabel?: string,
+    imageSource: $FlowFixMe,
+    imageStyle?: $FlowFixMe,
+    onPress?: Function,
+    style?: $FlowFixMe,
+    testID?: string,
+    text?: string,
+    textStyle?: $FlowFixMe,
+  };
+
+  static propTypes = {
     accessibilityLabel: PropTypes.string,
     imageSource: Image.propTypes.source.isRequired,
     imageStyle: Image.propTypes.style,
@@ -46,7 +57,7 @@ const SwipeableQuickActionButton = React.createClass({
     testID: PropTypes.string,
     text: PropTypes.string,
     textStyle: Text.propTypes.style,
-  },
+  };
 
   render(): ?ReactElement<any> {
     if (!this.props.imageSource && !this.props.text) {
@@ -70,7 +81,7 @@ const SwipeableQuickActionButton = React.createClass({
         </View>
       </TouchableHighlight>
     );
-  },
-});
+  }
+}
 
 module.exports = SwipeableQuickActionButton;

Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js

@@ -39,12 +39,15 @@ const MAX_QUICK_ACTIONS = 2;
  *   <SwipeableQuickActionButton {..props} />
  * </SwipeableQuickActions>
  */
-const SwipeableQuickActions = React.createClass({
-  propTypes: {
+class SwipeableQuickActions extends React.Component {
+  props: {style?: $FlowFixMe};
+
+  static propTypes = {
     style: View.propTypes.style,
-  },
+  };
 
   render(): ReactElement<any> {
+    // $FlowFixMe found when converting React.createClass to ES6
     const children = this.props.children;
     let buttons = [];
 
@@ -53,6 +56,7 @@ const SwipeableQuickActions = React.createClass({
       for (let i = 0; i < children.length && i < MAX_QUICK_ACTIONS; i++) {
         buttons.push(children[i]);
 
+        // $FlowFixMe found when converting React.createClass to ES6
         if (i < this.props.children.length - 1) { // Not last button
           buttons.push(<View key={i} style={styles.divider} />);
         }
@@ -66,8 +70,8 @@ const SwipeableQuickActions = React.createClass({
         {buttons}
       </View>
     );
-  },
-});
+  }
+}
 
 const styles = StyleSheet.create({
   background: {