Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9793aaf

Browse files
refactor code
1 parent 2767d8f commit 9793aaf

29 files changed

+1406
-1427
lines changed

‎README.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# react-native-indicator
22

3-
[![npm](https://img.shields.io/npm/dt/express.svg)](https://www.npmjs.com/package/react-native-indicator)![react-native](https://img.shields.io/badge/react--native-0.38-brightgreen.svg) [![VersionEye](https://img.shields.io/versioneye/d/ruby/rails.svg)](https://github.com/wangdicoder/react-native-indicator) [![npm](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/react-native-indicator)
3+
![npm](https://img.shields.io/npm/dw/react-native-indicator.svg) ![npm](https://img.shields.io/npm/v/react-native-indicator.svg) [![npm](https://img.shields.io/npm/l/express.svg)](https://www.npmjs.com/package/react-native-indicator)
44

55
A useful indicator component for React Native
66

@@ -50,6 +50,7 @@ Here is currently available types:
5050
- [NineCubesLoader](#NineCubesLoader)
5151
- [LineDotsLoader](#LineDotsLoader)
5252
- [ColorDotsLoader](#ColorDotsLoader)
53+
- [OpacityDotsLoader](#OpacityDotsLoader)
5354

5455
```
5556
render(){
@@ -255,6 +256,15 @@ render(){
255256
| color2 | string | '#ffd700'(yellow) | 2nd color |
256257
| color3 | string | '#9acd32'(green) | 3rd color |
257258

259+
##### OpacityDotsLoader
260+
261+
| prop | type | default | description |
262+
| ---- | ---- | ---- | ---- |
263+
| size | number | 10 | dot's size |
264+
| color | string | '#1e90ff' | indicator's color |
265+
| betweenSpace | number | 5 | distance between two dots |
266+
| speed | number | 200 | change speed |
267+
258268
## License
259269

260-
MIT
270+
MIT

‎index.js

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,37 @@
1-
import Dots from './lib/loader/DotsLoader';
2-
import OpacityDots from './lib/loader/OpacityDotsLoader';
3-
import Pulse from './lib/loader/PulseLoader';
4-
import Text from './lib/loader/TextLoader';
1+
import Breathing from './lib/loader/BreathingLoader';
52
import Bubbles from './lib/loader/BubblesLoader';
63
import Circles from './lib/loader/CirclesLoader';
7-
import Ripple from './lib/loader/RippleLoader';
8-
import Breathing from './lib/loader/BreathingLoader';
4+
import CirclesRotationScale from './lib/loader/CirclesRotationScaleLoader';
5+
import ColorDots from './lib/loader/ColorDotsLoader';
6+
import Dots from './lib/loader/DotsLoader';
7+
import DoubleCircle from './lib/loader/DoubleCircleLoader';
8+
import EatBean from './lib/loader/EatBeanLoader';
99
import Lines from './lib/loader/LinesLoader';
10+
import LineDots from './lib/loader/LineDotsLoader';
1011
import Music from './lib/loader/MusicLoader';
11-
import EatBean from './lib/loader/EatBeanLoader';
12-
import DoubleCircle from './lib/loader/DoubleCircleLoader';
12+
import NineCubes from './lib/loader/NineCubesLoader';
13+
import OpacityDots from './lib/loader/OpacityDotsLoader';
14+
import Pulse from './lib/loader/PulseLoader';
15+
import Ripple from './lib/loader/RippleLoader';
1316
import RotationCircle from './lib/loader/RotationCircleLoader';
1417
import RotationHole from './lib/loader/RotationHoleLoader';
15-
import CirclesRotationScale from './lib/loader/CirclesRotationScaleLoader';
16-
//import Square from './lib/loader/SquareLoader';
17-
import NineCubes from './lib/loader/NineCubesLoader';
18-
import LineDots from './lib/loader/LineDotsLoader';
19-
import ColorDots from './lib/loader/ColorDotsLoader';
18+
import Text from './lib/loader/TextLoader';
2019

21-
export const PulseLoader = Pulse;
22-
export const DotsLoader = Dots;
23-
export const OpacityDotsLoader = OpacityDots;
24-
export const TextLoader = Text;
20+
export const BreathingLoader = Breathing;
2521
export const BubblesLoader = Bubbles;
2622
export const CirclesLoader = Circles;
27-
export const RippleLoader = Ripple;
28-
export const BreathingLoader = Breathing;
23+
export const CirclesRotationScaleLoader = CirclesRotationScale;
24+
export const ColorDotsLoader = ColorDots;
25+
export const DotsLoader = Dots;
26+
export const DoubleCircleLoader = DoubleCircle;
27+
export const EatBeanLoader = EatBean;
2928
export const LinesLoader = Lines;
29+
export const LineDotsLoader = LineDots;
3030
export const MusicBarLoader = Music;
31-
export const EatBeanLoader = EatBean;
32-
export const DoubleCircleLoader = DoubleCircle;
31+
export const NineCubesLoader = NineCubes;
32+
export const OpacityDotsLoader = OpacityDots;
33+
export const PulseLoader = Pulse;
34+
export const RippleLoader = Ripple;
3335
export const RotationCircleLoader = RotationCircle;
3436
export const RotationHoleLoader = RotationHole;
35-
export const CirclesRotationScaleLoader = CirclesRotationScale;
36-
//export const SquareLoader = Square;
37-
export const NineCubesLoader = NineCubes;
38-
export const LineDotsLoader = LineDots;
39-
export const ColorDotsLoader = ColorDots;
37+
export const TextLoader = Text;

‎lib/animated/AnimatedBar.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import Bar from '../shape/Bar';
2-
import {Animated} from 'react-native';
2+
import {Animated} from 'react-native';
33

4-
export default AnimatedBar=Animated.createAnimatedComponent(Bar);
4+
export default Animated.createAnimatedComponent(Bar);

‎lib/animated/AnimatedCircle.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import Circle from '../shape/Circle';
2-
import {Animated} from 'react-native';
2+
import {Animated} from 'react-native';
33

4-
export default AnimatedCircle=Animated.createAnimatedComponent(Circle);
4+
export default Animated.createAnimatedComponent(Circle);

‎lib/const/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const color = '#1e90ff';

‎lib/loader/BreathingLoader.js

Lines changed: 60 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,63 @@
1-
/**
2-
* Created by wangdi on 12/12/16.
3-
*/
4-
'use strict';
5-
6-
import React, {Component} from 'react';
1+
import React from 'react';
72
import PropTypes from 'prop-types';
8-
import {Animated, ART} from 'react-native';
9-
const {Surface} = ART;
3+
import { Animated, ART } from 'react-native';
104
import AnimatedCircle from '../animated/AnimatedCircle';
11-
12-
13-
export default class BreathingLoader extends Component {
14-
static propTypes = {
15-
color: PropTypes.string,
16-
size: PropTypes.number,
17-
strokeWidth: PropTypes.number,
18-
frequency: PropTypes.number
19-
};
20-
21-
static defaultProps = {
22-
color: '#1e90ff',
23-
size: 30,
24-
strokeWidth: 3,
25-
frequency: 800
26-
};
27-
28-
constructor(props) {
29-
super(props);
30-
this.state = {
31-
scale: new Animated.Value(0.1)
32-
};
33-
this._animation = this._animation.bind(this);
34-
}
35-
36-
render() {
37-
const {color, size, strokeWidth} = this.props;
38-
return (
39-
<Surface width={size+strokeWidth} height={size+strokeWidth}>
40-
<AnimatedCircle radius={size} stroke={color} strokeWidth={strokeWidth} scale={this.state.scale}
41-
x={(size+strokeWidth)/2} y={(size+strokeWidth)/2}/>
42-
</Surface>
43-
);
44-
}
45-
46-
componentDidMount() {
47-
this._animation();
48-
}
49-
50-
componentWillUnmount() {
51-
this.unmounted = true;
52-
}
53-
54-
_animation() {
55-
Animated.sequence([
56-
Animated.timing(this.state.scale, {toValue: 1, duration: this.props.frequency}),
57-
Animated.timing(this.state.scale, {toValue: 0.1, duration: this.props.frequency})
58-
]).start(() => {
59-
if (!this.unmounted)
60-
this._animation();
61-
});
62-
}
5+
import { color } from '../const';
6+
7+
const { Surface } = ART;
8+
9+
export default class BreathingLoader extends React.PureComponent {
10+
static propTypes = {
11+
color: PropTypes.string,
12+
size: PropTypes.number,
13+
strokeWidth: PropTypes.number,
14+
frequency: PropTypes.number
15+
};
16+
17+
static defaultProps = {
18+
color,
19+
size: 30,
20+
strokeWidth: 3,
21+
frequency: 800
22+
};
23+
24+
constructor(props) {
25+
super(props);
26+
this.state = {
27+
scale: new Animated.Value(0.1)
28+
};
29+
}
30+
31+
componentDidMount() {
32+
this._animation();
33+
}
34+
35+
componentWillUnmount() {
36+
this.unmounted = true;
37+
}
38+
39+
_animation = () => {
40+
Animated.sequence([
41+
Animated.timing(this.state.scale, { toValue: 1, duration: this.props.frequency }),
42+
Animated.timing(this.state.scale, { toValue: 0.1, duration: this.props.frequency })
43+
]).start(() => {
44+
!this.unmounted && this._animation();
45+
});
46+
};
47+
48+
render() {
49+
const { color, size, strokeWidth } = this.props;
50+
return (
51+
<Surface width={size + strokeWidth} height={size + strokeWidth}>
52+
<AnimatedCircle
53+
radius={size}
54+
stroke={color}
55+
strokeWidth={strokeWidth}
56+
scale={this.state.scale}
57+
x={(size + strokeWidth) / 2}
58+
y={(size + strokeWidth) / 2}
59+
/>
60+
</Surface>
61+
);
62+
}
6363
}

‎lib/loader/BubblesLoader.js

Lines changed: 75 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,85 @@
1-
/**
2-
* Created by wangdi on 11/12/16.
3-
*/
4-
'use strict';
5-
6-
import React, {Component} from 'react';
1+
import React from 'react';
72
import PropTypes from 'prop-types';
8-
import {Animated, ART} from 'react-native';
9-
const {Surface} = ART;
3+
import { Animated, ART } from 'react-native';
104
import AnimatedCircle from '../animated/AnimatedCircle';
5+
import { color } from '../const';
6+
7+
const { Surface } = ART;
118

12-
export default class BubblesLoader extends Component {
13-
static propTypes = {
14-
color: PropTypes.string,
15-
dotRadius: PropTypes.number,
16-
size: PropTypes.number
17-
};
9+
export default class BubblesLoader extends React.PureComponent {
10+
static propTypes = {
11+
color: PropTypes.string,
12+
dotRadius: PropTypes.number,
13+
size: PropTypes.number
14+
};
1815

19-
static defaultProps = {
20-
color: '#1e90ff',
21-
dotRadius: 10,
22-
size: 40
23-
};
16+
static defaultProps = {
17+
color,
18+
dotRadius: 10,
19+
size: 40
20+
};
2421

25-
constructor(props) {
26-
super(props);
27-
this.state = {
28-
opacities: [
29-
new Animated.Value(1),
30-
new Animated.Value(1),
31-
new Animated.Value(1),
32-
new Animated.Value(1),
33-
new Animated.Value(1),
34-
new Animated.Value(1),
35-
new Animated.Value(1),
36-
new Animated.Value(1)
37-
]
38-
};
39-
this.eachDegree = 360 / this.state.opacities.length;
40-
this.timers = [];
41-
this._animation = this._animation.bind(this);
42-
}
22+
state = {
23+
opacities: [
24+
new Animated.Value(1),
25+
new Animated.Value(1),
26+
new Animated.Value(1),
27+
new Animated.Value(1),
28+
new Animated.Value(1),
29+
new Animated.Value(1),
30+
new Animated.Value(1),
31+
new Animated.Value(1)
32+
]
33+
};
34+
eachDegree = 360 / this.state.opacities.length;
35+
timers = [];
4336

44-
render() {
45-
const {size, dotRadius, color} = this.props;
46-
return (
47-
<Surface width={size+dotRadius} height={size+dotRadius}>
48-
{this.state.opacities.map((item, i) => {
49-
let radian = (i * this.eachDegree) * Math.PI / 180;
50-
let x = Math.round(size / 2 * Math.cos(radian)) + size / 2 + dotRadius / 2;
51-
let y = Math.round(size / 2 * Math.sin(radian)) + size / 2 + dotRadius / 2;
52-
return <AnimatedCircle key={i} radius={dotRadius} fill={color} x={x} y={y}
53-
scale={this.state.opacities[i]}/>
54-
})}
55-
</Surface>
56-
);
57-
}
37+
componentDidMount() {
38+
this.state.opacities.forEach((item, i) => {
39+
const id = setTimeout(() => {
40+
this._animation(i)
41+
}, i * 150);
42+
this.timers.push(id);
43+
});
44+
}
5845

59-
componentDidMount() {
60-
this.state.opacities.forEach((item, i) => {
61-
const id = setTimeout(() => {
62-
this._animation(i)
63-
}, i * 150);
64-
this.timers.push(id);
65-
});
66-
}
46+
componentWillUnmount() {
47+
this.unmounted = true;
48+
this.timers.forEach((id) => {
49+
clearTimeout(id);
50+
});
51+
}
6752

68-
componentWillUnmount() {
69-
this.unmounted = true;
70-
this.timers.forEach((id) => {
71-
clearTimeout(id);
72-
});
73-
}
53+
_animation = (i) => {
54+
Animated.sequence([
55+
Animated.timing(this.state.opacities[i], { toValue: 0.2, duration: 600 }),
56+
Animated.timing(this.state.opacities[i], { toValue: 1, duration: 600 })
57+
]).start(() => {
58+
!this.unmounted && this._animation(i);
59+
});
60+
};
7461

75-
_animation(i) {
76-
Animated.sequence([
77-
Animated.timing(this.state.opacities[i], {toValue: 0.2, duration: 600}),
78-
Animated.timing(this.state.opacities[i], {toValue: 1, duration: 600})
79-
]).start(() => {
80-
if (!this.unmounted)
81-
this._animation(i);
82-
});
83-
}
62+
render() {
63+
const { size, dotRadius, color } = this.props;
64+
const { opacities } = this.state;
65+
return (
66+
<Surface width={size + dotRadius} height={size + dotRadius}>
67+
{opacities.map((item, i) => {
68+
let radian = (i * this.eachDegree) * Math.PI / 180;
69+
let x = Math.round(size / 2 * Math.cos(radian)) + size / 2 + dotRadius / 2;
70+
let y = Math.round(size / 2 * Math.sin(radian)) + size / 2 + dotRadius / 2;
71+
return (
72+
<AnimatedCircle
73+
key={i}
74+
radius={dotRadius}
75+
fill={color}
76+
x={x}
77+
y={y}
78+
scale={opacities[i]}
79+
/>
80+
)
81+
})}
82+
</Surface>
83+
);
84+
}
8485
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /