form-lib - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

lib/createFormControl.js

@@ -15,2 +15,12 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _lodash = require('lodash');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
+var _BrowserDetection = require('./utils/BrowserDetection');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,15 +36,33 @@
 
+function isTextField(target) {
+  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
+}
+
 function createFormControl(Component) {
 
-  var isChrome = !!window.chrome && !!window.chrome.webstore;
+  // if now is in composition session
   var isOnComposition = false;
 
-  return function (_React$Component) {
-    _inherits(_class, _React$Component);
+  // for safari use only, innervalue can't setState when compositionend occurred
+  var isInnerChangeFromOnChange = false;
 
-    function _class(props, context) {
-      _classCallCheck(this, _class);
+  var propTypes = {
+    value: _propTypes2.default.any,
+    defaultValue: _propTypes2.default.any,
+    onChange: _propTypes2.default.func
+  };
 
-      var _this = _possibleConstructorReturn(this, (_class.__proto__ || Object.getPrototypeOf(_class)).call(this, props, context));
+  var FormControl = function (_React$Component) {
+    _inherits(FormControl, _React$Component);
 
+    function FormControl(props, context) {
+      _classCallCheck(this, FormControl);
+
+      var _this = _possibleConstructorReturn(this, (FormControl.__proto__ || Object.getPrototypeOf(FormControl)).call(this, props, context));
+
+      var value = props.value || props.defaultValue || '';
+      _this.state = {
+        inputValue: value,
+        innerValue: value
+      };
       _this.handleChange = _this.handleChange.bind(_this);
@@ -45,22 +73,10 @@ _this.handleComposition = _this.handleComposition.bind(_this);
 
-    _createClass(_class, [{
-      key: 'handleComposition',
-      value: function handleComposition(e) {
-        var onChange = this.props.onChange;
-
-        if (e.type === 'compositionend') {
-          // composition is end
-          isOnComposition = false;
-          /**
-           * fixed for Chrome v53+ and detect all Chrome
-           * https://chromium.googlesource.com/chromium/src/afce9d93e76f2ff81baaa088a4ea25f67d1a76b3%5E%21/
-           */
-
-          if (e.target instanceof HTMLInputElement && !isOnComposition && isChrome) {
-            // fire onChange
-            onChange && onChange(e.target.value);
-          }
-        } else {
-          // in composition
-          isOnComposition = true;
+    _createClass(FormControl, [{
+      key: 'componentWillReceiveProps',
+      value: function componentWillReceiveProps(nextProps) {
+        if (!_lodash2.default.isEqual(nextProps.value, this.props.value)) {
+          this.state = {
+            inputValue: nextProps.value,
+            innerValue: nextProps.value
+          };
         }
@@ -74,12 +90,73 @@ }
 
-        var isInput = e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement;
         var value = e.target.value;
+        // Flow check
+        if (!isTextField(e.target)) {
+          onChange(value);
+          return;
+        }
 
-        if (isInput && !isOnComposition) {
+        if (isInnerChangeFromOnChange) {
+          this.setState({
+            inputValue: value,
+            innerValue: value
+          });
           onChange(value);
-        } else if (!isInput) {
+          isInnerChangeFromOnChange = false;
+          return;
+        }
+
+        // when is on composition, change inputValue only
+        // when not in composition change inputValue and innerValue both
+        if (!isOnComposition) {
+          this.setState({
+            inputValue: value,
+            innerValue: value
+          });
           onChange(value);
+        } else {
+          this.setState({ inputValue: value });
         }
+      }
+    }, {
+      key: 'handleComposition',
+      value: function handleComposition(e) {
+        var _props$onChange2 = this.props.onChange,
+            onChange = _props$onChange2 === undefined ? function () {} : _props$onChange2;
 
-        isOnComposition = false;
+        // Flow check
+
+        if (!isTextField(e.target)) {
+          return;
+        }
+
+        if (e.type === 'compositionend') {
+
+          var value = e.target.value;
+          // Chrome is ok for only setState innerValue
+          // Opera, IE and Edge is like Chrome
+          if (_BrowserDetection.isChrome || _BrowserDetection.isIE || _BrowserDetection.isEdge || _BrowserDetection.isOpera) {
+            this.setState({ innerValue: value });
+            onChange(value);
+          }
+
+          // Firefox need to setState inputValue again...
+          if (_BrowserDetection.isFirefox) {
+            this.setState({
+              innerValue: value,
+              inputValue: value
+            });
+            onChange(value);
+          }
+
+          // Safari think e.target.value in composition event is keyboard char,
+          //  but it will fired another change after compositionend
+          if (_BrowserDetection.isSafari) {
+            // do change in the next change event
+            isInnerChangeFromOnChange = true;
+          }
+
+          isOnComposition = false;
+        } else {
+          isOnComposition = true;
+        }
       }
@@ -91,4 +168,9 @@ }, {
             className = _props.className,
-            props = _objectWithoutProperties(_props, ['className']);
+            value = _props.value,
+            props = _objectWithoutProperties(_props, ['className', 'value']);
 
+        if (!_lodash2.default.isUndefined(value)) {
+          props.value = this.state.inputValue;
+        }
+
         return _react2.default.createElement(Component, _extends({}, props, {
@@ -104,6 +186,11 @@ className: 'form-control ' + className,
 
-    return _class;
+    return FormControl;
   }(_react2.default.Component);
+
+  FormControl.propTypes = propTypes;
+  FormControl.displayName = 'FormControlField';
+
+  return FormControl;
 }
 
 exports.default = createFormControl;

lib/Field.js

@@ -15,4 +15,6 @@ 'use strict';
 
-var _reactDom = require('react-dom');
+var _propTypes = require('prop-types');
 
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _elementType = require('./utils/elementType');
@@ -37,3 +39,3 @@
 var propTypes = {
-  name: _react.PropTypes.string.isRequired,
+  name: _propTypes2.default.string.isRequired,
   accepter: _elementType2.default
@@ -54,3 +56,3 @@ };
 
-    if (!context._form) {
+    if (!context.form) {
       throw new Error('Field must be inside a component decorated with <Form>');
@@ -63,7 +65,7 @@ }
 
-    var _context$_form = context._form,
-        _context$_form$values = _context$_form.values,
-        values = _context$_form$values === undefined ? {} : _context$_form$values,
-        _context$_form$defaul = _context$_form.defaultValues,
-        defaultValues = _context$_form$defaul === undefined ? {} : _context$_form$defaul;
+    var _context$form = context.form,
+        _context$form$values = _context$form.values,
+        values = _context$form$values === undefined ? {} : _context$form$values,
+        _context$form$default = _context$form.defaultValues,
+        defaultValues = _context$form$default === undefined ? {} : _context$form$default;
 
@@ -86,5 +88,5 @@ var name = props.name;
       var name = this.props.name;
-      var _context$_form2 = this.context._form,
-          onFieldChange = _context$_form2.onFieldChange,
-          checkTrigger = _context$_form2.checkTrigger;
+      var _context$form2 = this.context.form,
+          onFieldChange = _context$form2.onFieldChange,
+          checkTrigger = _context$form2.checkTrigger;
 
@@ -99,4 +101,3 @@ var checkResult = this.handleFieldCheck(value, checkTrigger === 'change');
     value: function handleFieldBlur() {
-      var name = this.props.name;
-      var checkTrigger = this.context._form.checkTrigger;
+      var checkTrigger = this.context.form.checkTrigger;
 
@@ -109,6 +110,6 @@ this.handleFieldCheck(this.state.value, checkTrigger === 'blur');
       var name = this.props.name;
-      var _context$_form3 = this.context._form,
-          onFieldError = _context$_form3.onFieldError,
-          onFieldSuccess = _context$_form3.onFieldSuccess,
-          model = _context$_form3.model;
+      var _context$form3 = this.context.form,
+          onFieldError = _context$form3.onFieldError,
+          onFieldSuccess = _context$form3.onFieldSuccess,
+          model = _context$form3.model;
 
@@ -136,11 +137,11 @@
 
-      var _context$_form4 = this.context._form,
-          _context$_form4$value = _context$_form4.values,
-          values = _context$_form4$value === undefined ? {} : _context$_form4$value,
-          _context$_form4$defau = _context$_form4.defaultValues,
-          defaultValues = _context$_form4$defau === undefined ? {} : _context$_form4$defau;
+      var _context$form4 = this.context.form,
+          _context$form4$values = _context$form4.values,
+          values = _context$form4$values === undefined ? {} : _context$form4$values,
+          _context$form4$defaul = _context$form4.defaultValues,
+          defaultValues = _context$form4$defaul === undefined ? {} : _context$form4$defaul;
       var checkResult = this.state.checkResult;
 
 
-      return _react2.default.createElement(Component, _extends({
+      return _react2.default.createElement(Component, _extends({}, props, {
         onChange: this.handleFieldChange,
@@ -152,3 +153,3 @@ onBlur: this.handleFieldBlur,
         value: values[name]
-      }, props));
+      }));
     }
@@ -163,5 +164,5 @@ }]);
 Field.contextTypes = {
-  _form: _react.PropTypes.object
+  form: _propTypes2.default.object
 };
 
 exports.default = Field;

lib/Form.js

@@ -13,5 +13,5 @@ 'use strict';
 
-var _reactDom = require('react-dom');
+var _propTypes = require('prop-types');
 
-var _reactDom2 = _interopRequireDefault(_reactDom);
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
@@ -22,2 +22,4 @@ var _lodash = require('lodash');
 
+var _rsuiteSchema = require('rsuite-schema');
+
 var _classnames = require('classnames');
@@ -27,12 +29,2 @@
 
-var _Field = require('./Field.js');
-
-var _Field2 = _interopRequireDefault(_Field);
-
-var _rsuiteSchema = require('rsuite-schema');
-
-var _debounce = require('./utils/debounce');
-
-var _debounce2 = _interopRequireDefault(_debounce);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,7 +41,7 @@
 var propTypes = {
-  horizontal: _react.PropTypes.bool,
-  inline: _react.PropTypes.bool,
-  values: _react.PropTypes.object,
-  defaultValues: _react.PropTypes.object,
-  model: _react.PropTypes.instanceOf(_rsuiteSchema.Schema),
+  horizontal: _propTypes2.default.bool,
+  inline: _propTypes2.default.bool,
+  values: _propTypes2.default.object,
+  defaultValues: _propTypes2.default.object,
+  model: _propTypes2.default.instanceOf(_rsuiteSchema.Schema),
 
@@ -59,3 +51,3 @@ /**
    */
-  checkDelay: _react.PropTypes.number,
+  checkDelay: _propTypes2.default.number,
 
@@ -68,7 +60,7 @@ /**
    */
-  checkTrigger: _react.PropTypes.oneOf(['change', 'blur', null]),
-  onChange: _react.PropTypes.func,
-  onError: _react.PropTypes.func,
-  onCheck: _react.PropTypes.func,
-  errors: _react.PropTypes.object
+  checkTrigger: _propTypes2.default.oneOf(['change', 'blur', null]),
+  onChange: _propTypes2.default.func,
+  onError: _propTypes2.default.func,
+  onCheck: _propTypes2.default.func,
+  errors: _propTypes2.default.object
 };
@@ -103,4 +95,4 @@
     _this.handleFieldChange = _this.handleFieldChange.bind(_this);
-    _this.handleFieldError = (0, _debounce2.default)(_this.handleFieldError.bind(_this), props.checkDelay);
-    _this.handleFieldSuccess = (0, _debounce2.default)(_this.handleFieldSuccess.bind(_this), props.checkDelay);
+    _this.handleFieldError = _lodash2.default.debounce(_this.handleFieldError.bind(_this), props.checkDelay);
+    _this.handleFieldSuccess = _lodash2.default.debounce(_this.handleFieldSuccess.bind(_this), props.checkDelay);
     _this.check = _this.check.bind(_this);
@@ -111,17 +103,2 @@ return _this;
   _createClass(Form, [{
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      if (!_lodash2.default.isEqual(nextProps.errors, this.props.errors)) {
-        this.setState({
-          errors: nextProps.errors
-        });
-      }
-
-      if (!_lodash2.default.isEqual(nextProps.values, this.props.values)) {
-        this.setState({
-          values: nextProps.values
-        });
-      }
-    }
-  }, {
     key: 'getChildContext',
@@ -138,3 +115,3 @@ value: function getChildContext() {
       return {
-        _form: {
+        form: {
           onFieldChange: this.handleFieldChange,
@@ -151,3 +128,17 @@ onFieldError: this.handleFieldError,
     }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (!_lodash2.default.isEqual(nextProps.errors, this.props.errors)) {
+        this.setState({
+          errors: nextProps.errors
+        });
+      }
 
+      if (!_lodash2.default.isEqual(nextProps.values, this.props.values)) {
+        this.setState({
+          values: nextProps.values
+        });
+      }
+    }
     /**
@@ -177,3 +168,3 @@ * 校验表单数据是否合法
         if (checkResult.hasError === true) {
-          errorCount++;
+          errorCount += 1;
           errors[key] = checkResult.errorMessage;
@@ -243,11 +234,9 @@ }
       var _props5 = this.props,
-          children = _props5.children,
-          model = _props5.model,
           horizontal = _props5.horizontal,
           inline = _props5.inline,
-          className = _props5.className;
+          className = _props5.className,
+          children = _props5.children;
 
 
-      var clesses = (0, _classnames2.default)({
-        'form': true,
+      var clesses = (0, _classnames2.default)('form', {
         'form-horizontal': horizontal,
@@ -259,5 +248,8 @@ 'form-inline': inline
         'form',
-        { onSubmit: function onSubmit(e) {
-            return e.preventDefault();
-          }, className: clesses },
+        {
+          onSubmit: function onSubmit(e) {
+            e.preventDefault();
+          },
+          className: clesses
+        },
         children
@@ -274,5 +266,5 @@ );
 Form.childContextTypes = {
-  _form: _react.PropTypes.object.isRequired
+  form: _propTypes2.default.object.isRequired
 };
 
 exports.default = Form;

package.json

 {
   "name": "form-lib",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Form component for React",
@@ -32,2 +32,12 @@ "main": "lib/index.js",
   "homepage": "https://github.com/rsuite/form-lib#readme",
+  "dependencies": {
+    "classnames": ">=2.0.0",
+    "lodash": "^4.17.3",
+    "prop-types": "^15.5.10"
+  },
+  "peerDependencies": {
+    "react": "^0.14.9 || >=15.3.0",
+    "react-dom": "^0.14.9 || >=15.3.0",
+    "rsuite-schema": ">=0.0.4"
+  },
   "devDependencies": {
@@ -44,5 +54,8 @@ "babel-cli": "^6.11.4",
     "css-loader": "^0.23.1",
-    "eslint": "^2.8.0",
-    "eslint-plugin-babel": "^3.2.0",
-    "eslint-plugin-react": "^5.0.1",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb": "^15.0.1",
+    "eslint-plugin-babel": "^4.1.1",
+    "eslint-plugin-import": "^2.6.1",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.1.0",
     "expect": "^1.20.2",
@@ -67,6 +80,6 @@ "extract-text-webpack-plugin": "^2.1.0",
     "mocha": "^2.5.3",
-    "react": "^0.14.2",
-    "react-dom": "^0.14.2",
+    "react": "^0.14.9",
+    "react-dom": "^0.14.9",
     "react-hot-loader": "^3.0.0-beta.6",
-    "rsuite": "1.0.8",
+    "rsuite": "1.0.11",
     "rsuite-affix": "^1.0.3",
@@ -80,12 +93,3 @@ "rsuite-picker": "^0.3.3",
     "webpack-dev-server": "^2.3.0"
-  },
-  "peerDependencies": {
-    "react": ">=0.14.0",
-    "react-dom": ">=0.14.0",
-    "rsuite-schema": ">=0.0.4"
-  },
-  "dependencies": {
-    "classnames": ">=2.0.0",
-    "lodash": "^4.17.3"
   }
 }

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

30793

increased by8.4%

Lines of code

571

increased by7.74%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

47

increased by6.82%

Dependency changes

• + Addedprop-types@^15.5.10

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)