From 5bd55ca40cb0bbe36172f3e5505ea3ceed3c958a Mon Sep 17 00:00:00 2001 From: Ugo Stephant Date: Wed, 29 May 2019 09:55:39 +0200 Subject: [PATCH] fix(text-field): apply props value when defined and nullish (0, empty string, ...) --- src/TextField.js | 18 ++++++++-------- src/utils.js | 6 ++++++ tests/utils.test.js | 51 +++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 66 insertions(+), 9 deletions(-) diff --git a/src/TextField.js b/src/TextField.js index 9a7c0119b..cc052bfd4 100644 --- a/src/TextField.js +++ b/src/TextField.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { inject } from './style'; -import { omit, classNames } from './utils'; +import { omit, exists, classNames } from './utils'; import styles from './theme/components/TextField.styl'; class TextField extends React.Component { @@ -50,10 +50,10 @@ class TextField extends React.Component { input = null state = { - dirty: !!this.props.value, + dirty: false, focused: false, - valid: this.props.valid || true, - value: this.props.value || '', + valid: exists(this.props.valid) ? this.props.valid : true, + value: exists(this.props.value) ? this.props.value : '', }; constructor(props) { @@ -65,7 +65,7 @@ class TextField extends React.Component { if (this.props.value !== prevProps.value) { this.setState({ value: this.props.value, - dirty: !!this.props.value, + dirty: exists(this.props.value), }); } } @@ -88,7 +88,7 @@ class TextField extends React.Component { this.setState({ focused: true, - dirty: !!value, + dirty: exists(value), }); return true; } @@ -112,7 +112,7 @@ class TextField extends React.Component { this.setState({ focused: false, - dirty: !!value, + dirty: exists(value), }); return true; @@ -141,8 +141,8 @@ class TextField extends React.Component { reset() { this.setState({ focused: false, - value: this.props.value || '', - valid: this.props.valid || true, + value: exists(this.props.value) ? this.props.value : '', + valid: exists(this.props.valid) ? this.props.valid : true, }, () => { this.props.onChange({}); }); diff --git a/src/utils.js b/src/utils.js index eb58f5687..cbdc10506 100644 --- a/src/utils.js +++ b/src/utils.js @@ -297,3 +297,9 @@ export const classNames = (...args) => { return classes.join(' '); }; + +export const exists = v => !isNull(v) && !isUndefined(v); + +export const isUndefined = v => typeof v === 'undefined'; + +export const isNull = v => v === null; diff --git a/tests/utils.test.js b/tests/utils.test.js index d84c70a41..d4a757ce5 100644 --- a/tests/utils.test.js +++ b/tests/utils.test.js @@ -13,6 +13,9 @@ import { stringifyColor, getContainerNode, classNames, + isNull, + isUndefined, + exists, } from '../src/utils'; describe('injectStyles(styles, options = {})', () => { @@ -356,3 +359,51 @@ describe('classNames(...classes)', () => { }); }); + +describe('isNull(value)', () => { + + it('should return true when value is null', () => { + expect(isNull(null)).toBe(true); + }); + + it('should return false when value is undefined', () => { + expect(isNull()).toBe(false); + }); + + it('should return false when value is defined and not null', () => { + expect(isNull(true)).toBe(false); + }); + +}); + +describe('isUndefined(value)', () => { + + it('should return true when value is undefined', () => { + expect(isUndefined()).toBe(true); + }); + + it('should return false when value is null', () => { + expect(isUndefined(null)).toBe(false); + }); + + it('should return false when value is defined and not null', () => { + expect(isUndefined(true)).toBe(false); + }); + +}); + +describe('exists(value)', () => { + + it('should return true when value is defined and not null', () => { + expect(exists(0)).toBe(true); + }); + + it('should return false when value is null', () => { + expect(exists(null)).toBe(false); + }); + + it('should return false when value is not defined', () => { + expect(exists()).toBe(false); + }); + +});