Revert "API update and bug fixes"

This reverts commit 6283878.

Examples/UIExplorer/js/ListExampleShared.js

@@ -35,7 +35,7 @@ const {
   View,
 } = ReactNative;
 
-type Item = {title: string, text: string, key: number, pressed: boolean, noImage?: ?boolean};
+type Item = {title: string, text: string, key: number, pressed: boolean};
 
 function genItemData(count: number): Array<Item> {
   const dataBlob = [];
@@ -73,7 +73,7 @@ class ItemComponent extends React.PureComponent {
         style={horizontal ? styles.horizItem : styles.item}>
         <View style={[
           styles.row, horizontal && {width: HORIZ_WIDTH}]}>
-          {!item.noImage && <Image style={styles.thumb} source={imgSource} />}
+          <Image style={styles.thumb} source={imgSource} />
           <Text
             style={styles.text}
             numberOfLines={(horizontal || fixedHeight) ? 3 : undefined}>
@@ -108,7 +108,7 @@ class FooterComponent extends React.PureComponent {
       <View>
         <SeparatorComponent />
         <View style={styles.headerFooter}>
-          <Text>LIST FOOTER</Text>
+          <Text>FOOTER</Text>
         </View>
       </View>
     );
@@ -120,7 +120,7 @@ class HeaderComponent extends React.PureComponent {
     return (
       <View>
         <View style={styles.headerFooter}>
-          <Text>LIST HEADER</Text>
+          <Text>HEADER</Text>
         </View>
         <SeparatorComponent />
       </View>
@@ -164,7 +164,7 @@ function hashCode(str: string): number {
   return hash;
 }
 
-const HEADER = {height: 30, width: 100};
+const HEADER = {height: 30, width: 80};
 const SEPARATOR_HEIGHT = StyleSheet.hairlineWidth;
 
 function getItemLayout(data: any, index: number, horizontal?: boolean) {

Examples/UIExplorer/js/SectionListExample.js

@@ -36,7 +36,6 @@ const UIExplorerPage = require('./UIExplorerPage');
 const infoLog = require('infoLog');
 
 const {
-  HeaderComponent,
   FooterComponent,
   ItemComponent,
   PlainInput,
@@ -54,10 +53,10 @@ const SectionHeaderComponent = ({section}) => (
   </View>
 );
 
-const CustomSeparatorComponent = ({text}) => (
+const SectionSeparatorComponent = () => (
   <View>
     <SeparatorComponent />
-    <Text style={styles.separatorText}>{text}</Text>
+    <Text style={styles.sectionSeparatorText}>SECTION SEPARATOR</Text>
     <SeparatorComponent />
   </View>
 );
@@ -95,25 +94,20 @@ class SectionListExample extends React.PureComponent {
         </View>
         <SeparatorComponent />
         <SectionList
-          ListHeaderComponent={HeaderComponent}
-          ListFooterComponent={FooterComponent}
+          FooterComponent={FooterComponent}
           ItemComponent={this._renderItemComponent}
           SectionHeaderComponent={SectionHeaderComponent}
-          SectionSeparatorComponent={() => <CustomSeparatorComponent text="SECTION SEPARATOR" />}
-          ItemSeparatorComponent={() => <CustomSeparatorComponent text="ITEM SEPARATOR" />}
+          SectionSeparatorComponent={SectionSeparatorComponent}
+          SeparatorComponent={SeparatorComponent}
           enableVirtualization={this.state.virtualized}
           onRefresh={() => alert('onRefresh: nothing to refresh :P')}
           onViewableItemsChanged={this._onViewableItemsChanged}
           refreshing={false}
           sections={[
             {ItemComponent: StackedItemComponent, key: 's1', data: [
-              {title: 'Item In Header Section', text: 'Section s1', key: '0'},
+              {title: 'Item In Header Section', text: 's1', key: '0'}
             ]},
-            {key: 's2', data: [
-              {noImage: true, title: 'First item', text: 'Section s2', key: '0'},
-              {noImage: true, title: 'Second item', text: 'Section s2', key: '1'},
-            ]},
-            {key: 'Filtered Items', data: filteredData},
+            {key: 's2', data: filteredData},
           ]}
           viewablePercentThreshold={100}
         />
@@ -149,11 +143,11 @@ const styles = StyleSheet.create({
   searchRow: {
     paddingHorizontal: 10,
   },
-  separatorText: {
+  sectionSeparatorText: {
     color: 'gray',
     alignSelf: 'center',
     padding: 4,
-    fontSize: 9,
+    fontWeight: 'bold',
   },
 });
 

Libraries/Experimental/SectionList.js

@@ -67,29 +67,26 @@ type RequiredProps<SectionT: SectionBase<*>> = {
 
 type OptionalProps<SectionT: SectionBase<*>> = {
   /**
-   * Default renderer for every item in every section.
-   */
-  ItemComponent: ReactClass<{item: Item, index: number}>,
-  /**
-   * Rendered in between adjacent Items within each section.
-   */
-  ItemSeparatorComponent?: ?ReactClass<*>,
-  /**
-   * Rendered at the very beginning of the list.
+   * Rendered after the last item in the last section.
    */
-  ListHeaderComponent?: ?ReactClass<*>,
+  FooterComponent?: ?ReactClass<*>,
   /**
-   * Rendered at the very end of the list.
+   * Default renderer for every item in every section.
    */
-  ListFooterComponent?: ?ReactClass<*>,
+  ItemComponent: ReactClass<{item: Item, index: number}>,
   /**
-   * Rendered at the top of each section. Sticky headers are not yet supported.
+   * Rendered at the top of each section. In the future, a sticky option will be added.
    */
   SectionHeaderComponent?: ?ReactClass<{section: SectionT}>,
   /**
-   * Rendered in between each section.
+   * Rendered at the bottom of every Section, except the very last one, in place of the normal
+   * SeparatorComponent.
    */
   SectionSeparatorComponent?: ?ReactClass<*>,
+  /**
+   * Rendered at the bottom of every Item except the very last one in the last section.
+   */
+  SeparatorComponent?: ?ReactClass<*>,
   /**
    * Warning: Virtualization can drastically improve memory consumption for long lists, but trashes
    * the state of items when they scroll out of the render window, so make sure all relavent data is
@@ -146,16 +143,11 @@ class SectionList<SectionT: SectionBase<*>>
   static defaultProps: DefaultProps = VirtualizedSectionList.defaultProps;
 
   render() {
-    const {ListFooterComponent, ListHeaderComponent, ItemSeparatorComponent} = this.props;
-    const List = this.props.legacyImplementation ? MetroListView : VirtualizedSectionList;
-    return (
-      <List
-        {...this.props}
-        FooterComponent={ListFooterComponent}
-        HeaderComponent={ListHeaderComponent}
-        SeparatorComponent={ItemSeparatorComponent}
-      />
-    );
+    if (this.props.legacyImplementation) {
+      return <MetroListView {...this.props} items={this.props.sections} />;
+    } else {
+      return <VirtualizedSectionList {...this.props} />;
+    }
   }
 }
 

Libraries/Experimental/VirtualizedSectionList.js

@@ -163,18 +163,14 @@ class VirtualizedSectionList<SectionT: SectionBase>
     const defaultKeyExtractor = this.props.keyExtractor;
     for (let ii = 0; ii < this.props.sections.length; ii++) {
       const section = this.props.sections[ii];
-      const key = section.key;
-      warning(
-        key != null,
-        'VirtualizedSectionList: A `section` you supplied is missing the `key` property.'
-      );
+      const keyExtractor = section.keyExtractor || defaultKeyExtractor;
+      const key = keyExtractor(section, ii);
       itemIndex -= 1; // The section itself is an item
       if (itemIndex >= section.data.length) {
         itemIndex -= section.data.length;
       } else if (itemIndex === -1) {
         return {section, key, index: null};
       } else {
-        const keyExtractor = section.keyExtractor || defaultKeyExtractor;
         return {
           section,
           key: key + ':' + keyExtractor(section.data[itemIndex], itemIndex),
@@ -220,8 +216,7 @@ class VirtualizedSectionList<SectionT: SectionBase>
     if (!info) {
       return null;
     } else if (info.index == null) {
-      const {SectionHeaderComponent} = this.props;
-      return SectionHeaderComponent ? <SectionHeaderComponent section={info.section} /> : null;
+      return <this.props.SectionHeaderComponent section={info.section} />;
     } else {
       const ItemComponent = info.section.ItemComponent || this.props.ItemComponent;
       const SeparatorComponent = this._getSeparatorComponent(index, info);
@@ -241,12 +236,13 @@ class VirtualizedSectionList<SectionT: SectionBase>
     }
     const SeparatorComponent = info.section.SeparatorComponent || this.props.SeparatorComponent;
     const {SectionSeparatorComponent} = this.props;
-    const isLastItemInList = index === this.state.childProps.getItemCount() - 1;
-    const isLastItemInSection = info.index === info.section.data.length - 1;
-    if (SectionSeparatorComponent && isLastItemInSection && !isLastItemInList) {
+    const lastItemIndex = this.state.childProps.getItemCount() - 1;
+    if (SectionSeparatorComponent &&
+        info.index === info.section.data.length - 1 &&
+        index < lastItemIndex) {
       return SectionSeparatorComponent;
     }
-    if (SeparatorComponent && !isLastItemInSection && !isLastItemInList) {
+    if (SeparatorComponent && index < lastItemIndex) {
       return SeparatorComponent;
     }
     return null;