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" + } }