diff --git a/Libraries/Lists/VirtualizedSectionList.js b/Libraries/Lists/VirtualizedSectionList.js index cfedc61b0..63c7d9ecd 100644 --- a/Libraries/Lists/VirtualizedSectionList.js +++ b/Libraries/Lists/VirtualizedSectionList.js @@ -37,12 +37,12 @@ type SectionBase = { updateProps: (select: 'leading' | 'trailing', newProps: Object) => void, }, }) => ?React.Element, - ItemSeparatorComponent?: ?React.ComponentType<*>, + ItemSeparatorComponent?: ?React.ComponentType, keyExtractor?: (item: SectionItem, index: ?number) => string, // TODO: support more optional/override props - // FooterComponent?: ?ReactClass<*>, - // HeaderComponent?: ?ReactClass<*>, + // FooterComponent?: ?ReactClass, + // HeaderComponent?: ?ReactClass, // onViewableItemsChanged?: ({viewableItems: Array, changed: Array}) => void, }; @@ -54,11 +54,11 @@ type OptionalProps = { /** * Rendered after the last item in the last section. */ - ListFooterComponent?: ?(React.ComponentType<*> | React.Element), + ListFooterComponent?: ?(React.ComponentType | React.Element), /** * Rendered at the very beginning of the list. */ - ListHeaderComponent?: ?(React.ComponentType<*> | React.Element), + ListHeaderComponent?: ?(React.ComponentType | React.Element), /** * Default renderer for every item in every section. */ @@ -84,11 +84,11 @@ type OptionalProps = { * Rendered at the bottom of every Section, except the very last one, in place of the normal * ItemSeparatorComponent. */ - SectionSeparatorComponent?: ?React.ComponentType<*>, + SectionSeparatorComponent?: ?React.ComponentType, /** * Rendered at the bottom of every Item except the very last one in the last section. */ - ItemSeparatorComponent?: ?React.ComponentType<*>, + ItemSeparatorComponent?: ?React.ComponentType, /** * 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 @@ -101,7 +101,7 @@ type OptionalProps = { * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make * sure to also set the `refreshing` prop correctly. */ - onRefresh?: ?Function, + onRefresh?: ?() => void, /** * Called when the viewability of rows changes, as defined by the * `viewabilityConfig` prop. @@ -134,10 +134,6 @@ class VirtualizedSectionList extends React.PureComponent< Props, State, > { - props: Props; - - state: State; - static defaultProps: DefaultProps = { ...VirtualizedList.defaultProps, data: [], @@ -164,6 +160,48 @@ class VirtualizedSectionList extends React.PureComponent< return this._listRef; } + constructor(props: Props, context: Object) { + super(props, context); + this.state = this._computeState(props); + } + + UNSAFE_componentWillReceiveProps(nextProps: Props) { + this.setState(this._computeState(nextProps)); + } + + _computeState(props: Props): State { + const offset = props.ListHeaderComponent ? 1 : 0; + const stickyHeaderIndices = []; + const itemCount = props.sections.reduce((v, section) => { + stickyHeaderIndices.push(v + offset); + return v + section.data.length + 2; // Add two for the section header and footer. + }, 0); + + return { + childProps: { + ...props, + renderItem: this._renderItem, + ItemSeparatorComponent: undefined, // Rendered with renderItem + data: props.sections, + getItemCount: () => itemCount, + getItem, + keyExtractor: this._keyExtractor, + onViewableItemsChanged: props.onViewableItemsChanged + ? this._onViewableItemsChanged + : undefined, + stickyHeaderIndices: props.stickySectionHeadersEnabled + ? stickyHeaderIndices + : undefined, + }, + }; + } + + render() { + return ( + + ); + } + _keyExtractor = (item: Item, index: number) => { const info = this._subExtractor(index); return (info && info.key) || String(index); @@ -307,7 +345,7 @@ class VirtualizedSectionList extends React.PureComponent< _getSeparatorComponent( index: number, info?: ?Object, - ): ?React.ComponentType<*> { + ): ?React.ComponentType { info = info || this._subExtractor(index); if (!info) { return null; @@ -326,48 +364,6 @@ class VirtualizedSectionList extends React.PureComponent< return null; } - _computeState(props: Props): State { - const offset = props.ListHeaderComponent ? 1 : 0; - const stickyHeaderIndices = []; - const itemCount = props.sections.reduce((v, section) => { - stickyHeaderIndices.push(v + offset); - return v + section.data.length + 2; // Add two for the section header and footer. - }, 0); - - return { - childProps: { - ...props, - renderItem: this._renderItem, - ItemSeparatorComponent: undefined, // Rendered with renderItem - data: props.sections, - getItemCount: () => itemCount, - getItem, - keyExtractor: this._keyExtractor, - onViewableItemsChanged: props.onViewableItemsChanged - ? this._onViewableItemsChanged - : undefined, - stickyHeaderIndices: props.stickySectionHeadersEnabled - ? stickyHeaderIndices - : undefined, - }, - }; - } - - constructor(props: Props, context: Object) { - super(props, context); - this.state = this._computeState(props); - } - - UNSAFE_componentWillReceiveProps(nextProps: Props) { - this.setState(this._computeState(nextProps)); - } - - render() { - return ( - - ); - } - _cellRefs = {}; _listRef: VirtualizedList; _captureRef = ref => {