react-native-indicator - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

index.js

@@ -6,10 +6,16 @@ /**
 
+import Dots from './lib/loader/DotsLoader';
 import Pulse from './lib/loader/PulseLoader';
-import Circle from './lib/loader/CircleLoader';
 import Text from './lib/loader/TextLoader';
-import MultipleDots from './lib/loader/MultipleDotsLoader';
+import Bubbles from './lib/loader/BubblesLoader';
+import Circles from './lib/loader/CirclesLoader';
+import Ripple from './lib/loader/RippleLoader';
+import Breathing from './lib/loader/BreathingLoader';
 
-export const CircleLoader = Circle;
-export const PulseLoader  = Pulse;
+export const PulseLoader = Pulse;
+export const DotsLoader  = Dots;
 export const TextLoader = Text;
-export const MultipleDotsLoader = MultipleDots;
+export const BubblesLoader = Bubbles;
+export const CirclesLoader = Circles;
+export const RippleLoader = Ripple;
+export const BreathingLoader = Breathing;

lib/loader/PulseLoader.js

@@ -7,11 +7,11 @@ /**
 import React, {Component, PropTypes} from 'react';
-import {Animated, ART, Easing} from 'react-native';
+import {Animated, ART} from 'react-native';
 const {Surface} = ART;
 import AnimatedCircle from '../animated/AnimatedCircle';
 
+
 export default class PulseLoader extends Component{
     static propTypes = {
         color: PropTypes.string,
-        size: PropTypes.number,
-        betweenSpace: PropTypes.number
+        size: PropTypes.number
     };
@@ -21,4 +21,3 @@
         color: '#1e90ff',
-        size: 10,
-        betweenSpace: 5
+        size: 10
     };
@@ -29,22 +28,12 @@
         this.state = {
-            scales: [new Animated.Value(1), new Animated.Value(1), new Animated.Value(1)]
+            scale: new Animated.Value(1)
         };
-        this.timers = [];
         this._animation = this._animation.bind(this);
     }
 
-    _renderCircle(i){
-        const {color, size, betweenSpace} = this.props;
-        return(
-            <AnimatedCircle radius={size} fill={color} x={size + i * (size+betweenSpace)} y={size} scale={this.state.scales[i]}/>
-        );
-    }
-
     render(){
-        const {size, betweenSpace} = this.props;
+        const {color, size} = this.props;
         return(
-            <Surface width={size*3 + (size+betweenSpace)*2} height={size*2}>
-                {this._renderCircle(0)}
-                {this._renderCircle(1)}
-                {this._renderCircle(2)}
+            <Surface width={size*2} height={size*2}>
+                <AnimatedCircle radius={size} fill={color} scale={this.state.scale} x={size} y={size}/>
             </Surface>
@@ -55,6 +44,3 @@ );
     componentDidMount(){
-        this.state.scales.forEach((item, i) => {
-            const id = setTimeout(()=>{this._animation(i)}, i*250);
-            this.timers.push(id);
-        });
+        this._animation();
     }
@@ -64,16 +50,13 @@
         this.unmounted = true;
-        this.timers.forEach((id)=>{
-            clearTimeout(id);
-        });
     }
 
-    _animation(i){
+    _animation(){
         Animated.sequence([
-            Animated.timing(this.state.scales[i], {toValue: 0.2, duration: 500}),
-            Animated.timing(this.state.scales[i], {toValue: 1, duration: 500})
+            Animated.timing(this.state.scale, {toValue: 0.2}),
+            Animated.timing(this.state.scale, {toValue: 1})
         ]).start(()=>{
             if(!this.unmounted)
-                this._animation(i);
+                this._animation();
         });
     }
 }

lib/loader/TextLoader.js

@@ -21,3 +21,4 @@ /**
         this._animation = this._animation.bind(this);
-        this.patterns = [[0,0,0],[1,0,0],[1,1,0],[1,1,1]]
+        this.patterns = [[0,0,0],[1,0,0],[1,1,0],[1,1,1]];
+        this.timers = [];
     }
@@ -43,2 +44,5 @@
         this.unmounted = true;
+        this.timers.forEach((id)=>{
+            clearTimeout(id);
+        });
     }
@@ -48,3 +52,3 @@
         if(!this.unmounted){
-            setTimeout(()=>{
+            const id = setTimeout(()=>{
                 this.setState({opacities: this.patterns[index]});
@@ -56,4 +60,5 @@ index++;
             }, 500);
+            this.timers.push(id);
         }
     }
 }

lib/shape/Bar.js

@@ -6,5 +6,5 @@ /**
 
-import React, { Component, PropTypes } from 'react';
-import { ART } from 'react-native';
-const { Shape, Path } = ART;
+import React, {Component, PropTypes} from 'react';
+import {ART} from 'react-native';
+const {Shape, Path} = ART;
 
@@ -11,0 +11,0 @@ export default class Bar extends Component {

lib/shape/Circle.js

@@ -6,5 +6,5 @@ /**
 
-import React, { Component, PropTypes } from 'react';
-import { ART } from 'react-native';
-const { Shape, Path } = ART;
+import React, {Component, PropTypes} from 'react';
+import {ART} from 'react-native';
+const {Shape, Path} = ART;
 
@@ -11,0 +11,0 @@ export default class Circle extends Component {

package.json

 {
   "name": "react-native-indicator",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React Native Indicator Component",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -29,3 +29,3 @@ # react-native-indicator
 
-##### CircleLoader
+##### PulseLoader
 
@@ -38,3 +38,3 @@ | prop | type | default | isRequired | description |
 
-##### PulseLoader
+##### DotsLoader
 
@@ -56,3 +56,3 @@ | prop | type | default | isRequired | description |
 
-##### MultipleDotsLoader
+##### BubblesLoader
 
@@ -63,2 +63,32 @@ | prop | type | default | isRequired | description |
 | color | string | '#1e90ff' | no | the indicator's color |
-| dotRadius | number | 10| no | each dot's size |
+| dotRadius | number | 10 | no | each dot's size |
+
+
+##### CirclesLoader
+
+| prop | type | default | isRequired | description |
+| ---- | ---- | ---- | ---- | ---- |
+| size | number | 40 | no | circle's size |
+| color | string | '#1e90ff' | no | the indicator's color |
+| dotRadius | number | 8 | no | each dot's size |
+
+
+##### BreathingLoader
+
+| prop | type | default | isRequired | description |
+| ---- | ---- | ---- | ---- | ---- |
+| size | number | 10 | no | circle's size |
+| color | string | '#1e90ff' | no | the indicator's color |
+| strokeWidth | number | 3 | no | outline width |
+| frequency | number | 800 | no | scale's frequency |
+
+
+##### RippleLoader
+
+| prop | type | default | isRequired | description |
+| ---- | ---- | ---- | ---- | ---- |
+| size | number | 10 | no | circle's size |
+| color | string | '#1e90ff' | no | the indicator's color |
+| strokeWidth | number | 3 | no | outline width |
+
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28738

increased by116.89%

Number of package files

21

increased by61.54%

Lines of code

783

increased by143.93%

Number of lines in readme file

91

increased by51.67%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes