Skip to content

Commit 41d036f

Browse files
sibeliussibelius
committed
refactor to use es6 syntax
1 parent 92dea8f commit 41d036f

File tree

5 files changed

+97
-84
lines changed

5 files changed

+97
-84
lines changed

‎components/CellWrapper.js

+10-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
'use strict';
22

3-
var React = require('react');
4-
var ReactNative = require('react-native');
5-
var {Component, PropTypes} = React;
6-
var {View} = ReactNative;
7-
8-
class CellWrapper extends Component {
9-
3+
import React, {
4+
Component,
5+
PropTypes
6+
} from 'react';
7+
import ReactNative, {
8+
View
9+
} from 'react-native';
10+
11+
export default class CellWrapper extends Component {
1012
componentDidMount() {
1113
this.props.updateTag && this.props.updateTag(ReactNative.findNodeHandle(this.refs.view), this.props.sectionId);
1214
}
1315

1416
render() {
15-
var Cell = this.props.component;
17+
const Cell = this.props.component;
1618
return (
1719
<View ref='view'>
1820
<Cell {...this.props} />
@@ -42,6 +44,3 @@ CellWrapper.propTypes = {
4244
updateTag: PropTypes.func
4345

4446
};
45-
46-
47-
module.exports = CellWrapper;

‎components/SectionHeader.js

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
'use strict';
22

3-
var React = require('react');
4-
var ReactNative = require('react-native');
5-
var {Component, PropTypes} = React;
6-
var {StyleSheet, View, Text, NativeModules} = ReactNative;
3+
import React, {
4+
Component,
5+
PropTypes
6+
} from 'react';
7+
import ReactNative, {
8+
StyleSheet,
9+
View,
10+
Text,
11+
NativeModules
12+
} from 'react-native';
713

8-
var UIManager = NativeModules.UIManager;
9-
class SectionHeader extends Component {
14+
const { UIManager } = NativeModules;
15+
16+
export default class SectionHeader extends Component {
1017

1118
componentDidMount() {
1219
this.props.updateTag && this.props.updateTag(ReactNative.findNodeHandle(this.refs.view), this.props.sectionId);
1320
}
1421

1522
render() {
16-
var SectionComponent = this.props.component;
17-
var content = SectionComponent ?
23+
const SectionComponent = this.props.component;
24+
const content = SectionComponent ?
1825
<SectionComponent {...this.props} /> :
1926
<Text style={styles.text}>{this.props.title}</Text>;
2027

@@ -26,7 +33,7 @@ class SectionHeader extends Component {
2633
}
2734
}
2835

29-
var styles = StyleSheet.create({
36+
const styles = StyleSheet.create({
3037
container: {
3138
backgroundColor:'#f8f8f8',
3239
borderTopWidth: 1,
@@ -59,7 +66,4 @@ SectionHeader.propTypes = {
5966
* A function used to propagate the root nodes handle back to the parent
6067
*/
6168
updateTag: PropTypes.func
62-
6369
};
64-
65-
module.exports = SectionHeader;

‎components/SectionList.js

+23-18
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
'use strict';
22

3-
var React = require('react');
4-
var ReactNative = require('react-native');
5-
var {Component, PropTypes} = React;
6-
var {StyleSheet, View, Text, NativeModules} = ReactNative;
7-
var UIManager = NativeModules.UIManager;
3+
import React, {
4+
Component,
5+
PropTypes,
6+
} from 'react';
7+
import ReactNative, {
8+
StyleSheet,
9+
View,
10+
Text,
11+
NativeModules,
12+
} from 'react-native';
813

9-
var noop = () => {};
10-
var returnTrue = () => true;
14+
const { UIManager } = NativeModules;
1115

12-
class SectionList extends Component {
16+
const noop = () => {};
17+
const returnTrue = () => true;
18+
19+
export default class SectionList extends Component {
1320

1421
constructor(props, context) {
1522
super(props, context);
@@ -33,7 +40,7 @@ class SectionList extends Component {
3340
}
3441

3542
detectAndScrollToSection(e) {
36-
var ev = e.nativeEvent.touches[0];
43+
const ev = e.nativeEvent.touches[0];
3744
//var rect = {width:1, height:1, x: ev.locationX, y: ev.locationY};
3845
//var rect = [ev.locationX, ev.locationY];
3946

@@ -49,7 +56,7 @@ class SectionList extends Component {
4956
//UIManager.findSubviewIn(e.target, rect, viewTag => {
5057
//this.onSectionSelect(view, true);
5158
//})
52-
let targetY = ev.pageY;
59+
const targetY = ev.pageY;
5360
const { y, height } = this.measure;
5461
if(!y || targetY < y){
5562
return;
@@ -82,17 +89,17 @@ class SectionList extends Component {
8289
}
8390

8491
render() {
85-
var SectionComponent = this.props.component;
86-
var sections = this.props.sections.map((section, index) => {
87-
var title = this.props.getSectionListTitle ?
92+
const SectionComponent = this.props.component;
93+
const sections = this.props.sections.map((section, index) => {
94+
const title = this.props.getSectionListTitle ?
8895
this.props.getSectionListTitle(section) :
8996
section;
9097

91-
var textStyle = this.props.data[section].length ?
98+
const textStyle = this.props.data[section].length ?
9299
styles.text :
93100
styles.inactivetext;
94101

95-
var child = SectionComponent ?
102+
const child = SectionComponent ?
96103
<SectionComponent
97104
sectionId={section}
98105
title={title}
@@ -165,7 +172,7 @@ SectionList.propTypes = {
165172
])
166173
};
167174

168-
var styles = StyleSheet.create({
175+
const styles = StyleSheet.create({
169176
container: {
170177
position: 'absolute',
171178
backgroundColor: 'transparent',
@@ -191,5 +198,3 @@ var styles = StyleSheet.create({
191198
color: '#CCCCCC'
192199
}
193200
});
194-
195-
module.exports = SectionList;

‎components/SelectableSectionsListView.js

+46-41
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
11
'use strict';
22
/* jshint esnext: true */
33

4-
var React = require('react');
5-
var ReactNative = require('react-native');
6-
var {Component, PropTypes} = React;
7-
var {ListView, StyleSheet, View, NativeModules} = ReactNative;
8-
var UIManager = NativeModules.UIManager;
9-
var merge = require('merge');
10-
11-
var SectionHeader = require('./SectionHeader');
12-
var SectionList = require('./SectionList');
13-
var CellWrapper = require('./CellWrapper');
14-
15-
class SelectableSectionsListView extends Component {
4+
import React, {
5+
Component,
6+
PropTypes,
7+
} from 'react';
8+
import ReactNative, {
9+
ListView,
10+
StyleSheet,
11+
View,
12+
NativeModules,
13+
} from 'react-native';
14+
import merge from 'merge';
15+
16+
import SectionHeader from './SectionHeader';
17+
import SectionList from './SectionList';
18+
import CellWrapper from './CellWrapper';
19+
20+
const { UIManager } = NativeModules;
21+
22+
export default class SelectableSectionsListView extends Component {
1623

1724
constructor(props, context) {
1825
super(props, context);
@@ -90,24 +97,24 @@ class SelectableSectionsListView extends Component {
9097
}
9198

9299
scrollToSection(section) {
93-
var y = 0;
94-
var headerHeight = this.props.headerHeight || 0;
100+
let y = 0;
101+
let headerHeight = this.props.headerHeight || 0;
95102
y += headerHeight;
96103

97104
if (!this.props.useDynamicHeights) {
98-
var cellHeight = this.props.cellHeight;
99-
var sectionHeaderHeight = this.props.sectionHeaderHeight;
100-
var keys = Object.keys(this.props.data);
101-
var index = keys.indexOf(section);
105+
const cellHeight = this.props.cellHeight;
106+
let sectionHeaderHeight = this.props.sectionHeaderHeight;
107+
const keys = Object.keys(this.props.data);
108+
const index = keys.indexOf(section);
102109

103-
var numcells = 0;
110+
let numcells = 0;
104111
for (var i = 0; i < index; i++) {
105112
numcells += this.props.data[keys[i]].length;
106113
}
107114

108115
sectionHeaderHeight = index * sectionHeaderHeight;
109116
y += numcells * cellHeight + sectionHeaderHeight;
110-
var maxY = this.totalHeight - this.containerHeight + headerHeight;
117+
const maxY = this.totalHeight - this.containerHeight + headerHeight;
111118
y = y > maxY ? maxY : y;
112119

113120
this.refs.listview.scrollTo({ x:0, y, animated: true });
@@ -123,11 +130,11 @@ class SelectableSectionsListView extends Component {
123130
}
124131

125132
renderSectionHeader(sectionData, sectionId) {
126-
var updateTag = this.props.useDynamicHeights ?
133+
const updateTag = this.props.useDynamicHeights ?
127134
this.updateTagInSectionMap :
128135
null;
129136

130-
var title = this.props.getSectionTitle ?
137+
const title = this.props.getSectionTitle ?
131138
this.props.getSectionTitle(sectionId) :
132139
sectionId;
133140

@@ -143,23 +150,23 @@ class SelectableSectionsListView extends Component {
143150
}
144151

145152
renderFooter() {
146-
var Footer = this.props.footer;
153+
const Footer = this.props.footer;
147154
return <Footer />;
148155
}
149156

150157
renderHeader() {
151-
var Header = this.props.header;
158+
const Header = this.props.header;
152159
return <Header />;
153160
}
154161

155162
renderRow(item, sectionId, index) {
156-
var CellComponent = this.props.cell;
163+
const CellComponent = this.props.cell;
157164
index = parseInt(index, 10);
158165

159-
var isFirst = index === 0;
160-
var isLast = this.sectionItemCount[sectionId]-1 === index;
166+
const isFirst = index === 0;
167+
const isLast = this.sectionItemCount[sectionId]-1 === index;
161168

162-
var props = {
169+
const props = {
163170
isFirst,
164171
isLast,
165172
sectionId,
@@ -177,7 +184,7 @@ class SelectableSectionsListView extends Component {
177184
}
178185

179186
onScroll(e) {
180-
var offsetY = e.nativeEvent.contentOffset.y;
187+
const offsetY = e.nativeEvent.contentOffset.y;
181188
if (this.props.updateScrollState) {
182189
this.setState({
183190
offsetY
@@ -196,11 +203,11 @@ class SelectableSectionsListView extends Component {
196203
}
197204

198205
render() {
199-
var data = this.props.data;
200-
var dataIsArray = Array.isArray(data);
201-
var sectionList;
202-
var renderSectionHeader;
203-
var dataSource;
206+
const { data } = this.props;
207+
const dataIsArray = Array.isArray(data);
208+
let sectionList;
209+
let renderSectionHeader;
210+
let dataSource;
204211

205212
if (dataIsArray) {
206213
dataSource = this.state.dataSource.cloneWithRows(data);
@@ -220,15 +227,15 @@ class SelectableSectionsListView extends Component {
220227
dataSource = this.state.dataSource.cloneWithRowsAndSections(data);
221228
}
222229

223-
var renderFooter = this.props.footer ?
230+
const renderFooter = this.props.footer ?
224231
this.renderFooter :
225232
this.props.renderFooter;
226233

227-
var renderHeader = this.props.header ?
234+
const renderHeader = this.props.header ?
228235
this.renderHeader :
229236
this.props.renderHeader;
230237

231-
var props = merge({}, this.props, {
238+
const props = merge({}, this.props, {
232239
onScroll: this.onScroll,
233240
onScrollAnimationEnd: this.onScrollAnimationEnd,
234241
dataSource,
@@ -252,13 +259,13 @@ class SelectableSectionsListView extends Component {
252259
}
253260
}
254261

255-
var styles = StyleSheet.create({
262+
const styles = StyleSheet.create({
256263
container: {
257264
flex: 1
258265
}
259266
});
260267

261-
var stylesheetProp = PropTypes.oneOfType([
268+
const stylesheetProp = PropTypes.oneOfType([
262269
PropTypes.number,
263270
PropTypes.object,
264271
]);
@@ -375,5 +382,3 @@ SelectableSectionsListView.propTypes = {
375382
sectionListStyle: stylesheetProp
376383

377384
};
378-
379-
module.exports = SelectableSectionsListView;

‎index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use strict';
22

3-
var SelectableSectionsListView = require('./components/SelectableSectionsListView');
3+
import SelectableSectionsListView from './components/SelectableSectionsListView';
44

5-
module.exports = SelectableSectionsListView;
5+
export default SelectableSectionsListView;

0 commit comments

Comments
 (0)