material-ui-chip-input - npm Package Compare versions

Comparing version 1.0.0-beta.11 to 1.0.0-beta.12

lib/ChipInput.js

@@ -96,2 +96,3 @@ 'use strict';
       display: 'inline-block',
+      flex: '1 0 auto',
       marginTop: 0,
@@ -110,2 +111,5 @@ '&$outlined,&$filled': {
       display: 'inline-block',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
       appearance: 'none', // Remove border in Safari, doesn't seem to break anything in other browsers
@@ -119,2 +123,4 @@ WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated style).
     chipContainer: {
+      display: 'flex',
+      flexFlow: 'row wrap',
       cursor: 'text',
@@ -224,3 +230,4 @@ marginBottom: -2,
       isClean: true,
-      isFocused: false
+      isFocused: false,
+      prevPropsValue: []
     };
@@ -272,3 +279,4 @@
 
-      _this.setState({ keyPressed: false, preventChipCreation: false });
+      _this._keyPressed = false;
+      _this._preventChipCreation = false;
       if (_this.props.onKeyDown) {
@@ -326,3 +334,3 @@ // Needed for arrow controls on menu in autocomplete scenario
     _this.handleKeyUp = function (event) {
-      if (!_this.state.preventChipCreation && _this.props.newChipKeyCodes.indexOf(event.keyCode) > 0 && _this.state.keyPressed) {
+      if (!_this._preventChipCreation && _this.props.newChipKeyCodes.indexOf(event.keyCode) > 0 && _this._keyPressed) {
         _this.clearInput();
@@ -338,3 +346,3 @@ } else {
     _this.handleKeyPress = function (event) {
-      _this.setState({ keyPressed: true });
+      _this._keyPressed = true;
       if (_this.props.onKeyPress) {
@@ -384,14 +392,4 @@ _this.props.onKeyPress(event);
   }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.disabled) {
-        this.setState({ focusedChip: null });
-      }
+    key: 'blur',
 
-      // Lets assume that if the chips have changed, the inputValue should be empty
-      // otherwise, we would need to make inputValue a controlled value. which is quite messy
-      if (nextProps.value && this.props.clearInputValueOnChange && nextProps.value.length !== this.props.value.length) {
-        this.setState({ inputValue: '' });
-      }
-    }
 
@@ -402,5 +400,2 @@ /**
      */
-
-  }, {
-    key: 'blur',
     value: function blur() {
@@ -428,3 +423,3 @@ if (this.input) this.actualInput.blur();
       if (this.props.onBeforeAdd && !this.props.onBeforeAdd(chip)) {
-        this.setState({ preventChipCreation: true });
+        this._preventChipCreation = true;
         return false;
@@ -670,2 +665,21 @@ }
     }
+  }], [{
+    key: 'getDerivedStateFromProps',
+    value: function getDerivedStateFromProps(props, state) {
+      var newState = null;
+
+      if (props.value && props.value.length !== state.prevPropsValue.length) {
+        if (props.clearInputValueOnChange) {
+          newState = { inputValue: '' };
+        } else {
+          newState = { prevPropsValue: props.value };
+        }
+      }
+
+      if (props.disabled) {
+        newState = _extends({}, newState, { focusedChip: null });
+      }
+
+      return newState;
+    }
   }]);
@@ -672,0 +686,0 @@

lib/ChipInput.spec.js

@@ -134,2 +134,18 @@ 'use strict';
 
+describe('controlled mode', function () {
+  it('clears the input when the value changes if clearInputValueOnChange is set', function () {
+    var tree = (0, _enzyme.mount)(_react2.default.createElement(_ChipInput2.default, { value: ['foo'], clearInputValueOnChange: true }));
+    tree.find('input').simulate('change', { target: { value: 'bar' } });
+    tree.setProps({ value: ['foo', 'bar'] });
+    expect(tree.find('input').getDOMNode().value).toBe('');
+  });
+
+  it('keeps the input when the value changes if clearInputValueOnChange is not set', function () {
+    var tree = (0, _enzyme.mount)(_react2.default.createElement(_ChipInput2.default, { value: ['foo'] }));
+    tree.find('input').simulate('change', { target: { value: 'bar' } });
+    tree.setProps({ value: ['foo', 'bar'] });
+    expect(tree.find('input').getDOMNode().value).toBe('bar');
+  });
+});
+
 describe('chip focusing', function () {
@@ -136,0 +152,0 @@ function getFocusedChip(tree) {

package.json

 {
   "name": "material-ui-chip-input",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.12",
   "typings": "typings/index.d.ts",
@@ -5,0 +5,0 @@ "description": "A chip input field using Material-UI.",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

416415

increased by0.24%

Lines of code

1133

increased by2.35%

No dependency changes