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

add separator highlighting/updating support to `SectionList` 

Reviewed By: thechefchen

Differential Revision: D4833604

fbshipit-source-id: cc1f85d8048221d9d26d728994b61237be625e4f
This commit is contained in:
Spencer Ahrens 2017-04-12 16:57:04 -07:00 committed by Facebook Github Bot
parent f25df504ed
commit 76307f47b9
7 changed files with 189 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Examples/UIExplorer/js/FlatListExample.js
View File

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

15
Examples/UIExplorer/js/ListExampleShared.js
View File

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

2
Examples/UIExplorer/js/MultiColumnExample.js
View File

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

47
Examples/UIExplorer/js/SectionListExample.js
View File

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

40
Libraries/Lists/SectionList.js
View File

@ -27,7 +27,15 @@ type SectionBase<SectionItemT> = {
key: string,
// Optional props will override list-wide props just for this section.
renderItem?: ?(info: {item: SectionItemT, index: number}) => ?React.Element<any>,
renderItem?: ?(info: {
item: SectionItemT,
index: number,
separators: {
highlight: () => void,
unhighlight: () => void,
updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
},
}) => ?React.Element<any>,
ItemSeparatorComponent?: ?ReactClass<any>,
keyExtractor?: (item: SectionItemT) => string,
@ -36,6 +44,18 @@ type SectionBase<SectionItemT> = {
};
type RequiredProps<SectionT: SectionBase<any>> = {
/**
* The actual data to render, akin to the `data` prop in [`<FlatList>`](/react-native/docs/flatlist.html).
*
* General shape:
*
* sections: Array<{
* data: Array<SectionItem>,
* key: string,
* renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
* ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
* }>
*/
sections: Array<SectionT>,
};
@ -43,9 +63,20 @@ type OptionalProps<SectionT: SectionBase<any>> = {
/**
* Default renderer for every item in every section. Can be over-ridden on a per-section basis.
*/
renderItem: (info: {item: Item, index: number}) => ?React.Element<any>,
renderItem: (info: {
item: Item,
index: number,
separators: {
highlight: () => void,
unhighlight: () => void,
updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
},
}) => ?React.Element<any>,
/**
* Rendered in between adjacent Items within each section.
* Rendered in between each item, but not at the top or bottom. By default, `highlighted` and
* `leadingItem` props are provided. `renderItem` provides `separators.highlight`/`unhighlight`
* which will update the `highlighted` prop, but you can also add custom props with
* `separators.updateProps`.
*/
ItemSeparatorComponent?: ?ReactClass<any>,
/**
@ -57,7 +88,8 @@ type OptionalProps<SectionT: SectionBase<any>> = {
*/
ListFooterComponent?: ?(ReactClass<any> | React.Element<any>),
/**
* Rendered in between each section.
* Rendered in between each section. Also receives `highlighted`, `leadingItem`, and any custom
* props from `separators.updateProps`.
*/
SectionSeparatorComponent?: ?ReactClass<any>,
/**

112
Libraries/Lists/VirtualizedSectionList.js
View File

@ -30,7 +30,15 @@ type SectionBase = {
key: string,
// Optional props will override list-wide props just for this section.
renderItem?: ?({item: SectionItem, index: number}) => ?React.Element<*>,
renderItem?: ?({
item: SectionItem,
index: number,
separators: {
highlight: () => void,
unhighlight: () => void,
updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
},
}) => ?React.Element<*>,
ItemSeparatorComponent?: ?ReactClass<*>,
keyExtractor?: (item: SectionItem) => string,
@ -56,7 +64,15 @@ type OptionalProps<SectionT: SectionBase> = {
/**
* Default renderer for every item in every section.
*/
renderItem: ({item: Item, index: number}) => ?React.Element<*>,
renderItem: (info: {
item: Item,
index: number,
separators: {
highlight: () => void,
unhighlight: () => void,
updateProps: (select: 'leading' | 'trailing', newProps: Object) => void,
},
}) => ?React.Element<any>,
/**
* Rendered at the top of each section.
*/
@ -204,7 +220,9 @@ class VirtualizedSectionList<SectionT: SectionBase>
const info = this._subExtractor(index);
if (!info) {
return null;
} else if (info.index == null) {
}
const infoIndex = info.index;
if (infoIndex == null) {
const {renderSectionHeader} = this.props;
return renderSectionHeader ? renderSectionHeader({section: info.section}) : null;
} else {
@ -212,14 +230,30 @@ class VirtualizedSectionList<SectionT: SectionBase>
const SeparatorComponent = this._getSeparatorComponent(index, info);
invariant(renderItem, 'no renderItem!');
return (
<View>
{renderItem({item, index: info.index || 0})}
{SeparatorComponent && <SeparatorComponent />}
</View>
<ItemWithSeparator
SeparatorComponent={SeparatorComponent}
LeadingSeparatorComponent={infoIndex === 0
? this.props.SectionSeparatorComponent
: undefined
}
cellKey={info.key}
index={infoIndex}
item={item}
onUpdateSeparator={this._onUpdateSeparator}
prevCellKey={(this._subExtractor(index - 1) || {}).key}
ref={(ref) => {this._cellRefs[info.key] = ref;}}
renderItem={renderItem}
section={info.section}
/>
);
}
};
_onUpdateSeparator = (key: string, newProps: Object) => {
const ref = this._cellRefs[key];
ref && ref.updateSeparatorProps(newProps);
};
_getSeparatorComponent(index: number, info?: ?Object): ?ReactClass<*> {
info = info || this._subExtractor(index);
if (!info) {
@ -229,7 +263,7 @@ class VirtualizedSectionList<SectionT: SectionBase>
const {SectionSeparatorComponent} = this.props;
const isLastItemInList = index === this.state.childProps.getItemCount() - 1;
const isLastItemInSection = info.index === info.section.data.length - 1;
if (SectionSeparatorComponent && isLastItemInSection && !isLastItemInList) {
if (SectionSeparatorComponent && isLastItemInSection) {
return SectionSeparatorComponent;
}
if (ItemSeparatorComponent && !isLastItemInSection && !isLastItemInList) {
@ -277,10 +311,72 @@ class VirtualizedSectionList<SectionT: SectionBase>
return <VirtualizedList {...this.state.childProps} ref={this._captureRef} />;
}
_cellRefs = {};
_listRef: VirtualizedList;
_captureRef = (ref) => { this._listRef = ref; };
}
class ItemWithSeparator extends React.Component {
props: {
LeadingSeparatorComponent: ?ReactClass<*>,
SeparatorComponent: ?ReactClass<*>,
cellKey: string,
index: number,
item: Item,
onUpdateSeparator: (cellKey: string, newProps: Object) => void,
prevCellKey?: ?string,
renderItem: Function,
section: Object,
};
state = {
separatorProps: {
highlighted: false,
leadingItem: this.props.item,
leadingSection: this.props.section,
},
leadingSeparatorProps: {
highlighted: false,
},
};
_separators = {
highlight: () => {
['leading', 'trailing'].forEach(s => this._separators.updateProps(s, {highlighted: true}));
},
unhighlight: () => {
['leading', 'trailing'].forEach(s => this._separators.updateProps(s, {highlighted: false}));
},
updateProps: (select: 'leading' | 'trailing', newProps: Object) => {
const {LeadingSeparatorComponent, cellKey, prevCellKey} = this.props;
if (select === 'leading' && LeadingSeparatorComponent) {
this.setState(state => ({
leadingSeparatorProps: {...state.leadingSeparatorProps, ...newProps}
}));
} else {
this.props.onUpdateSeparator((select === 'leading' && prevCellKey) || cellKey, newProps);
}
},
};
updateSeparatorProps(newProps: Object) {
this.setState(state => ({separatorProps: {...state.separatorProps, ...newProps}}));
}
render() {
const {LeadingSeparatorComponent, SeparatorComponent, renderItem, item, index} = this.props;
const element = renderItem({
item,
index,
separators: this._separators,
});
const leadingSeparator = LeadingSeparatorComponent &&
<LeadingSeparatorComponent {...this.state.leadingSeparatorProps} />;
const separator = SeparatorComponent && <SeparatorComponent {...this.state.separatorProps} />;
return separator ? <View>{leadingSeparator}{element}{separator}</View> : element;
}
}
function getItem(sections: ?Array<Item>, index: number): ?Item {
if (!sections) {
return null;

19
Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap
View File

@ -67,20 +67,16 @@ exports[`SectionList rendering empty section headers is fine 1`] = `
<View
onLayout={[Function]}
>
<View>
<item
value="i1"
/>
</View>
<item
value="i1"
/>
</View>
<View
onLayout={[Function]}
>
<View>
<item
value="i2"
/>
</View>
<item
value="i2"
/>
</View>
</View>
</RCTScrollView>
@ -204,6 +200,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
onLayout={[Function]}
>
<View>
<sectionSeparator />
<itemForSection1
value="i1s1"
/>
@ -231,6 +228,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
onLayout={[Function]}
>
<View>
<sectionSeparator />
<defaultItem
value="i1s2"
/>
@ -244,6 +242,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
<defaultItem
value="i2s2"
/>
<sectionSeparator />
</View>
</View>
<View