Skip to content

Commit 2576ab8

Browse files
karol-bisztygakarol-bisztyga
authored
Fix prettier/eslin (software-mansion#1034)
## Description This PR has been created to make code more consistent, and better looking. To achieve what's changed following paths have been taken under consideration when running `prettier` and `eslint`: - `src/reanimated2/*.js` - `Example/test/*.js` - `Example/src/*.js` - `Example/scripts/*.js` ## Changes All prettier changes are automatically generated. Two files have been changed in order to deal with eslint errors - `ChatHeadsExample.js` - `SimpleTest.js` Also prettier config has been changed(always use parenthesis - `()`) to improve code consistency. Example: Before: ``` const f = a => () { // ... } ``` Now: ``` const f = (a) => () { // ... } ```
1 parent a06e556 commit 2576ab8

11 files changed

+194
-162
lines changed

‎Example/scripts/generateIndex.js

+23-23
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,47 @@
11
const fs = require('fs');
2-
const path = require('path')
2+
const path = require('path');
33

4-
const cwd = process.cwd()
4+
const cwd = process.cwd();
55

66
// check if in Example directory
7-
const cwdSplit = cwd.split(path.sep)
7+
const cwdSplit = cwd.split(path.sep);
88
if (cwdSplit[cwdSplit.length - 1] !== 'Example') {
9-
console.log('invalid path, please enter the Example directory')
10-
process.exit(1)
9+
console.log('invalid path, please enter the Example directory');
10+
process.exit(1);
1111
}
1212

13-
const inputPath = cwd + path.sep + 'index-template.js'
14-
const outputPath = cwd + path.sep + 'index.js'
13+
const inputPath = cwd + path.sep + 'index-template.js';
14+
const outputPath = cwd + path.sep + 'index.js';
1515
// read command line arguments
16-
const args = []
16+
const args = [];
1717
process.argv.forEach((value, index) => {
18-
if (index <= 1) return;
19-
args.push(value)
20-
})
18+
if (index <= 1) return;
19+
args.push(value);
20+
});
2121

22-
console.log(`reading file ${ inputPath }`)
23-
let content = fs.readFileSync(inputPath).toString()
22+
console.log(`reading file ${inputPath}`);
23+
let content = fs.readFileSync(inputPath).toString();
2424

2525
// replace
2626
const replaces = {
27-
'component': ['App', 'TestApp', 'TestSuite'],
28-
'path': ['./src/App', './test/TestApp', './test-suite/App'],
29-
}
27+
component: ['App', 'TestApp', 'TestSuite'],
28+
path: ['./src/App', './test/TestApp', './test-suite/App'],
29+
};
3030

3131
let replaceIndex = 0;
3232
if (args.indexOf('--test') !== -1) replaceIndex = 1;
3333
if (args.indexOf('--test-suite') !== -1) replaceIndex = 2;
3434

3535
Object.keys(replaces).forEach((key) => {
36-
content = content.split('${' + key + '}').join(replaces[key][replaceIndex])
37-
})
36+
content = content.split('${' + key + '}').join(replaces[key][replaceIndex]);
37+
});
3838

39-
console.log(`writing to ${outputPath}`)
39+
console.log(`writing to ${outputPath}`);
4040
fs.writeFileSync(outputPath, content, function(err) {
41-
if(err) {
42-
console.log(err);
43-
process.exit(1)
44-
}
41+
if (err) {
42+
console.log(err);
43+
process.exit(1);
44+
}
4545
});
4646

4747
process.exit(0);

‎Example/src/App.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -71,20 +71,20 @@ const SCREENS = {
7171
};
7272

7373
function MainScreen({ navigation }) {
74-
const data = Object.keys(SCREENS).map(key => ({ key }));
74+
const data = Object.keys(SCREENS).map((key) => ({ key }));
7575
return (
7676
<FlatList
7777
style={styles.list}
7878
data={data}
7979
ItemSeparatorComponent={ItemSeparator}
80-
renderItem={props => (
80+
renderItem={(props) => (
8181
<MainScreenItem
8282
{...props}
83-
screens={ SCREENS }
83+
screens={SCREENS}
8484
onPressItem={({ key }) => navigation.navigate(key)}
8585
/>
8686
)}
87-
renderScrollComponent={props => <ScrollView {...props} />}
87+
renderScrollComponent={(props) => <ScrollView {...props} />}
8888
ListFooterComponent={() => <LaunchReanimated1 navigation={navigation} />}
8989
/>
9090
);
@@ -158,8 +158,8 @@ export const styles = StyleSheet.create({
158158
});
159159

160160
const createApp = Platform.select({
161-
web: input => createBrowserApp(input, { history: 'hash' }),
162-
default: input => createAppContainer(input),
161+
web: (input) => createBrowserApp(input, { history: 'hash' }),
162+
default: (input) => createAppContainer(input),
163163
});
164164

165165
export default createApp(ExampleApp);

‎Example/src/ChatHeadsExample.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Text, View, Dimensions, StyleSheet } from 'react-native';
2+
import { View, Dimensions, StyleSheet } from 'react-native';
33
import Animated, {
44
useSharedValue,
55
useAnimatedStyle,

‎Example/test/SimpleTest.js

+125-94
Original file line numberDiff line numberDiff line change
@@ -18,109 +18,140 @@ import Animated, {
1818
import { PanGestureHandler } from 'react-native-gesture-handler';
1919

2020
const SimpleTest = () => {
21-
// check if certain hooks work
22-
const sv = useSharedValue(50)
21+
// check if certain hooks work
22+
const sv = useSharedValue(50);
2323

24-
const mapper = useMapper(() => {
25-
'worklet'
26-
console.log(`sv has been updated to ${ sv.value }`)
27-
}, [sv])
28-
29-
const event = useEvent((event) => {
30-
'worklet'
31-
console.log(`event triggered ${ event }`)
32-
}, ['onGestureHandlerStateChange', 'onGestureHandlerEvent'])
24+
useMapper(() => {
25+
'worklet';
26+
console.log(`sv has been updated to ${sv.value}`);
27+
}, [sv]);
3328

29+
useEvent(
30+
(event) => {
31+
'worklet';
32+
console.log(`event triggered ${event}`);
33+
},
34+
['onGestureHandlerStateChange', 'onGestureHandlerEvent']
35+
);
3436

35-
const derived = useDerivedValue(() => {
36-
return sv.value * 2
37-
})
37+
useDerivedValue(() => {
38+
return sv.value * 2;
39+
});
3840

39-
const uas = useAnimatedStyle(() => {
40-
return {
41-
width: sv.value * 2,
42-
height: sv.value,
43-
}
44-
})
41+
const uas = useAnimatedStyle(() => {
42+
return {
43+
width: sv.value * 2,
44+
height: sv.value,
45+
};
46+
});
4547

46-
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
47-
const props = useAnimatedProps(() => {
48-
return {
49-
value: 'animated props works ' + sv.value,
50-
}
51-
})
48+
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
49+
const props = useAnimatedProps(() => {
50+
return {
51+
value: 'animated props works ' + sv.value,
52+
};
53+
});
5254

53-
const gestureHandler = useAnimatedGestureHandler({
54-
onStart: (event, context) => {
55-
console.log('event started')
56-
},
57-
onActive: (event, context) => {
58-
console.log('event active')
59-
},
60-
onEnd: (event, context) => {
61-
console.log('event end')
62-
},
63-
onFail: (event, context) => {
64-
console.log('event fail')
65-
},
66-
onCancel: (event, context) => {
67-
console.log('event cancel')
68-
},
69-
onFinish: (event, context, isFinished) => {
70-
console.log('event finish')
71-
},
72-
})
55+
const gestureHandler = useAnimatedGestureHandler({
56+
onStart: (event, context) => {
57+
console.log('event started');
58+
},
59+
onActive: (event, context) => {
60+
console.log('event active');
61+
},
62+
onEnd: (event, context) => {
63+
console.log('event end');
64+
},
65+
onFail: (event, context) => {
66+
console.log('event fail');
67+
},
68+
onCancel: (event, context) => {
69+
console.log('event cancel');
70+
},
71+
onFinish: (event, context, isFinished) => {
72+
console.log('event finish');
73+
},
74+
});
7375

74-
75-
const scrollHandler = useAnimatedScrollHandler({
76-
onScroll: (event) => {
77-
console.log('scroll on scroll')
78-
},
79-
onBeginDrag: (e) => {
80-
console.log('scroll being drag')
81-
},
82-
onEndDrag: (e) => {
83-
console.log('scroll drag end')
84-
},
85-
onMomentumBegin: (e) => {
86-
console.log('scroll momentum begin')
87-
},
88-
onMomentumEnd: (e) => {
89-
console.log('scroll momentum end')
90-
},
91-
});
76+
const scrollHandler = useAnimatedScrollHandler({
77+
onScroll: (event) => {
78+
console.log('scroll on scroll');
79+
},
80+
onBeginDrag: (e) => {
81+
console.log('scroll being drag');
82+
},
83+
onEndDrag: (e) => {
84+
console.log('scroll drag end');
85+
},
86+
onMomentumBegin: (e) => {
87+
console.log('scroll momentum begin');
88+
},
89+
onMomentumEnd: (e) => {
90+
console.log('scroll momentum end');
91+
},
92+
});
9293

93-
const updateSV = () => {
94-
return Math.floor(Math.random()*100+50);
95-
}
94+
const updateSV = () => {
95+
return Math.floor(Math.random() * 100 + 50);
96+
};
9697

97-
return (
98-
<Animated.View>
99-
<AnimatedTextInput animatedProps={props} style={ { padding: 10 } } />
100-
<Button title="change size(raw)" onPress={ () => { sv.value = updateSV() } } />
101-
<Button title="change size(with timing)" onPress={ () => { sv.value = withTiming(updateSV()) } } />
102-
<Button title="change size(with spring)" onPress={ () => { sv.value = withSpring(updateSV()) } } />
103-
<Button title="change size(with decay)" onPress={ () => { sv.value = withDecay({
104-
velocity: Math.floor(Math.random()*100-50),
105-
}); } } />
106-
<Button title="change size(delay)" onPress={ () => { sv.value = delay(1000, withTiming(updateSV(), { duration: 0 })) } } />
107-
<Button title="change size(loop)" onPress={ () => { sv.value = loop(withTiming(updateSV(), { duration: 500 })) } } />
108-
<PanGestureHandler onGestureEvent={gestureHandler}>
109-
<Animated.View style={ [{ backgroundColor: 'green', }, uas] } />
110-
</PanGestureHandler>
98+
return (
99+
<Animated.View>
100+
<AnimatedTextInput animatedProps={props} style={{ padding: 10 }} />
101+
<Button
102+
title="change size(raw)"
103+
onPress={() => {
104+
sv.value = updateSV();
105+
}}
106+
/>
107+
<Button
108+
title="change size(with timing)"
109+
onPress={() => {
110+
sv.value = withTiming(updateSV());
111+
}}
112+
/>
113+
<Button
114+
title="change size(with spring)"
115+
onPress={() => {
116+
sv.value = withSpring(updateSV());
117+
}}
118+
/>
119+
<Button
120+
title="change size(with decay)"
121+
onPress={() => {
122+
sv.value = withDecay({
123+
velocity: Math.floor(Math.random() * 100 - 50),
124+
});
125+
}}
126+
/>
127+
<Button
128+
title="change size(delay)"
129+
onPress={() => {
130+
sv.value = delay(1000, withTiming(updateSV(), { duration: 0 }));
131+
}}
132+
/>
133+
<Button
134+
title="change size(loop)"
135+
onPress={() => {
136+
sv.value = loop(withTiming(updateSV(), { duration: 500 }));
137+
}}
138+
/>
139+
<PanGestureHandler onGestureEvent={gestureHandler}>
140+
<Animated.View style={[{ backgroundColor: 'green' }, uas]} />
141+
</PanGestureHandler>
111142

112-
<Animated.ScrollView
113-
style={ { backgroundColor: 'yellow' } }
114-
scrollEventThrottle={1}
115-
onScroll={scrollHandler}>
116-
<View style={ { width: 25, height: 25, backgroundColor: 'black', } } />
117-
<View style={ { width: 25, height: 25, backgroundColor: 'black', } } />
118-
<View style={ { width: 25, height: 25, backgroundColor: 'black', } } />
119-
<View style={ { width: 25, height: 25, backgroundColor: 'black', } } />
120-
<View style={ { width: 25, height: 25, backgroundColor: 'black', } } />
121-
</Animated.ScrollView>
122-
</Animated.View>
123-
);
124-
}
143+
<Animated.ScrollView
144+
style={{ backgroundColor: 'yellow' }}
145+
scrollEventThrottle={1}
146+
onScroll={scrollHandler}>
147+
<View style={{ width: 25, height: 25, backgroundColor: 'black' }} />
148+
<View style={{ width: 25, height: 25, backgroundColor: 'black' }} />
149+
<View style={{ width: 25, height: 25, backgroundColor: 'black' }} />
150+
<View style={{ width: 25, height: 25, backgroundColor: 'black' }} />
151+
<View style={{ width: 25, height: 25, backgroundColor: 'black' }} />
152+
</Animated.ScrollView>
153+
</Animated.View>
154+
);
155+
};
125156

126157
export default SimpleTest;

‎Example/test/TestApp.js

+8-12
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,21 @@
11
import { createBrowserApp } from '@react-navigation/web';
22
import React from 'react';
3-
import {
4-
FlatList,
5-
Platform,
6-
YellowBox,
7-
} from 'react-native';
3+
import { FlatList, Platform, YellowBox } from 'react-native';
84
import { ScrollView } from 'react-native-gesture-handler';
95
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
106
import { createStackNavigator } from 'react-navigation-stack';
117

12-
import { styles, ItemSeparator, MainScreenItem } from '../src/App'
8+
import { styles, ItemSeparator, MainScreenItem } from '../src/App';
139

14-
import SimpleTest from './SimpleTest'
10+
import SimpleTest from './SimpleTest';
1511

1612
YellowBox.ignoreWarnings(['Calling `getNode()`']);
1713

1814
const SCREENS = {
19-
SimpleTest: {
20-
screen: SimpleTest,
21-
title: '🆕 Simple test',
22-
},
15+
SimpleTest: {
16+
screen: SimpleTest,
17+
title: '🆕 Simple test',
18+
},
2319
};
2420

2521
function MainScreen({ navigation }) {
@@ -32,7 +28,7 @@ function MainScreen({ navigation }) {
3228
renderItem={(props) => (
3329
<MainScreenItem
3430
{...props}
35-
screens={ SCREENS }
31+
screens={SCREENS}
3632
onPressItem={({ key }) => navigation.navigate(key)}
3733
/>
3834
)}

‎prettier.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ module.exports = {
44
trailingComma: 'es5',
55
jsxBracketSameLine: true,
66
tabWidth: 2,
7+
arrowParens: 'always',
78
};

0 commit comments

Comments
 (0)