rsuite - npm Package Compare versions

Comparing version 0.0.10 to 0.0.12

lib/FormControl.js

@@ -41,2 +41,3 @@ 'use strict';
     },
+
     getFormGroup: function getFormGroup() {
@@ -57,13 +58,29 @@ return this.context.formGroup || {};
 
-        var onChangeValue = _getFormGroup.onChangeValue;
+        var onFormGroupChange = _getFormGroup.onChange;
 
 
         onChange && onChange(value);
-        onChangeValue && onChangeValue(value);
+        onFormGroupChange && onFormGroupChange(value);
     },
-    render: function render() {
+    handleBlur: function handleBlur() {
+        var onBlur = this.props.onBlur;
+
         var _getFormGroup2 = this.getFormGroup();
 
-        var controlId = _getFormGroup2.controlId;
-        var value = _getFormGroup2.value;
+        var onFormGroupBlur = _getFormGroup2.onBlur;
+
+        onBlur && onBlur();
+        onFormGroupBlur && onFormGroupBlur();
+    },
+    getValue: function getValue() {
+        var _getFormGroup3 = this.getFormGroup();
+
+        var value = _getFormGroup3.value;
+
+        return value || this.props.value;
+    },
+    render: function render() {
+        var _getFormGroup4 = this.getFormGroup();
+
+        var controlId = _getFormGroup4.controlId;
         var _props = this.props;
@@ -74,10 +91,8 @@ var Component = _props.componentClass;
         var id = _props$id === undefined ? controlId : _props$id;
+        var _props$value = _props.value;
+        var value = _props$value === undefined ? this.getValue() : _props$value;
         var className = _props.className;
 
-        var props = _objectWithoutProperties(_props, ['componentClass', 'type', 'id', 'className']);
+        var props = _objectWithoutProperties(_props, ['componentClass', 'type', 'id', 'value', 'className']);
 
-        if (id === null) {
-            throw new Error('`controlId` is ignored on `<FormControl>` when `id` is specified.');
-        }
-
         var classes = (0, _classnames2.default)({
@@ -91,4 +106,5 @@ // input[type="file"] should not have .form-control.
             id: id,
-            defaultValue: value,
+            value: value,
             className: classes,
+            onBlur: this.handleBlur,
             onChange: this.handleChange
@@ -95,0 +111,0 @@ }));

lib/FormGroup.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _classnames = require('classnames');
@@ -20,6 +22,2 @@
 
-var _HelpBlock = require('./HelpBlock');
-
-var _HelpBlock2 = _interopRequireDefault(_HelpBlock);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -40,47 +38,21 @@
     },
-    handleError: function handleError(hasError, errorMessage) {
-        var helpBlock = this.refs.helpBlock;
-        helpBlock && helpBlock.handleError(hasError, errorMessage);
-    },
-    handleChange: function handleChange(value) {
-        var onChange = this.props.onChange;
-
-        onChange && onChange(value);
-        this.setState({
-            force: true
-        });
-    },
     getChildContext: function getChildContext() {
-        var _props = this.props;
-        var isValid = _props.isValid;
-        var errorMessage = _props.errorMessage;
-        var controlId = _props.controlId;
-        var validationState = _props.validationState;
-        var value = _props.value;
-        var force = _props.force;
-
         return {
-            formGroup: {
-                controlId: controlId,
-                validationState: validationState,
-                value: value,
-                isValid: isValid,
-                errorMessage: errorMessage,
-                force: force || this.state.force,
-                onChangeValue: this.handleChange
-            }
+            formGroup: _extends({}, this.props)
         };
     },
     render: function render() {
-        var _props2 = this.props;
-        var validationState = _props2.validationState;
-        var className = _props2.className;
-        var children = _props2.children;
-        var isValid = _props2.isValid;
-        var force = _props2.force;
+        var _props = this.props;
+        var validationState = _props.validationState;
+        var className = _props.className;
+        var children = _props.children;
+        var isValid = _props.isValid;
+        var formStatus = _props.formStatus;
+        var errorMessage = _props.errorMessage;
 
-        var hasState = validationState || (isValid ? 'success' : 'error');
+        var statusClass = validationState || isValid === undefined ? '' : isValid ? 'has-success' : 'has-error';
+
         var classes = (0, _classnames2.default)(_defineProperty({
             'form-group': true
-        }, 'has-' + hasState, hasState && (force || this.state.force)), className);
+        }, statusClass, formStatus === 'TYPING' || errorMessage), className);
 
@@ -87,0 +59,0 @@ return _react2.default.createElement(

lib/HelpBlock.js

@@ -31,3 +31,2 @@ 'use strict';
         var errorMessage = _context$formGroup.errorMessage;
-        var force = _context$formGroup.force;
         var _props = this.props;
@@ -42,3 +41,3 @@ var className = _props.className;
             'help-block': true,
-            'error': !isValid && force
+            'error': !isValid
         }, className);
@@ -52,3 +51,3 @@
             },
-            !isValid && force && errorMessage || children
+            !isValid && errorMessage || children
         );
@@ -55,0 +54,0 @@ }

lib/mixins/FormControlMixin.js

@@ -20,14 +20,4 @@ 'use strict';
         onError: _react2.default.PropTypes.func,
-        force: _react2.default.PropTypes.bool // if false, ignore errors when value is undefined
+        formStatus: _react2.default.PropTypes.oneOf(['WAITING', 'TYPING'])
     },
-    getDefaultProps: function getDefaultProps() {
-        return {
-            isValid: false
-        };
-    },
-    getInitialState: function getInitialState() {
-        return {
-            force: this.props.force
-        };
-    },
     shouldCallOnError: function shouldCallOnError() {
@@ -41,6 +31,5 @@
         var value = _props.value;
-        var force = this.state.force;
+        var formStatus = _props.formStatus;
 
-
-        return !isValid && (value !== undefined || force);
+        return !isValid && formStatus === 'TYPING';
     },
@@ -53,3 +42,2 @@ callError: function callError() {
 
-        this.handleError && this.handleError(!isValid, errorMessage);
         onError && onError(!isValid, errorMessage);
@@ -56,0 +44,0 @@ },

package.json

 {
   "name": "rsuite",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "RSuite components built with React",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/FormControl.js

@@ -16,3 +16,4 @@ import classNames from 'classnames';
     },
-    getFormGroup(){
+
+    getFormGroup() {
         return this.context.formGroup || {};
@@ -29,10 +30,20 @@ },
         const { onChange } = this.props;
-        const { onChangeValue } = this.getFormGroup();
+        const { onChange: onFormGroupChange } = this.getFormGroup();
 
         onChange && onChange(value);
-        onChangeValue && onChangeValue(value);
+        onFormGroupChange && onFormGroupChange(value);
     },
+    handleBlur() {
+        const { onBlur } = this.props;
+        const { onBlur: onFormGroupBlur } = this.getFormGroup();
+        onBlur && onBlur();
+        onFormGroupBlur && onFormGroupBlur();
+    },
+    getValue() {
+        const { value } = this.getFormGroup();
+        return value || this.props.value;
+    },
     render() {
 
-        const { controlId, value } = this.getFormGroup();
+        const { controlId } = this.getFormGroup();
         const {
@@ -42,2 +53,3 @@ componentClass: Component,
             id = controlId,
+            value = this.getValue(),
             className,
@@ -47,22 +59,20 @@ ...props,
 
-        if(id === null ){
-             throw new Error('`controlId` is ignored on `<FormControl>` when `id` is specified.');
-        }
 
-        let classes = classNames({
-            // input[type="file"] should not have .form-control.
-            'form-control': type !== 'file'
-        }, className);
+let classes = classNames({
+    // input[type="file"] should not have .form-control.
+    'form-control': type !== 'file'
+}, className);
 
 
-        return (
-            <Component
-                {...props}
-                type={type}
-                id={id}
-                defaultValue={value}
-                className={classes}
-                onChange={this.handleChange}
-            />
-        );
+return (
+    <Component
+        {...props}
+        type={type}
+        id={id}
+        value={value}
+        className={classes}
+        onBlur={this.handleBlur}
+        onChange={this.handleChange}
+        />
+);
     }
@@ -69,0 +79,0 @@ });

src/FormGroup.js

 import classNames from 'classnames';
 import React from 'react';
 import FormControlMixin from './mixins/FormControlMixin';
-import HelpBlock from './HelpBlock';
 
@@ -16,25 +15,6 @@
     },
-    handleError(hasError, errorMessage) {
-        const helpBlock = this.refs.helpBlock;
-        helpBlock && helpBlock.handleError(hasError, errorMessage);
-    },
-    handleChange(value) {
-        const { onChange } = this.props;
-        onChange && onChange(value);
-        this.setState({
-            force: true
-        });
-    },
     getChildContext() {
-
-        const { isValid, errorMessage, controlId, validationState, value, force } = this.props;
         return {
             formGroup: {
-                controlId,
-                validationState,
-                value,
-                isValid,
-                errorMessage,
-                force: force || this.state.force,
-                onChangeValue: this.handleChange
+                ...this.props
             }
@@ -45,9 +25,11 @@ };
 
-        const { validationState, className, children, isValid,force } = this.props;
-        const hasState = validationState || (isValid ? 'success' : 'error');
+        const { validationState, className, children, isValid, formStatus, errorMessage } = this.props;
+        const statusClass = (validationState || isValid === undefined ? '' : isValid ? 'has-success' : 'has-error');
+
         const classes = classNames({
             'form-group': true,
-            [`has-${hasState}`]: hasState && (force || this.state.force)
+            [statusClass]: formStatus === 'TYPING' || errorMessage
         }, className);
 
+
         return (
@@ -54,0 +36,0 @@ <div className={classes}>

src/HelpBlock.js

@@ -13,3 +13,3 @@ import React from 'react';
 
-        const {controlId, isValid, errorMessage, force } = this.context.formGroup;
+        const {controlId, isValid, errorMessage } = this.context.formGroup;
         const {
@@ -23,3 +23,3 @@ className,
             'help-block': true,
-            'error': !isValid && force
+            'error': !isValid
         }, className);
@@ -32,3 +32,3 @@
                 >
-                {(!isValid && force && errorMessage ) || children}
+                {(!isValid && errorMessage ) || children}
             </span>
@@ -35,0 +35,0 @@ );

src/mixins/FormControlMixin.js

@@ -10,14 +10,4 @@ import React from 'react';
         onError: React.PropTypes.func,
-        force: React.PropTypes.bool // if false, ignore errors when value is undefined
+        formStatus: React.PropTypes.oneOf(['WAITING', 'TYPING'])
     },
-    getDefaultProps() {
-        return {
-            isValid: false
-        };
-    },
-    getInitialState() {
-        return {
-            force: this.props.force
-        };
-    },
     shouldCallOnError() {
@@ -28,10 +18,7 @@
         // 2. invalid and force is true(ignore value exists or not)
-        const { isValid, value } = this.props;
-        const { force } = this.state;
-
-        return !isValid && (value !== undefined || force);
+        const { isValid, value, formStatus } = this.props;
+        return !isValid && formStatus === 'TYPING';
     },
     callError() {
         const { onError, isValid, errorMessage } = this.props;
-        this.handleError && this.handleError(!isValid, errorMessage);
         onError && onError(!isValid, errorMessage);
@@ -38,0 +25,0 @@

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

Worsened metrics

Total package byte prevSize

826273

decreased by-0.18%

Lines of code

13150

decreased by-0.37%

No dependency changes