add separator highlighting/updating support to SectionList

Reviewed By: thechefchen

Differential Revision: D4833604

fbshipit-source-id: cc1f85d8048221d9d26d728994b61237be625e4f

Examples/UIExplorer/js/FlatListExample.js

@@ -205,7 +205,7 @@ class FlatListExample extends React.PureComponent {
       );
     }
   };
-  _pressItem = (key: number) => {
+  _pressItem = (key: string) => {
     this._listRef.getNode().recordInteraction();
     pressItem(this, key);
   };

Examples/UIExplorer/js/ListExampleShared.js

@@ -37,7 +37,7 @@ const {
   View,
 } = ReactNative;
 
-type Item = {title: string, text: string, key: number, pressed: boolean, noImage?: ?boolean};
+type Item = {title: string, text: string, key: string, pressed: boolean, noImage?: ?boolean};
 
 function genItemData(count: number, start: number = 0): Array<Item> {
   const dataBlob = [];
@@ -46,7 +46,7 @@ function genItemData(count: number, start: number = 0): Array<Item> {
     dataBlob.push({
       title: 'Item ' + ii,
       text: LOREM_IPSUM.substr(0, itemHash % 301 + 20),
-      key: ii,
+      key: String(ii),
       pressed: false,
     });
   }
@@ -61,7 +61,7 @@ class ItemComponent extends React.PureComponent {
     fixedHeight?: ?boolean,
     horizontal?: ?boolean,
     item: Item,
-    onPress: (key: number) => void,
+    onPress: (key: string) => void,
     onShowUnderlay?: () => void,
     onHideUnderlay?: () => void,
   };
@@ -199,12 +199,13 @@ function getItemLayout(data: any, index: number, horizontal?: boolean) {
   return {length, offset: (length + separator) * index + header, index};
 }
 
-function pressItem(context: Object, key: number) {
-  const pressed = !context.state.data[key].pressed;
+function pressItem(context: Object, key: string) {
+  const index = Number(key);
+  const pressed = !context.state.data[index].pressed;
   context.setState((state) => {
     const newData = [...state.data];
-    newData[key] = {
-      ...state.data[key],
+    newData[index] = {
+      ...state.data[index],
       pressed,
       title: 'Item ' + key + (pressed ? ' (pressed)' : ''),
     };

Examples/UIExplorer/js/MultiColumnExample.js

@@ -139,7 +139,7 @@ class MultiColumnExample extends React.PureComponent {
       infoLog('onViewableItemsChanged: ', info.changed.map((v) => ({...v, item: '...'})));
     }
   };
-  _pressItem = (key: number) => {
+  _pressItem = (key: string) => {
     pressItem(this, key);
   };
 }

Examples/UIExplorer/js/SectionListExample.js

@@ -65,11 +65,9 @@ const renderSectionHeader = ({section}) => (
   </View>
 );
 
-const CustomSeparatorComponent = ({text}) => (
-  <View>
-    <SeparatorComponent />
+const CustomSeparatorComponent = ({text, highlighted}) => (
+  <View style={[styles.customSeparator, highlighted && {backgroundColor: 'rgb(217, 217, 217)'}]}>
     <Text style={styles.separatorText}>{text}</Text>
-    <SeparatorComponent />
   </View>
 );
 
@@ -130,11 +128,11 @@ class SectionListExample extends React.PureComponent {
         <AnimatedSectionList
           ListHeaderComponent={HeaderComponent}
           ListFooterComponent={FooterComponent}
-          SectionSeparatorComponent={() =>
-            <CustomSeparatorComponent text="SECTION SEPARATOR" />
+          SectionSeparatorComponent={({highlighted}) =>
+            <CustomSeparatorComponent highlighted={highlighted} text="SECTION SEPARATOR" />
           }
-          ItemSeparatorComponent={() =>
-            <CustomSeparatorComponent text="ITEM SEPARATOR" />
+          ItemSeparatorComponent={({highlighted}) =>
+            <CustomSeparatorComponent highlighted={highlighted} text="ITEM SEPARATOR" />
           }
           debug={this.state.debug}
           enableVirtualization={this.state.virtualized}
@@ -147,22 +145,30 @@ class SectionListExample extends React.PureComponent {
           stickySectionHeadersEnabled
           sections={[
             {renderItem: renderStackedItem, key: 's1', data: [
-              {title: 'Item In Header Section', text: 'Section s1', key: '0'},
+              {title: 'Item In Header Section', text: 'Section s1', key: 'header item'},
             ]},
             {key: 's2', data: [
-              {noImage: true, title: '1st item', text: 'Section s2', key: '0'},
-              {noImage: true, title: '2nd item', text: 'Section s2', key: '1'},
+              {noImage: true, title: '1st item', text: 'Section s2', key: 'noimage0'},
+              {noImage: true, title: '2nd item', text: 'Section s2', key: 'noimage1'},
             ]},
             ...filteredSectionData,
           ]}
+          style={styles.list}
           viewabilityConfig={VIEWABILITY_CONFIG}
         />
       </UIExplorerPage>
     );
   }
-  _renderItemComponent = ({item}) => (
-    <ItemComponent item={item} onPress={this._pressItem} />
+
+  _renderItemComponent = ({item, separators}) => (
+    <ItemComponent
+      item={item}
+      onPress={this._pressItem}
+      onHideUnderlay={separators.unhighlight}
+      onShowUnderlay={separators.highlight}
+    />
   );
+
   // This is called when items change viewability by scrolling into our out of
   // the viewable area.
   _onViewableItemsChanged = (info: {
@@ -181,17 +187,25 @@ class SectionListExample extends React.PureComponent {
       )));
     }
   };
-  _pressItem = (index: number) => {
-    pressItem(this, index);
+
+  _pressItem = (key: string) => {
+    !isNaN(key) && pressItem(this, key);
   };
 }
 
 const styles = StyleSheet.create({
+  customSeparator: {
+    backgroundColor: 'rgb(200, 199, 204)',
+  },
   header: {
     backgroundColor: '#e9eaed',
   },
   headerText: {
     padding: 4,
+    fontWeight: '600',
+  },
+  list: {
+    backgroundColor: 'white',
   },
   optionSection: {
     flexDirection: 'row',
@@ -202,8 +216,7 @@ const styles = StyleSheet.create({
   separatorText: {
     color: 'gray',
     alignSelf: 'center',
-    padding: 4,
-    fontSize: 9,
+    fontSize: 7,
   },
 });