From b34356938e646d5b3a79c764aaae69ab2541e4aa Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Tue, 25 Apr 2017 22:20:23 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/flatlist.html | 5 ++- releases/next/docs/sectionlist.html | 55 +++++++++++++++++-------- releases/next/docs/virtualizedlist.html | 15 +++---- 3 files changed, 46 insertions(+), 29 deletions(-) diff --git a/releases/next/docs/flatlist.html b/releases/next/docs/flatlist.html index aa3167542cb..50113cc3095 100644 --- a/releases/next/docs/flatlist.html +++ b/releases/next/docs/flatlist.html @@ -81,7 +81,10 @@ use if you have fixed height items, for example:

)}

Remember to include separator length (height or width) in your offset calculation if you specify ItemSeparatorComponent.

horizontal?: ?boolean #

If true, renders items next to each other horizontally instead of stacked vertically.

initialNumToRender: number #

How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order -to improve perceived performance of scroll-to-top actions.

keyExtractor: (item: ItemT, index: number) => string #

Used to extract a unique key for a given item at the specified index. Key is used for caching +to improve perceived performance of scroll-to-top actions.

initialScrollIndex?: ?number #

Instead of starting at the top with the first item, start at initialScrollIndex. This +disables the "scroll to top" optimization that keeps the first initialNumToRender items +always rendered and immediately renders the items starting at this initial index. Requires +getItemLayout to be implemented.

keyExtractor: (item: ItemT, index: number) => string #

Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item.key, then falls back to using the index, like React does.

legacyImplementation?: ?boolean #

numColumns: number #

Multiple columns can only be rendered with horizontal={false} and will zig-zag like a flexWrap layout. Items should all be the same height - masonry layouts are not supported.

onEndReached?: ?(info: {distanceFromEnd: number}) => void #

Called once when the scroll position gets within onEndReachedThreshold of the rendered diff --git a/releases/next/docs/sectionlist.html b/releases/next/docs/sectionlist.html index ef8b2a70474..51da27c0b82 100644 --- a/releases/next/docs/sectionlist.html +++ b/releases/next/docs/sectionlist.html @@ -25,11 +25,14 @@ changes. This includes the data prop and parent component state.

  • By default, the list looks for a key prop on each item and uses that for the React key. -Alternatively, you can provide a custom keyExtractor prop.

    • Props #

    ItemSeparatorComponent?: ?ReactClass<any> #

    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.

    ListFooterComponent?: ?ReactClass<any> | React.Element<any> #

    Rendered at the very end of the list.

    ListHeaderComponent?: ?ReactClass<any> | React.Element<any> #

    Rendered at the very beginning of the list.

    SectionSeparatorComponent?: ?ReactClass<any> #

    Rendered in between each section. Also receives highlighted, leadingItem, and any custom -props from separators.updateProps.

    extraData?: any #

    A marker property for telling the list to re-render (since it implements PureComponent). If +Alternatively, you can provide a custom keyExtractor prop.

    Props #

    ItemSeparatorComponent?: ?ReactClass<any> #

    Rendered in between each item, but not at the top or bottom. By default, highlighted, +section, and [leading/trailing][Item/Separator] props are provided. renderItem provides +separators.highlight/unhighlight which will update the highlighted prop, but you can also +add custom props with separators.updateProps.

    ListFooterComponent?: ?ReactClass<any> | React.Element<any> #

    Rendered at the very end of the list.

    ListHeaderComponent?: ?ReactClass<any> | React.Element<any> #

    Rendered at the very beginning of the list.

    SectionSeparatorComponent?: ?ReactClass<any> #

    Rendered at the top and bottom of each section (note this is different from +ItemSeparatorComponent which is only rendered between items). These are intended to separate +sections from the headers above and below and typically have the same highlight response as +ItemSeparatorComponent. Also receives highlighted, [leading/trailing][Item/Separator], +and any custom props from separators.updateProps.

    extraData?: any #

    A marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.

    initialNumToRender: number #

    How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order @@ -47,12 +50,13 @@ sure to also set the refreshing prop correctly.

    viewabilityConfig prop.

    refreshing?: ?boolean #

    Set this true while waiting for new data from a refresh.

    removeClippedSubviews?: boolean #

    Note: may have bugs (missing content) in some circumstances - use at your own risk.

    This may improve scroll performance for large lists.

    renderItem: (info: { item: Item, index: number, + section: SectionT, separators: { highlight: () => void, unhighlight: () => void, updateProps: (select: 'leading' | 'trailing', newProps: Object) => void, }, -}) => ?React.Element<any> #

    Default renderer for every item in every section. Can be over-ridden on a per-section basis.

    renderSectionHeader?: ?(info: {section: SectionT}) => ?React.Element<any> #

    Rendered at the top of each section. These stick to the top of the ScrollView by default on +}) => ?React.Element<any> #

    Default renderer for every item in every section. Can be over-ridden on a per-section basis.

    renderSectionFooter?: ?(info: {section: SectionT}) => ?React.Element<any> #

    Rendered at the bottom of each section.

    renderSectionHeader?: ?(info: {section: SectionT}) => ?React.Element<any> #

    Rendered at the top of each section. These stick to the top of the ScrollView by default on iOS. See stickySectionHeadersEnabled.

    sections: Array<SectionT> #

    The actual data to render, akin to the data prop in <FlatList>.

    General shape:

    sections: Array<{ data: Array<SectionItem>, key: string, @@ -110,7 +114,14 @@ const renderSectionHeader = /View> ); -const CustomSeparatorComponent = ({text, highlighted}) => ( +const renderSectionFooter = ({section}) => ( + <View style={styles.header}> + <Text style={styles.headerText}>SECTION FOOTER: {section.key}</Text> + <SeparatorComponent /> + </View> +); + +const CustomSeparatorComponent = ({highlighted, text}) => ( <View style={[styles.customSeparator, highlighted && {backgroundColor: 'rgb(217, 217, 217)'}]}> <Text style={styles.separatorText}>{text}</Text> </View> @@ -173,11 +184,11 @@ class SectionListExample extends ={HeaderComponent} ListFooterComponent={FooterComponent} - SectionSeparatorComponent={({highlighted}) => - <CustomSeparatorComponent highlighted={highlighted} text="SECTION SEPARATOR" /> + SectionSeparatorComponent={(info) => + <CustomSeparatorComponent {...info} text="SECTION SEPARATOR" /> } - ItemSeparatorComponent={({highlighted}) => - <CustomSeparatorComponent highlighted={highlighted} text="ITEM SEPARATOR" /> + ItemSeparatorComponent={(info) => + <CustomSeparatorComponent {...info} text="ITEM SEPARATOR" /> } debug={this.state.debug} enableVirtualization={this.state.virtualized} @@ -187,15 +198,23 @@ class SectionListExample extends ={false} renderItem={this._renderItemComponent} renderSectionHeader={renderSectionHeader} + renderSectionFooter={renderSectionFooter} stickySectionHeadersEnabled sections={[ - {renderItem: renderStackedItem, key: 's1', data: [ - {title: 'Item In Header Section', text: 'Section s1', key: 'header item'}, - ]}, - {key: 's2', data: [ - {noImage: true, title: '1st item', text: 'Section s2', key: 'noimage0'}, - {noImage: true, title: '2nd item', text: 'Section s2', key: 'noimage1'}, - ]}, + { + renderItem: renderStackedItem, + key: 's1', + data: [ + {title: 'Item In Header Section', text: 'Section s1', key: 'header item'}, + ], + }, + { + key: 's2', + data: [ + {noImage: true, title: '1st item', text: 'Section s2', key: 'noimage0'}, + {noImage: true, title: '2nd item', text: 'Section s2', key: 'noimage1'}, + ], + }, ...filteredSectionData, ]} style={styles.list} diff --git a/releases/next/docs/virtualizedlist.html b/releases/next/docs/virtualizedlist.html index c53c5a38eb8..8ddc727954f 100644 --- a/releases/next/docs/virtualizedlist.html +++ b/releases/next/docs/virtualizedlist.html @@ -22,22 +22,17 @@ any of your renderItem, Header, Footer, etc. functions depend on an data prop, stick it here and treat it immutably.

    getItem: (data: any, index: number) => ?Item #

    A generic accessor for extracting an item from any sort of data blob.

    getItemCount: (data: any) => number #

    Determines how many items are in the data blob.

    getItemLayout?: (data: any, index: number) => {length: number, offset: number, index: number} #

    horizontal?: ?boolean #

    initialNumToRender: number #

    How many items to render in the initial batch. This should be enough to fill the screen but not much more. Note these items will never be unmounted as part of the windowed rendering in order -to improve perceived performance of scroll-to-top actions.

    keyExtractor: (item: Item, index: number) => string #

    maxToRenderPerBatch: number #

    The maximum number of items to render in each incremental render batch. The more rendered at +to improve perceived performance of scroll-to-top actions.

    initialScrollIndex?: ?number #

    Instead of starting at the top with the first item, start at initialScrollIndex. This +disables the "scroll to top" optimization that keeps the first initialNumToRender items +always rendered and immediately renders the items starting at this initial index. Requires +getItemLayout to be implemented.

    keyExtractor: (item: Item, index: number) => string #

    maxToRenderPerBatch: number #

    The maximum number of items to render in each incremental render batch. The more rendered at once, the better the fill rate, but responsiveness my suffer because rendering content may interfere with responding to button taps or other interactions.

    onEndReached?: ?(info: {distanceFromEnd: number}) => void #

    onEndReachedThreshold?: ?number #

    onLayout?: ?Function #

    onRefresh?: ?Function #

    If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.

    onViewableItemsChanged?: ?(info: { viewableItems: Array<ViewToken>, changed: Array<ViewToken>, }) => void #

    Called when the viewability of rows changes, as defined by the -viewabilityConfig prop.

    refreshing?: ?boolean #

    Set this true while waiting for new data from a refresh.

    removeClippedSubviews?: boolean #

    Note: may have bugs (missing content) in some circumstances - use at your own risk.

    This may improve scroll performance for large lists.

    renderItem: (info: { - item: Item, - index: number, - separators: { - highlight: () => void, - unhighlight: () => void, - updateProps: (select: 'leading' | 'trailing', newProps: Object) => void, - }, -}) => ?React.Element<any> #

    renderScrollComponent: (props: Object) => React.Element<any> #

    Render a custom scroll component, e.g. with a differently styled RefreshControl.

    scrollEventThrottle?: #

    updateCellsBatchingPeriod: number #

    Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off +viewabilityConfig prop.

    refreshing?: ?boolean #

    Set this true while waiting for new data from a refresh.

    removeClippedSubviews?: boolean #

    Note: may have bugs (missing content) in some circumstances - use at your own risk.

    This may improve scroll performance for large lists.

    renderItem: (info: any) => ?React.Element<any> #

    renderScrollComponent: (props: Object) => React.Element<any> #

    Render a custom scroll component, e.g. with a differently styled RefreshControl.

    scrollEventThrottle?: #

    updateCellsBatchingPeriod: number #

    Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off screen. Similar fill rate/responsiveness tradeoff as maxToRenderPerBatch.

    viewabilityConfig?: ViewabilityConfig #

    windowSize: number #

    Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport. Reducing