Skip to content

Commit 75e8144

Browse files
obladoroblador
committed
Add formatting with prettier
1 parent c649884 commit 75e8144

14 files changed

Lines changed: 1405 additions & 158 deletions

File tree

‎.eslintrc‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
{
2-
"extends": "airbnb",
2+
"extends": [
3+
"airbnb",
4+
"prettier",
5+
"prettier/flowtype",
6+
"prettier/react"
7+
],
8+
"plugins": [
9+
"prettier"
10+
],
311
"parser": "babel-eslint",
412
"rules": {
513
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
614
"import/no-extraneous-dependencies": [0],
715
"import/no-unresolved": [2, { ignore: ['^react(-native)?$'] }],
816
"import/extensions": [2, { "js": "never", "json": "always" }],
9-
"no-mixed-operators": ["error", {"allowSamePrecedence": true}],
1017
"operator-assignment": [0]
1118
}
1219
}

‎.npmignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ Example
55
.editorconfig
66
.eslintrc
77
.travis.yml
8+
yarn.lock

‎.prettierrc‎

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

‎Bar.js‎

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3-
import {
4-
Animated,
5-
Easing,
6-
View,
7-
ViewPropTypes,
8-
} from 'react-native';
3+
import { Animated, Easing, View, ViewPropTypes } from 'react-native';
94

105
const INDETERMINATE_WIDTH_FACTOR = 0.3;
11-
const BAR_WIDTH_ZERO_POSITION = INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
6+
const BAR_WIDTH_ZERO_POSITION =
7+
INDETERMINATE_WIDTH_FACTOR / (1 + INDETERMINATE_WIDTH_FACTOR);
128

139
const RNViewPropTypes = ViewPropTypes || View.propTypes;
1410

@@ -52,7 +48,9 @@ export default class ProgressBar extends Component {
5248
const progress = Math.min(Math.max(props.progress, 0), 1);
5349
this.state = {
5450
width: 0,
55-
progress: new Animated.Value(props.indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress),
51+
progress: new Animated.Value(
52+
props.indeterminate ? INDETERMINATE_WIDTH_FACTOR : progress
53+
),
5654
animationValue: new Animated.Value(BAR_WIDTH_ZERO_POSITION),
5755
};
5856
}
@@ -78,10 +76,9 @@ export default class ProgressBar extends Component {
7876
props.indeterminate !== this.props.indeterminate ||
7977
props.progress !== this.props.progress
8078
) {
81-
const progress = (props.indeterminate
79+
const progress = props.indeterminate
8280
? INDETERMINATE_WIDTH_FACTOR
83-
: Math.min(Math.max(props.progress, 0), 1)
84-
);
81+
: Math.min(Math.max(props.progress, 0), 1);
8582

8683
if (props.animated) {
8784
const { animationType, animationConfig } = this.props;
@@ -104,14 +101,14 @@ export default class ProgressBar extends Component {
104101
easing: Easing.linear,
105102
isInteraction: false,
106103
useNativeDriver: this.props.useNativeDriver,
107-
}).start((endState) => {
104+
}).start(endState => {
108105
if (endState.finished) {
109106
this.animate();
110107
}
111108
});
112109
}
113110

114-
handleLayout = (event) => {
111+
handleLayout = event => {
115112
if (!this.props.width) {
116113
this.setState({ width: event.nativeEvent.layout.width });
117114
}
@@ -134,7 +131,7 @@ export default class ProgressBar extends Component {
134131
...restProps
135132
} = this.props;
136133

137-
const innerWidth = Math.max(0, width || this.state.width) - (borderWidth * 2);
134+
const innerWidth = Math.max(0, width || this.state.width) - borderWidth * 2;
138135
const containerStyle = {
139136
width,
140137
borderWidth,
@@ -146,27 +143,35 @@ export default class ProgressBar extends Component {
146143
const progressStyle = {
147144
backgroundColor: color,
148145
height,
149-
transform: [{
150-
translateX: this.state.animationValue.interpolate({
151-
inputRange: [0, 1],
152-
outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth],
153-
}),
154-
}, {
155-
translateX: this.state.progress.interpolate({
156-
inputRange: [0, 1],
157-
outputRange: [innerWidth / -2, 0],
158-
}),
159-
}, {
160-
// Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
161-
scaleX: this.state.progress.interpolate({
162-
inputRange: [0, 1],
163-
outputRange: [0.0001, 1],
164-
}),
165-
}],
146+
transform: [
147+
{
148+
translateX: this.state.animationValue.interpolate({
149+
inputRange: [0, 1],
150+
outputRange: [innerWidth * -INDETERMINATE_WIDTH_FACTOR, innerWidth],
151+
}),
152+
},
153+
{
154+
translateX: this.state.progress.interpolate({
155+
inputRange: [0, 1],
156+
outputRange: [innerWidth / -2, 0],
157+
}),
158+
},
159+
{
160+
// Interpolation a temp workaround for https://github.com/facebook/react-native/issues/6278
161+
scaleX: this.state.progress.interpolate({
162+
inputRange: [0, 1],
163+
outputRange: [0.0001, 1],
164+
}),
165+
},
166+
],
166167
};
167168

168169
return (
169-
<View style={[containerStyle, style]} onLayout={this.handleLayout} {...restProps}>
170+
<View
171+
style={[containerStyle, style]}
172+
onLayout={this.handleLayout}
173+
{...restProps}
174+
>
170175
<Animated.View style={progressStyle} />
171176
{children}
172177
</View>

‎Circle.js‎

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ export class ProgressCircle extends Component {
4848
textStyle: Text.propTypes.style,
4949
thickness: PropTypes.number,
5050
unfilledColor: PropTypes.string,
51-
strokeCap: PropTypes.string,
5251
endAngle: PropTypes.number,
5352
};
5453

@@ -72,7 +71,7 @@ export class ProgressCircle extends Component {
7271

7372
componentWillMount() {
7473
if (this.props.animated) {
75-
this.props.progress.addListener((event) => {
74+
this.props.progress.addListener(event => {
7675
this.progressValue = event.value;
7776
if (this.props.showsText || this.progressValue === 1) {
7877
this.forceUpdate();
@@ -106,33 +105,38 @@ export class ProgressCircle extends Component {
106105

107106
const border = borderWidth || (indeterminate ? 1 : 0);
108107

109-
const radius = (size / 2) - border;
108+
const radius = size / 2 - border;
110109
const offset = {
111110
top: border,
112111
left: border,
113112
};
114113
const textOffset = border + thickness;
115-
const textSize = size - (textOffset * 2);
114+
const textSize = size - textOffset * 2;
116115

117116
const Surface = rotation ? AnimatedSurface : ART.Surface;
118117
const Shape = animated ? AnimatedArc : Arc;
119118
const progressValue = animated ? this.progressValue : progress;
120-
const angle = animated ? Animated.multiply(progress, CIRCLE) : progress * CIRCLE;
119+
const angle = animated
120+
? Animated.multiply(progress, CIRCLE)
121+
: progress * CIRCLE;
121122

122123
return (
123124
<View style={[styles.container, style]} {...restProps}>
124125
<Surface
125126
width={size}
126127
height={size}
127128
style={{
128-
transform: [{
129-
rotate: indeterminate && rotation
130-
? rotation.interpolate({
131-
inputRange: [0, 1],
132-
outputRange: ['0deg', '360deg'],
133-
})
134-
: '0deg',
135-
}],
129+
transform: [
130+
{
131+
rotate:
132+
indeterminate && rotation
133+
? rotation.interpolate({
134+
inputRange: [0, 1],
135+
outputRange: ['0deg', '360deg'],
136+
})
137+
: '0deg',
138+
},
139+
],
136140
}}
137141
>
138142
{unfilledColor && progressValue !== 1 ? (
@@ -145,7 +149,9 @@ export class ProgressCircle extends Component {
145149
stroke={unfilledColor}
146150
strokeWidth={thickness}
147151
/>
148-
) : false}
152+
) : (
153+
false
154+
)}
149155
{!indeterminate ? (
150156
<Shape
151157
radius={radius}
@@ -157,7 +163,9 @@ export class ProgressCircle extends Component {
157163
strokeCap={strokeCap}
158164
strokeWidth={thickness}
159165
/>
160-
) : false}
166+
) : (
167+
false
168+
)}
161169
{border ? (
162170
<Arc
163171
radius={size / 2}
@@ -167,7 +175,9 @@ export class ProgressCircle extends Component {
167175
strokeCap={strokeCap}
168176
strokeWidth={border}
169177
/>
170-
) : false}
178+
) : (
179+
false
180+
)}
171181
</Surface>
172182
{!indeterminate && showsText ? (
173183
<View
@@ -183,16 +193,21 @@ export class ProgressCircle extends Component {
183193
}}
184194
>
185195
<Text
186-
style={[{
187-
color,
188-
fontSize: textSize / 4.5,
189-
fontWeight: '300',
190-
}, textStyle]}
196+
style={[
197+
{
198+
color,
199+
fontSize: textSize / 4.5,
200+
fontWeight: '300',
201+
},
202+
textStyle,
203+
]}
191204
>
192205
{formatText(progressValue)}
193206
</Text>
194207
</View>
195-
) : false}
208+
) : (
209+
false
210+
)}
196211
{children}
197212
</View>
198213
);

‎CircleSnail.js‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3-
import {
4-
Animated,
5-
ART,
6-
Easing,
7-
View,
8-
ViewPropTypes,
9-
} from 'react-native';
3+
import { Animated, ART, Easing, View, ViewPropTypes } from 'react-native';
104

115
import Arc from './Shapes/Arc';
126

@@ -77,7 +71,7 @@ export default class CircleSnail extends Component {
7771
animate(iteration = 1) {
7872
Animated.sequence([
7973
Animated.timing(this.state.startAngle, {
80-
toValue: (-MAX_ARC_ANGLE * iteration) - MIN_ARC_ANGLE,
74+
toValue: -MAX_ARC_ANGLE * iteration - MIN_ARC_ANGLE,
8175
duration: this.props.duration || 1000,
8276
isInteraction: false,
8377
easing: Easing.inOut(Easing.quad),
@@ -88,7 +82,7 @@ export default class CircleSnail extends Component {
8882
isInteraction: false,
8983
easing: Easing.inOut(Easing.quad),
9084
}),
91-
]).start((endState) => {
85+
]).start(endState => {
9286
if (endState.finished) {
9387
if (Array.isArray(this.props.color)) {
9488
this.setState({
@@ -106,7 +100,7 @@ export default class CircleSnail extends Component {
106100
duration: this.props.spinDuration || 5000,
107101
easing: Easing.linear,
108102
isInteraction: false,
109-
}).start((endState) => {
103+
}).start(endState => {
110104
if (endState.finished) {
111105
this.state.rotation.setValue(0);
112106
this.spin();
@@ -138,7 +132,7 @@ export default class CircleSnail extends Component {
138132
return null;
139133
}
140134

141-
const radius = (size / 2) - thickness;
135+
const radius = size / 2 - thickness;
142136
const offset = {
143137
top: thickness,
144138
left: thickness,
@@ -154,21 +148,24 @@ export default class CircleSnail extends Component {
154148
{
155149
backgroundColor: 'transparent',
156150
overflow: 'hidden',
157-
transform: [{
158-
rotate: this.state.rotation.interpolate({
159-
inputRange: [0, 1],
160-
outputRange: ['0deg', `${directionFactor * 360}deg`],
161-
}),
162-
}],
151+
transform: [
152+
{
153+
rotate: this.state.rotation.interpolate({
154+
inputRange: [0, 1],
155+
outputRange: ['0deg', `${directionFactor * 360}deg`],
156+
}),
157+
},
158+
],
163159
},
164160
]}
165161
>
166-
<ART.Surface
167-
width={size}
168-
height={size}
169-
>
162+
<ART.Surface width={size} height={size}>
170163
<AnimatedArc
171-
direction={direction === 'counter-clockwise' ? 'clockwise' : 'counter-clockwise'}
164+
direction={
165+
direction === 'counter-clockwise'
166+
? 'clockwise'
167+
: 'counter-clockwise'
168+
}
172169
radius={radius}
173170
stroke={Array.isArray(color) ? color[this.state.colorIndex] : color}
174171
offset={offset}

‎Example/app.js‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import React, { Component } from 'react';
22

3-
import {
4-
StyleSheet,
5-
Text,
6-
View,
7-
} from 'react-native';
3+
import { StyleSheet, Text, View } from 'react-native';
84

95
import * as Progress from 'react-native-progress';
106

@@ -87,16 +83,10 @@ export default class Example extends Component {
8783
/>
8884
</View>
8985
<View style={styles.circles}>
86+
<Progress.CircleSnail style={styles.progress} />
9087
<Progress.CircleSnail
9188
style={styles.progress}
92-
/>
93-
<Progress.CircleSnail
94-
style={styles.progress}
95-
color={[
96-
'#F44336',
97-
'#2196F3',
98-
'#009688',
99-
]}
89+
color={['#F44336', '#2196F3', '#009688']}
10090
/>
10191
</View>
10292
</View>

0 commit comments

Comments
 (0)