Skip to content
This repository was archived by the owner on Jan 5, 2022. It is now read-only.

Commit 242a24d

Browse files
benevbrightbenevbright
committed
lint example
1 parent 68c9533 commit 242a24d

9 files changed

+232
-150
lines changed

‎example/app.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"name": "collapsible example",
3-
"displayName": "collapsible example"
2+
"name": "example",
3+
"displayName": "example"
44
}

‎example/src/App.js

+25-21
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react';
2-
import { StatusBar } from 'react-native';
3-
import { createAppContainer, createStackNavigator } from 'react-navigation';
2+
import {StatusBar} from 'react-native';
3+
import {createAppContainer, createStackNavigator} from 'react-navigation';
44

55
import MenuScreen from './MenuScreen.js';
66
import S0_DefaultHeader from './S0_DefaultHeader';
@@ -19,33 +19,37 @@ import ContextScreen from './ContextScreen';
1919

2020
const navigationBackgroundColor = '#061';
2121

22-
export default class App extends Component{
23-
render(){
24-
return (
25-
[
26-
<StatusBar key='statusbar' barStyle='light-content'/>,
27-
<StackNavigator key='navigator'/>
28-
]
29-
)
22+
export default class App extends Component {
23+
render() {
24+
return [
25+
<StatusBar key="statusbar" barStyle="light-content" />,
26+
<StackNavigator key="navigator" />,
27+
];
3028
}
3129
}
3230

3331
const routeConfig = {
34-
MenuScreen: { screen: MenuScreen },
35-
S0_DefaultHeader: { screen: S0_DefaultHeader },
36-
S1_ExtraHeader: { screen: S1_ExtraHeader },
37-
S2_DefaultHeaderForTab: { screen: S2_DefaultHeaderForTab },
38-
S3_ExtraHeaderForTab: { screen: S3_ExtraHeaderForTab },
39-
DetailScreen: { screen: ContextScreen },
32+
MenuScreen: {screen: MenuScreen},
33+
S0_DefaultHeader: {screen: S0_DefaultHeader},
34+
S1_ExtraHeader: {screen: S1_ExtraHeader},
35+
S2_DefaultHeaderForTab: {screen: S2_DefaultHeaderForTab},
36+
S3_ExtraHeaderForTab: {screen: S3_ExtraHeaderForTab},
37+
DetailScreen: {screen: ContextScreen},
4038
};
4139

4240
const navigatorConfig = {
4341
defaultNavigationOptions: {
44-
headerStyle: { backgroundColor: navigationBackgroundColor, borderBottomColor: 'transparent', borderBottomWidth: 0, elevation: 0 },
45-
headerTitleStyle: { color: 'white' },
42+
headerStyle: {
43+
backgroundColor: navigationBackgroundColor,
44+
borderBottomColor: 'transparent',
45+
borderBottomWidth: 0,
46+
elevation: 0,
47+
},
48+
headerTitleStyle: {color: 'white'},
4649
headerTintColor: 'white',
47-
},
50+
},
4851
};
4952

50-
const StackNavigator = createAppContainer(createStackNavigator(routeConfig, navigatorConfig));
51-
53+
const StackNavigator = createAppContainer(
54+
createStackNavigator(routeConfig, navigatorConfig),
55+
);

‎example/src/ContextScreen.js

+9-13
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
11
import React, {Component} from 'react';
2-
import { Text, View } from 'react-native';
2+
import {Text, View} from 'react-native';
33

4-
const lorem =
5-
`What is Lorem Ipsum?
4+
const lorem = `What is Lorem Ipsum?
65
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`;
76

8-
export default class ContextScreen extends Component{
7+
export default class ContextScreen extends Component {
98
static navigationOptions = {
109
title: 'Detail',
11-
}
12-
13-
render(){
10+
};
1411

12+
render() {
1513
return (
16-
<View style={{ padding: 20 }}>
17-
<Text>
18-
{lorem}
19-
</Text>
14+
<View style={{padding: 20}}>
15+
<Text>{lorem}</Text>
2016
</View>
21-
)
17+
);
2218
}
23-
}
19+
}

‎example/src/MenuScreen.js

+17-11
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
import React, {Component} from 'react';
2-
import { Text, TouchableOpacity } from 'react-native';
2+
import {Text, TouchableOpacity} from 'react-native';
33

44
const routeConfig = [
5-
{ navigateTo: 'S0_DefaultHeader', title: 'S0. Default Header' },
6-
{ navigateTo: 'S1_ExtraHeader', title: 'S1. Extra Header (Search Bar)' },
7-
{ navigateTo: 'S2_DefaultHeaderForTab', title: 'S2. Default Header With Tab' },
8-
{ navigateTo: 'S3_ExtraHeaderForTab', title: 'S3. Extra Header With Tab (Facebook Group)' },
5+
{navigateTo: 'S0_DefaultHeader', title: 'S0. Default Header'},
6+
{navigateTo: 'S1_ExtraHeader', title: 'S1. Extra Header (Search Bar)'},
7+
{navigateTo: 'S2_DefaultHeaderForTab', title: 'S2. Default Header With Tab'},
8+
{
9+
navigateTo: 'S3_ExtraHeaderForTab',
10+
title: 'S3. Extra Header With Tab (Facebook Group)',
11+
},
912
];
1013

11-
export default class MenuScreen extends Component{
14+
export default class MenuScreen extends Component {
1215
static navigationOptions = {
1316
title: 'Collapsible',
14-
}
17+
};
1518

16-
render(){
17-
const { navigation } = this.props;
19+
render() {
20+
const {navigation} = this.props;
1821

1922
return routeConfig.map(route => (
20-
<TouchableOpacity key={route.navigateTo} style={{margin: 20}} onPress={() => navigation.navigate(route.navigateTo)}>
23+
<TouchableOpacity
24+
key={route.navigateTo}
25+
style={{margin: 20}}
26+
onPress={() => navigation.navigate(route.navigateTo)}>
2127
<Text>{route.title}</Text>
2228
</TouchableOpacity>
2329
));
2430
}
25-
}
31+
}

‎example/src/S0_DefaultHeader.js

+26-20
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,69 @@
11
import React, {Component} from 'react';
2-
import { Text, FlatList, Animated, TouchableOpacity } from 'react-native';
2+
import {Text, FlatList, Animated, TouchableOpacity} from 'react-native';
33

4-
import { withCollapsible } from 'react-navigation-collapsible';
4+
import {withCollapsible} from 'react-navigation-collapsible';
55

66
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
77

8-
class DefaultHeaderScreen extends Component{
8+
class DefaultHeaderScreen extends Component {
99
static navigationOptions = {
10-
title: 'Default Header'
10+
title: 'Default Header',
1111
};
1212

13-
constructor(props){
13+
constructor(props) {
1414
super(props);
1515

1616
const data = [];
17-
for(let i = 0 ; i < 60 ; i++){
17+
for (let i = 0; i < 60; i++) {
1818
data.push(i);
1919
}
2020

2121
this.state = {
22-
data: data
23-
}
22+
data: data,
23+
};
2424
}
2525

2626
renderItem = ({item}) => (
27-
<TouchableOpacity
27+
<TouchableOpacity
2828
onPress={() => {
2929
this.props.navigation.navigate('DetailScreen');
3030
}}
31-
style={{width: '100%', height: 50, borderBottomColor: '#0002', borderBottomWidth: 0.5, paddingHorizontal: 20, justifyContent: 'center'}}>
31+
style={{
32+
width: '100%',
33+
height: 50,
34+
borderBottomColor: '#0002',
35+
borderBottomWidth: 0.5,
36+
paddingHorizontal: 20,
37+
justifyContent: 'center',
38+
}}>
3239
<Text style={{fontSize: 22}}>{item}</Text>
3340
</TouchableOpacity>
34-
)
41+
);
3542

3643
// onScroll = e => {
3744
// console.log(e.nativeEvent.contentOffset);
3845
// }
3946

40-
render(){
41-
const { paddingHeight, animatedY, onScroll } = this.props.collapsible;
47+
render() {
48+
const {paddingHeight, animatedY, onScroll} = this.props.collapsible;
4249

4350
return (
44-
<AnimatedFlatList
51+
<AnimatedFlatList
4552
style={{flex: 1}}
4653
data={this.state.data}
4754
renderItem={this.renderItem}
4855
keyExtractor={(item, index) => String(index)}
49-
5056
contentContainerStyle={{paddingTop: paddingHeight}}
5157
scrollIndicatorInsets={{top: paddingHeight}}
52-
onScroll={onScroll}
58+
onScroll={onScroll}
5359
// if you want to use 'onScroll' callback.
5460
// onScroll={Animated.event(
5561
// [{nativeEvent: {contentOffset: {y: animatedY}}}],
56-
// {useNativeDriver:true, listener:this.onScroll})}
62+
// {useNativeDriver:true, listener:this.onScroll})}
5763
_mustAddThis={animatedY}
58-
/>
59-
)
64+
/>
65+
);
6066
}
6167
}
6268

63-
export default withCollapsible(DefaultHeaderScreen, { iOSCollapsedColor: 'red' });
69+
export default withCollapsible(DefaultHeaderScreen, {iOSCollapsedColor: 'red'});

‎example/src/S1_ExtraHeader.js

+64-32
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,114 @@
11
import React, {Component} from 'react';
2-
import { Text, FlatList, View, Animated, TouchableOpacity, TextInput } from 'react-native';
2+
import {
3+
Text,
4+
FlatList,
5+
View,
6+
Animated,
7+
TouchableOpacity,
8+
TextInput,
9+
} from 'react-native';
310

4-
import { withCollapsible } from 'react-navigation-collapsible';
11+
import {withCollapsible} from 'react-navigation-collapsible';
512

613
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
714

8-
class ExtraHeaderScreen extends Component{
15+
class ExtraHeaderScreen extends Component {
916
static navigationOptions = {
1017
title: 'Extra Header',
1118
};
1219

13-
constructor(props){
20+
constructor(props) {
1421
super(props);
1522

1623
const data = [];
17-
for(let i = 0 ; i < 60 ; i++){
24+
for (let i = 0; i < 60; i++) {
1825
data.push(i.toString());
1926
}
2027

2128
this.state = {
22-
data: data
23-
}
29+
data: data,
30+
};
2431
}
2532

2633
renderItem = ({item}) => (
27-
<TouchableOpacity
34+
<TouchableOpacity
2835
onPress={() => {
2936
this.props.navigation.navigate('DetailScreen');
3037
}}
31-
style={{width: '100%', height: 50, borderBottomColor: '#0002', borderBottomWidth: 0.5, paddingHorizontal: 20, justifyContent: 'center'}}>
38+
style={{
39+
width: '100%',
40+
height: 50,
41+
borderBottomColor: '#0002',
42+
borderBottomWidth: 0.5,
43+
paddingHorizontal: 20,
44+
justifyContent: 'center',
45+
}}>
3246
<Text style={{fontSize: 22}}>{item}</Text>
3347
</TouchableOpacity>
34-
)
48+
);
3549

36-
render(){
37-
const { paddingHeight, animatedY, onScroll } = this.props.collapsible;
38-
const { searchText } = this.props.navigation.state.params ? this.props.navigation.state.params : {};
39-
const data = searchText ? this.state.data.filter(item => item.includes(searchText)) : this.state.data;
50+
render() {
51+
const {paddingHeight, animatedY, onScroll} = this.props.collapsible;
52+
const {searchText} = this.props.navigation.state.params
53+
? this.props.navigation.state.params
54+
: {};
55+
const data = searchText
56+
? this.state.data.filter(item => item.includes(searchText))
57+
: this.state.data;
4058

4159
return (
42-
<AnimatedFlatList
60+
<AnimatedFlatList
4361
style={{flex: 1}}
4462
data={data}
4563
renderItem={this.renderItem}
4664
keyExtractor={(item, index) => String(index)}
47-
4865
contentContainerStyle={{paddingTop: paddingHeight}}
49-
scrollIndicatorInsets={{top: paddingHeight}}
50-
onScroll={onScroll}
66+
scrollIndicatorInsets={{top: paddingHeight}}
67+
onScroll={onScroll}
5168
_mustAddThis={animatedY}
52-
/>
53-
)
69+
/>
70+
);
5471
}
5572
}
5673

5774
const SearchBar = ({navigation, collapsible}) => {
5875
// eslint-disable-next-line no-unused-vars
59-
const { translateY, translateOpacity, translateProgress } = collapsible;
60-
const { searchText } = navigation.state.params ? navigation.state.params : {};
76+
const {translateY, translateOpacity, translateProgress} = collapsible;
77+
const {searchText} = navigation.state.params ? navigation.state.params : {};
6178
return (
62-
<View style={{width: '100%', height: '100%', paddingHorizontal: 15, justifyContent: 'center'}}>
63-
<View style={{backgroundColor: 'white', flex: 1, borderRadius: 10, margin: 10, justifyContent: 'center'}}>
64-
<TextInput style={{paddingHorizontal: 20}}
65-
placeholder='Search'
79+
<View
80+
style={{
81+
width: '100%',
82+
height: '100%',
83+
paddingHorizontal: 15,
84+
justifyContent: 'center',
85+
}}>
86+
<View
87+
style={{
88+
backgroundColor: 'white',
89+
flex: 1,
90+
borderRadius: 10,
91+
margin: 10,
92+
justifyContent: 'center',
93+
}}>
94+
<TextInput
95+
style={{paddingHorizontal: 20}}
96+
placeholder="Search"
6697
value={searchText}
67-
onChangeText={text => navigation.setParams({searchText: text})}/>
98+
onChangeText={text => navigation.setParams({searchText: text})}
99+
/>
68100
</View>
69101
</View>
70102
);
71-
}
103+
};
72104

73105
const collapsibleParams = {
74106
collapsibleComponent: SearchBar,
75107
collapsibleBackgroundStyle: {
76-
height: 60,
108+
height: 60,
77109
backgroundColor: '#061',
78110
// disableFadeoutInnerComponent: true,
79-
}
80-
}
111+
},
112+
};
81113

82-
export default withCollapsible(ExtraHeaderScreen, collapsibleParams);
114+
export default withCollapsible(ExtraHeaderScreen, collapsibleParams);

0 commit comments

Comments
 (0)