Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[VirtualizedSectionList] - Externalise and handle any sort of data blob #20787

Closed
wants to merge 15 commits into from
Closed

[VirtualizedSectionList] - Externalise and handle any sort of data blob #20787

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
90baadb
Allow VirtualizedSectionList to handle any sort of data blob
magrinj Aug 22, 2018
cc92082
Externalize VirtualizedSectionList
magrinj Aug 22, 2018
66c365a
computeState use this, so keep using UNSAFE_componentWillReceiveProps
magrinj Aug 22, 2018
c00db10
Fix flow error getItem function
magrinj Aug 22, 2018
0762ef6
Fix some errors
magrinj Aug 27, 2018
b1fe9b9
Fix lint error & refreshing flow error
magrinj Aug 27, 2018
880c4dd
Small fix
magrinj Aug 28, 2018
0168f7a
Update VirtualizedSectionList-test.js
hramos Jan 15, 2019
a25a136
Fix conflicts
magrinj Jan 16, 2019
dfe4994
Remove shadow variable
magrinj Jan 16, 2019
5437f8b
Remove unused variable
magrinj Jan 16, 2019
edebcef
Remove getItemParam and replace by getItem and fix flow
magrinj Feb 27, 2019
4ff6035
Run prettier
magrinj Feb 27, 2019
32a5e4c
Merge remote-tracking branch 'upstream/master' into virtualized-secti…
magrinj Apr 18, 2019
1f00f8e
Merge branch 'master' into virtualized-section-list
magrinj Apr 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Small fix
  • Loading branch information
@magrinj
magrinj committed Aug 28, 2018
commit 880c4dd034ab04ac7c767b4bf02cebc78e30d64f
13 changes: 6 additions & 7 deletions Libraries/Lists/SectionList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ const React = require('React');
const ScrollView = require('ScrollView');
const VirtualizedSectionList = require('VirtualizedSectionList');

const invariant = require('fbjs/lib/invariant');

import type {ViewToken} from 'ViewabilityHelper';
import type {Props as VirtualizedSectionListProps} from 'VirtualizedSectionList';

Expand Down Expand Up @@ -335,12 +333,13 @@ class SectionList<SectionT: SectionBase<any>> extends React.PureComponent<

_checkProps(props: Props<SectionT>) {
const {getItem, getItemCount, getItemParam} = props;
cpojer marked this conversation as resolved.
Show resolved Hide resolved
invariant(
!getItem && !getItemCount && !getItemParam,
'SectionList does not support custom data formats.',
);
}

if (__DEV__) {
if (getItem || getItemCount || getItemParam) {
console.warn('SectionList does not support custom data formats.');
}
}
}

render() {
const List = this.props.legacyImplementation
Expand Down
52 changes: 26 additions & 26 deletions Libraries/Lists/VirtualizedSectionList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ type Item = any;
type SectionItem = any;
type Option = any;

type SectionBase = any;
type SectionBase = Object;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a regression. Could you work on putting back the proper Flow Type and running flow on the react-native repo to verify it?

Copy link
Contributor Author

@magrinj magrinj Feb 28, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The SectionBase type can't be specified, because it can handle different type of datas, like classic js object or Immutable object, by exemple the data type of VirtualizedList is any.
For SectionList component SectionBase can be specified because we know the data must be javascript object.


type RequiredProps<SectionT: SectionBase> = {
sections: $ReadOnlyArray<SectionT>,
sections: $ReadOnlyArray<SectionT> | $ReadOnly<SectionT>,
/**
* A generic accessor for extracting a section option from any sort of data blob.
*/
Expand Down Expand Up @@ -122,6 +122,30 @@ class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<
data: [],
};

scrollToLocation(params: {
animated?: ?boolean,
itemIndex: number,
sectionIndex: number,
viewPosition?: number,
}) {
let index = params.itemIndex + 1;
for (let ii = 0; ii < params.sectionIndex; ii++) {
const section = this.props.getItem(this.props.sections, ii);
const sectionData = this.props.getItemParam(section, 'data');
const dataLength = this.props.getItemCount(sectionData);
index += dataLength + 2;
}
const toIndexParams = {
...params,
index,
};
this._listRef.scrollToIndex(toIndexParams);
}

getListRef(): VirtualizedList {
return this._listRef;
}

constructor(props: Props<SectionT>, context: Object) {
super(props, context);
this.state = this._computeState(props);
Expand Down Expand Up @@ -168,30 +192,6 @@ class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<
);
}

scrollToLocation(params: {
animated?: ?boolean,
itemIndex: number,
sectionIndex: number,
viewPosition?: number,
}) {
let index = params.itemIndex + 1;
for (let ii = 0; ii < params.sectionIndex; ii++) {
const section = this.props.getItem(this.props.sections, ii);
const sectionData = this.props.getItemParam(section, 'data');
const dataLength = this.props.getItemCount(sectionData);
index += dataLength + 2;
}
const toIndexParams = {
...params,
index,
};
this._listRef.scrollToIndex(toIndexParams);
}

getListRef(): VirtualizedList {
return this._listRef;
}

_keyExtractor = (item: Item, index: number) => {
const info = this._subExtractor(index);
return (info && info.key) || String(index);
Expand Down