New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

a-plus-forms

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

a-plus-forms - npm Package Compare versions

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 @@