a-plus-forms
Advanced tools
Comparing version 0.6.1 to 0.6.2
@@ -94,8 +94,9 @@ 'use strict'; | ||
value: function checkForNewValueIn(props, isInitialCall) { | ||
var triggerOnChange = !isInitialCall; | ||
if ('value' in props) { | ||
this.stateManager.setValue(props.value); | ||
this.stateManager.setValue(props.value, triggerOnChange); | ||
} else if ('defaultValue' in props) { | ||
// something was changed or an initial call | ||
if (isInitialCall || this.props.defaultValue !== props.defaultValue) { | ||
var triggerOnChange = !isInitialCall; | ||
this.stateManager.setValue(props.defaultValue, triggerOnChange); | ||
@@ -102,0 +103,0 @@ } |
{ | ||
"name": "a-plus-forms", | ||
"version": "0.6.1", | ||
"version": "0.6.2", | ||
"description": "A+ forms. Would use again", | ||
@@ -5,0 +5,0 @@ "files": [ |
@@ -36,3 +36,27 @@ # A+ Forms | ||
### The basic example | ||
First thing to understand about `A+ forms` is that the inputs in this system | ||
are abstractions. Those inputs convey the structure of the form, and, depending | ||
on a context, they can render different desirable results. | ||
```js | ||
import { Form, EmailInput, PasswordInput } from 'a-plus-forms'; | ||
<Form onSubmit={signInAction}> | ||
<EmailInput name="username" label="Username" /> | ||
<PasswordInput name="password" label="Password" /> | ||
<button>Sign In</button> | ||
</Form> | ||
``` | ||
In this example, the `signInAction` will receive an object that looks like this: | ||
```js | ||
{ | ||
username: '...', | ||
password: '...' | ||
} | ||
``` | ||
### Input Field Layouts | ||
@@ -61,3 +85,3 @@ | ||
import { config } from 'a-plus-forms'; | ||
config.DefaultLayout = MyLayout; | ||
config.defaultLayout = MyLayout; | ||
@@ -90,3 +114,28 @@ // specify the layout as a default via a layout provider | ||
### A basic react/redux wiring | ||
```js | ||
import { connect } from 'react-redux'; | ||
import { Form, EmailInput, PasswordInput } from 'a-plus-forms'; | ||
import { signIn } from './actions'; | ||
const dispatchToProps = dispatch => ({ | ||
signIn({ username, password }) { | ||
return dispatch(signIn({ username, password })); | ||
} | ||
}); | ||
const SignInForm = ({ signIn }) => | ||
<Form onSubmit={signIn}> | ||
<EmailInput name="username" label="Username" /> | ||
<PasswordInput name="password" label="Password" /> | ||
<button>Sign In</button> | ||
</Form>; | ||
export default connect(null, dispatchToProps)(SignInForm); | ||
``` | ||
__NOTE__: if the `signIn` action returns a `Promise` the form will automatically | ||
mark the form as disabled for the duration of the server request. | ||
### Validation Story | ||
@@ -93,0 +142,0 @@ |
98649
279