Permalink
Browse files

API update and bug fixes

Reviewed By: bvaughn, yungsters

Differential Revision: D4563798

fbshipit-source-id: 0591cef7c854b525d77e526af783284d9696cb48
  • Loading branch information...
sahrens authored and facebook-github-bot committed Feb 17, 2017
1 parent 5042bae commit 6283878e17a74672371f769c45ad7b27ea74f8e3
@@ -35,7 +35,7 @@ const {
View,
} = ReactNative;
type Item = {title: string, text: string, key: number, pressed: boolean};
type Item = {title: string, text: string, key: number, pressed: boolean, noImage?: ?boolean};
function genItemData(count: number): Array<Item> {
const dataBlob = [];
@@ -73,7 +73,7 @@ class ItemComponent extends React.PureComponent {
style={horizontal ? styles.horizItem : styles.item}>
<View style={[
styles.row, horizontal && {width: HORIZ_WIDTH}]}>
<Image style={styles.thumb} source={imgSource} />
{!item.noImage && <Image style={styles.thumb} source={imgSource} />}
<Text
style={styles.text}
numberOfLines={(horizontal || fixedHeight) ? 3 : undefined}>
@@ -108,7 +108,7 @@ class FooterComponent extends React.PureComponent {
<View>
<SeparatorComponent />
<View style={styles.headerFooter}>
<Text>FOOTER</Text>
<Text>LIST FOOTER</Text>
</View>
</View>
);
@@ -120,7 +120,7 @@ class HeaderComponent extends React.PureComponent {
return (
<View>
<View style={styles.headerFooter}>
<Text>HEADER</Text>
<Text>LIST HEADER</Text>
</View>
<SeparatorComponent />
</View>
@@ -164,7 +164,7 @@ function hashCode(str: string): number {
return hash;
}
const HEADER = {height: 30, width: 80};
const HEADER = {height: 30, width: 100};
const SEPARATOR_HEIGHT = StyleSheet.hairlineWidth;
function getItemLayout(data: any, index: number, horizontal?: boolean) {
@@ -36,6 +36,7 @@ const UIExplorerPage = require('./UIExplorerPage');
const infoLog = require('infoLog');
const {
HeaderComponent,
FooterComponent,
ItemComponent,
PlainInput,
@@ -53,10 +54,10 @@ const SectionHeaderComponent = ({section}) => (
</View>
);
const SectionSeparatorComponent = () => (
const CustomSeparatorComponent = ({text}) => (
<View>
<SeparatorComponent />
<Text style={styles.sectionSeparatorText}>SECTION SEPARATOR</Text>
<Text style={styles.separatorText}>{text}</Text>
<SeparatorComponent />
</View>
);
@@ -94,20 +95,25 @@ class SectionListExample extends React.PureComponent {
</View>
<SeparatorComponent />
<SectionList
FooterComponent={FooterComponent}
ListHeaderComponent={HeaderComponent}
ListFooterComponent={FooterComponent}
ItemComponent={this._renderItemComponent}
SectionHeaderComponent={SectionHeaderComponent}
SectionSeparatorComponent={SectionSeparatorComponent}
SeparatorComponent={SeparatorComponent}
SectionSeparatorComponent={() => <CustomSeparatorComponent text="SECTION SEPARATOR" />}
ItemSeparatorComponent={() => <CustomSeparatorComponent text="ITEM SEPARATOR" />}
enableVirtualization={this.state.virtualized}
onRefresh={() => alert('onRefresh: nothing to refresh :P')}
onViewableItemsChanged={this._onViewableItemsChanged}
refreshing={false}
sections={[
{ItemComponent: StackedItemComponent, key: 's1', data: [
{title: 'Item In Header Section', text: 's1', key: '0'}
{title: 'Item In Header Section', text: 'Section s1', key: '0'},
]},
{key: 's2', data: filteredData},
{key: 's2', data: [
{noImage: true, title: 'First item', text: 'Section s2', key: '0'},
{noImage: true, title: 'Second item', text: 'Section s2', key: '1'},
]},
{key: 'Filtered Items', data: filteredData},
]}
viewablePercentThreshold={100}
/>
@@ -143,11 +149,11 @@ const styles = StyleSheet.create({
searchRow: {
paddingHorizontal: 10,
},
sectionSeparatorText: {
separatorText: {
color: 'gray',
alignSelf: 'center',
padding: 4,
fontWeight: 'bold',
fontSize: 9,
},
});
@@ -66,27 +66,30 @@ type RequiredProps<SectionT: SectionBase<*>> = {
};
type OptionalProps<SectionT: SectionBase<*>> = {
/**
* Rendered after the last item in the last section.
*/
FooterComponent?: ?ReactClass<*>,
/**
* Default renderer for every item in every section.
*/
ItemComponent: ReactClass<{item: Item, index: number}>,
/**
* Rendered at the top of each section. In the future, a sticky option will be added.
* Rendered in between adjacent Items within each section.
*/
SectionHeaderComponent?: ?ReactClass<{section: SectionT}>,
ItemSeparatorComponent?: ?ReactClass<*>,
/**
* Rendered at the bottom of every Section, except the very last one, in place of the normal
* SeparatorComponent.
* Rendered at the very beginning of the list.
*/
SectionSeparatorComponent?: ?ReactClass<*>,
ListHeaderComponent?: ?ReactClass<*>,
/**
* Rendered at the bottom of every Item except the very last one in the last section.
* Rendered at the very end of the list.
*/
SeparatorComponent?: ?ReactClass<*>,
ListFooterComponent?: ?ReactClass<*>,
/**
* Rendered at the top of each section. Sticky headers are not yet supported.
*/
SectionHeaderComponent?: ?ReactClass<{section: SectionT}>,
/**
* Rendered in between each section.
*/
SectionSeparatorComponent?: ?ReactClass<*>,
/**
* Warning: Virtualization can drastically improve memory consumption for long lists, but trashes
* the state of items when they scroll out of the render window, so make sure all relavent data is
@@ -143,11 +146,16 @@ class SectionList<SectionT: SectionBase<*>>
static defaultProps: DefaultProps = VirtualizedSectionList.defaultProps;
render() {
if (this.props.legacyImplementation) {
return <MetroListView {...this.props} items={this.props.sections} />;
} else {
return <VirtualizedSectionList {...this.props} />;
}
const {ListFooterComponent, ListHeaderComponent, ItemSeparatorComponent} = this.props;
const List = this.props.legacyImplementation ? MetroListView : VirtualizedSectionList;
return (
<List
{...this.props}
FooterComponent={ListFooterComponent}
HeaderComponent={ListHeaderComponent}
SeparatorComponent={ItemSeparatorComponent}
/>
);
}
}
@@ -163,14 +163,18 @@ 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 keyExtractor = section.keyExtractor || defaultKeyExtractor;
const key = keyExtractor(section, ii);
const key = section.key;
warning(
key != null,
'VirtualizedSectionList: A `section` you supplied is missing the `key` property.'
);
itemIndex -= 1; // The section itself is an item
if (itemIndex >= section.data.length) {
itemIndex -= section.data.length;
} else if (itemIndex === -1) {
return {section, key, index: null};
} else {
const keyExtractor = section.keyExtractor || defaultKeyExtractor;
return {
section,
key: key + ':' + keyExtractor(section.data[itemIndex], itemIndex),
@@ -216,7 +220,8 @@ class VirtualizedSectionList<SectionT: SectionBase>
if (!info) {
return null;
} else if (info.index == null) {
return <this.props.SectionHeaderComponent section={info.section} />;
const {SectionHeaderComponent} = this.props;
return SectionHeaderComponent ? <SectionHeaderComponent section={info.section} /> : null;
} else {
const ItemComponent = info.section.ItemComponent || this.props.ItemComponent;
const SeparatorComponent = this._getSeparatorComponent(index, info);
@@ -236,13 +241,12 @@ class VirtualizedSectionList<SectionT: SectionBase>
}
const SeparatorComponent = info.section.SeparatorComponent || this.props.SeparatorComponent;
const {SectionSeparatorComponent} = this.props;
const lastItemIndex = this.state.childProps.getItemCount() - 1;
if (SectionSeparatorComponent &&
info.index === info.section.data.length - 1 &&
index < lastItemIndex) {
const isLastItemInList = index === this.state.childProps.getItemCount() - 1;
const isLastItemInSection = info.index === info.section.data.length - 1;
if (SectionSeparatorComponent && isLastItemInSection && !isLastItemInList) {
return SectionSeparatorComponent;
}
if (SeparatorComponent && index < lastItemIndex) {
if (SeparatorComponent && !isLastItemInSection && !isLastItemInList) {
return SeparatorComponent;
}
return null;

1 comment on commit 6283878

@hramos

This comment has been minimized.

Show comment
Hide comment
@hramos

hramos Feb 22, 2017

Contributor

This commit is breaking open source tests in Circle and will be reverted in #12526.

Contributor

hramos commented on 6283878 Feb 22, 2017

This commit is breaking open source tests in Circle and will be reverted in #12526.

Please sign in to comment.