Rename *Component props to match SectionList

Reviewed By: yungsters

Differential Revision: D4697335

fbshipit-source-id: 742b7a1729ba7a08fe3d9707bcf6c51026779739

Examples/UIExplorer/js/FlatListExample.js

@@ -133,9 +133,9 @@ class FlatListExample extends React.PureComponent {
         </View>
         <SeparatorComponent />
         <AnimatedFlatList
-          HeaderComponent={HeaderComponent}
+          ItemSeparatorComponent={SeparatorComponent}
-          FooterComponent={FooterComponent}
+          ListHeaderComponent={HeaderComponent}
-          SeparatorComponent={SeparatorComponent}
+          ListFooterComponent={FooterComponent}
           data={filteredData}
           debug={this.state.debug}
           disableVirtualization={!this.state.virtualized}

Examples/UIExplorer/js/MultiColumnExample.js

@@ -97,9 +97,9 @@ class MultiColumnExample extends React.PureComponent {
         </View>
         <SeparatorComponent />
         <FlatList
-          FooterComponent={FooterComponent}
+          ItemSeparatorComponent={SeparatorComponent}
-          HeaderComponent={HeaderComponent}
+          ListFooterComponent={FooterComponent}
-          SeparatorComponent={SeparatorComponent}
+          ListHeaderComponent={HeaderComponent}
           getItemLayout={this.state.fixedHeight ? this._getItemLayout : undefined}
           data={filteredData}
           key={this.state.numColumns + (this.state.fixedHeight ? 'f' : 'v')}

Libraries/CustomComponents/Lists/FlatList.js

@@ -66,18 +66,18 @@ type RequiredProps<ItemT> = {
   data: ?Array<ItemT>,
 };
 type OptionalProps<ItemT> = {
+  /**
+   * Rendered in between each item, but not at the top or bottom.
+   */
+  ItemSeparatorComponent?: ?ReactClass<any>,
   /**
    * Rendered at the bottom of all the items.
    */
-  FooterComponent?: ?ReactClass<any>,
+  ListFooterComponent?: ?ReactClass<any>,
   /**
    * Rendered at the top of all the items.
    */
-  HeaderComponent?: ?ReactClass<any>,
+  ListHeaderComponent?: ?ReactClass<any>,
-  /**
-   * Rendered in between each item, but not at the top or bottom.
-   */
-  SeparatorComponent?: ?ReactClass<any>,
   /**
    * `getItemLayout` is an optional optimizations that let us skip measurement of dynamic content if
    * you know the height of items a priori. `getItemLayout` is the most efficient, and is easy to
@@ -88,7 +88,7 @@ type OptionalProps<ItemT> = {
    *     )}
    *
    * Remember to include separator length (height or width) in your offset calculation if you
-   * specify `SeparatorComponent`.
+   * specify `ItemSeparatorComponent`.
    */
   getItemLayout?: (data: ?Array<ItemT>, index: number) =>
     {length: number, offset: number, index: number},
@@ -132,13 +132,6 @@ type OptionalProps<ItemT> = {
    * Optional custom style for multi-item rows generated when numColumns > 1
    */
   columnWrapperStyle?: StyleObj,
-  /**
-   * Optional optimization to minimize re-rendering items.
-   */
-  shouldItemUpdate: (
-    prevInfo: {item: ItemT, index: number},
-    nextInfo: {item: ItemT, index: number}
-  ) => boolean,
   /**
    * See `ViewabilityHelper` for flow type and further documentation.
    */

Libraries/CustomComponents/Lists/SectionList.js

@@ -183,16 +183,8 @@ class SectionList<SectionT: SectionBase<any>>
   static defaultProps: DefaultProps = VirtualizedSectionList.defaultProps;
 
   render() {
-    const {ListFooterComponent, ListHeaderComponent, ItemSeparatorComponent} = this.props;
     const List = this.props.legacyImplementation ? MetroListView : VirtualizedSectionList;
-    return (
+    return <List {...this.props} />;
-      <List
-        {...this.props}
-        FooterComponent={ListFooterComponent}
-        HeaderComponent={ListHeaderComponent}
-        SeparatorComponent={ItemSeparatorComponent}
-      />
-    );
   }
 }
 

Libraries/CustomComponents/Lists/VirtualizedList.js

@@ -59,9 +59,6 @@ type RequiredProps = {
   data?: any,
 };
 type OptionalProps = {
-  FooterComponent?: ?ReactClass<any>,
-  HeaderComponent?: ?ReactClass<any>,
-  SeparatorComponent?: ?ReactClass<any>,
   /**
    * `debug` will turn on extra logging and visual overlays to aid with debugging both usage and
    * implementation, but with a significant perf hit.
@@ -305,6 +302,7 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
       'Components based on VirtualizedList must be wrapped with Animated.createAnimatedComponent ' +
       'to support native onScroll events with useNativeDriver',
     );
+
     this._updateCellsToRenderBatcher = new Batchinator(
       this._updateCellsToRender,
       this.props.updateCellsBatchingPeriod,
@@ -334,7 +332,7 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
   }
 
   _pushCells(cells, first, last) {
-    const {SeparatorComponent, data, getItem, getItemCount, keyExtractor} = this.props;
+    const {ItemSeparatorComponent, data, getItem, getItemCount, keyExtractor} = this.props;
     const end = getItemCount(data) - 1;
     last = Math.min(end, last);
     for (let ii = first; ii <= last; ii++) {
@@ -352,19 +350,19 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
           parentProps={this.props}
         />
       );
-      if (SeparatorComponent && ii < end) {
+      if (ItemSeparatorComponent && ii < end) {
-        cells.push(<SeparatorComponent key={'sep' + ii}/>);
+        cells.push(<ItemSeparatorComponent key={'sep' + ii}/>);
       }
     }
   }
   render() {
-    const {FooterComponent, HeaderComponent} = this.props;
+    const {ListFooterComponent, ListHeaderComponent} = this.props;
     const {data, disableVirtualization, horizontal} = this.props;
     const cells = [];
-    if (HeaderComponent) {
+    if (ListHeaderComponent) {
       cells.push(
         <View key="$header" onLayout={this._onLayoutHeader}>
-          <HeaderComponent />
+          <ListHeaderComponent />
         </View>
       );
     }
@@ -404,10 +402,10 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
         );
       }
     }
-    if (FooterComponent) {
+    if (ListFooterComponent) {
       cells.push(
         <View key="$footer" onLayout={this._onLayoutFooter}>
-          <FooterComponent />
+          <ListFooterComponent />
         </View>
       );
     }

Libraries/CustomComponents/Lists/VirtualizedSectionList.js

@@ -84,7 +84,7 @@ type OptionalProps<SectionT: SectionBase> = {
   renderSectionHeader?: ?({section: SectionT}) => ?React.Element<*>,
   /**
    * Rendered at the bottom of every Section, except the very last one, in place of the normal
-   * SeparatorComponent.
+   * ItemSeparatorComponent.
    */
   SectionSeparatorComponent?: ?ReactClass<*>,
   /**