Skip to content

Commit 558f941

Browse files
FaridSafiFaridSafi
committed
improve styles
1 parent 2c58a0b commit 558f941

File tree

1 file changed

+197
-130
lines changed

1 file changed

+197
-130
lines changed

‎GiftedListView.js‎

Lines changed: 197 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ var {
1010
Text
1111
} = React;
1212

13+
1314
// small helper function which merged two objects into one
1415
function MergeRecursive(obj1, obj2) {
1516
for (var p in obj2) {
@@ -31,39 +32,8 @@ var GiftedSpinner = require('react-native-gifted-spinner');
3132
var GiftedListView = React.createClass({
3233

3334
getDefaultProps() {
34-
var customStyles = {
35-
separator: {
36-
height: 1,
37-
backgroundColor: '#CCC'
38-
},
39-
refreshableView: {
40-
height: 50,
41-
backgroundColor: '#DDD',
42-
justifyContent: 'center',
43-
alignItems: 'center',
44-
},
45-
actionsLabel: {
46-
fontSize: 20,
47-
},
48-
paginationView: {
49-
height: 44,
50-
justifyContent: 'center',
51-
alignItems: 'center',
52-
backgroundColor: '#FFF',
53-
},
54-
defaultView: {
55-
justifyContent: 'center',
56-
alignItems: 'center',
57-
padding: 20,
58-
},
59-
defaultViewTitle: {
60-
fontSize: 16,
61-
fontWeight: 'bold',
62-
marginBottom: 15,
63-
},
64-
};
65-
6635
return {
36+
customStyles: {},
6737
initialListSize: 10,
6838
firstLoader: true,
6939
pagination: true,
@@ -74,100 +44,39 @@ var GiftedListView = React.createClass({
7444
withSections: false,
7545
onFetch(page, callback, options) { callback([]); },
7646

77-
paginationFetchigView() {
78-
return (
79-
<View style={customStyles.paginationView}>
80-
<GiftedSpinner />
81-
</View>
82-
);
83-
},
84-
paginationAllLoadedView() {
85-
return (
86-
<View style={customStyles.paginationView}>
87-
<Text style={customStyles.actionsLabel}>
88-
~
89-
</Text>
90-
</View>
91-
);
92-
},
93-
paginationWaitingView(paginateCallback) {
94-
return (
95-
<TouchableHighlight
96-
underlayColor='#c8c7cc'
97-
onPress={paginateCallback}
98-
style={customStyles.paginationView}
99-
>
100-
<Text style={customStyles.actionsLabel}>
101-
+
102-
</Text>
103-
</TouchableHighlight>
104-
);
105-
},
106-
refreshableFetchingView() {
107-
return (
108-
<View style={customStyles.refreshableView}>
109-
<GiftedSpinner />
110-
</View>
111-
);
112-
},
113-
refreshableWillRefreshView() {
114-
return (
115-
<View style={customStyles.refreshableView}>
116-
<Text style={customStyles.actionsLabel}>
117-
↻
118-
</Text>
119-
</View>
120-
);
121-
},
122-
refreshableWaitingView(refreshCallback) {
123-
if (Platform.OS !== 'android') {
124-
return (
125-
<View style={customStyles.refreshableView}>
126-
<Text style={customStyles.actionsLabel}>
127-
↓
128-
</Text>
129-
</View>
130-
);
131-
} else {
132-
return (
133-
<TouchableHighlight
134-
underlayColor='#c8c7cc'
135-
onPress={refreshCallback}
136-
style={customStyles.refreshableView}
137-
>
138-
<Text style={customStyles.actionsLabel}>
139-
↻
140-
</Text>
141-
</TouchableHighlight>
142-
);
143-
}
144-
},
145-
emptyView(refreshCallback) {
146-
return (
147-
<View style={customStyles.defaultView}>
148-
<Text style={customStyles.defaultViewTitle}>
149-
Sorry, there is no content to display
150-
</Text>
151-
152-
<TouchableHighlight
153-
underlayColor='#c8c7cc'
154-
onPress={refreshCallback}
155-
>
156-
<Text>
157-
↻
158-
</Text>
159-
</TouchableHighlight>
160-
</View>
161-
);
162-
},
163-
renderSeparator() {
164-
return (
165-
<View style={customStyles.separator} />
166-
);
167-
},
47+
paginationFetchigView: null,
48+
paginationAllLoadedView: null,
49+
paginationWaitingView: null,
50+
refreshableFetchingView: null,
51+
refreshableWillRefreshView: null,
52+
refreshableWaitingView: null,
53+
emptyView: null,
54+
renderSeparator: null,
16855
};
16956
},
17057

58+
propTypes: {
59+
customStyles: React.PropTypes.object,
60+
initialListSize: React.PropTypes.number,
61+
firstLoader: React.PropTypes.bool,
62+
pagination: React.PropTypes.bool,
63+
refreshable: React.PropTypes.bool,
64+
refreshableViewHeight: React.PropTypes.number,
65+
refreshableDistance: React.PropTypes.number,
66+
sectionHeaderView: React.PropTypes.func,
67+
withSections: React.PropTypes.bool,
68+
onFetch: React.PropTypes.func,
69+
70+
paginationFetchigView: React.PropTypes.func,
71+
paginationAllLoadedView: React.PropTypes.func,
72+
paginationWaitingView: React.PropTypes.func,
73+
refreshableFetchingView: React.PropTypes.func,
74+
refreshableWillRefreshView: React.PropTypes.func,
75+
refreshableWaitingView: React.PropTypes.func,
76+
emptyView: React.PropTypes.func,
77+
renderSeparator: React.PropTypes.func,
78+
},
79+
17180
_setY(y) { this._y = y; },
17281
_getY(y) { return this._y; },
17382
_setPage(page) { this._page = page; },
@@ -176,6 +85,130 @@ var GiftedListView = React.createClass({
17685
_getRows() { return this._rows; },
17786

17887

88+
paginationFetchigView() {
89+
if (this.props.paginationFetchigView) {
90+
return this.props.paginationFetchigView();
91+
}
92+
93+
return (
94+
<View style={[this.defaultStyles.paginationView, this.props.customStyles.paginationView]}>
95+
<GiftedSpinner />
96+
</View>
97+
);
98+
},
99+
paginationAllLoadedView() {
100+
if (this.props.paginationAllLoadedView) {
101+
return this.props.paginationAllLoadedView();
102+
}
103+
104+
return (
105+
<View style={[this.defaultStyles.paginationView, this.props.customStyles.paginationView]}>
106+
<Text style={[this.defaultStyles.actionsLabel, this.props.customStyles.actionsLabel]}>
107+
~
108+
</Text>
109+
</View>
110+
);
111+
},
112+
paginationWaitingView(paginateCallback) {
113+
if (this.props.paginationWaitingView) {
114+
return this.props.paginationWaitingView(paginateCallback);
115+
}
116+
117+
return (
118+
<TouchableHighlight
119+
underlayColor='#c8c7cc'
120+
onPress={paginateCallback}
121+
style={[this.defaultStyles.paginationView, this.props.customStyles.paginationView]}
122+
>
123+
<Text style={[this.defaultStyles.actionsLabel, this.props.customStyles.actionsLabel]}>
124+
+
125+
</Text>
126+
</TouchableHighlight>
127+
);
128+
},
129+
refreshableFetchingView() {
130+
if (this.props.refreshableFetchingView) {
131+
return this.props.refreshableFetchingView();
132+
}
133+
134+
return (
135+
<View style={[this.defaultStyles.refreshableView, this.props.customStyles.refreshableView]}>
136+
<GiftedSpinner />
137+
</View>
138+
);
139+
},
140+
refreshableWillRefreshView() {
141+
if (this.props.refreshableWillRefreshView) {
142+
return this.props.refreshableWillRefreshView();
143+
}
144+
145+
return (
146+
<View style={[this.defaultStyles.refreshableView, this.props.customStyles.refreshableView]}>
147+
<Text style={[this.defaultStyles.actionsLabel, this.props.customStyles.actionsLabel]}>
148+
↻
149+
</Text>
150+
</View>
151+
);
152+
},
153+
refreshableWaitingView(refreshCallback) {
154+
if (this.props.refreshableWaitingView) {
155+
return this.props.refreshableWaitingView(refreshCallback);
156+
}
157+
158+
if (Platform.OS !== 'android') {
159+
return (
160+
<View style={[this.defaultStyles.refreshableView, this.props.customStyles.refreshableView]}>
161+
<Text style={[this.defaultStyles.actionsLabel, this.props.customStyles.actionsLabel]}>
162+
↓
163+
</Text>
164+
</View>
165+
);
166+
} else {
167+
return (
168+
<TouchableHighlight
169+
underlayColor='#c8c7cc'
170+
onPress={refreshCallback}
171+
style={[this.defaultStyles.refreshableView, this.props.customStyles.refreshableView]}
172+
>
173+
<Text style={[this.defaultStyles.actionsLabel, this.props.customStyles.actionsLabel]}>
174+
↻
175+
</Text>
176+
</TouchableHighlight>
177+
);
178+
}
179+
},
180+
emptyView(refreshCallback) {
181+
if (this.props.emptyView) {
182+
return this.props.emptyView(refreshCallback);
183+
}
184+
185+
return (
186+
<View style={[this.defaultStyles.defaultView, this.props.customStyles.defaultView]}>
187+
<Text style={[this.defaultStyles.defaultViewTitle, this.props.customStyles.defaultViewTitle]}>
188+
Sorry, there is no content to display
189+
</Text>
190+
191+
<TouchableHighlight
192+
underlayColor='#c8c7cc'
193+
onPress={refreshCallback}
194+
>
195+
<Text>
196+
↻
197+
</Text>
198+
</TouchableHighlight>
199+
</View>
200+
);
201+
},
202+
renderSeparator() {
203+
if (this.props.renderSeparator) {
204+
return this.props.renderSeparator();
205+
}
206+
207+
return (
208+
<View style={[this.defaultStyles.separator, this.props.customStyles.separator]} />
209+
);
210+
},
211+
179212
getInitialState() {
180213

181214
if (this.props.refreshable === true && Platform.OS !== 'android') {
@@ -306,25 +339,25 @@ var GiftedListView = React.createClass({
306339
_renderRefreshView() {
307340
switch (this.state.refreshStatus) {
308341
case 'fetching':
309-
return this.props.refreshableFetchingView();
342+
return this.refreshableFetchingView();
310343
break;
311344
case 'willRefresh':
312-
return this.props.refreshableWillRefreshView();
345+
return this.refreshableWillRefreshView();
313346
break;
314347
default:
315-
return this.props.refreshableWaitingView(this._onRefresh);
348+
return this.refreshableWaitingView(this._onRefresh);
316349
}
317350
},
318351

319352
_renderPaginationView() {
320353
if ((this.state.paginationStatus === 'fetching' && this.props.pagination === true) || (this.state.paginationStatus === 'firstLoad' && this.props.firstLoader === true)) {
321-
return this.props.paginationFetchigView();
354+
return this.paginationFetchigView();
322355
} else if (this.state.paginationStatus === 'waiting' && this.props.pagination === true && (this.props.withSections === true || this._getRows().length > 0)) {
323-
return this.props.paginationWaitingView(this._onPaginate);
356+
return this.paginationWaitingView(this._onPaginate);
324357
} else if (this.state.paginationStatus === 'allLoaded' && this.props.pagination === true) {
325-
return this.props.paginationAllLoadedView();
358+
return this.paginationAllLoadedView();
326359
} else if (this._getRows().length === 0) {
327-
return this.props.emptyView(this._onRefresh);
360+
return this.emptyView(this._onRefresh);
328361
} else {
329362
return null;
330363
}
@@ -370,10 +403,44 @@ var GiftedListView = React.createClass({
370403
scrollEnabled={true}
371404
canCancelContentTouches={true}
372405

406+
renderSeparator={this.renderSeparator}
407+
373408
{...this.props}
374409
/>
375410
);
376411
},
412+
413+
defaultStyles: {
414+
separator: {
415+
height: 1,
416+
backgroundColor: '#CCC'
417+
},
418+
refreshableView: {
419+
height: 50,
420+
backgroundColor: '#DDD',
421+
justifyContent: 'center',
422+
alignItems: 'center',
423+
},
424+
actionsLabel: {
425+
fontSize: 20,
426+
},
427+
paginationView: {
428+
height: 44,
429+
justifyContent: 'center',
430+
alignItems: 'center',
431+
backgroundColor: '#FFF',
432+
},
433+
defaultView: {
434+
justifyContent: 'center',
435+
alignItems: 'center',
436+
padding: 20,
437+
},
438+
defaultViewTitle: {
439+
fontSize: 16,
440+
fontWeight: 'bold',
441+
marginBottom: 15,
442+
},
443+
},
377444
});
378445

379446

0 commit comments

Comments
 (0)