Skip to content

Commit bde5434

Browse files
cooperkacooperka
committed
✨ Restore original example sources
1 parent e74da5e commit bde5434

File tree

12 files changed

+438
-19
lines changed

12 files changed

+438
-19
lines changed

‎example/.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
node_modules/**/*
22
.expo/*
33
npm-debug.*
4+
yarn-error.*
45
*.jks
56
*.p8
67
*.p12
@@ -9,3 +10,5 @@ npm-debug.*
910
*.orig.*
1011
web-build/
1112
web-report/
13+
.idea/*
14+
.DS_Store

‎example/App.js‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,5 @@
1-
import React from 'react';
2-
import { StyleSheet, Text, View } from 'react-native';
1+
// Choose one:
2+
import Example from './src/ImmutableListViewExample';
3+
// import Example from './src/ImmutableVirtualizedListExample';
34

4-
export default function App() {
5-
return (
6-
<View style={styles.container}>
7-
<Text>Open up App.js to start working on your app!</Text>
8-
</View>
9-
);
10-
}
11-
12-
const styles = StyleSheet.create({
13-
container: {
14-
flex: 1,
15-
backgroundColor: '#fff',
16-
alignItems: 'center',
17-
justifyContent: 'center',
18-
},
19-
});
5+
export default Example;

‎example/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,12 @@
99
},
1010
"dependencies": {
1111
"expo": "^35.0.0",
12+
"immutable": "4.0.0-rc.12",
13+
"prop-types": "15.7.2",
1214
"react": "16.8.3",
1315
"react-dom": "16.8.3",
1416
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
17+
"react-native-immutable-list-view": "file:..",
1518
"react-native-web": "^0.11.7"
1619
},
1720
"devDependencies": {

‎example/screenshots/listview-cropped.png‎

20.6 KB
Loading

‎example/screenshots/listview.png‎

51.1 KB
Loading

‎example/src/GenericListExample.js‎

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
import Immutable from 'immutable';
2+
import PropTypes from 'prop-types';
3+
import React, { Component } from 'react';
4+
import { Text, View, Button, RefreshControl } from 'react-native';
5+
6+
import style from './styles';
7+
8+
const EMPTY_LIST = Immutable.List();
9+
const MOCK_DELAY = 800;
10+
11+
class GenericListExample extends Component {
12+
13+
static propTypes = {
14+
ListComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,
15+
listComponentProps: PropTypes.object.isRequired,
16+
17+
initialDataA: PropTypes.object.isRequired,
18+
dataMutatorA: PropTypes.func.isRequired,
19+
extraPropsA: PropTypes.object,
20+
21+
initialDataB: PropTypes.object.isRequired,
22+
dataMutatorB: PropTypes.func.isRequired,
23+
extraPropsB: PropTypes.object,
24+
};
25+
26+
componentWillMount() {
27+
const { initialDataA, initialDataB } = this.props;
28+
29+
this.defaultStateA.data = initialDataA;
30+
this.defaultStateB.data = initialDataB;
31+
32+
this.setState({
33+
listA: {
34+
...this.defaultStateA,
35+
},
36+
listB: {
37+
...this.defaultStateB,
38+
},
39+
});
40+
}
41+
42+
defaultStateA = {
43+
data: undefined, // Will be manually set on mount.
44+
isLoading: false,
45+
errorMsg: undefined,
46+
};
47+
48+
defaultStateB = {
49+
data: undefined, // Will be manually set on mount.
50+
isLoading: false,
51+
errorMsg: undefined,
52+
};
53+
54+
changeDataA(delay = 0) {
55+
const { listA } = this.state;
56+
const { dataMutatorA } = this.props;
57+
58+
if (delay) {
59+
this.setState({
60+
listA: {
61+
...listA,
62+
isLoading: true,
63+
},
64+
});
65+
}
66+
67+
setTimeout(() => {
68+
this.setState({
69+
listA: {
70+
...listA,
71+
data: dataMutatorA(listA.data),
72+
isLoading: false,
73+
errorMsg: undefined,
74+
},
75+
});
76+
}, delay);
77+
}
78+
79+
changeDataB(delay = 0) {
80+
const { listB } = this.state;
81+
const { dataMutatorB } = this.props;
82+
83+
if (delay) {
84+
this.setState({
85+
listB: {
86+
...listB,
87+
isLoading: true,
88+
},
89+
});
90+
}
91+
92+
setTimeout(() => {
93+
this.setState({
94+
listB: {
95+
...listB,
96+
data: dataMutatorB(listB.data),
97+
isLoading: false,
98+
errorMsg: undefined,
99+
},
100+
});
101+
}, delay);
102+
}
103+
104+
toggleDefaultState() {
105+
this.setState({
106+
listA: {
107+
...this.defaultStateA,
108+
},
109+
listB: {
110+
...this.defaultStateB,
111+
},
112+
});
113+
}
114+
115+
toggleLoadingState() {
116+
this.setState({
117+
listA: {
118+
...this.defaultStateA,
119+
data: EMPTY_LIST,
120+
isLoading: true,
121+
},
122+
listB: {
123+
...this.defaultStateB,
124+
data: EMPTY_LIST,
125+
isLoading: true,
126+
},
127+
});
128+
}
129+
130+
toggleErrorState() {
131+
this.setState({
132+
listA: {
133+
...this.defaultStateA,
134+
data: EMPTY_LIST,
135+
errorMsg: 'Error! Fake data A has gone rogue!',
136+
},
137+
listB: {
138+
...this.defaultStateB,
139+
data: EMPTY_LIST,
140+
errorMsg: 'Error! Fake data B has gone rogue!',
141+
},
142+
});
143+
}
144+
145+
render() {
146+
const { listA, listB } = this.state;
147+
const {
148+
ListComponent, extraPropsA, extraPropsB, listComponentProps,
149+
} = this.props;
150+
151+
const emptyTextA = listA.isLoading ? 'Loading...' : listA.errorMsg;
152+
const emptyTextB = listB.isLoading ? 'Loading...' : listB.errorMsg;
153+
154+
return (
155+
<View style={style.container}>
156+
<Text style={style.title}>
157+
{ListComponent.displayName || ListComponent.name}
158+
</Text>
159+
<View style={style.controlPanelContainer}>
160+
<Text style={style.controlPanelLabel}>
161+
State:
162+
</Text>
163+
<Button
164+
onPress={() => this.toggleDefaultState()}
165+
title="Default"
166+
/>
167+
<View style={style.controlPanelSpacer} />
168+
<Button
169+
onPress={() => this.toggleLoadingState()}
170+
title="Loading"
171+
/>
172+
<View style={style.controlPanelSpacer} />
173+
<Button
174+
onPress={() => this.toggleErrorState()}
175+
title="Error"
176+
/>
177+
<View style={style.controlPanelSpacer} />
178+
</View>
179+
<View style={style.listContainer}>
180+
<View style={style.list}>
181+
<View style={style.listButton}>
182+
<Button
183+
onPress={() => this.changeDataA()}
184+
title="Update data (or pull-refresh)"
185+
/>
186+
</View>
187+
<ListComponent
188+
refreshControl={
189+
<RefreshControl
190+
refreshing={listA.isLoading}
191+
onRefresh={() => this.changeDataA(MOCK_DELAY)}
192+
/>
193+
}
194+
{...listComponentProps}
195+
{...extraPropsA}
196+
immutableData={listA.data}
197+
renderEmptyInList={emptyTextA}
198+
/>
199+
</View>
200+
<View style={style.list}>
201+
<View style={style.listButton}>
202+
<Button
203+
onPress={() => this.changeDataB()}
204+
title="Update data (or pull-refresh)"
205+
/>
206+
</View>
207+
<ListComponent
208+
refreshControl={
209+
<RefreshControl
210+
refreshing={listB.isLoading}
211+
onRefresh={() => this.changeDataB(MOCK_DELAY)}
212+
/>
213+
}
214+
{...listComponentProps}
215+
{...extraPropsB}
216+
immutableData={listB.data}
217+
renderEmptyInList={emptyTextB}
218+
/>
219+
</View>
220+
</View>
221+
</View>
222+
);
223+
}
224+
225+
}
226+
227+
export default GenericListExample;

‎example/src/ImmutableListViewExample.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Immutable from 'immutable';
2+
import React from 'react';
3+
4+
// ESLint can't resolve the module location when running on Travis, so ignore these lints.
5+
// eslint-disable-next-line import/no-unresolved, import/extensions
6+
import { ImmutableListView } from 'react-native-immutable-list-view';
7+
8+
import GenericListExample from './GenericListExample';
9+
10+
import utils from './utils';
11+
import mockData from './mockData';
12+
13+
/**
14+
*
15+
* Note: This code is NOT a good example for use in your own app.
16+
* It's only written this way because the example apps are complex
17+
* and need to be repeated for every type of list.
18+
*
19+
* For working example code to use in your own app, please see the
20+
* extensive documentation in the README.
21+
*
22+
*/
23+
function ImmutableListViewExample() {
24+
return (
25+
<GenericListExample
26+
ListComponent={ImmutableListView}
27+
listComponentProps={{
28+
renderRow: utils.renderRow,
29+
}}
30+
31+
initialDataA={mockData}
32+
dataMutatorA={(data) => data.setIn(['Section A', 1], 'This value was changed!')}
33+
extraPropsA={{
34+
renderSectionHeader: utils.renderSectionHeader,
35+
}}
36+
37+
initialDataB={Immutable.Range(1, 100)}
38+
dataMutatorB={(data) => data.toSeq().map((n) => n * 2)}
39+
/>
40+
);
41+
}
42+
43+
export default ImmutableListViewExample;

‎example/src/ImmutableVirtualizedListExample.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Immutable from 'immutable';
2+
import React from 'react';
3+
4+
// ESLint can't resolve the module location when running on Travis, so ignore these lints.
5+
// eslint-disable-next-line import/no-unresolved, import/extensions
6+
import { ImmutableVirtualizedList } from 'react-native-immutable-list-view';
7+
8+
import GenericListExample from './GenericListExample';
9+
10+
import utils from './utils';
11+
12+
/**
13+
*
14+
* Note: This code is NOT a good example for use in your own app.
15+
* It's only written this way because the example apps are complex
16+
* and need to be repeated for every type of list.
17+
*
18+
* For working example code to use in your own app, please see the
19+
* extensive documentation in the README.
20+
*
21+
*/
22+
function ImmutableVirtualizedListExample() {
23+
return (
24+
<GenericListExample
25+
ListComponent={ImmutableVirtualizedList}
26+
listComponentProps={{
27+
renderItem: utils.renderItem,
28+
keyExtractor: utils.trivialKeyExtractor,
29+
}}
30+
31+
initialDataA={Immutable.List(['Simple', 'List', 'of', 'Items'])}
32+
dataMutatorA={(data) => data.set(3, 'This value was changed!')}
33+
34+
initialDataB={Immutable.Range(1, 100)}
35+
dataMutatorB={(data) => data.toSeq().map((n) => n * 2)}
36+
/>
37+
);
38+
}
39+
40+
export default ImmutableVirtualizedListExample;

‎example/src/mockData.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Immutable from 'immutable';
2+
3+
const data = Immutable.fromJS({
4+
'Section A': [
5+
'foo',
6+
'bar',
7+
],
8+
'Section B': [
9+
'fizz',
10+
'buzz',
11+
],
12+
});
13+
14+
export default data;

0 commit comments

Comments
 (0)