diff --git a/dist/index.js b/dist/index.js
index 489f5a7..f281257 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -5,178 +5,161 @@
// @flow
-import React, { Component } from 'react';
-import {
- Text,
- View
-} from 'react-native';
-import Timer from 'react-timer-mixin';
+import React, { Component } from "react";
+import { Text, View } from "react-native";
+import Timer from "react-timer-mixin";
-const HALF_RAD = Math.PI/2
+const HALF_RAD = Math.PI / 2;
export default class AnimateNumber extends Component {
-
- props : {
- countBy? : ?number,
- interval? : ?number,
- steps? : ?number,
- value : number,
- timing : 'linear' | 'easeOut' | 'easeIn' | () => number,
- formatter : () => {},
- onProgress : () => {},
- onFinish : () => {},
- startAt? : number,
- initialValue? : number
+ props: {
+ countBy?: ?number,
+ interval?: ?number,
+ steps?: ?number,
+ value: number,
+ timing: "linear" | "easeOut" | "easeIn" | (() => number),
+ formatter: () => {},
+ onProgress: () => {},
+ onFinish: () => {},
+ startAt?: number,
+ initialValue?: number,
};
static defaultProps = {
- interval : 14,
- timing : 'linear',
- steps : 45,
- value : 0,
- initialValue : 0,
- formatter : (val) => val,
- onFinish : () => {}
+ interval: 14,
+ timing: "linear",
+ steps: 45,
+ value: 0,
+ initialValue: 0,
+ formatter: (val) => val,
+ onFinish: () => {},
};
static TimingFunctions = {
-
- linear : (interval:number, progress:number):number => {
- return interval
+ linear: (interval: number, progress: number): number => {
+ return interval;
},
- easeOut : (interval:number, progress:number):number => {
- return interval * Math.sin(HALF_RAD*progress) * 5
+ easeOut: (interval: number, progress: number): number => {
+ return interval * Math.sin(HALF_RAD * progress) * 5;
},
- easeIn : (interval:number, progress:number):number => {
- return interval * Math.sin((HALF_RAD - HALF_RAD*progress)) * 5
+ easeIn: (interval: number, progress: number): number => {
+ return interval * Math.sin(HALF_RAD - HALF_RAD * progress) * 5;
},
-
};
- state : {
- value? : ?number,
- displayValue? : ?number
+ state: {
+ value?: ?number,
+ displayValue?: ?number,
};
/**
* Animation direction, true means positive, false means negative.
* @type {bool}
*/
- direction : bool;
+ direction: boolean;
/**
* Start value of last animation.
* @type {number}
*/
- startFrom : number;
+ startFrom: number;
/**
- * End value of last animation.
- * @type {number}
+ * End value of last animation.
+ * @type {number}
*/
- endWith : number;
+ endWith: number;
- constructor(props:any) {
+ constructor(props: any) {
super(props);
// default values of state and non-state variables
this.state = {
- value : props.initialValue,
- displayValue : props.formatter(props.initialValue)
- }
+ value: props.initialValue,
+ displayValue: props.formatter(props.initialValue),
+ };
this.dirty = false;
this.startFrom = 0;
this.endWith = 0;
}
componentDidMount() {
- this.startFrom = this.state.value
- this.endWith = this.props.value
- this.dirty = true
+ this.startFrom = this.state.value;
+ this.endWith = this.props.value;
+ this.dirty = true;
setTimeout(
() => {
- this.startAnimate()
- }
- , this.props.startAt != null ? this.props.startAt : 0);
+ this.startAnimate();
+ },
+ this.props.startAt != null ? this.props.startAt : 0
+ );
}
- componentWillUpdate(nextProps, nextState) {
-
+ UNSAFE_componentWillUpdate(nextProps, nextState) {
// check if start an animation
- if(this.props.value !== nextProps.value) {
- this.startFrom = this.props.value
- this.endWith = nextProps.value
- this.dirty = true
- this.startAnimate()
- return
+ if (this.props.value !== nextProps.value) {
+ this.startFrom = this.props.value;
+ this.endWith = nextProps.value;
+ this.dirty = true;
+ this.startAnimate();
+ return;
}
// Check if iterate animation frame
- if(!this.dirty) {
- return
+ if (!this.dirty) {
+ return;
}
if (this.direction === true) {
- if(parseFloat(this.state.value) <= parseFloat(this.props.value)) {
+ if (parseFloat(this.state.value) <= parseFloat(this.props.value)) {
this.startAnimate();
}
- }
- else if(this.direction === false){
+ } else if (this.direction === false) {
if (parseFloat(this.state.value) >= parseFloat(this.props.value)) {
this.startAnimate();
}
}
-
}
render() {
- return (
-
- {this.state.displayValue}
- )
+ return {this.state.displayValue};
}
startAnimate() {
-
- let progress = this.getAnimationProgress()
+ let progress = this.getAnimationProgress();
Timer.setTimeout(() => {
+ let value = (this.endWith - this.startFrom) / this.props.steps;
+ let sign = value >= 0 ? 1 : -1;
+ if (this.props.countBy) value = sign * Math.abs(this.props.countBy);
+ let total = parseFloat(this.state.value) + parseFloat(value);
- let value = (this.endWith - this.startFrom)/this.props.steps
- let sign = value >= 0 ? 1 : -1
- if(this.props.countBy)
- value = sign*Math.abs(this.props.countBy)
- let total = parseFloat(this.state.value) + parseFloat(value)
-
- this.direction = (value > 0)
+ this.direction = value > 0;
// animation terminate conditions
- if (((this.direction) ^ (total <= this.endWith)) === 1) {
- this.dirty = false
- total = this.endWith
- this.props.onFinish(total, this.props.formatter(total))
+ if ((this.direction ^ (total <= this.endWith)) === 1) {
+ this.dirty = false;
+ total = this.endWith;
+ this.props.onFinish(total, this.props.formatter(total));
}
- if(this.props.onProgress)
- this.props.onProgress(this.state.value, total)
+ if (this.props.onProgress) this.props.onProgress(this.state.value, total);
this.setState({
- value : total,
- displayValue : this.props.formatter(total)
- })
-
- }, this.getTimingFunction(this.props.interval, progress))
-
+ value: total,
+ displayValue: this.props.formatter(total),
+ });
+ }, this.getTimingFunction(this.props.interval, progress));
}
- getAnimationProgress():number {
- return (this.state.value - this.startFrom) / (this.endWith - this.startFrom)
+ getAnimationProgress(): number {
+ return (
+ (this.state.value - this.startFrom) / (this.endWith - this.startFrom)
+ );
}
- getTimingFunction(interval:number, progress:number) {
- if(typeof this.props.timing === 'string') {
- let fn = AnimateNumber.TimingFunctions[this.props.timing]
- return fn(interval, progress)
- } else if(typeof this.props.timing === 'function')
- return this.props.timing(interval, progress)
- else
- return AnimateNumber.TimingFunctions['linear'](interval, progress)
+ getTimingFunction(interval: number, progress: number) {
+ if (typeof this.props.timing === "string") {
+ let fn = AnimateNumber.TimingFunctions[this.props.timing];
+ return fn(interval, progress);
+ } else if (typeof this.props.timing === "function")
+ return this.props.timing(interval, progress);
+ else return AnimateNumber.TimingFunctions["linear"](interval, progress);
}
-
}
diff --git a/dist/package.json b/dist/package.json
index adb02b2..8679aa2 100644
--- a/dist/package.json
+++ b/dist/package.json
@@ -1,9 +1,9 @@
{
- "name": "react-native-animate-number",
- "version": "0.1.2",
+ "name": "@totum/react-native-animate-number",
+ "version": "0.2.0-rc.0",
"description": "",
"main": "index.js",
- "author": "wkh237",
+ "author": "mboperator",
"license": "MIT",
"dependencies": {
"react-timer-mixin": "^0.13.3"
@@ -15,7 +15,7 @@
"number",
"animation"
],
- "repository": {
- "url": "https://github.com/wkh237/react-native-fetch-blob.git"
- }
+ "repository": {
+ "url": "https://github.com/totum-tech/react-native-animate-number.git"
+ }
}