@cimpress/react-components - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

CHANGELOG.md

@@ -5,2 +5,20 @@ # MCP MEX React Components
 
+### 1.0.1
+###### 2017-09-28
+#### Bugfixes:
+##### TextField:
+* user deletes the text and then the label stops floating even though the component is still focused
+
+![alt bug-1](img/textfield/bug-1.png)
+* label does not float if passed an untruthy value
+
+![alt bug-2](img/textfield/bug-2.png)
+* TextField is changing an uncontrolled input of type text to be controlled...
+
+![alt bug-3](img/textfield/bug-3.png)
+
+* provide `value` in props, then pass new props without providing `value` - label does not float
+
+![alt bug-4](img/textfield/bug-4.png)
+
 ### 1.0.x
@@ -7,0 +25,0 @@ ###### 2017-09-18

lib/TextField.js

@@ -25,2 +25,6 @@ 'use strict';
 
+var isTextTruthy = function isTextTruthy(val) {
+  return val !== undefined && val !== null && val.toString() !== '';
+};
+
 var TextField = function (_Component) {
@@ -34,5 +38,6 @@ _inherits(TextField, _Component);
 
-    _this.state = { float: false };
+    _this.state = { float: false, hasFocus: false };
     _this.handleBlur = _this.handleBlur.bind(_this);
     _this.handleFocus = _this.handleFocus.bind(_this);
+    _this.handleShouldFloat = _this.handleShouldFloat.bind(_this);
     return _this;
@@ -44,8 +49,8 @@ }
     value: function handleBlur(e) {
-      if (!this.props.value) {
-        this.setState({ float: false });
-      }
-      if (this.props.onBlur) {
-        this.props.onBlur(e);
-      }
+      var _this2 = this;
+
+      this.setState({ hasFocus: false }, function () {
+        return _this2.handleShouldFloat(_this2.props.value);
+      });
+      this.props.onBlur && this.props.onBlur(e);
     }
@@ -55,11 +60,15 @@ }, {
     value: function handleFocus(e) {
-      this.setState({ float: true });
-      if (this.props.onFocus) {
-        this.props.onFocus(e);
-      }
+      this.setState({ hasFocus: true, float: true });
+      this.props.onFocus && this.props.onFocus(e);
     }
   }, {
+    key: 'handleShouldFloat',
+    value: function handleShouldFloat(value) {
+      var float = this.state.hasFocus || isTextTruthy(value);
+      this.setState({ float: float });
+    }
+  }, {
     key: 'componentWillMount',
     value: function componentWillMount() {
-      this.props.value && this.setState({ float: true });
+      this.handleShouldFloat(this.props.value);
 
@@ -74,4 +83,3 @@ // build a unique ID for this field in case one was not provided
     value: function componentWillReceiveProps(props) {
-      var shouldFloat = props.value === 0 || Boolean(props.value);
-      this.setState({ float: shouldFloat ? true : false });
+      this.handleShouldFloat(props.value);
     }
@@ -170,3 +178,4 @@ }, {
   className: '',
-  type: 'text'
+  type: 'text',
+  value: ''
 };

package.json

 {
   "name": "@cimpress/react-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React components to support the MCP styleguide",
@@ -32,2 +32,3 @@ "main": "lib/index.js",
     "babel-eslint": "^7.1.1",
+    "babel-jest": "^21.2.0",
     "babel-loader": "^6.2.8",
@@ -41,2 +42,5 @@ "babel-preset-es2015": "^6.18.0",
     "del": "^3.0.0",
+    "enzyme": "^3.0.0",
+    "enzyme-adapter-react-15": "^1.0.0",
+    "enzyme-to-json": "^3.0.1",
     "eslint": "^3.16.1",
@@ -49,2 +53,3 @@ "eslint-plugin-react": "^6.10.0",
     "jest": "^21.1.0",
+    "jest-enzyme": "^4.0.0",
     "lint-staged": "^3.4.1",
@@ -75,3 +80,6 @@ "postcss-loader": "^1.3.2",
     "doc": "docs"
+  },
+  "jest": {
+    "setupTestFrameworkScriptFile": "./setupTests.js"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

300498

increased by15.96%

Number of package files

44

increased by12.82%

Lines of code

3998

increased by0.28%

Worsened metrics

Dev dependency count

36

increased by16.13%

No dependency changes