formsy-material-ui - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

lib/FormsyCheckbox.js

@@ -54,13 +54,9 @@ 'use strict';
   render: function render() {
-    var _props = this.props;
-    var defaultChecked = _props.defaultChecked;
-    var // eslint-disable-line no-unused-vars
-    validations = _props.validations;
-    var // eslint-disable-line no-unused-vars
-    validationErrors = _props.validationErrors;
-    var // eslint-disable-line no-unused-vars
-    validationError = _props.validationError;
+    var _props = this.props,
+        defaultChecked = _props.defaultChecked,
+        validations = _props.validations,
+        validationErrors = _props.validationErrors,
+        validationError = _props.validationError,
+        rest = _objectWithoutProperties(_props, ['defaultChecked', 'validations', 'validationErrors', 'validationError']);
 
-    var rest = _objectWithoutProperties(_props, ['defaultChecked', 'validations', 'validationErrors', 'validationError']);
-
     var value = this.getValue();
@@ -67,0 +63,0 @@

lib/FormsyDate.js

@@ -61,13 +61,9 @@ 'use strict';
   render: function render() {
-    var _props = this.props;
-    var defaultDate = _props.defaultDate;
-    var // eslint-disable-line no-unused-vars
-    validations = _props.validations;
-    var // eslint-disable-line no-unused-vars
-    validationErrors = _props.validationErrors;
-    var // eslint-disable-line no-unused-vars
-    validationError = _props.validationError;
+    var _props = this.props,
+        defaultDate = _props.defaultDate,
+        validations = _props.validations,
+        validationErrors = _props.validationErrors,
+        validationError = _props.validationError,
+        rest = _objectWithoutProperties(_props, ['defaultDate', 'validations', 'validationErrors', 'validationError']);
 
-    var rest = _objectWithoutProperties(_props, ['defaultDate', 'validations', 'validationErrors', 'validationError']);
-
     return _react2.default.createElement(_DatePicker2.default, _extends({}, rest, {
@@ -74,0 +70,0 @@ errorText: this.getErrorMessage(),

lib/FormsyRadioGroup.js

@@ -31,2 +31,3 @@ 'use strict';
     children: _react2.default.PropTypes.node,
+    defaultSelected: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number, _react2.default.PropTypes.bool]),
     name: _react2.default.PropTypes.string.isRequired,
@@ -36,3 +37,4 @@ onChange: _react2.default.PropTypes.func,
     validationErrors: _react2.default.PropTypes.object,
-    validations: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object])
+    validations: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
+    value: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number, _react2.default.PropTypes.bool])
   },
@@ -54,11 +56,10 @@
   render: function render() {
-    var _props = this.props;
-    var validations = _props.validations;
-    var // eslint-disable-line no-unused-vars
-    validationError = _props.validationError;
-    var // eslint-disable-line no-unused-vars
-    validationErrors = _props.validationErrors;
+    var _props = this.props,
+        validations = _props.validations,
+        validationError = _props.validationError,
+        validationErrors = _props.validationErrors,
+        defaultSelected = _props.defaultSelected,
+        value = _props.value,
+        rest = _objectWithoutProperties(_props, ['validations', 'validationError', 'validationErrors', 'defaultSelected', 'value']);
 
-    var rest = _objectWithoutProperties(_props, ['validations', 'validationError', 'validationErrors']);
-
     // remove unknown props from children
@@ -68,14 +69,19 @@
     var children = _react2.default.Children.map(this.props.children, function (radio) {
-      var _radio$props = radio.props;
-      var validations = _radio$props.validations;
-      var // eslint-disable-line no-unused-vars
-      validationError = _radio$props.validationError;
-      var // eslint-disable-line no-unused-vars
-      validationErrors = _radio$props.validationErrors;
+      var _radio$props = radio.props,
+          validations = _radio$props.validations,
+          validationError = _radio$props.validationError,
+          validationErrors = _radio$props.validationErrors,
+          rest = _objectWithoutProperties(_radio$props, ['validations', 'validationError', 'validationErrors']);
 
-      var rest = _objectWithoutProperties(_radio$props, ['validations', 'validationError', 'validationErrors']);
-
       return _react2.default.createElement(_RadioButton.RadioButton, rest);
     });
 
+    // For backward compatibility or for
+    // users used to MaterialUI, use the "defaultSelected"
+    // attribute for the "value" if the value was not
+    // explicitly set.
+    if (typeof value === 'undefined') {
+      value = defaultSelected;
+    }
+
     return _react2.default.createElement(
@@ -85,3 +91,5 @@ _RadioButton.RadioButtonGroup,
         ref: this.setMuiComponentAndMaybeFocus,
-        onChange: this.handleValueChange
+        onChange: this.handleValueChange,
+        valueSelected: this.getValue(),
+        defaultSelected: value
       }),
@@ -88,0 +96,0 @@ children

lib/FormsySelect.js

@@ -63,10 +63,8 @@ 'use strict';
     var value = this.props.value;
-    var _props = this.props;
-    var validations = _props.validations;
-    var // eslint-disable-line no-unused-vars
-    validationError = _props.validationError;
-    var // eslint-disable-line no-unused-vars
-    validationErrors = _props.validationErrors;
 
-    var rest = _objectWithoutProperties(_props, ['validations', 'validationError', 'validationErrors']);
+    var _props = this.props,
+        validations = _props.validations,
+        validationError = _props.validationError,
+        validationErrors = _props.validationErrors,
+        rest = _objectWithoutProperties(_props, ['validations', 'validationError', 'validationErrors']);
 
@@ -73,0 +71,0 @@ value = this.state.hasChanged ? this.getValue() : value;

lib/FormsyText.js

@@ -42,2 +42,3 @@ 'use strict';
     updateImmediately: _react2.default.PropTypes.bool,
+    validationColor: _react2.default.PropTypes.string,
     validationError: _react2.default.PropTypes.string,
@@ -52,3 +53,4 @@ validationErrors: _react2.default.PropTypes.object,
   getInitialState: function getInitialState() {
-    return { value: this.controlledValue() };
+    var value = this.controlledValue();
+    return { value: value };
   },
@@ -62,4 +64,6 @@ componentWillMount: function componentWillMount() {
       var value = this.controlledValue(nextProps);
+      var isValid = this.isValidValue(value);
+
       if (isValueChanging || this.props.defaultValue === this.getValue()) {
-        this.setState({ value: value });
+        this.setState({ value: value, isValid: isValid });
         this.setValue(value);
@@ -75,13 +79,17 @@ }
       var value = this.controlledValue(nextProps);
+      var isValid = this.isValidValue(value);
       this.setValue(value);
-      this.setState({ value: value });
+      this.setState({ value: value, isValid: isValid });
     }
   },
   controlledValue: function controlledValue() {
-    var props = arguments.length <= 0 || arguments[0] === undefined ? this.props : arguments[0];
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
 
     return props.value || props.defaultValue || '';
   },
+  validationColor: function validationColor() {
+    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
 
-
+    return props.validationColor || '#4CAF50';
+  },
   handleBlur: function handleBlur(event) {
@@ -92,3 +100,2 @@ this.setValue(event.currentTarget.value);
   },
-
   handleChange: function handleChange(event) {
@@ -110,5 +117,3 @@ // Update the value (and so display any error) after a timeout.
           // If it becomes invalid, and there isn't an error message, invalidate without error.
-        } else {
-            this.resetValue();
-          }
+        }
       }
@@ -118,6 +123,5 @@ }
     // Controlled component
-    this.setState({ value: event.currentTarget.value });
+    this.setState({ value: event.currentTarget.value, isValid: this.isValidValue(event.currentTarget.value) });
     if (this.props.onChange) this.props.onChange(event, event.currentTarget.value);
   },
-
   handleKeyDown: function handleKeyDown(event) {
@@ -128,20 +132,15 @@ if ((0, _keycode2.default)(event) === 'enter') this.setValue(event.currentTarget.value);
 
+
   setMuiComponentAndMaybeFocus: _utils.setMuiComponentAndMaybeFocus,
 
   render: function render() {
-    var _props = this.props;
-    var defaultValue = _props.defaultValue;
-    var // eslint-disable-line no-unused-vars
-    updateImmediately = _props.updateImmediately;
-    var // eslint-disable-line no-unused-vars
-    validations = _props.validations;
-    var // eslint-disable-line no-unused-vars
-    validationError = _props.validationError;
-    var // eslint-disable-line no-unused-vars
-    validationErrors = _props.validationErrors;
-    var // eslint-disable-line no-unused-vars
-    value = _props.value;
+    var _props = this.props,
+        defaultValue = _props.defaultValue,
+        updateImmediately = _props.updateImmediately,
+        validations = _props.validations,
+        validationError = _props.validationError,
+        validationErrors = _props.validationErrors,
+        value = _props.value,
+        rest = _objectWithoutProperties(_props, ['defaultValue', 'updateImmediately', 'validations', 'validationError', 'validationErrors', 'value']);
 
-    var rest = _objectWithoutProperties(_props, ['defaultValue', 'updateImmediately', 'validations', 'validationError', 'validationErrors', 'value']);
-
     return _react2.default.createElement(_TextField2.default, _extends({}, rest, {
@@ -153,3 +152,5 @@ errorText: this.getErrorMessage(),
       ref: this.setMuiComponentAndMaybeFocus,
-      value: this.state.value
+      value: this.state.value,
+      underlineStyle: this.state.isValid ? { color: this.validationColor() } : {},
+      underlineFocusStyle: this.state.isValid ? { color: this.validationColor() } : {}
     }));
@@ -156,0 +157,0 @@ }

lib/FormsyTime.js

@@ -61,13 +61,9 @@ 'use strict';
   render: function render() {
-    var _props = this.props;
-    var defaultTime = _props.defaultTime;
-    var // eslint-disable-line no-unused-vars
-    validations = _props.validations;
-    var // eslint-disable-line no-unused-vars
-    validationError = _props.validationError;
-    var // eslint-disable-line no-unused-vars
-    validationErrors = _props.validationErrors;
+    var _props = this.props,
+        defaultTime = _props.defaultTime,
+        validations = _props.validations,
+        validationError = _props.validationError,
+        validationErrors = _props.validationErrors,
+        rest = _objectWithoutProperties(_props, ['defaultTime', 'validations', 'validationError', 'validationErrors']);
 
-    var rest = _objectWithoutProperties(_props, ['defaultTime', 'validations', 'validationError', 'validationErrors']);
-
     return _react2.default.createElement(_TimePicker2.default, _extends({}, rest, {
@@ -74,0 +70,0 @@ errorText: this.getErrorMessage(),

lib/FormsyToggle.js

@@ -54,12 +54,9 @@ 'use strict';
   render: function render() {
-    var _props = this.props;
-    var defaultToggled = _props.defaultToggled;
-    var validations = _props.validations;
-    var // eslint-disable-line no-unused-vars
-    validationError = _props.validationError;
-    var // eslint-disable-line no-unused-vars
-    validationErrors = _props.validationErrors;
+    var _props = this.props,
+        defaultToggled = _props.defaultToggled,
+        validations = _props.validations,
+        validationError = _props.validationError,
+        validationErrors = _props.validationErrors,
+        rest = _objectWithoutProperties(_props, ['defaultToggled', 'validations', 'validationError', 'validationErrors']);
 
-    var rest = _objectWithoutProperties(_props, ['defaultToggled', 'validations', 'validationError', 'validationErrors']);
-
     var value = this.getValue();
@@ -66,0 +63,0 @@

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.FormsyToggle = exports.FormsyTime = exports.FormsyText = exports.FormsySelect = exports.FormsyRadioGroup = exports.FormsyRadio = exports.FormsyDate = exports.FormsyCheckbox = undefined;
+exports.FormsyAutoComplete = exports.FormsyToggle = exports.FormsyTime = exports.FormsyText = exports.FormsySelect = exports.FormsyRadioGroup = exports.FormsyRadio = exports.FormsyDate = exports.FormsyCheckbox = undefined;
 
@@ -41,2 +41,6 @@ var _FormsyCheckbox2 = require('./FormsyCheckbox');
 
+var _FormsyAutoComplete2 = require('./FormsyAutoComplete');
+
+var _FormsyAutoComplete3 = _interopRequireDefault(_FormsyAutoComplete2);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -51,2 +55,3 @@
 exports.FormsyTime = _FormsyTime3.default;
-exports.FormsyToggle = _FormsyToggle3.default;
+exports.FormsyToggle = _FormsyToggle3.default;
+exports.FormsyAutoComplete = _FormsyAutoComplete3.default;

package.json

 {
   "name": "formsy-material-ui",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "A formsy-react compatibility wrapper for Material-UI form components.",
@@ -26,3 +26,3 @@ "main": "./lib/index.js",
     "formsy-react": "^0.18.0",
-    "material-ui": "^0.15.0",
+    "material-ui": "^0.16.0",
     "react": "^15.0.0",
@@ -40,3 +40,2 @@ "react-dom": "^15.0.0"
     "babel-preset-stage-1": "^6.3.13",
-    "formsy-react": "^0.18.0",
     "chai": "^3.5.0",
@@ -49,2 +48,3 @@ "chai-enzyme": "^0.4.0",
     "eslint-plugin-react": "^4.0.0",
+    "formsy-react": "^0.18.0",
     "json-loader": "^0.5.4",
@@ -61,3 +61,3 @@ "karma": "^0.13.19",
     "karma-webpack": "^1.7.0",
-    "material-ui": "^0.15.0",
+    "material-ui": "^0.16.0",
     "mocha": "^2.4.5",
@@ -68,3 +68,3 @@ "phantomjs-prebuilt": "^2.1.4",
     "react-dom": "^15.0.0",
-    "react-tap-event-plugin": "1.0",
+    "react-tap-event-plugin": "^2.0.1",
     "sinon": "^1.17.3",
@@ -71,0 +71,0 @@ "sinon-chai": "^2.8.0",

README.md

@@ -1,2 +0,2 @@
-# formsy-material-ui [![npm version](https://badge.fury.io/js/formsy-material-ui.svg)](https://badge.fury.io/js/formsy-material-ui)
+# formsy-material-ui [![npm version](https://badge.fury.io/js/formsy-material-ui.svg)](https://badge.fury.io/js/formsy-material-ui) [![Build Status](https://travis-ci.org/mbrookes/formsy-material-ui.svg?branch=master)](https://travis-ci.org/mbrookes/formsy-material-ui)
 
@@ -35,2 +35,3 @@ This library is a wrapper for [Material-UI](http://material-ui.com/) form components to allow them to be used
 import FormsyToggle from 'formsy-material-ui/lib/FormsyToggle';
+import FormsyAutoComplete from 'formsy-material-ui/lib/FormsyAutoComplete';
 ```
@@ -42,3 +43,3 @@
 import { FormsyCheckbox, FormsyDate, FormsyRadio, FormsyRadioGroup, 
-  FormsySelect, FormsyText, FormsyTime, FormsyToggle } from 'formsy-material-ui/lib';
+  FormsySelect, FormsyText, FormsyTime, FormsyToggle, FormsyAutoComplete } from 'formsy-material-ui/lib';
 ```
@@ -45,0 +46,0 @@

src/FormsyRadioGroup.jsx

@@ -10,2 +10,3 @@ import React from 'react';
     children: React.PropTypes.node,
+    defaultSelected: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number, React.PropTypes.bool]),
     name: React.PropTypes.string.isRequired,
@@ -16,2 +17,3 @@ onChange: React.PropTypes.func,
     validations: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.object]),
+    value: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number, React.PropTypes.bool]),
   },
@@ -33,6 +35,8 @@
   render() {
-    const {
-      validations, // eslint-disable-line no-unused-vars
-      validationError, // eslint-disable-line no-unused-vars
-      validationErrors, // eslint-disable-line no-unused-vars
+    let {
+      validations, // eslint-disable-line no-unused-vars, prefer-const
+      validationError, // eslint-disable-line no-unused-vars, prefer-const
+      validationErrors, // eslint-disable-line no-unused-vars, prefer-const
+      defaultSelected, // eslint-disable-line prefer-const
+      value,
       ...rest } = this.props;
@@ -51,2 +55,10 @@
 
+    // For backward compatibility or for
+    // users used to MaterialUI, use the "defaultSelected"
+    // attribute for the "value" if the value was not
+    // explicitly set.
+    if (typeof value === 'undefined') {
+      value = defaultSelected;
+    }
+
     return (
@@ -57,2 +69,4 @@ <RadioButtonGroup
         onChange={this.handleValueChange}
+        valueSelected={this.getValue()}
+        defaultSelected={value}
       >
@@ -59,0 +73,0 @@ {children}

src/FormsyText.jsx

@@ -16,2 +16,3 @@ import React from 'react';
     updateImmediately: React.PropTypes.bool,
+    validationColor: React.PropTypes.string,
     validationError: React.PropTypes.string,
@@ -25,5 +26,5 @@ validationErrors: React.PropTypes.object,
 
-
   getInitialState() {
-    return { value: this.controlledValue() };
+    const value = this.controlledValue();
+    return { value };
   },
@@ -39,4 +40,6 @@
       const value = this.controlledValue(nextProps);
+      const isValid = this.isValidValue(value);
+
       if (isValueChanging || this.props.defaultValue === this.getValue()) {
-        this.setState({ value });
+        this.setState({ value, isValid });
         this.setValue(value);
@@ -52,4 +55,5 @@ }
       const value = this.controlledValue(nextProps);
+      const isValid = this.isValidValue(value);
       this.setValue(value);
-      this.setState({ value });
+      this.setState({ value, isValid });
     }
@@ -62,3 +66,7 @@ },
 
-  handleBlur: function handleBlur(event) {
+  validationColor(props = this.props) {
+    return props.validationColor || '#4CAF50';
+  },
+
+  handleBlur(event) {
     this.setValue(event.currentTarget.value);
@@ -69,3 +77,3 @@ delete this.changeValue;
 
-  handleChange: function handleChange(event) {
+  handleChange(event) {
     // Update the value (and so display any error) after a timeout.
@@ -86,4 +94,2 @@ if (this.props.updateImmediately) {
           // If it becomes invalid, and there isn't an error message, invalidate without error.
-        } else {
-          this.resetValue();
         }
@@ -94,7 +100,7 @@ }
     // Controlled component
-    this.setState({ value: event.currentTarget.value });
+    this.setState({ value: event.currentTarget.value, isValid: this.isValidValue(event.currentTarget.value) });
     if (this.props.onChange) this.props.onChange(event, event.currentTarget.value);
   },
 
-  handleKeyDown: function handleKeyDown(event) {
+  handleKeyDown(event) {
     if (keycode(event) === 'enter') this.setValue(event.currentTarget.value);
@@ -126,2 +132,4 @@ if (this.props.onKeyDown) this.props.onKeyDown(event, event.currentTarget.value);
         value={this.state.value}
+        underlineStyle={this.state.isValid ? { color: this.validationColor() } : {}}
+        underlineFocusStyle={this.state.isValid ? { color: this.validationColor() } : {}}
       />
@@ -128,0 +136,0 @@ );

src/index.jsx

@@ -9,1 +9,2 @@ export FormsyCheckbox from './FormsyCheckbox';
 export FormsyToggle from './FormsyToggle';
+export FormsyAutoComplete from './FormsyAutoComplete';

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56056

14.31%

Number of package files

26

8.33%

Lines of code

1103

15.86%

Number of lines in readme file

79

1.28%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes