Codemod to 1.7.0

Differential Revision: D5763302

fbshipit-source-id: a91ca1786c7ac8eb9aa3dd43555a7a223dc6f9cf

Libraries/Lists/ListView/ListView.js

@@ -502,11 +502,7 @@ var ListView = createReactClass({
             adjacentRowHighlighted,
           );
           if (separator) {
-            bodyComponents.push(
-              <View key={'s_' + comboID}>
-                {separator}
-              </View>,
-            );
+            bodyComponents.push(<View key={'s_' + comboID}>{separator}</View>);
             totalIndex++;
           }
         }

Libraries/Lists/MetroListView.js

@@ -204,11 +204,12 @@ class MetroListView extends React.Component<Props, $FlowFixMeState> {
     );
     return renderSectionHeader({section});
   };
-  _renderSeparator = (sID, rID) =>
+  _renderSeparator = (sID, rID) => (
     /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
      * suppresses an error when upgrading Flow's support for React. To see the
      * error delete this comment and run Flow. */
-    <this.props.SeparatorComponent key={sID + rID} />;
+    <this.props.SeparatorComponent key={sID + rID} />
+  );
 }
 
 module.exports = MetroListView;

Libraries/Lists/ViewabilityHelper.js

@@ -112,8 +112,7 @@ class ViewabilityHelper {
       : itemVisiblePercentThreshold;
     invariant(
       viewablePercentThreshold != null &&
-        itemVisiblePercentThreshold !=
-          null !==
+        (itemVisiblePercentThreshold != null) !==
           (viewAreaCoveragePercentThreshold != null),
       'Must set exactly one of itemVisiblePercentThreshold or viewAreaCoveragePercentThreshold',
     );

Libraries/Lists/VirtualizedList.js

@@ -605,9 +605,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       if (stickyIndicesFromProps.has(0)) {
         stickyHeaderIndices.push(0);
       }
-      const element = React.isValidElement(ListHeaderComponent)
-        ? ListHeaderComponent // $FlowFixMe
-        : <ListHeaderComponent />;
+      const element = React.isValidElement(ListHeaderComponent) ? (
+        ListHeaderComponent
+      ) : (
+        // $FlowFixMe
+        <ListHeaderComponent />
+      );
       cells.push(
         /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
          * comment suppresses an error when upgrading Flow's support for React.
@@ -713,9 +716,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
         );
       }
     } else if (ListEmptyComponent) {
-      const element = React.isValidElement(ListEmptyComponent)
-        ? ListEmptyComponent // $FlowFixMe
-        : <ListEmptyComponent />;
+      const element = React.isValidElement(ListEmptyComponent) ? (
+        ListEmptyComponent
+      ) : (
+        // $FlowFixMe
+        <ListEmptyComponent />
+      );
       cells.push(
         /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
          * comment suppresses an error when upgrading Flow's support for React.
@@ -729,9 +735,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
       );
     }
     if (ListFooterComponent) {
-      const element = React.isValidElement(ListFooterComponent)
-        ? ListFooterComponent // $FlowFixMe
-        : <ListFooterComponent />;
+      const element = React.isValidElement(ListFooterComponent) ? (
+        ListFooterComponent
+      ) : (
+        // $FlowFixMe
+        <ListFooterComponent />
+      );
       cells.push(
         /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
          * comment suppresses an error when upgrading Flow's support for React.
@@ -942,7 +951,7 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           borderColor: 'blue',
           borderWidth: 1,
         }}>
-        {framesInLayout.map((f, ii) =>
+        {framesInLayout.map((f, ii) => (
           <View
             key={'f' + ii}
             style={{
@@ -952,8 +961,8 @@ class VirtualizedList extends React.PureComponent<Props, State> {
               height: f.length * normalize,
               backgroundColor: 'orange',
             }}
-          />,
-        )}
+          />
+        ))}
         <View
           style={{
             ...baseStyle,
@@ -1335,9 +1344,9 @@ class CellRenderer extends React.Component<
         : this.props.onLayout;
     // NOTE: that when this is a sticky header, `onLayout` will get automatically extracted and
     // called explicitly by `ScrollViewStickyHeader`.
-    const itemSeparator =
-      ItemSeparatorComponent &&
-      <ItemSeparatorComponent {...this.state.separatorProps} />;
+    const itemSeparator = ItemSeparatorComponent && (
+      <ItemSeparatorComponent {...this.state.separatorProps} />
+    );
     const cellStyle = inversionStyle
       ? horizontal
         ? [{flexDirection: 'row-reverse'}, inversionStyle]

Libraries/Lists/VirtualizedSectionList.js

@@ -484,19 +484,21 @@ class ItemWithSeparator extends React.Component<
       section,
       separators: this._separators,
     });
-    const leadingSeparator =
-      LeadingSeparatorComponent &&
-      <LeadingSeparatorComponent {...this.state.leadingSeparatorProps} />;
-    const separator =
-      SeparatorComponent &&
-      <SeparatorComponent {...this.state.separatorProps} />;
-    return leadingSeparator || separator
-      ? <View>
-          {leadingSeparator}
-          {element}
-          {separator}
-        </View>
-      : element;
+    const leadingSeparator = LeadingSeparatorComponent && (
+      <LeadingSeparatorComponent {...this.state.leadingSeparatorProps} />
+    );
+    const separator = SeparatorComponent && (
+      <SeparatorComponent {...this.state.separatorProps} />
+    );
+    return leadingSeparator || separator ? (
+      <View>
+        {leadingSeparator}
+        {element}
+        {separator}
+      </View>
+    ) : (
+      element
+    );
   }
 }
 

Libraries/Lists/__flowtests__/FlatList-flowtest.js

@@ -60,13 +60,14 @@ module.exports = {
     ];
     return (
       <FlatList
-        renderItem={info =>
+        renderItem={info => (
           <span>
             {
               // $FlowExpectedError - bad widgetCount type 6, should be Object
               info.item.widget.missingProp
             }
-          </span>}
+          </span>
+        )}
         data={data}
       />
     );

Libraries/Lists/__flowtests__/SectionList-flowtest.js

@@ -19,8 +19,9 @@ function renderMyListItem(info: {item: {title: string}, index: number}) {
   return <span />;
 }
 
-const renderMyHeader = ({section}: {section: {fooNumber: number} & Object}) =>
-  <span />;
+const renderMyHeader = ({section}: {section: {fooNumber: number} & Object}) => (
+  <span />
+);
 
 module.exports = {
   testGoodDataWithGoodItem() {

Libraries/Lists/__tests__/SectionList-test.js

@@ -40,20 +40,23 @@ describe('SectionList', () => {
     const component = ReactTestRenderer.create(
       <SectionList
         initialNumToRender={Infinity}
-        ItemSeparatorComponent={props =>
-          <defaultItemSeparator v={propStr(props)} />}
+        ItemSeparatorComponent={props => (
+          <defaultItemSeparator v={propStr(props)} />
+        )}
         ListEmptyComponent={props => <empty v={propStr(props)} />}
         ListFooterComponent={props => <footer v={propStr(props)} />}
         ListHeaderComponent={props => <header v={propStr(props)} />}
-        SectionSeparatorComponent={props =>
-          <sectionSeparator v={propStr(props)} />}
+        SectionSeparatorComponent={props => (
+          <sectionSeparator v={propStr(props)} />
+        )}
         sections={[
           {
             renderItem: props => <itemForSection1 v={propStr(props)} />,
             key: 's1',
             keyExtractor: (item, index) => item.id,
-            ItemSeparatorComponent: props =>
-              <itemSeparatorForSection1 v={propStr(props)} />,
+            ItemSeparatorComponent: props => (
+              <itemSeparatorForSection1 v={propStr(props)} />
+            ),
             data: [{id: 'i1s1'}, {id: 'i2s1'}],
           },
           {

Libraries/Lists/__tests__/VirtualizedList-test.js

@@ -140,7 +140,7 @@ describe('VirtualizedList', () => {
     const component = ReactTestRenderer.create(
       <VirtualizedList
         data={[{key: 'outer0'}, {key: 'outer1'}]}
-        renderItem={outerInfo =>
+        renderItem={outerInfo => (
           <VirtualizedList
             data={[
               {key: outerInfo.item.key + ':inner0'},
@@ -152,7 +152,8 @@ describe('VirtualizedList', () => {
             }}
             getItem={(data, index) => data[index]}
             getItemCount={data => data.length}
-          />}
+          />
+        )}
         getItem={(data, index) => data[index]}
         getItemCount={data => data.length}
       />,

Libraries/ReactNative/AppContainer.js

@@ -62,20 +62,20 @@ class AppContainer extends React.Component<Props, State> {
           'toggleElementInspector',
           () => {
             const Inspector = require('Inspector');
-            const inspector = this.state.inspector
-              ? null
-              : <Inspector
-                  inspectedViewTag={ReactNative.findNodeHandle(this._mainRef)}
-                  onRequestRerenderApp={updateInspectedViewTag => {
-                    this.setState(
-                      s => ({mainKey: s.mainKey + 1}),
-                      () =>
-                        updateInspectedViewTag(
-                          ReactNative.findNodeHandle(this._mainRef),
-                        ),
-                    );
-                  }}
-                />;
+            const inspector = this.state.inspector ? null : (
+              <Inspector
+                inspectedViewTag={ReactNative.findNodeHandle(this._mainRef)}
+                onRequestRerenderApp={updateInspectedViewTag => {
+                  this.setState(
+                    s => ({mainKey: s.mainKey + 1}),
+                    () =>
+                      updateInspectedViewTag(
+                        ReactNative.findNodeHandle(this._mainRef),
+                      ),
+                  );
+                }}
+              />
+            );
             this.setState({inspector});
           },
         );
@@ -116,11 +116,7 @@ class AppContainer extends React.Component<Props, State> {
 
     const Wrapper = this.props.WrapperComponent;
     if (Wrapper) {
-      innerView = (
-        <Wrapper>
-          {innerView}
-        </Wrapper>
-      );
+      innerView = <Wrapper>{innerView}</Wrapper>;
     }
     return (
       <View style={styles.appContainer} pointerEvents="box-none">

Libraries/ReactNative/YellowBox.js

@@ -188,11 +188,9 @@ const WarningRow = ({count, warning, onPress}) => {
   const View = require('View');
 
   const countText =
-    count > 1
-      ? <Text style={styles.listRowCount}>
-          {'(' + count + ') '}
-        </Text>
-      : null;
+    count > 1 ? (
+      <Text style={styles.listRowCount}>{'(' + count + ') '}</Text>
+    ) : null;
 
   return (
     <View style={styles.listRow}>
@@ -267,9 +265,7 @@ const WarningInspector = ({
     <View style={styles.inspector}>
       <SafeAreaView style={styles.safeArea}>
         <View style={styles.inspectorCount}>
-          <Text style={styles.inspectorCountText}>
-            {countSentence}
-          </Text>
+          <Text style={styles.inspectorCountText}>{countSentence}</Text>
           <TouchableHighlight
             onPress={toggleStacktrace}
             underlayColor="transparent">
@@ -280,9 +276,7 @@ const WarningInspector = ({
         </View>
         <ScrollView style={styles.inspectorWarning}>
           {stacktraceList}
-          <Text style={styles.inspectorWarningText}>
-            {warning}
-          </Text>
+          <Text style={styles.inspectorWarningText}>{warning}</Text>
         </ScrollView>
         <View style={styles.inspectorButtons}>
           <TouchableHighlight
@@ -390,18 +384,18 @@ class YellowBox extends React.Component<
 
     const {inspecting, stacktraceVisible} = this.state;
     const inspector =
-      inspecting !== null
-        ? <WarningInspector
-            warningInfo={this.state.warningMap.get(inspecting)}
-            warning={inspecting}
-            stacktraceVisible={stacktraceVisible}
-            onDismiss={() => this.dismissWarning(inspecting)}
-            onDismissAll={() => this.dismissWarning(null)}
-            onMinimize={() => this.setState({inspecting: null})}
-            toggleStacktrace={() =>
-              this.setState({stacktraceVisible: !stacktraceVisible})}
-          />
-        : null;
+      inspecting !== null ? (
+        <WarningInspector
+          warningInfo={this.state.warningMap.get(inspecting)}
+          warning={inspecting}
+          stacktraceVisible={stacktraceVisible}
+          onDismiss={() => this.dismissWarning(inspecting)}
+          onDismissAll={() => this.dismissWarning(null)}
+          onMinimize={() => this.setState({inspecting: null})}
+          toggleStacktrace={() =>
+            this.setState({stacktraceVisible: !stacktraceVisible})}
+        />
+      ) : null;
 
     const rows = [];
     this.state.warningMap.forEach((warningInfo, warning) => {

RNTester/js/CameraRollExample.js

@@ -48,16 +48,12 @@ class CameraRollExample extends React.Component<
           onValueChange={this._onSwitchChange}
           value={this.state.bigImages}
         />
-        <Text>
-          {(this.state.bigImages ? 'Big' : 'Small') + ' Images'}
-        </Text>
+        <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
         <Slider
           value={this.state.sliderValue}
           onValueChange={this._onSliderChange}
         />
-        <Text>
-          {'Group Type: ' + this.state.groupTypes}
-        </Text>
+        <Text>{'Group Type: ' + this.state.groupTypes}</Text>
         <CameraRollView
           ref={ref => {
             this._cameraRollView = ref;
@@ -93,18 +89,10 @@ class CameraRollExample extends React.Component<
         <View style={styles.row}>
           <Image source={asset.node.image} style={imageStyle} />
           <View style={styles.info}>
-            <Text style={styles.url}>
-              {asset.node.image.uri}
-            </Text>
-            <Text>
-              {locationStr}
-            </Text>
-            <Text>
-              {asset.node.group_name}
-            </Text>
-            <Text>
-              {new Date(asset.node.timestamp).toString()}
-            </Text>
+            <Text style={styles.url}>{asset.node.image.uri}</Text>
+            <Text>{locationStr}</Text>
+            <Text>{asset.node.group_name}</Text>
+            <Text>{new Date(asset.node.timestamp).toString()}</Text>
           </View>
         </View>
       </TouchableOpacity>

RNTester/js/CheckBoxExample.js

@@ -70,9 +70,7 @@ class EventCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
             style={{marginBottom: 10}}
             value={this.state.eventCheckBoxIsOn}
           />
-          <Text>
-            {this.state.eventCheckBoxIsOn ? 'On' : 'Off'}
-          </Text>
+          <Text>{this.state.eventCheckBoxIsOn ? 'On' : 'Off'}</Text>
         </View>
         <View>
           <CheckBox
@@ -87,9 +85,7 @@ class EventCheckBoxExample extends React.Component<{}, $FlowFixMeState> {
             style={{marginBottom: 10}}
             value={this.state.eventCheckBoxRegressionIsOn}
           />
-          <Text>
-            {this.state.eventCheckBoxRegressionIsOn ? 'On' : 'Off'}
-          </Text>
+          <Text>{this.state.eventCheckBoxRegressionIsOn ? 'On' : 'Off'}</Text>
         </View>
       </View>
     );

RNTester/js/WebSocketExample.js

@@ -38,16 +38,10 @@ const WS_STATES = [
 
 class Button extends React.Component {
   render(): React.Element<any> {
-    const label = (
-      <Text style={styles.buttonLabel}>
-        {this.props.label}
-      </Text>
-    );
+    const label = <Text style={styles.buttonLabel}>{this.props.label}</Text>;
     if (this.props.disabled) {
       return (
-        <View style={[styles.button, styles.disabledButton]}>
-          {label}
-        </View>
+        <View style={[styles.button, styles.disabledButton]}>{label}</View>
       );
     }
     return (
@@ -62,14 +56,8 @@ class Row extends React.Component {
   render(): React.Element<any> {
     return (
       <View style={styles.row}>
-        <Text>
-          {this.props.label}
-        </Text>
-        {this.props.value
-          ? <Text>
-              {this.props.value}
-            </Text>
-          : null}
+        <Text>{this.props.label}</Text>
+        {this.props.value ? <Text>{this.props.value}</Text> : null}
         {this.props.children}
       </View>
     );