Fix issue Availity#15

docs/lib/Components/FormPage.js

@@ -5,6 +5,8 @@ import Helmet from 'react-helmet';
 
 import FormExample from '../examples/Form';
 const FormExampleSource = require('!!raw!../examples/Form.js');
+import MobxFormExample from '../examples/MobxForm';
+const MobxFormExampleSource = require('!!raw!../examples/MobxForm.js');
 import FormOnSubmitExample from '../examples/FormOnSubmit';
 const FormOnSubmitExampleSource = require('!!raw!../examples/FormOnSubmit.js');
 import FormOnValidSubmitExample from '../examples/FormOnValidSubmit';
@@ -21,6 +23,7 @@ export default class FormPage extends React.Component {
         <Helmet title="Form" />
         <h3>AvForm</h3>
         <p>The AvForm component wraps reactstrap's form to add context that the other Av components know about to help share validation state</p>
+
         <div className="docs-example">
           <FormExample />
         </div>
@@ -30,6 +33,17 @@ export default class FormPage extends React.Component {
           </PrismCode>
         </pre>
 
+        <h3>AvForm with Mobx</h3>
+        <p>The AvForm component wrapped by Mobx's observer</p>
+        <div className="docs-example">
+          <MobxFormExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {MobxFormExampleSource}
+          </PrismCode>
+        </pre>
+
         <h4>OnSubmit</h4>
         <p>This callback is called with every submission of the form</p>
         <div className="docs-example">

docs/lib/examples/MobxForm.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import { extendObservable } from 'mobx';
+import { observer } from 'mobx-react';
+import { AvForm } from 'availity-reactstrap-validation';
+import MobxFormComponent from './MobxFormComponent';
+
+export class Pokemon {
+  constructor(json) {
+    const _json = json || {};
+
+    extendObservable(this, { name: _json.name || ''});
+    extendObservable(this, { rank: _json.rank || ''});
+    extendObservable(this, { type: _json.type || ''});
+  }
+}
+
+let pokemon;
+class MobxForm extends Component {
+  constructor() {
+    super();
+  }
+
+  componentWillMount() {
+    pokemon = new Pokemon();
+  }
+
+  render() {
+    return (
+      <AvForm>
+        <MobxFormComponent pokemon={pokemon} />
+      </AvForm>
+    );
+  }
+}
+
+export default observer(MobxForm);

docs/lib/examples/MobxFormComponent.js

@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import mobx from 'mobx';
+import { observer } from 'mobx-react';
+import { AvField, AvGroup, AvInput, AvFeedback, AvRadio, AvRadioGroup } from 'availity-reactstrap-validation';
+import { Button, Label, FormGroup } from 'reactstrap';
+import { Pokemon } from './MobxForm';
+
+export class MobxFormComponent extends Component {
+  constructor(props) {
+    super(props);
+
+    this.updateProperty = ::this.updateProperty;
+  }
+
+  updateProperty(event) {
+    const { pokemon } = this.props;
+    const { name, value } = event.target;
+
+    pokemon[name] = value;
+  }
+
+  render() {
+    const { pokemon } = this.props;
+
+    return (
+      <div>
+        {/* With AvField */}
+        <AvField name="name" id="name" label="Name" value={pokemon.name} onChange={this.updateProperty} required />
+        {/* With AvGroup AvInput and AvFeedback to build your own */}
+        <AvGroup>
+          <Label for="example">Rank</Label>
+          <AvInput name="rank" id="rank" value={pokemon.rank} onChange={this.updateProperty} required />
+          <AvFeedback>This is an error!</AvFeedback>
+        </AvGroup>
+        {/* Radios */}
+        <AvRadioGroup onChange={this.updateProperty} id="type" name="radioExample" label="Radio Buttons!" required errorMessage="Pick one!">
+          <AvRadio label="Bulbasaur" value="Bulbasaur" checked={pokemon.type === 'Bulbasaur'} name="type" id="radioOption1" />
+          <AvRadio label="Squirtle" value="Squirtle" checked={pokemon.type === 'Squirtle'} name="type" id="radioOption2" />
+          <AvRadio label="Charmander" value="Charmander" checked={pokemon.type === 'Charmander'} name="type" id="radioOption3" />
+          <AvRadio label="Pikachu" value="Pikachu" checked={pokemon.type === 'Pikachu'} name="type" id="radioOption4" disabled />
+        </AvRadioGroup>
+
+        <FormGroup>
+          <Button>Submit</Button>
+        </FormGroup>
+      </div>
+    );
+  }
+}
+
+MobxFormComponent.propTypes = {
+  pokemon: PropTypes.shape({
+    name: PropTypes.string,
+    rank: PropTypes.string,
+    type: PropTypes.string
+  }).isRequired
+};
+
+export default observer(MobxFormComponent);

package.json

@@ -57,6 +57,8 @@
     "babel-polyfill": "^6.13.0",
     "classnames": "^2.2.3",
     "lodash": "^4.17.4",
+    "mobx": "^3.1.16",
+    "mobx-react": "^4.2.1",
     "moment": "^2.14.1"
   },
   "peerDependencies": {

src/AvFeedback.js

@@ -1,8 +1,9 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import { FormFeedback } from 'reactstrap';
+import {observer} from 'mobx-react';
 
-export default class AvFeedback extends Component {
+export class AvFeedback extends Component {
   static propTypes = Object.assign({}, FormFeedback.propTypes);
 
   static contextTypes = {
@@ -15,3 +16,5 @@ export default class AvFeedback extends Component {
     return validation.color ? <FormFeedback {...this.props} /> : null;
   }
 }
+
+export default observer(AvFeedback);

src/AvField.js

@@ -4,10 +4,11 @@ import AvInput from './AvInput';
 import AvGroup from './AvGroup';
 import AvFeedback from './AvFeedback';
 import {Col, FormText, Label} from 'reactstrap';
+import {observer} from 'mobx-react';
 
 const colSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
 
-export default class AvField extends Component {
+export class AvField extends Component {
   static propTypes = Object.assign({}, AvInput.propTypes, {
     label: PropTypes.node,
     labelHidden: PropTypes.bool,
@@ -101,3 +102,5 @@ export default class AvField extends Component {
     );
   }
 }
+
+export default observer(AvField);

src/AvForm.js

@@ -5,6 +5,7 @@ import AvValidator from './AvValidator';
 import { Form } from 'reactstrap';
 import classNames from 'classnames';
 import {get as _get, set as _set, isString} from 'lodash';
+import {observer} from 'mobx-react';
 
 const getInputErrorMessage = (input, ruleName) => {
   const errorMessage = input.props.errorMessage;
@@ -15,7 +16,7 @@ const getInputErrorMessage = (input, ruleName) => {
   return errorMessage;
 };
 
-export default class AvForm extends InputContainer {
+export class AvForm extends InputContainer {
   static childContextTypes = {
     FormCtrl: PropTypes.object.isRequired,
   };
@@ -447,3 +448,5 @@ export default class AvForm extends InputContainer {
     return input.getValue();
   }
 }
+
+export default observer(AvForm);

src/AvGroup.js

@@ -1,8 +1,9 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import { FormGroup } from 'reactstrap';
+import {observer} from 'mobx-react';
 
-export default class AvGroup extends Component {
+export class AvGroup extends Component {
   static propTypes = Object.assign({}, FormGroup.propTypes);
 
   static contextTypes = {
@@ -47,3 +48,5 @@ export default class AvGroup extends Component {
     );
   }
 }
+
+export default observer(AvGroup);

src/AvInput.js

@@ -2,9 +2,9 @@ import React from 'react';
 import classNames from 'classnames';
 import {Input} from 'reactstrap';
 import AvBaseInput from './AvBaseInput';
+import {observer} from 'mobx-react';
 
-
-export default class AvInput extends AvBaseInput {
+export class AvInput extends AvBaseInput {
   static defaultProps = Object.assign({}, AvBaseInput.defaultProps, {
     tag: Input,
   });
@@ -41,3 +41,5 @@ export default class AvInput extends AvBaseInput {
     );
   }
 }
+
+export default observer(AvInput);

src/AvRadio.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {Input, FormGroup, Label} from 'reactstrap';
 import AvInput from './AvInput';
+import {observer} from 'mobx-react';
 
 const radioPropTypes = Object.assign({}, AvInput.propTypes);
 delete radioPropTypes.name;
 
-export default class AvRadio extends Component {
+export class AvRadio extends Component {
 
   static contextTypes = Object.assign({}, AvInput.contextTypes, {
     Group: PropTypes.object.isRequired,
@@ -57,3 +58,5 @@ export default class AvRadio extends Component {
     );
   }
 }
+
+export default observer(AvRadio);

src/AvRadioGroup.js

@@ -4,12 +4,13 @@ import InputContainer from './AvInputContainer';
 import AvFeedback from './AvFeedback';
 import { isEqual } from 'lodash';
 import { FormGroup } from 'reactstrap';
+import {observer} from 'mobx-react';
 
 const htmlValidationAttrs = ['required'];
 
 const noop = () => {};
 
-export default class AvRadioGroup extends InputContainer {
+export class AvRadioGroup extends InputContainer {
   static propTypes = Object.assign({}, FormGroup.propTypes, {
     name: PropTypes.string.isRequired,
   });
@@ -167,3 +168,5 @@ export default class AvRadioGroup extends InputContainer {
     );
   }
 }
+
+export default observer(AvRadioGroup);