fix(text-field): apply props value when defined and nullish (0, empty…

… string, ...)

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({});
     });

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;

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);
+  });
+
+});