Skip to content

Commit fa3f929

Browse files
NilmanduilNilmanduil
committed
Update dependencies & prettier config & eslint config
1 parent 6b7ed12 commit fa3f929

File tree

13 files changed

+7375
-2590
lines changed

13 files changed

+7375
-2590
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
example/

‎.eslintrc‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{
2-
"extends": "airbnb",
3-
"parser": "babel-eslint",
2+
"extends": ["airbnb", "prettier"],
3+
"plugins": ["prettier"],
4+
"parser": "@babel/eslint-parser",
5+
"parserOptions": {
6+
"requireConfigFile": false
7+
},
48
"rules": {
59
"arrow-parens": 0,
610
"comma-dangle": 0,

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22
npm-debug.log*
33
node_modules
44
lib
5+
.vscode/

‎.prettierrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"semi": true,
3+
"singleQuote": true,
4+
"trailingComma": "es5",
5+
"arrowParens": "always"
6+
}

‎babel.config.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env", "@babel/preset-react"]
3+
}

‎example/.babelrc‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎example/babel.config.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env", "module:metro-react-native-babel-preset"]
3+
}

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"react-native-swipeable": "../"
1313
},
1414
"devDependencies": {
15-
"babel-preset-react-native": "1.9.1",
15+
"metro-react-native-babel-preset": "0.72.0",
1616
"react-test-renderer": "15.4.1"
1717
}
1818
}

‎example/swipeable-example.js‎

Lines changed: 101 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,179 @@
1-
import React, {Component} from 'react';
2-
import {ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
3-
import Swipeable from 'react-native-swipeable';
4-
5-
export default class SwipeableExample extends Component {
1+
import React, { Component } from "react";
2+
import {
3+
ScrollView,
4+
StyleSheet,
5+
Text,
6+
TouchableOpacity,
7+
View,
8+
} from "react-native";
9+
import Swipeable from "react-native-swipeable";
610

11+
class SwipeableExample extends Component {
712
state = {
8-
currentlyOpenSwipeable: null
13+
currentlyOpenSwipeable: null,
914
};
1015

1116
handleScroll = () => {
12-
const {currentlyOpenSwipeable} = this.state;
17+
const { currentlyOpenSwipeable } = this.state;
1318

1419
if (currentlyOpenSwipeable) {
1520
currentlyOpenSwipeable.recenter();
1621
}
1722
};
1823

1924
render() {
20-
const {currentlyOpenSwipeable} = this.state;
25+
const { currentlyOpenSwipeable } = this.state;
2126
const itemProps = {
2227
onOpen: (event, gestureState, swipeable) => {
2328
if (currentlyOpenSwipeable && currentlyOpenSwipeable !== swipeable) {
2429
currentlyOpenSwipeable.recenter();
2530
}
2631

27-
this.setState({currentlyOpenSwipeable: swipeable});
32+
this.setState({ currentlyOpenSwipeable: swipeable });
2833
},
29-
onClose: () => this.setState({currentlyOpenSwipeable: null})
34+
onClose: () => this.setState({ currentlyOpenSwipeable: null }),
3035
};
3136

3237
return (
3338
<ScrollView onScroll={this.handleScroll} style={styles.container}>
34-
<Example1 {...itemProps}/>
35-
<Example2 {...itemProps}/>
36-
<Example3 {...itemProps}/>
39+
<Example1 {...itemProps} />
40+
<Example2 {...itemProps} />
41+
<Example3 {...itemProps} />
3742
</ScrollView>
3843
);
3944
}
4045
}
4146

42-
function Example1({onOpen, onClose}) {
47+
function Example1({ onOpen, onClose }) {
4348
return (
4449
<Swipeable
45-
leftContent={(
46-
<View style={[styles.leftSwipeItem, {backgroundColor: 'lightskyblue'}]}>
50+
leftContent={
51+
<View
52+
style={[styles.leftSwipeItem, { backgroundColor: "lightskyblue" }]}
53+
>
4754
<Text>Pull action</Text>
4855
</View>
49-
)}
56+
}
5057
rightButtons={[
51-
<TouchableOpacity style={[styles.rightSwipeItem, {backgroundColor: 'lightseagreen'}]}>
58+
<TouchableOpacity
59+
style={[styles.rightSwipeItem, { backgroundColor: "lightseagreen" }]}
60+
>
5261
<Text>1</Text>
5362
</TouchableOpacity>,
54-
<TouchableOpacity style={[styles.rightSwipeItem, {backgroundColor: 'orchid'}]}>
63+
<TouchableOpacity
64+
style={[styles.rightSwipeItem, { backgroundColor: "orchid" }]}
65+
>
5566
<Text>2</Text>
56-
</TouchableOpacity>
67+
</TouchableOpacity>,
5768
]}
5869
onRightButtonsOpenRelease={onOpen}
5970
onRightButtonsCloseRelease={onClose}
6071
>
61-
<View style={[styles.listItem, {backgroundColor: 'salmon'}]}>
72+
<View style={[styles.listItem, { backgroundColor: "salmon" }]}>
6273
<Text>Example 1</Text>
6374
</View>
6475
</Swipeable>
6576
);
6677
}
6778

68-
function Example2({onOpen, onClose}) {
79+
function Example2({ onOpen, onClose }) {
6980
return (
7081
<Swipeable
7182
leftButtonWidth={45}
7283
leftButtons={[
73-
<TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'papayawhip'}]}>
84+
<TouchableOpacity
85+
style={[styles.leftSwipeItem, { backgroundColor: "papayawhip" }]}
86+
>
7487
<Text>1</Text>
7588
</TouchableOpacity>,
76-
<TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'olivedrab'}]}>
89+
<TouchableOpacity
90+
style={[styles.leftSwipeItem, { backgroundColor: "olivedrab" }]}
91+
>
7792
<Text>2</Text>
7893
</TouchableOpacity>,
79-
<TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'mistyrose'}]}>
94+
<TouchableOpacity
95+
style={[styles.leftSwipeItem, { backgroundColor: "mistyrose" }]}
96+
>
8097
<Text>3</Text>
8198
</TouchableOpacity>,
82-
<TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'mediumaquamarine'}]}>
99+
<TouchableOpacity
100+
style={[
101+
styles.leftSwipeItem,
102+
{ backgroundColor: "mediumaquamarine" },
103+
]}
104+
>
83105
<Text>4</Text>
84106
</TouchableOpacity>,
85-
<TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'lightslategray'}]}>
107+
<TouchableOpacity
108+
style={[styles.leftSwipeItem, { backgroundColor: "lightslategray" }]}
109+
>
86110
<Text>5</Text>
87111
</TouchableOpacity>,
88-
<TouchableOpacity style={[styles.leftSwipeItem, {backgroundColor: 'ivory'}]}>
112+
<TouchableOpacity
113+
style={[styles.leftSwipeItem, { backgroundColor: "ivory" }]}
114+
>
89115
<Text>6</Text>
90-
</TouchableOpacity>
116+
</TouchableOpacity>,
91117
]}
92-
rightContent={(
93-
<View style={[styles.rightSwipeItem, {backgroundColor: 'linen'}]}>
118+
rightContent={
119+
<View style={[styles.rightSwipeItem, { backgroundColor: "linen" }]}>
94120
<Text>Pull action</Text>
95121
</View>
96-
)}
122+
}
97123
onLeftButtonsOpenRelease={onOpen}
98124
onLeftButtonsCloseRelease={onClose}
99125
>
100-
<View style={[styles.listItem, {backgroundColor: 'paleturquoise'}]}>
126+
<View style={[styles.listItem, { backgroundColor: "paleturquoise" }]}>
101127
<Text>Example 2</Text>
102128
</View>
103129
</Swipeable>
104130
);
105131
}
106132

107133
class Example3 extends Component {
108-
109134
state = {
110135
leftActionActivated: false,
111-
toggle: false
136+
toggle: false,
112137
};
113138

114139
render() {
115-
const {leftActionActivated, toggle} = this.state;
140+
const { leftActionActivated, toggle } = this.state;
116141

117142
return (
118143
<Swipeable
119144
leftActionActivationDistance={200}
120-
leftContent={(
121-
<View style={[styles.leftSwipeItem, {backgroundColor: leftActionActivated ? 'lightgoldenrodyellow' : 'steelblue'}]}>
122-
{leftActionActivated ?
123-
<Text>release!</Text> :
124-
<Text>keep pulling!</Text>}
145+
leftContent={
146+
<View
147+
style={[
148+
styles.leftSwipeItem,
149+
{
150+
backgroundColor: leftActionActivated
151+
? "lightgoldenrodyellow"
152+
: "steelblue",
153+
},
154+
]}
155+
>
156+
{leftActionActivated ? (
157+
<Text>release!</Text>
158+
) : (
159+
<Text>keep pulling!</Text>
160+
)}
125161
</View>
126-
)}
127-
onLeftActionActivate={() => this.setState({leftActionActivated: true})}
128-
onLeftActionDeactivate={() => this.setState({leftActionActivated: false})}
129-
onLeftActionComplete={() => this.setState({toggle: !toggle})}
162+
}
163+
onLeftActionActivate={() =>
164+
this.setState({ leftActionActivated: true })
165+
}
166+
onLeftActionDeactivate={() =>
167+
this.setState({ leftActionActivated: false })
168+
}
169+
onLeftActionComplete={() => this.setState({ toggle: !toggle })}
130170
>
131-
<View style={[styles.listItem, {backgroundColor: toggle ? 'thistle' : 'darkseagreen'}]}>
171+
<View
172+
style={[
173+
styles.listItem,
174+
{ backgroundColor: toggle ? "thistle" : "darkseagreen" },
175+
]}
176+
>
132177
<Text>Example 3</Text>
133178
</View>
134179
</Swipeable>
@@ -139,23 +184,24 @@ class Example3 extends Component {
139184
const styles = StyleSheet.create({
140185
container: {
141186
flex: 1,
142-
paddingTop: 20
187+
paddingTop: 20,
143188
},
144189
listItem: {
145190
height: 75,
146-
alignItems: 'center',
147-
justifyContent: 'center'
191+
alignItems: "center",
192+
justifyContent: "center",
148193
},
149194
leftSwipeItem: {
150195
flex: 1,
151-
alignItems: 'flex-end',
152-
justifyContent: 'center',
153-
paddingRight: 20
196+
alignItems: "flex-end",
197+
justifyContent: "center",
198+
paddingRight: 20,
154199
},
155200
rightSwipeItem: {
156201
flex: 1,
157-
justifyContent: 'center',
158-
paddingLeft: 20
202+
justifyContent: "center",
203+
paddingLeft: 20,
159204
},
160-
161205
});
206+
207+
export default SwipeableExample;

0 commit comments

Comments
 (0)