status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-02-25 15:45:32 +00:00
Code Issues Projects Releases Wiki Activity

Make section key optional

Browse Source 
Summary: People rarely re-order sections so this is an annoying requirement and we can just use the index by default.

Reviewed By: thechefchen

Differential Revision: D4972154

fbshipit-source-id: 256c445b36c9ba101277614d30a6dc1dbd477ee0
This commit is contained in:
Spencer Ahrens 2017-05-01 21:17:28 -07:00 committed by Facebook Github Bot
parent f73464851b
commit 8d373f3186
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
Libraries/Lists/SectionList.js
View File

@ -22,9 +22,15 @@ import type {Props as VirtualizedSectionListProps} from 'VirtualizedSectionList'
type Item = any; type Item = any;
type SectionBase<SectionItemT> = { type SectionBase<SectionItemT> = {
// Must be provided directly on each section. /**
* The data for rendering items in this section.
*/
data: Array<SectionItemT>, data: Array<SectionItemT>,
key: string, /**
* Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections,
* the array index will be used by default.
*/
key?: string,
// Optional props will override list-wide props just for this section. // Optional props will override list-wide props just for this section.
renderItem?: ?(info: { renderItem?: ?(info: {
@ -52,7 +58,6 @@ type RequiredProps<SectionT: SectionBase<any>> = {
* *
* sections: Array<{ * sections: Array<{
* data: Array<SectionItem>, * data: Array<SectionItem>,
* key: string,
* renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>, * renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
* ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>, * ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
* }> * }>
@ -201,19 +206,19 @@ type DefaultProps = typeof defaultProps;
* *
* <SectionList * <SectionList
* renderItem={({item}) => <ListItem title={item.title} />} * renderItem={({item}) => <ListItem title={item.title} />}
* renderSectionHeader={({section}) => <H1 title={section.key} />} * renderSectionHeader={({section}) => <H1 title={section.title} />}
* sections={[ // homogenous rendering between sections * sections={[ // homogenous rendering between sections
* {data: [...], key: ...}, * {data: [...], title: ...},
* {data: [...], key: ...}, * {data: [...], title: ...},
* {data: [...], key: ...}, * {data: [...], title: ...},
* ]} * ]}
* /> * />
* *
* <SectionList * <SectionList
* sections={[ // heterogeneous rendering between sections * sections={[ // heterogeneous rendering between sections
* {data: [...], key: ..., renderItem: ...}, * {data: [...], title: ..., renderItem: ...},
* {data: [...], key: ..., renderItem: ...}, * {data: [...], title: ..., renderItem: ...},
* {data: [...], key: ..., renderItem: ...}, * {data: [...], title: ..., renderItem: ...},
* ]} * ]}
* /> * />
* *

9
Libraries/Lists/VirtualizedSectionList.js
View File

@ -16,7 +16,6 @@ const View = require('View');
const VirtualizedList = require('VirtualizedList'); const VirtualizedList = require('VirtualizedList');
const invariant = require('fbjs/lib/invariant'); const invariant = require('fbjs/lib/invariant');
const warning = require('fbjs/lib/warning');
import type {ViewToken} from 'ViewabilityHelper'; import type {ViewToken} from 'ViewabilityHelper';
import type {Props as VirtualizedListProps} from 'VirtualizedList'; import type {Props as VirtualizedListProps} from 'VirtualizedList';
@ -27,7 +26,7 @@ type SectionItem = any;
type SectionBase = { type SectionBase = {
// Must be provided directly on each section. // Must be provided directly on each section.
data: Array<SectionItem>, data: Array<SectionItem>,
key: string, key?: string,
// Optional props will override list-wide props just for this section. // Optional props will override list-wide props just for this section.
renderItem?: ?({ renderItem?: ?({
@ -179,11 +178,7 @@ class VirtualizedSectionList<SectionT: SectionBase>
const defaultKeyExtractor = this.props.keyExtractor; const defaultKeyExtractor = this.props.keyExtractor;
for (let ii = 0; ii < this.props.sections.length; ii++) { for (let ii = 0; ii < this.props.sections.length; ii++) {
const section = this.props.sections[ii]; const section = this.props.sections[ii];
const key = section.key; const key = section.key || String(ii);
warning(
key != null,
'VirtualizedSectionList: A `section` you supplied is missing the `key` property.'
);
itemIndex -= 1; // The section itself is an item itemIndex -= 1; // The section itself is an item
if (itemIndex >= section.data.length) { if (itemIndex >= section.data.length) {
itemIndex -= section.data.length; itemIndex -= section.data.length;