fix bug: flipped leading/trailing separators.updateProps

Reviewed By: thechefchen Differential Revision: D4964000 fbshipit-source-id: bd0562e30811d6206cd5441f6a9413c4b503bbfa
enthal · Apr 27, 2017 · 5c7c65e · 5c7c65e
1 parent d5a6152
commit 5c7c65e
Show file tree

Hide file tree

Showing 3 changed files with 259 additions and 3 deletions.
diff --git a/Libraries/Lists/VirtualizedList.js b/Libraries/Lists/VirtualizedList.js
@@ -867,7 +867,7 @@ class CellRenderer extends React.Component {
     },
     updateProps: (select: 'leading' | 'trailing', newProps: Object) => {
       const {cellKey, prevCellKey} = this.props;
-      this.props.onUpdateSeparators([select === 'leading' ? cellKey : prevCellKey], newProps);
+      this.props.onUpdateSeparators([select === 'leading' ? prevCellKey : cellKey], newProps);
     },
   };
 

diff --git a/Libraries/Lists/__tests__/VirtualizedList-test.js b/Libraries/Lists/__tests__/VirtualizedList-test.js
@@ -57,7 +57,6 @@ describe('VirtualizedList', () => {
         data={new Array(5).fill().map((_, ii) => ({id: String(ii)}))}
         keyExtractor={(item, index) => item.id}
         getItemLayout={({index}) => ({length: 50, offset: index * 50})}
-        numColumns={2}
         refreshing={false}
         onRefresh={jest.fn()}
         renderItem={({item}) => <item value={item.id} />}
@@ -77,4 +76,24 @@ describe('VirtualizedList', () => {
     );
     expect(component).toMatchSnapshot();
   });
+
+  it('handles separators correctly', () => {
+    const infos = [];
+    const component = ReactTestRenderer.create(
+      <VirtualizedList
+        ItemSeparatorComponent={(props) => <separator {...props} />}
+        data={[{key: 'i0'}, {key: 'i1'}, {key: 'i2'}]}
+        renderItem={(info) => {
+          infos.push(info);
+          return <item title={info.item.key} />;
+        }}
+      />
+    );
+    expect(component).toMatchSnapshot();
+    infos[1].separators.highlight();
+    expect(component).toMatchSnapshot();
+    infos[2].separators.updateProps('leading', {press: true});
+    expect(component).toMatchSnapshot();
+    infos[1].separators.unhighlight();
+  });
 });
diff --git a/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap b/Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
@@ -1,5 +1,243 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`VirtualizedList handles separators correctly 1`] = `
+<RCTScrollView
+  ItemSeparatorComponent={[Function]}
+  data={
+    Array [
+      Object {
+        "key": "i0",
+      },
+      Object {
+        "key": "i1",
+      },
+      Object {
+        "key": "i2",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  renderScrollComponent={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        title="i0"
+      />
+      <separator
+        highlighted={false}
+        leadingItem={
+          Object {
+            "key": "i0",
+          }
+        }
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        title="i1"
+      />
+      <separator
+        highlighted={false}
+        leadingItem={
+          Object {
+            "key": "i1",
+          }
+        }
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        title="i2"
+      />
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`VirtualizedList handles separators correctly 2`] = `
+<RCTScrollView
+  ItemSeparatorComponent={[Function]}
+  data={
+    Array [
+      Object {
+        "key": "i0",
+      },
+      Object {
+        "key": "i1",
+      },
+      Object {
+        "key": "i2",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  renderScrollComponent={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        title="i0"
+      />
+      <separator
+        highlighted={true}
+        leadingItem={
+          Object {
+            "key": "i0",
+          }
+        }
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        title="i1"
+      />
+      <separator
+        highlighted={true}
+        leadingItem={
+          Object {
+            "key": "i1",
+          }
+        }
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        title="i2"
+      />
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`VirtualizedList handles separators correctly 3`] = `
+<RCTScrollView
+  ItemSeparatorComponent={[Function]}
+  data={
+    Array [
+      Object {
+        "key": "i0",
+      },
+      Object {
+        "key": "i1",
+      },
+      Object {
+        "key": "i2",
+      },
+    ]
+  }
+  disableVirtualization={false}
+  getItem={[Function]}
+  getItemCount={[Function]}
+  horizontal={false}
+  initialNumToRender={10}
+  keyExtractor={[Function]}
+  maxToRenderPerBatch={10}
+  onContentSizeChange={[Function]}
+  onEndReachedThreshold={2}
+  onLayout={[Function]}
+  onMomentumScrollEnd={[Function]}
+  onScroll={[Function]}
+  onScrollBeginDrag={[Function]}
+  onScrollEndDrag={[Function]}
+  renderItem={[Function]}
+  renderScrollComponent={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={Array []}
+  updateCellsBatchingPeriod={50}
+  windowSize={21}
+>
+  <View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        title="i0"
+      />
+      <separator
+        highlighted={true}
+        leadingItem={
+          Object {
+            "key": "i0",
+          }
+        }
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        title="i1"
+      />
+      <separator
+        highlighted={true}
+        leadingItem={
+          Object {
+            "key": "i1",
+          }
+        }
+        press={true}
+      />
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <item
+        title="i2"
+      />
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
 exports[`VirtualizedList renders all the bells and whistles 1`] = `
 <RCTScrollView
   ItemSeparatorComponent={[Function]}
@@ -32,7 +270,6 @@ exports[`VirtualizedList renders all the bells and whistles 1`] = `
   initialNumToRender={10}
   keyExtractor={[Function]}
   maxToRenderPerBatch={10}
-  numColumns={2}
   onContentSizeChange={[Function]}
   onEndReachedThreshold={2}
   onLayout={[Function]}