From aac016f3c9c84f2ec633de775a8aaaf43bbcffb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dariusz=20=C5=81uksza?= Date: Sat, 21 Oct 2017 14:36:28 +0200 Subject: [PATCH] Always format displayValue with given formatter In some cases when initial value was set to 0 it was not formatted. This lead to inconsistency in UI eg. first number was shown as '0' then as '5%' etc. to '100%' and then back to '0%'. It should always be presented as '0%'. This change ensures that state.displayValue is always formatted with props.formatter. Provided that this property was set, if not it defaults back to 0. --- dist/index.js | 2 +- test/index.js | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/dist/index.js b/dist/index.js index c2b339f..bfb135b 100644 --- a/dist/index.js +++ b/dist/index.js @@ -78,7 +78,7 @@ export default class AnimateNumber extends Component { // default values of state and non-state variables this.state = { value : 0, - displayValue : 0 + displayValue : props.formatter(0) } this.dirty = false; this.startFrom = 0; diff --git a/test/index.js b/test/index.js index 26be557..715ab0b 100644 --- a/test/index.js +++ b/test/index.js @@ -67,6 +67,15 @@ describe('', () => { mount() }) + it('is initial 0 value formatted ?', () => { + let props = { + value : 0, + formatter : (val) => `$ ${val} ^_^`, + } + let wrapper = mount() + expect(wrapper.state().displayValue).to.equal('$ 0 ^_^') + }) + it('does countBy prop works correctly ?', (done) => { let props = { value : Math.random() * 50,