+ {/* With AvField */}
+
+ {/* With AvGroup AvInput and AvFeedback to build your own */}
+
+
+
+ This is an error!
+
+ {/* Radios */}
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+MobxFormComponent.propTypes = {
+ pokemon: PropTypes.shape({
+ name: PropTypes.string,
+ rank: PropTypes.string,
+ type: PropTypes.string
+ }).isRequired
+};
+
+export default observer(MobxFormComponent);
diff --git a/package.json b/package.json
index 99abe85..7fd3661 100644
--- a/package.json
+++ b/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": {
diff --git a/src/AvFeedback.js b/src/AvFeedback.js
index b7fc6cd..1811ab9 100644
--- a/src/AvFeedback.js
+++ b/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 ? : null;
}
}
+
+export default observer(AvFeedback);
diff --git a/src/AvField.js b/src/AvField.js
index 8838935..98c15a8 100644
--- a/src/AvField.js
+++ b/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);
diff --git a/src/AvForm.js b/src/AvForm.js
index c6ca842..42af528 100644
--- a/src/AvForm.js
+++ b/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);
diff --git a/src/AvGroup.js b/src/AvGroup.js
index 4e2af8f..ae66d28 100644
--- a/src/AvGroup.js
+++ b/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);
diff --git a/src/AvInput.js b/src/AvInput.js
index 7d0e1c6..a16d567 100644
--- a/src/AvInput.js
+++ b/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);
diff --git a/src/AvRadio.js b/src/AvRadio.js
index 7b81cda..4345b7a 100644
--- a/src/AvRadio.js
+++ b/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);
diff --git a/src/AvRadioGroup.js b/src/AvRadioGroup.js
index dbffdd5..ef863e4 100644
--- a/src/AvRadioGroup.js
+++ b/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);