Skip to content
This repository was archived by the owner on Jun 2, 2021. It is now read-only.

Commit 6552a1b

Browse files
MinishlinkMinishlink
committed
Add legacy implementations
1 parent bf599e6 commit 6552a1b

File tree

4 files changed

+231
-1
lines changed

4 files changed

+231
-1
lines changed

‎src/FlatList.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React, { PureComponent } from 'react';
2+
import MetroListView from './MetroListView';
3+
4+
export default class FlatList extends PureComponent {
5+
render() {
6+
return <MetroListView {...this.props} items={this.props.data} />;
7+
}
8+
}

‎src/MetroListView.js

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
/**
2+
* Copyright (c) 2015-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*
9+
* @flow
10+
*/
11+
'use strict';
12+
13+
import React from 'react';
14+
import { ListView, RefreshControl, ScrollView } from 'react-native';
15+
16+
const invariant = require('fbjs/lib/invariant');
17+
18+
type Item = any;
19+
20+
type NormalProps = {
21+
FooterComponent?: React.ComponentType<*>,
22+
ListEmptyComponent?: React.ComponentType<*>,
23+
ListHeaderComponent?: React.ComponentType<*>,
24+
renderItem: (info: Object) => ?React.Element<any>,
25+
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
26+
* suppresses an error when upgrading Flow's support for React. To see the
27+
* error delete this comment and run Flow. */
28+
renderSectionHeader?: ({ section: Object }) => ?React.Element<any>,
29+
SeparatorComponent?: ?React.ComponentType<*>, // not supported yet
30+
31+
// Provide either `items` or `sections`
32+
items?: ?Array<Item>, // By default, an Item is assumed to be {key: string}
33+
// $FlowFixMe - Something is a little off with the type Array<Item>
34+
sections?: ?Array<{ key: string, data: Array<Item> }>,
35+
36+
/**
37+
* If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make
38+
* sure to also set the `refreshing` prop correctly.
39+
*/
40+
onRefresh?: ?Function,
41+
/**
42+
* Set this true while waiting for new data from a refresh.
43+
*/
44+
refreshing?: boolean,
45+
/**
46+
* If true, renders items next to each other horizontally instead of stacked vertically.
47+
*/
48+
horizontal?: ?boolean,
49+
};
50+
type DefaultProps = {
51+
keyExtractor: (item: Item, index: number) => string,
52+
};
53+
/* $FlowFixMe - the renderItem passed in from SectionList is optional there but
54+
* required here */
55+
type Props = NormalProps & DefaultProps;
56+
57+
/**
58+
* This is just a wrapper around the legacy ListView that matches the new API of FlatList, but with
59+
* some section support tacked on. It is recommended to just use FlatList directly, this component
60+
* is mostly for debugging and performance comparison.
61+
*/
62+
class MetroListView extends React.Component<Props, $FlowFixMeState> {
63+
scrollToEnd(params?: ?{ animated?: ?boolean }) {
64+
throw new Error('scrollToEnd not supported in legacy ListView.');
65+
}
66+
scrollToIndex(params: { animated?: ?boolean, index: number, viewPosition?: number }) {
67+
throw new Error('scrollToIndex not supported in legacy ListView.');
68+
}
69+
scrollToItem(params: { animated?: ?boolean, item: Item, viewPosition?: number }) {
70+
throw new Error('scrollToItem not supported in legacy ListView.');
71+
}
72+
scrollToLocation(params: {
73+
animated?: ?boolean,
74+
itemIndex: number,
75+
sectionIndex: number,
76+
viewOffset?: number,
77+
viewPosition?: number,
78+
}) {
79+
throw new Error('scrollToLocation not supported in legacy ListView.');
80+
}
81+
scrollToOffset(params: { animated?: ?boolean, offset: number }) {
82+
const { animated, offset } = params;
83+
this._listRef.scrollTo(this.props.horizontal ? { x: offset, animated } : { y: offset, animated });
84+
}
85+
getListRef() {
86+
return this._listRef;
87+
}
88+
setNativeProps(props: Object) {
89+
if (this._listRef) {
90+
this._listRef.setNativeProps(props);
91+
}
92+
}
93+
static defaultProps: DefaultProps = {
94+
keyExtractor: (item, index) => item.key || String(index),
95+
renderScrollComponent: (props: Props) => {
96+
if (props.onRefresh) {
97+
return (
98+
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
99+
* comment suppresses an error when upgrading Flow's support for
100+
* React. To see the error delete this comment and run Flow. */
101+
<ScrollView
102+
{...props}
103+
refreshControl={
104+
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss)
105+
* This comment suppresses an error when upgrading Flow's support
106+
* for React. To see the error delete this comment and run Flow.
107+
*/
108+
<RefreshControl refreshing={props.refreshing} onRefresh={props.onRefresh} />
109+
}
110+
/>
111+
);
112+
} else {
113+
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
114+
* comment suppresses an error when upgrading Flow's support for React.
115+
* To see the error delete this comment and run Flow. */
116+
return <ScrollView {...props} />;
117+
}
118+
},
119+
};
120+
state = this._computeState(this.props, {
121+
ds: new ListView.DataSource({
122+
rowHasChanged: (itemA, itemB) => true,
123+
sectionHeaderHasChanged: () => true,
124+
getSectionHeaderData: (dataBlob, sectionID) => this.state.sectionHeaderData[sectionID],
125+
}),
126+
sectionHeaderData: {},
127+
});
128+
componentWillReceiveProps(newProps: Props) {
129+
this.setState(state => this._computeState(newProps, state));
130+
}
131+
render() {
132+
const {
133+
ListHeaderComponent,
134+
ListEmptyComponent,
135+
renderItem,
136+
keyExtractor,
137+
SectionSeparatorComponent,
138+
...rest
139+
} = this.props;
140+
return (
141+
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This
142+
* comment suppresses an error when upgrading Flow's support for React.
143+
* To see the error delete this comment and run Flow. */
144+
<ListView
145+
{...rest}
146+
dataSource={this.state.ds}
147+
ref={this._captureRef}
148+
renderRow={this._renderRow}
149+
renderFooter={this.props.FooterComponent && this._renderFooter}
150+
renderHeader={
151+
this.state.ds.getRowCount()
152+
? ListHeaderComponent && this._renderHeader
153+
: ListEmptyComponent && this._renderEmpty
154+
}
155+
renderSectionHeader={this.props.sections && this._renderSectionHeader}
156+
renderSeparator={this.props.SeparatorComponent && this._renderSeparator}
157+
/>
158+
);
159+
}
160+
_listRef: ListView;
161+
_captureRef = ref => {
162+
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
163+
* suppresses an error when upgrading Flow's support for React. To see the
164+
* error delete this comment and run Flow. */
165+
this._listRef = ref;
166+
};
167+
_computeState(props: Props, state) {
168+
const sectionHeaderData = {};
169+
if (props.sections) {
170+
invariant(!props.items, 'Cannot have both sections and items props.');
171+
const sections = {};
172+
props.sections.forEach((sectionIn, ii) => {
173+
const sectionID = 's' + ii;
174+
sections[sectionID] = sectionIn.data;
175+
sectionHeaderData[sectionID] = sectionIn;
176+
});
177+
return {
178+
ds: state.ds.cloneWithRowsAndSections(sections),
179+
sectionHeaderData,
180+
};
181+
} else {
182+
invariant(!props.sections, 'Cannot have both sections and items props.');
183+
return {
184+
ds: state.ds.cloneWithRows(props.items),
185+
sectionHeaderData,
186+
};
187+
}
188+
}
189+
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
190+
* suppresses an error when upgrading Flow's support for React. To see the
191+
* error delete this comment and run Flow. */
192+
_renderEmpty = () => <this.props.ListEmptyComponent key="$empty" />;
193+
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
194+
* suppresses an error when upgrading Flow's support for React. To see the
195+
* error delete this comment and run Flow. */
196+
_renderFooter = () => <this.props.FooterComponent key="$footer" />;
197+
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
198+
* suppresses an error when upgrading Flow's support for React. To see the
199+
* error delete this comment and run Flow. */
200+
_renderHeader = () => <this.props.ListHeaderComponent key="$header" />;
201+
_renderRow = (item, sectionID, rowID, highlightRow) => {
202+
return this.props.renderItem({ item, index: rowID });
203+
};
204+
_renderSectionHeader = (section, sectionID) => {
205+
const { renderSectionHeader } = this.props;
206+
invariant(renderSectionHeader, 'Must provide renderSectionHeader with sections prop');
207+
return renderSectionHeader({ section });
208+
};
209+
_renderSeparator = (sID, rID) => (
210+
/* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
211+
* suppresses an error when upgrading Flow's support for React. To see the
212+
* error delete this comment and run Flow. */
213+
<this.props.SeparatorComponent key={sID + rID} />
214+
);
215+
}
216+
217+
module.exports = MetroListView;

‎src/SectionList.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import MetroListView from './MetroListView';
2+
export default MetroListView;

‎src/index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
export default () => null;
1+
import FlatList from './FlatList';
2+
import SectionList from './SectionList';
3+
4+
export default { FlatList, SectionList };

0 commit comments

Comments
 (0)