feat(*): support reactstrap v5

breaking change: This now depends on reactstrap v5 which in-turn depends on bootstrap v4-beta
Availity · Oct 11, 2017 · afb997c · afb997c
1 parent 71490a0
commit afb997c
Show file tree

Hide file tree

Showing 14 changed files with 58 additions and 87 deletions.
diff --git a/__test__/AvBaseInput.spec.js b/__test__/AvBaseInput.spec.js
@@ -692,20 +692,6 @@ describe('BaseInput', function () {
       expect(this.component.getValidatorProps()).to.be.an('object');
     });
 
-    it('should not get the input state if the props do not allow it', () => {
-      this.props.state = false;
-      const result = this.component.getValidatorProps();
-      expect(this.context.FormCtrl.getInputState).to.not.have.been.called;
-      expect(result).to.not.include.keys('state');
-    });
-
-    it('should get the input state if the props allow it', () => {
-      this.props.state = true;
-      const result = this.component.getValidatorProps();
-      expect(this.context.FormCtrl.getInputState).to.have.been.calledWith(this.props.name);
-      expect(result).to.include({ state: this.inputState });
-    });
-
     it('should turn the validations in the validate prop into attrs if they are legit attrs', () => {
       this.props.validate = {
         min: { value: 6 },

diff --git a/__test__/AvGroup.spec.js b/__test__/AvGroup.spec.js
@@ -28,7 +28,7 @@ describe('AvGroup', function() {
   it('should render color prop based on inputState', () => {
     const wrapper = shallow(<AvGroup>Yo!</AvGroup>, this.options);
 
-    expect(wrapper.prop('color')).to.equal(this.inputState.color);
+    expect(wrapper.prop('className')).to.equal(`text-${this.inputState.color}`);
   });
 
   it('should render children inside the FormGroup', () => {

diff --git a/__test__/AvRadio.spec.js b/__test__/AvRadio.spec.js
@@ -87,18 +87,6 @@ describe('AvRadio', () => {
     expect(wrapper.find(Input).hasClass('av-invalid')).to.be.true;
   });
 
-  it('should wrap the children in a FormGroup when inline', () => {
-    const wrapper = shallow(<AvRadio name="yo" />, options);
-    expect(wrapper.type()).to.equal(FormGroup);
-  });
-
-  it('should not wrap the children in a FormGroup when inline', () => {
-    options.context.Group.inline = true;
-    const wrapper = shallow(<AvRadio name="yo" />, options);
-    expect(wrapper.type()).to.equal(Label);
-  });
-
-
   it('should toString the value to add it to the DOM via Input', () => {
     const wrapper = shallow(<AvRadio name="yo" value="yes" />, options);
     expect(wrapper.find(Input).prop('value')).to.eql('yes');

diff --git a/docs/lib/examples/Checkbox.js b/docs/lib/examples/Checkbox.js
@@ -18,13 +18,13 @@ export default class Example extends React.Component {
     return (
       <div>
         <AvForm onSubmit={this.handleSubmit}>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" name="checkbox" /> Check it Out
             </Label>
           </AvGroup>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" name="inOrOut" trueValue="Yes, I'm in!" falseValue="NOPE!" /> Are You In?
             </Label>
           </AvGroup>

diff --git a/docs/lib/examples/CheckboxDefault.js b/docs/lib/examples/CheckboxDefault.js
@@ -30,48 +30,48 @@ export default class Example extends React.Component {
     return (
       <div>
         <AvForm onSubmit={this.handleSubmit} model={model}>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" name="checkbox1" /> true is "checked" (default)
             </Label>
           </AvGroup>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" name="checkbox2" /> false is "unchecked" (default)
             </Label>
           </AvGroup>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" trueValue={false} falseValue name="checkbox3" /> false can be "checked"
             </Label>
           </AvGroup>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" trueValue={false} falseValue name="checkbox4" /> true can be "unchecked"
             </Label>
           </AvGroup>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" trueValue="yes" name="checkbox5" /> make "yes" checked
             </Label>
           </AvGroup>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" falseValue="yes" name="checkbox6" /> make "yes" unchecked
             </Label>
           </AvGroup>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" trueValue="no" falseValue="yes" name="checkbox7" /> make "no" checked
             </Label>
           </AvGroup>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" trueValue="yes" falseValue="no" name="checkbox8" /> make "no" unchecked
             </Label>
           </AvGroup>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" name="checkbox9" /> any values that are not the trueValue is unchecked
             </Label>
           </AvGroup>

diff --git a/docs/lib/examples/CheckboxFalseValue.js b/docs/lib/examples/CheckboxFalseValue.js
@@ -18,8 +18,8 @@ export default class Example extends React.Component {
     return (
       <div>
         <AvForm onSubmit={this.handleSubmit}>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" name="doNotAgree" falseValue="User Does Not Agreed" /> Agree to this!
             </Label>
           </AvGroup>

diff --git a/docs/lib/examples/CheckboxTrueValue.js b/docs/lib/examples/CheckboxTrueValue.js
@@ -18,8 +18,8 @@ export default class Example extends React.Component {
     return (
       <div>
         <AvForm onSubmit={this.handleSubmit}>
-          <AvGroup>
-            <Label check inline>
+          <AvGroup check>
+            <Label check>
               <AvInput type="checkbox" name="agree" trueValue="User Agreed" required /> Agree to this!
             </Label>
           </AvGroup>

diff --git a/docs/lib/examples/FormModel.js b/docs/lib/examples/FormModel.js
@@ -72,8 +72,8 @@ export default class Example extends React.Component {
               <AvField name="location.zip" label="ZIP Code" required />
             </Col>
           </Row>
-          <AvGroup>
-            <Label check inline for="checkItOut">
+          <AvGroup check>
+            <Label check for="checkItOut">
               <AvInput type="checkbox" name="checkItOut" /> Check it out!
             </Label>
           </AvGroup>

diff --git a/package.json b/package.json
@@ -53,15 +53,15 @@
     "url": "https://github.com/Availity/availity-reactstrap-validation/issues"
   },
   "homepage": "https://github.com/Availity/availity-reactstrap-validation",
-  "dependencies": {    
+  "dependencies": {
     "classnames": "^2.2.3",
     "lodash": "^4.17.4",
-    "moment": "^2.14.1"
+    "moment": "2.18.1"
   },
   "peerDependencies": {
-    "react": "^0.14.9 || ^15.3.0",
-    "react-dom": "^0.14.9 || ^15.3.0",
-    "reactstrap": ">= 2.1.0"
+    "react": "^0.14.9 || ^15.3.0 || ^16.0.0",
+    "react-dom": "^0.14.9 || ^15.3.0 || ^16.0.0",
+    "reactstrap": ">= 5.0.0-alpha.3"
   },
   "devDependencies": {
     "babel-cli": "^6.10.1",
@@ -77,7 +77,7 @@
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "babel-register": "^6.11.6",
-    "bootstrap": "4.0.0-alpha.6",
+    "bootstrap": "4.0.0-beta",
     "chai": "^3.5.0",
     "chai-as-promised": "^6.0.0",
     "chai-enzyme": "^0.6.1",
@@ -94,8 +94,8 @@
     "eslint": "^3.3.1",
     "eslint-config-availity": "^2.1.0",
     "eslint-plugin-import": "^2.3.0",
-    "eslint-plugin-react": "^6.10.3",
     "eslint-plugin-jsx-a11y": "^5.0.3",
+    "eslint-plugin-react": "^6.10.3",
     "extract-text-webpack-plugin": "^1.0.1",
     "history": "^2.0.0",
     "jsdom": "^9.4.2",
@@ -116,7 +116,7 @@
     "react-router": "^2.0.1",
     "react-test-renderer": "^15.5.4",
     "react-transition-group": "^1.1.3",
-    "reactstrap": "^4.6.2",
+    "reactstrap": "^5.0.0-alpha.3",
     "rimraf": "^2.5.4",
     "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",

diff --git a/src/AvBaseInput.js b/src/AvBaseInput.js
@@ -171,7 +171,7 @@ export default class AvBaseInput extends Component {
   }
 
   getValidatorProps() {
-    const state = this.props.state && this.context.FormCtrl.getInputState(this.props.name);
+    const validatity = this.context.FormCtrl.getInputState(this.props.name);
     const htmlValAttrs = Object.keys(this.props.validate || {})
       .filter(val => htmlValidationAttrs.indexOf(val) > -1)
       .reduce((result, item) => {
@@ -193,8 +193,8 @@ export default class AvBaseInput extends Component {
       newProps.checked = this.value === this.props.trueValue;
     }
 
-    if (state) {
-      newProps.state = state;
+    if (this.props.state || (validatity && validatity.errorMessage)) {
+      newProps.valid = !(validatity && validatity.errorMessage);
     }
 
     return newProps;

diff --git a/src/AvField.js b/src/AvField.js
@@ -44,7 +44,7 @@ export default class AvField extends Component {
       inputClass,
       labelClass,
       children,
-      id: omit,
+      id = this.props.name,
       size,
       disabled,
       readOnly,
@@ -53,7 +53,6 @@ export default class AvField extends Component {
       groupAttrs,
       ...attributes
     } = this.props;
-    const id = this.props.id || attributes.name;
 
     if (grid) {
       colSizes.forEach(colSize => {

diff --git a/src/AvGroup.js b/src/AvGroup.js
@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { FormGroup } from 'reactstrap';
 
@@ -42,8 +43,9 @@ export default class AvGroup extends Component {
 
   render() {
     const validation = this.getInputState();
+    const classname = classNames(this.props.className, validation.color && `text-${validation.color}`);
     return (
-      <FormGroup color={validation.color} {...this.props} />
+      <FormGroup className={classname} {...this.props} />
     );
   }
 }
diff --git a/src/AvRadio.js b/src/AvRadio.js
@@ -34,25 +34,20 @@ export default class AvRadio extends Component {
       this.context.FormCtrl.hasError[this.props.name] ? 'av-invalid' : 'av-valid'
     );
 
-    const input = (<Label check inline={this.context.Group.inline} disabled={this.props.disabled}>
-      <Input
-        name={this.context.Group.name}
-        type='radio'
-        {...attributes}
-        className={classes}
-        onChange={this.onChangeHandler}
-        checked={this.props.value === this.context.Group.value}
-        value={this.props.value && this.props.value.toString()}
-      /> {this.props.label}
-    </Label>);
-
-    if (this.context.Group.inline) {
-      return input;
-    }
-
     return (
-      <FormGroup check disabled={this.props.disabled}>
-        {input}
+      <FormGroup check inline={this.context.Group.inline} disabled={this.props.disabled}>
+        <Label check>
+          <Input
+            name={this.context.Group.name}
+            type='radio'
+            {...attributes}
+            className={classes}
+            onChange={this.onChangeHandler}
+            checked={this.props.value === this.context.Group.value}
+            value={this.props.value && this.props.value.toString()}
+            required={this.context.Group.required}
+          /> {this.props.label}
+        </Label>
       </FormGroup>
     );
   }

diff --git a/src/AvRadioGroup.js b/src/AvRadioGroup.js
@@ -121,6 +121,7 @@ export default class AvRadioGroup extends InputContainer {
         name: this.props.name,
         update: updateGroup,
         inline: this.props.inline,
+        required: this.props.required,
         value: this.value,
         getInputState: ::this.getInputState,
       },