Permalink
Browse files

Make section key optional

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
  • Loading branch information...
sahrens authored and facebook-github-bot committed May 2, 2017
1 parent f734648 commit 8d373f3186be28fecb2798f8f8d3f23f5147b7ea
Showing with 17 additions and 17 deletions.
  1. +15 −10 Libraries/Lists/SectionList.js
  2. +2 −7 Libraries/Lists/VirtualizedSectionList.js
@@ -22,9 +22,15 @@ import type {Props as VirtualizedSectionListProps} from 'VirtualizedSectionList'
type Item = any;
type SectionBase<SectionItemT> = {
// Must be provided directly on each section.
/**
* The data for rendering items in this section.
*/
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.
renderItem?: ?(info: {
@@ -52,7 +58,6 @@ type RequiredProps<SectionT: SectionBase<any>> = {
*
* sections: Array<{
* data: Array<SectionItem>,
* key: string,
* renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
* ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
* }>
@@ -201,19 +206,19 @@ type DefaultProps = typeof defaultProps;
*
* <SectionList
* renderItem={({item}) => <ListItem title={item.title} />}
* renderSectionHeader={({section}) => <H1 title={section.key} />}
* renderSectionHeader={({section}) => <H1 title={section.title} />}
* sections={[ // homogenous rendering between sections
* {data: [...], key: ...},
* {data: [...], key: ...},
* {data: [...], key: ...},
* {data: [...], title: ...},
* {data: [...], title: ...},
* {data: [...], title: ...},
* ]}
* />
*
* <SectionList
* sections={[ // heterogeneous rendering between sections
* {data: [...], key: ..., renderItem: ...},
* {data: [...], key: ..., renderItem: ...},
* {data: [...], key: ..., renderItem: ...},
* {data: [...], title: ..., renderItem: ...},
* {data: [...], title: ..., renderItem: ...},
* {data: [...], title: ..., renderItem: ...},
* ]}
* />
*
@@ -16,7 +16,6 @@ const View = require('View');
const VirtualizedList = require('VirtualizedList');
const invariant = require('fbjs/lib/invariant');
const warning = require('fbjs/lib/warning');
import type {ViewToken} from 'ViewabilityHelper';
import type {Props as VirtualizedListProps} from 'VirtualizedList';
@@ -27,7 +26,7 @@ type SectionItem = any;
type SectionBase = {
// Must be provided directly on each section.
data: Array<SectionItem>,
key: string,
key?: string,
// Optional props will override list-wide props just for this section.
renderItem?: ?({
@@ -179,11 +178,7 @@ 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 key = section.key || String(ii);
itemIndex -= 1; // The section itself is an item
if (itemIndex >= section.data.length) {
itemIndex -= section.data.length;

0 comments on commit 8d373f3

Please sign in to comment.