-
Notifications
You must be signed in to change notification settings - Fork 427
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Sticky Container init. * Sticking view on scroll. * Using view from row renderer. * topStickyIndices done/ * Top and bottom stickies separated. * Sticky header cascading and recycler react clone element * Header cascading. * Using StickyObject. * Using Sticky Header. * Sticky Footer used without multiplier. * Sticky type context. * Footer cascading working. Header and footer logic to be merged. * Using Scroll component height. * Previous sticky indice logic combined for header and footer. * Next sticky index logic combined for header and footer. * Sticky multiplier abstracted. * Initial visibility abstracted and naming conventions. * Container position. * Refactoring. * Getting rid of tentative sliding. * Cleaning StickyContainer. * Removed rerender. * Computing layouts on indices change. * Layout specifics abstracted. * Init params and redundant methods removed. * Using hashmap for visible indices. * onVisibleIndexesChanged refactored. * Calling super visible indices changed. * Commented on receive props lines, modified todos. * Todos. * Recycler ref passed in visible indices changed and footer visibility dynamic. * Deprecated visible indexes changed. * Initial visibility bug fix. * Resolved recylerRef any. * Sending data in rowRenderer. * Refactoring private vars. * Fixes and refactoring. * Resolved ref proxy. * Scroll to handled for headers. * Sticky Container prop types. * Header scroll to todo removed and footer initial visibility bug fix. * Indice to index... * Sticky footer on load. * Reverting type ScrollComponent. * Refactoring. * Custom recycler react element type. * Correct child type asserted. * Moved compute layouts to on scroll. * Bug fixes. * Compute layout bug fix. * Resetting sticky view offset value bug fix. * Bumped version. * Made props optional. * Added overrideRowRenderer and passing sticky layout type. * Added overrideRowRenderer and passing sticky layout type. * Override row renderer functional. * rowRenderer type fix. * Ts fix. * Bumped sticky version. * Sticky indices made function. * Added compute layouts in visible indices changed. * Bumped version. * Reverting to array sticky params. * Visible indices logic changed. * Default offset 0. * Removed maintaining visible indices. * Renamed method. * Renamed initial visibility. * Made compute layouts public. * Compute layouts again made private. * Setting state after refs are obtained. * Keeping init indices and calling after ref init. * Bumping version. * Removing unnecessary semicolons. * Passing extended state in rowRenderer. * Refactor. * CR changes. * CR changes. * CR changes. * Removing compute layouts from on scroll. * Using all as sorted array. * RLV dims and ficker bug fixes. * Pagination sticky removal bug fix. * Bumped sticky version. * Bumping version. * Refactor. * Build fixes and version bump. * Adding style prop to container. * Sorting indices. * Not passing recyclerRef to Sticky object. * Bumping version. * Removed refs and undefined params. * Bumped version. * Edited doc. * Binary search to find smallest index. * Footer binary search added, refactoring, error handling. * Bug fix. * Removed unused method. * Readme init. * Doc, defs and sort removal. * Sticky docs. * Handling onBoundaryReached cases. * Bumped version. * Solved for sticky header initial. * Boundary processing abstracted and footer solved. * Bumped version. * OnEndReached bug fix. * Added onVisibleEndReached and using it instead of onEndReached. * Flooring windowBound - offset. (#297) * Boundary Processing (#298) * Flooring windowBound - offset. * Header boundary solved using scroll offset. * Footer solved. * Bug fix and doc updated. * Version bump. * Bounce scrolling recalculated on visible indices changed. * Boundary reached method moved to object. * Distance from window taken into consideration. * Adding distance from window to window bound. * Fix. * Reverting process end reached code. * Versions. * Styling. * Final Sticky Changes (#304) * import was not from web (#299) * CR changes. * Throwing exceptions for visibleIndexes and array sort. * Handling index 0 cases. * Updated doc with errors.
- Loading branch information
1 parent
d9ef3d4
commit 2965168
Showing
13 changed files
with
851 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| # Sticky Recycler Items Guide | ||
| * **[Sample Code](https://github.com/Flipkart/recyclerlistview/tree/master/docs/guides/sticky/sample)** | ||
|
|
||
| All you need to do to get started is wrap your `RecyclerListView` component with the `StickyContainer` component and pass either or both `stickyHeaderIndices` and `stickyFooterIndices`. | ||
|
|
||
| ### 1) Important points to note | ||
| * `stickyHeaderIndices` and `stickyFooterIndices` should be sorted arrays, otherwise error will be thrown. | ||
| * `StickyContainer` should have a single child component of type `RecyclerListView` or any that extends it, otherwise error will be thrown. | ||
| * In your `RecyclerListView` component, pass ref as a function and not as a string, otherwise error will be thrown. | ||
| ```js | ||
| <RecyclerListView ref={this._setRef}/> | ||
|
|
||
| _setRef(recycler) { | ||
| this._recyclerRef = recycler; | ||
| } | ||
| ``` | ||
| * If using `overrideRowRenderer`, keep in mind that upon scrolling to the very top or bottom of the content, stickies will be hidden. eg. If the first item in the list is given as sticky, scrolling to the top will display the original view and not the overridden view. | ||
|
|
||
| ### 2) Props | ||
| * `stickyHeaderIndices` - An array of indices whose corresponding items need to be stuck to the top of the RecyclerListView once the items scroll off the top. Every subsequent sticky index view will push the previous sticky view off the top to take its place. Needs to be sorted ascending. | ||
| * `stickyFooterIndices` - Works same as sticky headers, but for views to be stuck at the bottom of the recyclerView. Needs to be sorted ascending. | ||
| * `overrideRowRenderer` - Optional. Will be called instead of rowRenderer for all sticky items. Any changes to the item for when they are stuck can be done here. Refer to sample code for usage. | ||
| * `style` - Optional. Pass the same style that is applied to the RecyclerListView component here. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| ```js | ||
| import React from 'react'; | ||
| import {View} from 'react-native'; | ||
| import {RecyclerListView, DataProvider, LayoutProvider} from 'recyclerlistview'; | ||
| import StickyContainer from 'recyclerlistview/dist/reactnative/core/StickyContainer'; | ||
| export default class StickySample extends React.Component { | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| this._setRef = this._setRef.bind(this); | ||
|
|
||
| this._recyclerRef = null; | ||
| this.data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 6, 7, 8, 9, 10, 11]; | ||
| this.dataProvider = new DataProvider((r1, r2) => { | ||
| return r1 !== r2; | ||
| }); | ||
| this.dataProvider = this.dataProvider.cloneWithRows(this.data); | ||
| this.layoutProvider = new LayoutProvider( | ||
| index => { | ||
| return index; | ||
| }, | ||
| (type, dimension) => { | ||
| dimension.height = 100; | ||
| dimension.width = 360; | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| _rowRenderer = (type, data, index) => { | ||
| let color = 'grey'; | ||
| switch(index%6) { | ||
| case 0: | ||
| color = "purple"; | ||
| break; | ||
| case 1: | ||
| color = "green"; | ||
| break; | ||
| case 2: | ||
| color = "blue"; | ||
| break; | ||
| case 3: | ||
| color = "red"; | ||
| break; | ||
| case 4: | ||
| color = "yellow"; | ||
| break; | ||
| case 5: | ||
| color = "orange"; | ||
| break; | ||
| } | ||
| return ( | ||
| <View style={{height: 100, backgroundColor: color, alignItems: 'center', justifyContent: 'center'}}> | ||
| <Text style={{fontSize: 32}}>{index}</Text> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * This method is called whenever a view has to be stuck as a header or footer. | ||
| * Override the views for whichever sticky view requires changes. | ||
| * Eg. This can be used to add shadows etc. to the views once they stick. | ||
| */ | ||
| _overrideRowRenderer = (type, data, index) => { | ||
| const view = this._rowRenderer(type, data, index); | ||
| switch(index) { | ||
| case 7: // Only overriding sticky index 7, sticky indices 3 and 10 will remain as they are. | ||
| const color = "cyan"; | ||
| return ( | ||
| <View style={{height: 100, backgroundColor: color, alignItems: 'center', justifyContent: 'center'}}> | ||
| <Text style={{fontSize: 32}}>Overridden sticky</Text> | ||
| </View> | ||
| ); | ||
| break; | ||
| } | ||
| return view; | ||
| }; | ||
|
|
||
| render() { | ||
| return ( | ||
| <StickyContainer stickyHeaderIndices={[3, 7, 10]} | ||
| stickyFooterIndices={[3, 7, 10]} | ||
| overrideRowRenderer={this._overrideRowRenderer}> | ||
| <RecyclerListView layoutProvider={this.layoutProvider} | ||
| ref={this._setRef} | ||
| dataProvider={this.dataProvider} rowRenderer={this._rowRenderer} showsVerticalScrollIndicator={false}/> | ||
| </StickyContainer> | ||
| ); | ||
| } | ||
|
|
||
| _setRef(recycler) { | ||
| this._recyclerRef = recycler; | ||
| } | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.