status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix bug: flipped leading/trailing separators.updateProps 

Reviewed By: thechefchen

Differential Revision: D4964000

fbshipit-source-id: bd0562e30811d6206cd5441f6a9413c4b503bbfa
This commit is contained in:
Spencer Ahrens 2017-04-27 15:42:11 -07:00 committed by Facebook Github Bot
parent d5a6152582
commit 5c7c65e964
3 changed files with 259 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Libraries/Lists/VirtualizedList.js
View File

@ -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);
},
};

21
Libraries/Lists/__tests__/VirtualizedList-test.js
View File

@ -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();
});
});

239
Libraries/Lists/__tests__/__snapshots__/VirtualizedList-test.js.snap
View File

@ -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]}