├── .babelrc
├── .editorconfig
├── .gitignore
├── .npmignore
├── LICENSE.md
├── README.md
├── examples
    ├── basic-state-access
    │   └── index.js
    ├── basic-usage
    │   └── index.js
    ├── cli.js
    ├── field-wrap-hoc
    │   └── index.js
    ├── field-wraps
    │   └── index.js
    ├── full-featured
    │   └── index.js
    ├── index.html
    ├── initial-values
    │   └── index.js
    ├── reset-form
    │   └── index.js
    ├── server.js
    ├── submit-handling
    │   └── index.js
    └── validation
    │   └── index.js
├── package-lock.json
├── package.json
├── src
    ├── Field.js
    ├── FieldTypes.js
    ├── Form.js
    ├── connectField.js
    └── index.js
├── test
    ├── .setup.js
    └── components
    │   └── connectField.js
├── todo.md
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2", "react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | end_of_line = lf
 5 | charset = utf-8
 6 | trim_trailing_whitespace = true
 7 | insert_final_newline = true
 8 | indent_style = space
 9 | indent_size = 2
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .DS_Store
3 | node_modules
4 | npm-debug.log
5 | dist
6 | sandbox
7 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | examples
 2 | src
 3 | .babelrc
 4 | .editorconfig
 5 | .npmignore
 6 | npm-debug.log
 7 | todo.md
 8 | webpack.*
 9 | test
10 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | 
3 | Copyright (c) 2017 Brad Westfall
4 | 
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 | 
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 | 
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ** NOT MAINTAINED **
  2 | 
  3 | When I wrote this library, redux-form was "king of the land" as far as React forms go. I wanted a similar API that provided meta state about forms and fields but without the redux part. This project did a great job of that. However, another project called [Formik](https://github.com/jaredpalmer/formik) emerged since I wrote `informative` and it does all the things I was trying to do and a few more. It's well maintained and I've recently updated my largest project to use it instead.
  4 | 
  5 | <hr />
  6 | 
  7 | # informative
  8 | 
  9 | Informative is a `<Form>` and `<Field>` Compound Component Stratagy that keep track of form and field state for you and can provide it to you in a several of ways. Create basic fields with a "redux-form" style `<Field />` API, or use render props to create a [re-usable "Field Wrap"](#field-wraps) with `<Field render>`.
 10 | 
 11 | ## Install
 12 | 
 13 | ```sh
 14 | npm install --save informative
 15 | ```
 16 | 
 17 | 
 18 | ## Contents
 19 | 
 20 | - [`<Form>` and `<Field>`](#form-and-field)
 21 |   - [`<Field component="input" />`](#field-componentinput-)
 22 |   - [`<Field component="select" />`](#field-componentselect-)
 23 |   - [`<Field component="textarea" />`](#field-componenttextarea-)
 24 |   - [Built-in Fields](#built-in-fields)
 25 |   - [Custom Fields](#custom-fields)
 26 |   - [`onChange` for `<Field>` and `<Form>`](#onchange-for-field-and-form)
 27 | - [Examples](#examples)
 28 |   - [Basic Usage](#basic-usage)
 29 |   - [Basic State Access](#basic-state-access)
 30 |   - [Submit Handling](#submit-handling)
 31 |   - [Redirects](#redirects)
 32 |   - [Validation](#validation)
 33 |   - [Top Level Access to `formState`](#top-level-access-to-formstate)
 34 |   - [Initial Values](#initial-values)
 35 |   - [Reset Form](#reset-form)
 36 |   - [Field Wraps](#field-wraps)
 37 |   - [Field Abstraction](#field-abstraction)
 38 |   - [`connectField` HoC](#connectfield-hoc)
 39 | - [`formState`](#formstate)
 40 | - [`fieldState`](#fieldstate)
 41 | 
 42 | 
 43 | # `<Form>` and `<Field>`
 44 | 
 45 | `<Form>` and `<Field>` are the basic building blocks of the API. Always use the `<Form>` component to start an informative form as it is the main entry-point into the API.
 46 | 
 47 | The `<Field>` component is used to register each field in your form with the API. It also bootstraps state into the `Form` component. It always requires a `name` prop which must be unique for this specific form unless using radio buttons (in which the names should be the same). To designate what type of field will be created, pass a `component` prop. The `component` prop can be a string or a custom component. In this example we're showing how to use strings to make basic fields.
 48 | 
 49 | ```jsx
 50 | import React from 'react'
 51 | import { Form, Field } from 'informative'
 52 | 
 53 | const MyForm = props => (
 54 |   <Form>
 55 |     <Field name="fullName" component="input" />
 56 |     <button type="submit">Submit</button>
 57 |   </Form>
 58 | )
 59 | ```
 60 | 
 61 | 
 62 | ### `<Field component="input" />`
 63 | 
 64 | In the previous example `<Field name="fullName" component="input" />` is used to make a DOM element similar to `<input type="text" name="fullName">`. The difference though is that since we're using `<Field>`, the input is wired into the form's state and responds to DOM events like `onChange` and a few others.
 65 | 
 66 | When using `<Field>` this way with `component="input"`, a `type` property can also be used to designate other input types similar to ordinary HTML. If no `type` is specified, the default is `text`.
 67 | 
 68 | Under the hood, `<Field>` uses `<InputField>` when passing `component="input"` into `<Field>` (as long as the type isn't a radio or checkbox). See more on `<InputField>` below in [Built-in Fields](#built-in-fields).
 69 | 
 70 | 
 71 | #### Checkbox Inputs
 72 | 
 73 | For checkboxes, be sure to specify a prop for `checked` always, even if the value is false, supply `checked={false}`. Also, checkboxes should always have a `value` prop. When the checkbox is checked, the value in the `value` prop is what is applied to the field in terms of the field's state value. If the checkbox is unchecked, the field's state value will be an empty string.
 74 | 
 75 | ```jsx
 76 | <Field name="active" component="input" type="checkbox" value="yes" checked={false} />
 77 | ```
 78 | 
 79 | Under the hood, `<Field>` uses `<CheckboxField>` when passing `component="input" type="checkbox"` into `<Field>`. See more on `<CheckboxField>` below in [Built-in Fields](#built-in-fields).
 80 | 
 81 | 
 82 | #### Radio Inputs
 83 | 
 84 | For radios, you do not need to always specify `checked` as you do with checkboxes. However, you always need to specify a `value` prop for each radio in the group. A radio group is two or more radio inputs that share the same `name`. In fact, this is the only type of `<Field>` that can share a `name` with another `<Field>`. The value reported by the field's state will be the value of the respective radio that is checked. If no radio is checked, the value in the field's state will be an empty string.
 85 | 
 86 | ```jsx
 87 | <Field name="color" component="input" type="radio" value="yellow" checked />
 88 | <Field name="color" component="input" type="radio" value="blue" />
 89 | ```
 90 | 
 91 | Under the hood, `<Field>` uses `<RadioField>` when passing `component="input" type="radio"` into `<Field>`. See more on `<RadioField>` below in [Built-in Fields](#built-in-fields).
 92 | 
 93 | 
 94 | ### `<Field component="select" />`
 95 | 
 96 | A `<select>` field can be created by using `<Field>` and passing the string "select" as the `component` prop:
 97 | 
 98 | ```jsx
 99 | <Field name="state" component="select" value="az">
100 |   <option>az</option>
101 |   <option>ca</option>
102 | </Field>
103 | ```
104 | 
105 | This is the one case where `<Field>` passes child props
106 | 
107 | Under the hood, `<Field>` uses `<SelectField>` when passing `component="select"` into `<Field>`. See more on `<SelectField>` below in [Built-in Fields](#built-in-fields).
108 | 
109 | 
110 | ### `<Field component="textarea" />`
111 | 
112 | A `<textarea>` field can be created by using `<Field>` and passing the string "textarea" as the `component` prop:
113 | 
114 | ```jsx
115 | <Field name="state" component="textarea" value="Here is the starting text" />
116 | ```
117 | 
118 | Notice that the starting text (if you choose to provide it) is applied using the `value` prop.
119 | 
120 | Under the hood, `<Field>` uses `<TextareaField>` when passing `component="textarea"` into `<Field>`. See more on `<TextareaField>` below in [Built-in Fields](#built-in-fields).
121 | 
122 | 
123 | ### Built-in Fields
124 | 
125 | There are several built-in fields which the API uses internally but can also be used by you. The fields are
126 | 
127 | - InputField (for `<input>`'s that aren't radio or checkboxes)
128 | - CheckboxField
129 | - RadioField
130 | - SelectField
131 | - TextareaField
132 | 
133 | Whereas `<Field>` can be used with a string `component` prop, it can also be passed a custom component that returns a field. For example, both of these fields are the same:
134 | 
135 | ```jsx
136 | <Field name="email" component="input" value="example@example.com" />
137 | <Field name="email" component={InputField} value="example@example.com" />
138 | ```
139 | 
140 | All of the built in fields can be imported from the `informative` module like this:
141 | 
142 | ```js
143 | import { InputField, CheckboxField, RadioField, SelectField, TextareaField } from 'informative'
144 | ```
145 | 
146 | 
147 | ### Custom-Fields
148 | 
149 | Docs coming soon!
150 | 
151 | 
152 | 
153 | ## `onChange` for `<Field>` and `<Form>`
154 | 
155 | Sometimes you'll want real-time state updates as the user interacts with the form. By passing an `onChange` into `<Field>`, the API will call your callback function whenever there is a change to the field. The arguments provided will be `fieldState`, `formState`, and the DOM event if applicable.
156 | 
157 | ```jsx
158 | <Field name="email" input="input" onChange={(fieldState, formState, event) => { ... }} />
159 | ```
160 | 
161 | You can also pass an `onChange` callback into `<Form>`. The `<Form>`'s version on `onChange` will be provided the `formState`, then the `name` of the field that was changed, then the DOM event (if applicable).
162 | 
163 | ```jsx
164 | <Form onChange={(formState, name, event) => { ... }} />
165 | ```
166 | 
167 | Note that the `<Field>` change will also trigger the a `<Form>` change and the <Field> change will be called first before the `<Form>`'s.
168 | 
169 | 
170 | 
171 | # Examples
172 | 
173 | There are several examples you can run after cloning the repo. To run each one just type this command and follow the prompts:
174 | 
175 | ```sh
176 | npm run examples
177 | ```
178 | 
179 | Navigate to [localhost:3030](http://localhost:3030) to view the example
180 | 
181 | 
182 | ## Basic Usage
183 | 
184 | [See Full Code Example](examples/basic-usage/index.js)
185 | 
186 | In this example, the most basic usage of `<Form>` and `<Field>` are used. This form will behave just like a normal HTML form that has no submit or validation handlers (In other words, the form will submit to a new page and since there's no action attribute, it will submit to the same page). While there is no JS validation occurring in this example, HTML5 form validation will occur unless the `novalidate` attribute is passed into `<form />` (Note that in React the actual value passed is `noValidate`).
187 | 
188 | ```jsx
189 | import React from 'react'
190 | import { Form, Field } from 'informative'
191 | 
192 | const RegistrationForm = props => (
193 |   <Form>
194 |     <Field name="email" component="input" type="email" />
195 |     <Field name="password" component="input" type="password" />
196 |     <Field name="state" component="select">
197 |       <option>az</option>
198 |       <option>ca</option>
199 |     </Field>
200 |     <Field name="gender" component="input" type="radio" value="male" />
201 |     <Field name="gender" component="input" type="radio" value="female" />
202 |     <Field name="newsletter" component="input" type="checkbox" value="yes" checked />
203 |     <button type="submit">Submit</button>
204 |   </Form>
205 | )
206 | ```
207 | 
208 | The above example creates an ordinary HTML form like this:
209 | 
210 | ```html
211 | <form>
212 |   <input type="email" name="email" />
213 |   <input type="password" name="password" />
214 |   <select name="state">
215 |     <option>az</option>
216 |     <option>ca</option>
217 |   </select>
218 |   <input type="radio" name="gender" value="male" />
219 |   <input type="radio" name="gender" value="female" />
220 |   <input type="checkbox" name="newsletter" value="yes" checked />
221 | </form>
222 | ```
223 | 
224 | 
225 | ## Basic State Access
226 | 
227 | [See Full Code Example](examples/basic-state-access/index.js)
228 | 
229 | As seen in the previous example, by passing a string value for the `component` prop, the API will build our `<input />` field for us. But that doesn't give us access to the field's state or the form's state.
230 | 
231 | As an alternative, we can pass a custom component into the `component` prop:
232 | 
233 | ```jsx
234 | const InputField = props => {
235 |   const { name, type, events, fieldState, formState } = props
236 | 
237 |   // Access to field and form state
238 |   console.log('Field State', fieldState)
239 |   console.log('Form State State', formState)
240 | 
241 |   return <input name={name} type={type} {...events} />
242 | }
243 | 
244 | const Example = props => (
245 |   <Form>
246 |     <Field name="email" component={InputField} type="email" />
247 |   </Form>
248 | )
249 | ```
250 | 
251 | By providing the component our `InputField` instead of a string, we will gain access to props like `fieldState` and `formState` from within `InputField`. `InputField` is now expected to return a valid HTML form element of your choice (it doesn't have to be `<input />`). Just be sure to spread the `events` prop into your element to ensure the correct event callbacks are applied.
252 | 
253 | > Note: You may need to configure babel to understand JSX spread.
254 | 
255 | 
256 | ## Submit Handling
257 | 
258 | [See Full Code Example](examples/submit-handling/index.js)
259 | 
260 | To provide custom submit handling, pass an `onSubmit` callback prop into `Form`. The `onSubmit` callback gets called when the form is submitted and passes the form's `values` and `formState` to your callback function.
261 | 
262 | ```jsx
263 | class LoginForm extends React.Component {
264 | 
265 |   onSubmit(values, formState) {
266 |     console.log('Values', values)
267 |     console.log('Form State', formState)
268 | 
269 |     // Always return a promise to let the API know the status
270 |     // of your submission.
271 |     return Promise.resolve()
272 |   }
273 | 
274 |   render() {
275 |     return (
276 |       <Form onSubmit={this.onSubmit}>
277 |         <Field name="email" component="input" type="email"/><br />
278 |         <Field name="password" component="input" type="password" /><br />
279 |         <button type="submit">Submit</button>
280 |       </Form>
281 |     )
282 |   }
283 | }
284 | ```
285 | 
286 | Note that your submit handler callback will not be called if the form is invalid based on your validation rules. Validation and rules are discussed later in this document.
287 | 
288 | `onSubmit` is expected to return a promise. This will tell the API whether any asynchronous operations were successful or not. When a rejected promise is returned to the API, the `formState` will reflect these new changes: `{ submitting: false, submitFailed: true }`
289 | 
290 | 
291 | ## Redirects
292 | 
293 | If your form needs to redirect after submission, the appropriate way to handle this is to return a promise with the first resolved `.then()` doing the redirect:
294 | 
295 | ```js
296 | onSubmit(values) {
297 |   return someNetworkRequest.then(() => {
298 |     history.push('/new-page')
299 |   })
300 | }
301 | ```
302 | 
303 | > This example assumes the `history` API from React Router.
304 | 
305 | Since our API for `onSubmit` is going to handle your return promise and set the form's state based on whether it was resolved or rejected, there could be a potential race condition where `setState` is called after the component has unmounted (causing an error because the redirect unmounted the form). But the API knows how to handle this race condition if you perform the redirect inside the first resolved `then()` before returning the promise from `onSubmit`. This race condition bug fix was implemented on v0.2.3
306 | 
307 | 
308 | ## Validation
309 | 
310 | [See Full Code Example](examples/validation/index.js)
311 | 
312 | To provide custom validation, pass a `validate` callback prop into `Form`. The `validate` callback gets called with every value change of any field along with `formState` for reference. It receives the form's values as an argument and is expected to return an error object with each field's name as a property and a value that corresponds to the error. Note that only fields that have errors should be returned in the error object and if there are no errors, an empty object should be returned.
313 | 
314 | ```jsx
315 | class LoginForm extends React.Component {
316 | 
317 |   validate(values, formState) {
318 |     const errors = {}
319 |     if (!/^[\w\d\.]+@[\w\d]+\.[\w]{2,9}$/.test(values.email)) errors.email = 'Invalid Email'
320 |     if (!/^[\w\d]{6,20}$/.test(values.password)) errors.password = 'Invalid Password'
321 |     return errors
322 |   }
323 | 
324 |   render() {
325 |     return (
326 |       <Form validate={this.validate}>
327 |         <Field name="email" component="input" /><br />
328 |         <Field name="password" component="input" type="password" /><br />
329 |         <button type="submit">Submit</button>
330 |       </Form>
331 |     )
332 |   }
333 | }
334 | ```
335 | 
336 | There are much more elegant ways of writing validation such that you wouldn't have to re-write rules for every form, but this example shows a proof-of-concept for filling an error object with errors for email and password:
337 | 
338 | ```json
339 | { "email": "Invalid Email", "password": "Invalid Password" }
340 | ```
341 | 
342 | You each field in the error object, you can return a string if you wish, or you can return any other value. Your returned error object represents you notion of errors and the API will give you the same values back in any place where `fieldState` or `formState` is returned.
343 | 
344 | 
345 | ## Top-Level Access to `formState`
346 | 
347 | Sometimes it's nice to know what the `formState` is at the top-level of the API. For instance, what if we want to disable the submit button based on whether the form is valid or if the form is in the middle of a long submit?
348 | 
349 | The `Form` component allows us to pass a `render` callback function:
350 | 
351 | ```jsx
352 | class LoginForm extends React.Component {
353 | 
354 |   validate(values) {
355 |     const errors = {}
356 |     if (!/^[\w\d\.]+@[\w\d]+\.[\w]{2,9}$/.test(values.email)) errors.email = 'Invalid Email'
357 |     if (!/^[\w\d]{6,20}$/.test(values.password)) errors.password = 'Invalid Password'
358 |     return errors
359 |   }
360 | 
361 |   render() {
362 |     return (
363 |       <Form validate={this.validate} render={(formProps, formState) => (
364 |         <form {...formProps}>
365 |           <Field name="email" component={Input} /><br />
366 |           <Field name="password" component={Input} type="password" /><br />
367 |           <button type="submit" disabled={!formState.validForm || formState.submitting}>Submit</button>
368 |         </form>
369 |       )} />
370 |     )
371 |   }
372 | }
373 | ```
374 | 
375 | The only catch is that we now need to return a `<form>` element since using the API this way won't provide it for us. On a side note, if you need to customize the actual DOM `<form>` element beyond what the API builds, this is the way to do that.
376 | 
377 | The `render` callback is given `formProps` which is required to spread over the `<form>` for events required by the API. The callback is also given `formState` which is the primary reason to use this pattern -- to have state access at the form level.
378 | 
379 | Note that we could have also used the `formState` parameter to put error messages next to each field. But this document will show a better way to do that later in the **Field Wraps** section.
380 | 
381 | 
382 | ## Initial Values
383 | 
384 | [See Full Code Example](examples/initial-values/index.js)
385 | 
386 | The `<Field>` component can take a `value` prop to provide fields with their initial values:
387 | 
388 | ```jsx
389 | class EditUser extends React.Component {
390 | 
391 |   constructor() {
392 |     super()
393 |     this.state = {}
394 |   }
395 | 
396 |   componentWillMount() {
397 |     // Simulate network latency
398 |     setTimeout(() => {
399 |       this.setState({
400 |         email: 'example@example.com',
401 |         password: 'abc123'
402 |       })
403 |     }, 500)
404 |   }
405 | 
406 |   render() {
407 |     return (
408 |       <Form>
409 |         <Field name="email" component="input" value={this.state.email}/><br />
410 |         <Field name="password" type="password" component="input" value={this.state.password}/><br />
411 |         <button type="submit">Submit</button>
412 |       </Form>
413 |     )
414 |   }
415 | }
416 | ```
417 | 
418 | Note that while the form does allow late values to be passed into the form (because sometimes values come late from async operations) , `informative` does not work by allowing you to manage your form's state outside the form and then by passing values into fields as they change. All form state is managed internally with callback options to be alerted on state changes (See later in this document).
419 | 
420 | 
421 | ## Reset Form
422 | 
423 | [See Full Code Example](examples/reset-form/index.js)
424 | 
425 | If you wish to reset a form, use `refs` to access the API's internal `resetForm` method like this:
426 | 
427 | ```jsx
428 | class UpdatePassword extends React.Component {
429 |   static _myform
430 | 
431 |   constructor() {
432 |     super()
433 |     this.resetForm = this.resetForm.bind(this)
434 |   }
435 | 
436 |   resetForm() {
437 |     // The <Form /> component has a `resetForm` method that you can access via refs
438 |     this._myform.resetForm()
439 |   }
440 | 
441 |   render() {
442 |     return (
443 |       <Form ref={form => {this._myform = form}} validate={this.validate}>
444 |         <Field name="Name" component="input" value="Brad" /><br />
445 |         <Field name="bio" component="textarea" value="Web Development" /><br />
446 |         <Field name="state" component="select" value="az">
447 |           <option></option>
448 |           <option>az</option>
449 |           <option>ca</option>
450 |         </Field><br />
451 |         <Field name="active" component="input" type="checkbox" value="yes" checked /><br />
452 |         <Field name="gender" component="input" type="radio" value="m" checked />
453 |         <Field name="gender" component="input" type="radio" value="f" /><br />
454 |         <button type="button" onClick={this.resetForm}>Reset</button>
455 |       </Form>
456 |     )
457 |   }
458 | }
459 | ```
460 | 
461 | 
462 | ## Field Wraps
463 | 
464 | [See Full Code Example](examples/field-wraps/index.js)
465 | 
466 | Generally speaking, you probably want some sort of consistent wrapping DOM around all your fields. The specifics of yours may differ, but the concept is probably similar to this HTML:
467 | 
468 | ```jsx
469 | <div class="field-wrap">
470 |   <label>Email</label>
471 |   <div class="field">
472 |     <Field name="email" component={Input} type="email" />
473 |   </div>
474 | </div>
475 | <div class="field-wrap">
476 |   <label>Password</label>
477 |   <div class="field">
478 |     <Field name="password" component={Input} type="password"/>
479 |   </div>
480 | </div>
481 | ```
482 | 
483 | To achieve this without repeating the same HTML structure by hard-coding it for each `Field`, create a custom component to use in your forms that wraps around `<Field>`:
484 | 
485 | ```jsx
486 | import React from 'react'
487 | import { Form, Field, InputField } from 'informative'
488 | 
489 | const FieldWrap = props => {
490 |   const { label, component: Component, children, name, value, ...rest } = props
491 | 
492 |   return (
493 |     <Field {...rest} name={name} value={value} render={(events, fieldState, formState) => {
494 |       return (
495 |         <div className="field-wrap">
496 |           <label htmlFor={`field-${name}`}>{label}</label>
497 |           <div className="field">
498 |             <Component {...rest} originalValue={value} name={name} fieldState={fieldState} formState={formState} events={events}>
499 |               {children}
500 |             </Component>
501 |           </div>
502 |           <div className="error">
503 |             {fieldState.error}
504 |           </div>
505 |         </div>
506 |       )
507 |     }} />
508 |   )
509 | }
510 | 
511 | const LoginForm = props => (
512 |   <Form>
513 |     <FieldWrap label="Email" name="email" component={InputField} />
514 |     <FieldWrap label="Password" name="password" component={InputField} type="password" />
515 |     <button type="submit">Submit</button>
516 |   </Form>
517 | )
518 | ```
519 | 
520 | Not only do we get to write the wrapper code and use it everywhere, it has other benefits like how field errors can be emitted inline with the field in the DOM.
521 | 
522 | You can build your own version of `<FieldWrap>` any way you like. This one is just an example and doesn't come with the API. Notice that this one does make use of the built-in `InputField` component. This example `<FieldWrap>` would allow us to use the build-in `InputField`, `CheckboxField`, `RadioField`, `SelectField`, and `TextareaField` -- all of which require specific props that you can see we're passing into `<Component originalValue={value} name={name} fieldState={fieldState} formState={formState} events={events} />`. Yours though could be built any way you like, just be sure to pass the `events` prop into the actual form field to wire it into the API.
523 | 
524 | For more docs on the built-in fields, see [Built-in Fields](#built-in-fields) above.
525 | 
526 | 
527 | ## Field Abstractions
528 | 
529 | [See Full Code Example](examples/full-featured/index.js)
530 | 
531 | Further abstraction can be done by making specific types of fields for quick use. For example, imaging having a `<FieldFirstName />` component which provides the same result as `<FieldWrap label="First Name" name="firstName" component={InputField} />`.
532 | 
533 | With our new `FieldWrap` component, we can now make easy field abstractions for common fields:
534 | 
535 | ```jsx
536 | const FieldFirstName = props => <FieldWrap label="First Name" name="firstName" component={InputField} {...props} />
537 | const FieldLastName = props => <FieldWrap label="Last Name" name="lastName" component={InputField} {...props} />
538 | const FieldEmail = props => <FieldWrap label="Email" name="email" component={InputField} type="email" {...props} />
539 | const FieldPassword = props => <FieldWrap label="Password" name="password" component={InputField} type="password" {...props} />
540 | ```
541 | 
542 | To be used like this:
543 | 
544 | ```jsx
545 | const SignupForm = props => (
546 |   <Form>
547 |     <FieldFirstName />
548 |     <FieldLastName />
549 |     <FieldEmail />
550 |     <FieldEmail label="Repeat Email" name="repeatEmail" />
551 |     <FieldPassword />
552 |   </Form>
553 | )
554 | ```
555 | 
556 | Since we spread the props over `<FieldWrap>`, each custom field can be overridden as we do with the second email in this example
557 | 
558 | 
559 | ## `connectField` HoC
560 | 
561 | If you'd rather use a higher order component to create a "Field Wrap" concept instead of using `<Field>` with a callback child, the `connectField` can be used like this:
562 | 
563 | ```jsx
564 | import { Form, connectField } from 'informative'
565 | 
566 | const Input = props => {
567 |   const { name, type, input } = props
568 |   return <input type={type || 'text'} id={`field-` + name} name={name} {...input} />
569 | }
570 | 
571 | const FieldWrap = props => {
572 |   const { input, fieldState, formState, label, type, name } = props
573 | 
574 |   // Access to field and form state
575 |   console.log('Field State', fieldState)
576 |   console.log('Form State State', formState)
577 | 
578 |   return (
579 |     <div className="field-wrap">
580 |       <label htmlFor={`field-` + name}>{label}</label>
581 |       <div className="input">
582 |         <Input input={input} name={name} type={type} />
583 |       </div>
584 |       <div className="error">
585 |         {fieldState.error}
586 |       </div>
587 |     </div>
588 |   )
589 | }
590 | 
591 | // High-level abstraction fields created with `connectField` HoC
592 | const FieldEmail = connectField('email')(FieldWrap)
593 | const FieldPassword = connectField('password')(FieldWrap)
594 | 
595 | class LoginForm extends React.Component {
596 | 
597 |   validate(values) {
598 |     const errors = {}
599 |     if (!/^[\w\d\.]+@[\w\d]+\.[\w]{2,9}$/.test(values.email)) errors.email = 'Invalid Email'
600 |     if (!/^[\w\d]{6,20}$/.test(values.password)) errors.password = 'Invalid Password'
601 |     return errors
602 |   }
603 | 
604 |   render() {
605 |     return (
606 |       <Form validate={this.validate}>
607 |         <FieldEmail label="Email" />
608 |         <FieldPassword label="Password" name="password" type="password" />
609 |         <button type="submit">Submit</button>
610 |       </Form>
611 |     )
612 |   }
613 | }
614 | ```
615 | 
616 | 
617 | # `formState`
618 | 
619 | A primary goal of this API is to provide your form with real-time form-state changes. The API keeps state in one object for the entire form with the following properties with these initial values:
620 | 
621 | ```js
622 | formState = {
623 |   hasSubmitted: false,
624 |   submitFailed: false,
625 |   submitting: false,
626 |   validForm: true,
627 |   visited: false,
628 |   dirty: false,
629 |   errors: {},
630 |   fields: {},
631 |   values: {}
632 | }
633 | ```
634 | 
635 | 
636 | #### hasSubmitted [`boolean: false`]
637 | 
638 | Has the form been submitted yet? This defaults to `false` and is set to `true` when the form is submitted regardless of the response from the `onSubmit` callback or the response from the `validate` callback. This is set back to `false` after a call to `resetForm()`.
639 | 
640 | #### submitFailed [`boolean: false`]
641 | 
642 | Did the form fail submission in it's last attempt? This defaults to `false` and is set to `true` if the user-supplied validation fails or if the promise returned from the `onSubmit` callback is rejected. Once `true`, this value is set to `false` again when the form is submitted and user-supplied validation passes and the returned promise from the `onSubmit` callback is resolved. This is set back to `false` after a call to `resetForm()`.
643 | 
644 | #### submitting [`boolean: false`]
645 | 
646 | Is the form in the process of submitting? This defaults to `false` and is set to `true` when the form is submitted and if the user-supplied validation succeeds. This is set back to `false` when the returned promise from the `onSubmit` callback is rejected or resolved. This is set back to `false` after a call to `resetForm()`.
647 | 
648 | #### validForm [`boolean: true`]
649 | 
650 | Is the form valid according to the user-supplied validation callback? This defaults to `true` and is set to `false` any time the user-supplied validation callback returns an object with keys (representing errors).
651 | 
652 | Upon submission, if this value is set to `false` then the user-supplied submit callback will not be called and the form will receive new state reflecting these changes `{ submitting: false, submitFailed: true, hasSubmitted: true }`
653 | 
654 | #### visited [`boolean: false`]
655 | 
656 | Have any of the form's fields been visited? This defaults to `false` and is changed to `true` when any field in the form has its `onChange`, `onBlur`, or `onFocus` events fire. This does not get set back to `false`, even after a call to `formReset()`.
657 | 
658 | #### dirty [`boolean: false`]
659 | 
660 | Have any of the form's fields been changed? This defaults to `false` and is changed to `true` when any field in the form has its `onChange` event fired. This is set back to `false` after a call to `resetForm()`.
661 | 
662 | #### errors [`object`]
663 | 
664 | This is an object that will either be empty when there are no errors, or will be filled with errors as supplied by the return value of the user-supplied validate callback. The presence of keys in this object is what will trigger `validForm` to be `false`
665 | 
666 | #### fields [`object`]
667 | 
668 | This is an object with one property for each field registered in the form. See more about this object in **fieldState** below.
669 | 
670 | #### values [`object`]
671 | 
672 | This is an object with one property for each field registered in the form. The value of each property is the respective value for each field.
673 | 
674 | #### resetForm() [`function`]
675 | 
676 | This function can be called to reset the form. Resetting a form will have the effect of resetting these `formState` values:
677 | 
678 | ```js
679 | { hasSubmitted: false, submitFailed: false, submitting: false, dirty: false }
680 | ```
681 | 
682 | It will also have the effect of resetting each field in `formState.fields` to it's default values (see below in **fieldState**) and setting each field in `formState.values` to have an empty string for its value.
683 | 
684 | 
685 | # `fieldState`
686 | 
687 | Each field's state object is stored in `formState.fields[name]` where `name` is the provided name of each field. There are several instances in this API where `fieldState` and `formState` are provided to you in a callback. You can always derive the `fieldState` by digging into `formState`, but when `fieldState` is provided to you, it's just for convenience.
688 | 
689 | Each field's respective state has these default values:
690 | 
691 | ```js
692 | fieldState = {
693 |   value: '',
694 |   error: '',
695 |   validField: true,
696 |   visited: false,
697 |   dirty: false,
698 |   active: false,
699 |   touched: false
700 | }
701 | ```
702 | 
703 | #### value [`string: ''`]
704 | 
705 | This is the field's value which defaults to an empty string. This value is changed in real-time as the user interacts with the field and the field's `onChange` event is fired.
706 | 
707 | #### error [`string: ''`]
708 | 
709 | This is the error message or value given to this field by the user-supplied validation response. While the default value is an empty string, validation occurs immediately when the form is loaded which might cause field errors. This value is changed in real-time as the user interacts with the field and the field's onChange event is fired.
710 | 
711 | #### validField [`boolean: true`]
712 | 
713 | Is the field valid according to the user-supplied validation callback for the form? This defaults to `true` and is set to `false` any time the user-supplied validation callback returns an object with keys matching a field's name, this value will be changed to `false`.
714 | 
715 | #### visited [`boolean: false`]
716 | 
717 | Has this field been visited? This defaults to `false` and is changed to `true` when the field's `onChange`, `onBlur`, or `onFocus` events fire. This is set back to `false` after a call to `resetForm()`.
718 | 
719 | #### dirty [`boolean: false`]
720 | 
721 | Has this field been changed? This defaults to `false` and is changed to `true` when the field's `onChange` event is fired. This is set back to `false` after a call to `resetForm()`.
722 | 
723 | #### active [`boolean: false`]
724 | 
725 | Is the field active (has focus)? This defaults to `false` and is changed to `true` when the field's `onFocus` event is fired. This is set back to `false` when the field's `onBlur` event is fired or after a call to `resetForm()`.
726 | 
727 | #### touched [`boolean: false`]
728 | 
729 | Has the field been visited and then left. In other words, this defaults to `false` and is changed to `true` when the field's `onBlur` event is fired. This is set back to `false` after a call to `resetForm()`.
730 | 


--------------------------------------------------------------------------------
/examples/basic-state-access/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Form, Field } from 'src'
 4 | 
 5 | const InputField = props => {
 6 |   const { name, type, events, fieldState, formState } = props
 7 | 
 8 |   // Access to field and form state
 9 |   console.log('Field State', fieldState)
10 |   console.log('Form State State', formState)
11 | 
12 |   return <input name={name} type={type} {...events} />
13 | }
14 | 
15 | const Example = props => (
16 |   <Form>
17 |     <Field name="email" component={InputField} type="email" />
18 |   </Form>
19 | )
20 | 
21 | ReactDOM.render(<Example />, document.getElementById('root'))
22 | 


--------------------------------------------------------------------------------
/examples/basic-usage/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Form, Field } from 'src'
 4 | 
 5 | const RegistrationForm = props => (
 6 |   <Form>
 7 |     <p>This form is really, truely "basic". It's simply the API's version of an HTML form that submits using HTML submissions with no JavaScript interuption</p>
 8 |     <Field name="email" component="input" type="email" /><br />
 9 |     <Field name="password" component="input" type="password" /><br />
10 |     <Field name="state" component="select">
11 |       <option>az</option>
12 |       <option>ca</option>
13 |     </Field><br />
14 |     <Field name="gender" component="input" type="radio" value="male" />
15 |     <Field name="gender" component="input" type="radio" value="female" /><br />
16 |     <Field name="newsletter" component="input" type="checkbox" value="yes" checked /><br />
17 |     <button type="submit">Submit</button>
18 |   </Form>
19 | )
20 | 
21 | ReactDOM.render(<RegistrationForm />, document.getElementById('root'))
22 | 


--------------------------------------------------------------------------------
/examples/cli.js:
--------------------------------------------------------------------------------
 1 | var inquirer = require('inquirer')
 2 | 
 3 | var examples = {
 4 |   'Basic Usage': 'basic-usage',
 5 |   'Basic State Access': 'basic-state-access',
 6 |   'Submit Handling': 'submit-handling',
 7 |   'Validation': 'validation',
 8 |   'Initial Values': 'initial-values',
 9 |   'Reset Form': 'reset-form',
10 |   'Field Wraps': 'field-wraps',
11 |   'Field Wraps with connectField HoC': 'field-wrap-hoc',
12 |   'Full Featured Example': 'full-featured'
13 | }
14 | 
15 | inquirer.prompt([{
16 |   type: 'list',
17 |   name: 'example',
18 |   message: 'Which Example?',
19 |   choices: Object.keys(examples)
20 | }]).then(function(answers) {
21 |   process.env.EXAMPLE = examples[answers.example]
22 |   var server = require('./server')
23 | })
24 | 


--------------------------------------------------------------------------------
/examples/field-wrap-hoc/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Form, connectField } from 'src'
 4 | 
 5 | const InputField = props => {
 6 |   const { name, type, input } = props
 7 |   return <input type={type || 'text'} id={`field-` + name} name={name} {...input} />
 8 | }
 9 | 
10 | const FieldWrap = props => {
11 |   const { input, fieldState, formState, label, type, name } = props
12 | 
13 |   // Access to field and form state
14 |   console.log('Field State', fieldState)
15 |   console.log('Form State State', formState)
16 | 
17 |   return (
18 |     <div className="field-wrap">
19 |       <label htmlFor={`field-` + name}>{label}</label>
20 |       <div className="input">
21 |         <InputField input={input} name={name} type={type} />
22 |       </div>
23 |       <div className="error">
24 |         {fieldState.error}
25 |       </div>
26 |     </div>
27 |   )
28 | }
29 | 
30 | // High-level abstraction fields created with `connectField` HoC
31 | const FieldEmail = connectField('email')(FieldWrap)
32 | 
33 | class LoginForm extends React.Component {
34 | 
35 |   validate(values) {
36 |     const errors = {}
37 |     if (!/^[\w\d\.]+@[\w\d]+\.[\w]{2,9}$/.test(values.email)) errors.email = 'Invalid Email'
38 |     return errors
39 |   }
40 | 
41 |   render() {
42 | 
43 |     // The password field was left out of this example on purpose to limit
44 |     // the amount of console logs for state changes.
45 | 
46 |     return (
47 |       <Form validate={this.validate}>
48 |         <FieldEmail label="Email" />
49 |         <button type="submit">Submit</button>
50 |       </Form>
51 |     )
52 |   }
53 | }
54 | 
55 | ReactDOM.render(<LoginForm />, document.getElementById('root'))
56 | 


--------------------------------------------------------------------------------
/examples/field-wraps/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Form, Field, InputField } from 'src'
 4 | 
 5 | const FieldWrap = props => {
 6 |   const { label, component: Component, children, name, value, ...rest } = props
 7 | 
 8 |   return (
 9 |     <Field {...rest} name={name} value={value} render={(events, fieldState, formState) => {
10 | 
11 |       // Access to field and form state
12 |       console.log('Field State', fieldState)
13 |       console.log('Form State State', formState)
14 | 
15 |       return (
16 |         <div className="field-wrap">
17 |           <label htmlFor={`field-${name}`}>{label}</label>
18 |           <div className="field">
19 |             <Component name={name} originalValue={value} fieldState={fieldState} formState={formState} events={events}>
20 |               {children}
21 |             </Component>
22 |           </div>
23 |           <div className="error">
24 |             {fieldState.error}
25 |           </div>
26 |         </div>
27 |       )
28 | 
29 |     }} />
30 |   )
31 | }
32 | 
33 | class LoginForm extends React.Component {
34 | 
35 |   validate(values) {
36 |     const errors = {}
37 |     if (!/^[\w\d\.]+@[\w\d]+\.[\w]{2,9}$/.test(values.email)) errors.email = 'Invalid Email'
38 |     return errors
39 |   }
40 | 
41 |   render() {
42 | 
43 |     // The password field was left out of this example on purpose to limit
44 |     // the amount of console logs for state changes.
45 | 
46 |     return (
47 |       <Form validate={this.validate}>
48 |         <FieldWrap label="Email" name="email" component={InputField} />
49 |         <button type="submit">Submit</button>
50 |       </Form>
51 |     )
52 |   }
53 | }
54 | 
55 | ReactDOM.render(<LoginForm />, document.getElementById('root'))
56 | 


--------------------------------------------------------------------------------
/examples/full-featured/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Form, Field, InputField } from 'src'
 4 | 
 5 | const FieldWrap = props => {
 6 |   const { label, component: Component, children, name, value, ...rest } = props
 7 | 
 8 |   return (
 9 |     <Field {...rest} name={name} value={value} render={(events, fieldState, formState) => (
10 |         <div className="field-wrap">
11 |           <label htmlFor={`field-${name}`}>{label}</label>
12 |           <div className="field">
13 |             <Component {...rest} originalValue={value} name={name} fieldState={fieldState} formState={formState} events={events}>
14 |               {children}
15 |             </Component>
16 |           </div>
17 |           <div className="error">
18 |             {fieldState.error}
19 |           </div>
20 |         </div>
21 |     )} />
22 |   )
23 | }
24 | 
25 | // High-level Field Abstractions
26 | const FieldFirstName = props => <FieldWrap label="First Name" name="firstName" component={InputField} {...props} />
27 | const FieldLastName = props => <FieldWrap label="Last Name" name="lastName" component={InputField} {...props} />
28 | const FieldEmail = props => <FieldWrap label="Email" name="email" component={InputField} type="email" {...props} />
29 | const FieldPassword = props => <FieldWrap label="Password" name="password" component={InputField} type="password" {...props} />
30 | 
31 | class UserForm extends React.Component {
32 | 
33 |   constructor() {
34 |     super()
35 |     this.state = {}
36 |   }
37 | 
38 |   componentWillMount() {
39 |     // Simulate network latency for asynchronous `initialValues`
40 |     setTimeout(() => {
41 |       this.setState({
42 |         firstName: 'Sally',
43 |         lastName: 'Jane',
44 |         email: 'example@example.com',
45 |         password: 'abc123'
46 |       })
47 |     }, 500)
48 |   }
49 | 
50 |   validate(values) {
51 |     const errors = {}
52 |     if (!/^[\w\d\.]+@[\w\d]+\.[\w]{2,9}$/.test(values.email)) errors.email = 'Invalid Email'
53 |     if (!/^[\w\d]{6,20}$/.test(values.password)) errors.password = 'Invalid Password'
54 |     return errors
55 |   }
56 | 
57 |   onSubmit(values, formState) {
58 |     console.log('Submit Form', values)
59 |     return Promise.resolve()
60 |   }
61 | 
62 |   render() {
63 |     return (
64 |       <Form validate={this.validate} onSubmit={this.onSubmit} render={(formProps, formState) => (
65 |         <form {...formProps} noValidate>
66 |           <FieldFirstName value={this.state.firstName} />
67 |           <FieldLastName value={this.state.lastName} />
68 |           <FieldEmail value={this.state.email} />
69 |           <FieldPassword value={this.state.password} />
70 |           <button type="submit" disabled={!formState.validForm}>Submit</button>
71 |         </form>
72 |       )} />
73 |     )
74 |   }
75 | }
76 | 
77 | ReactDOM.render(<UserForm />, document.getElementById('root'))
78 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Example Form</title>
 6 | 
 7 |   <style>
 8 | 
 9 |     body {
10 |       font-family: arial;
11 |     }
12 | 
13 |     form > * + * {
14 |       margin-top: 1em;
15 |     }
16 | 
17 |     .field-wrap {
18 |       background-color: #eee;
19 |       max-width: 500px;
20 |       padding: 1em;
21 |     }
22 | 
23 |     .field-wrap label {
24 |       font-size: 0.6em;
25 |       font-weight: 700;
26 |     }
27 | 
28 |     .field-wrap .error {
29 |       color: red;
30 |     }
31 | 
32 |   </style>
33 | </head>
34 | <body>
35 |   <div id="root"></div>
36 |   <script type="text/javascript" src="dist/bundle.js"></script>
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/examples/initial-values/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Form, Field } from 'src'
 4 | 
 5 | class EditUser extends React.Component {
 6 | 
 7 |   constructor() {
 8 |     super()
 9 |     this.state = {}
10 |   }
11 | 
12 |   componentWillMount() {
13 |     // Simulate network latency
14 |     setTimeout(() => {
15 |       this.setState({
16 |         email: 'example@example.com',
17 |         password: 'abc123'
18 |       })
19 |     }, 500)
20 |   }
21 | 
22 |   render() {
23 |     return (
24 |       <Form>
25 |         <Field name="email" component="input" value={this.state.email}/><br />
26 |         <Field name="password" type="password" component="input" value={this.state.password}/><br />
27 |         <button type="submit">Submit</button>
28 |       </Form>
29 |     )
30 |   }
31 | }
32 | 
33 | ReactDOM.render(<EditUser />, document.getElementById('root'))
34 | 


--------------------------------------------------------------------------------
/examples/reset-form/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Form, Field } from 'src'
 4 | 
 5 | class UpdatePassword extends React.Component {
 6 |   static _myform
 7 | 
 8 |   constructor() {
 9 |     super()
10 |     this.resetForm = this.resetForm.bind(this)
11 |   }
12 | 
13 |   resetForm() {
14 |     // The <Form /> component has a `resetForm` method that you can access via refs
15 |     this._myform.resetForm()
16 |   }
17 | 
18 |   validate(values) {
19 |     const errors = {}
20 |     // Allows us to see values as the user types for testing
21 |     console.log('Validate', values)
22 |     return errors
23 |   }
24 | 
25 |   render() {
26 |     return (
27 |       <Form ref={form => {this._myform = form}} validate={this.validate}>
28 |         <Field name="Name" component="input" value="Brad" /><br />
29 |         <Field name="bio" component="textarea" value="Web Development" /><br />
30 |         <Field name="state" component="select" value="az">
31 |           <option></option>
32 |           <option>az</option>
33 |           <option>ca</option>
34 |         </Field><br />
35 |         <Field name="active" component="input" type="checkbox" value="yes" checked /><br />
36 |         <Field name="gender" component="input" type="radio" value="m" checked />
37 |         <Field name="gender" component="input" type="radio" value="f" /><br />
38 |         <button type="button" onClick={this.resetForm}>Reset</button>
39 |       </Form>
40 |     )
41 |   }
42 | }
43 | 
44 | ReactDOM.render(<UpdatePassword />, document.getElementById('root'))
45 | 


--------------------------------------------------------------------------------
/examples/server.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var express = require('express')
 3 | var webpack = require('webpack')
 4 | var config = require('../webpack.config')
 5 | 
 6 | var app = express()
 7 | var compiler = webpack(config)
 8 | 
 9 | app.use(require('webpack-dev-middleware')(compiler, {
10 |   noInfo: true,
11 |   publicPath: config.output.publicPath
12 | }))
13 | 
14 | app.use(require('webpack-hot-middleware')(compiler))
15 | 
16 | app.get('*', function(req, res) {
17 |   res.sendFile(path.join(__dirname, 'index.html'))
18 | })
19 | 
20 | app.listen(3030, 'localhost', function(err) {
21 |   if (err) {
22 |     console.log(err)
23 |     return
24 |   }
25 |   console.log('Listening at http://localhost:3030\nWaiting for build...')
26 | })
27 | 


--------------------------------------------------------------------------------
/examples/submit-handling/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Form, Field } from 'src'
 4 | 
 5 | class LoginForm extends React.Component {
 6 | 
 7 |   onSubmit(values, formState) {
 8 |     console.log('Values', values)
 9 |     console.log('Form State', formState)
10 | 
11 |     // Always return a promise to let the API know the status
12 |     // of your submission. Typically you'll probably do some
13 |     // sort of async operation here like a network request, so
14 |     // a resolved promise will tell the API that everything went
15 |     // well or not
16 |     return Promise.resolve()
17 |   }
18 | 
19 |   render() {
20 |     return (
21 |       <Form onSubmit={this.onSubmit}>
22 |         <Field name="email" component="input" type="email" /><br />
23 |         <Field name="password" component="input" type="password" /><br />
24 |         <button type="submit">Submit</button>
25 |       </Form>
26 |     )
27 |   }
28 | }
29 | 
30 | ReactDOM.render(<LoginForm />, document.getElementById('root'))
31 | 


--------------------------------------------------------------------------------
/examples/validation/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Form, Field } from 'src'
 4 | 
 5 | class LoginForm extends React.Component {
 6 | 
 7 |   validate(values) {
 8 |     const errors = {}
 9 |     if (!/^[\w\d\.]+@[\w\d]+\.[\w]{2,9}$/.test(values.email)) errors.email = 'Invalid Email'
10 |     if (!/^[\w\d]{6,20}$/.test(values.password)) errors.password = 'Invalid Password'
11 |     console.log('Validation Errors', errors)
12 |     return errors
13 |   }
14 | 
15 |   render() {
16 |     return (
17 |       <Form validate={this.validate}>
18 |         <Field name="email" component="input" type="email" /><br />
19 |         <Field name="password" component="input" type="password" /><br />
20 |         <button type="submit">Submit</button>
21 |       </Form>
22 |     )
23 |   }
24 | }
25 | 
26 | ReactDOM.render(<LoginForm />, document.getElementById('root'))
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "informative",
 3 |   "version": "0.6.3",
 4 |   "description": "React forms with internal state-management",
 5 |   "main": "dist/index.js",
 6 |   "repository": {
 7 |     "url": "https://github.com/bradwestfall/informative.git"
 8 |   },
 9 |   "keywords": [
10 |     "react",
11 |     "forms",
12 |     "state"
13 |   ],
14 |   "author": "Brad Westfall",
15 |   "license": "MIT",
16 |   "scripts": {
17 |     "prepare": "npm run build",
18 |     "build": "npm run clean && cross-env babel src --out-dir dist",
19 |     "clean": "rimraf dist/*",
20 |     "example": "npm run examples",
21 |     "examples": "cross-env node examples/cli.js",
22 |     "example:server": "cross-env EXAMPLE=$form node examples/server.js",
23 |     "example:basic-usage": "form=basic-usage npm run example:server",
24 |     "example:basic-state-access": "form=basic-state-access npm run example:server",
25 |     "example:submit-handling": "form=submit-handling npm run example:server",
26 |     "example:validation": "form=validation npm run example:server",
27 |     "example:initial-values": "form=initial-values npm run example:server",
28 |     "example:reset-form": "form=reset-form npm run example:server",
29 |     "example:field-wraps": "form=field-wraps npm run example:server",
30 |     "example:field-wrap-hoc": "form=field-wrap-hoc npm run example:server",
31 |     "example:full-featured": "form=full-featured npm run example:server",
32 |     "test": "cross-env mocha test/.setup.js test/**/**.js",
33 |     "sandbox": "EXAMPLE=sandbox node examples/server.js"
34 |   },
35 |   "devDependencies": {
36 |     "babel-cli": "^6.23.0",
37 |     "babel-core": "^6.23.1",
38 |     "babel-loader": "^6.3.2",
39 |     "babel-preset-es2015": "^6.22.0",
40 |     "babel-preset-react": "^6.23.0",
41 |     "babel-preset-stage-2": "^6.22.0",
42 |     "babel-register": "^6.24.0",
43 |     "chai": "^3.5.0",
44 |     "cross-env": "^3.2.3",
45 |     "enzyme": "^2.7.1",
46 |     "express": "^4.15.2",
47 |     "inquirer": "^3.0.6",
48 |     "jsdom": "^9.12.0",
49 |     "lodash": "^4.17.4",
50 |     "mocha": "^3.2.0",
51 |     "prop-types": "^15.5.10",
52 |     "react": "^15.4.2",
53 |     "react-addons-test-utils": "^15.4.2",
54 |     "react-dom": "^15.4.2",
55 |     "rimraf": "^2.6.1",
56 |     "webpack": "^2.2.1",
57 |     "webpack-dev-middleware": "^1.10.1",
58 |     "webpack-hot-middleware": "^2.17.1"
59 |   },
60 |   "dependencies": {}
61 | }
62 | 


--------------------------------------------------------------------------------
/src/Field.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import { InputField, CheckboxField, RadioField, SelectField, TextareaField } from './FieldTypes'
  4 | 
  5 | class Field extends React.Component {
  6 | 
  7 |   constructor() {
  8 |     super()
  9 |     this.onChange = this.onChange.bind(this)
 10 |     this.setupFieldState = this.setupFieldState.bind(this)
 11 |     this.updateFieldState = this.updateFieldState.bind(this)
 12 |   }
 13 | 
 14 |   componentDidMount() {
 15 |     const { name } = this.props
 16 |     this.context.registerField(name, this.setupFieldState(this.props))
 17 |   }
 18 | 
 19 |   // Prop Change for `value`
 20 |   componentWillReceiveProps(nextProps) {
 21 |     if (nextProps.value === this.props.value && nextProps.checked === this.props.checked) return false
 22 |     this.updateFieldState(this.setupFieldState(nextProps))
 23 |   }
 24 | 
 25 |   setupFieldState(props) {
 26 |     // Peel off values to leave `restProps`
 27 |     const { children, component, value, trim, format, ...restProps } = props
 28 | 
 29 |     return {
 30 |       // Normalize value before sending it to fieldState
 31 |       value: (typeof value === 'boolean') ? String(value)  : (value || ''),
 32 |       // A formatter function for the value
 33 |       format,
 34 |       // Does the field's value get automatically trimmed
 35 |       trim,
 36 |       // Give original props to fieldState
 37 |       props: { ...restProps, value }
 38 |     }
 39 |   }
 40 | 
 41 |   // DOM Change
 42 |   onChange(e) {
 43 |     const { target } = e
 44 |     const isCheckbox = target.type === 'checkbox'
 45 | 
 46 |     let value = ''
 47 |     if (isCheckbox) {
 48 |       value = target.checked ? target.value : ''
 49 |     } else {
 50 |       value = target.value
 51 |     }
 52 | 
 53 |     this.updateFieldState({ value, dirty: true }, e)
 54 |   }
 55 | 
 56 |   updateFieldState(newState, e = {}) {
 57 |     const { name, onChange } = this.props
 58 |     this.context.setFieldState(name, newState, (fieldState, formState) => {
 59 |       if (onChange) onChange(fieldState, formState, e)   // call the field's onChange if the user provided one
 60 |       this.context.onChange(name, e)                     // call the form's onChange if the user provided one
 61 |     })
 62 |   }
 63 | 
 64 |   render() {
 65 |     // Some of these variables aren't used. We just need to peel them off so we can get rest
 66 |     const { render, component: Component, name, trim, format, value: originalValue, children, ...rest } = this.props
 67 |     const formState = this.context.getFormState() || {}
 68 |     const fieldState = formState.fields[name]
 69 | 
 70 |     // Bail if name not provided
 71 |     if (!name) throw new Error('the `name` prop must be provided to `<Field>`')
 72 | 
 73 |     // Don't render if fieldState hasn't been setup
 74 |     if (!fieldState) return null
 75 | 
 76 |     // Event callbacks for every field
 77 |     const events = {
 78 |       onChange: this.onChange,
 79 |       onFocus: e => this.context.setFieldState(name, { visited: true, active: true }),
 80 |       onBlur: e => this.context.setFieldState(name, { active: false, touched: true })
 81 |     }
 82 | 
 83 |     // If <Field render={fn} /> is providing a field wrap by virtue of function
 84 |     if (typeof render === 'function') {
 85 |       return render(events, fieldState, formState)
 86 | 
 87 |     // If <Field component="input" /> was passed a string "input" component
 88 |     } else if (typeof Component === 'string' && Component.toLowerCase() === 'input') {
 89 |       const type = this.props.type
 90 |       switch(type) {
 91 |         case 'checkbox': return <CheckboxField {...rest} name={name} originalValue={originalValue} fieldState={fieldState} events={events} />
 92 |         case 'radio': return <RadioField {...rest} name={name} originalValue={originalValue} fieldState={fieldState} events={events} />
 93 |         case 'text':
 94 |         default: return <InputField {...rest} name={name} fieldState={fieldState} events={events} />
 95 |       }
 96 | 
 97 |     // If <Field component="[string]" /> was passed a string component
 98 |     } else if (typeof Component === 'string') {
 99 |       switch(Component) {
100 |         case 'textarea':
101 |           if (children) throw new Error('textarea fields use the `value` prop instead of children - https://facebook.github.io/react/docs/forms.html#the-textarea-tag')
102 |           return <TextareaField {...rest} name={name} fieldState={fieldState} events={events} />
103 |         case 'select': return <SelectField {...rest} name={name} fieldState={fieldState} events={events}>{children}</SelectField>
104 |         default: throw new Error('Invalid string value for `component` prop of <Field /> :', Component)
105 |       }
106 | 
107 |     // If <Field component={CustomField} /> was passed a component prop with a custom component
108 |     } else if (typeof Component === 'function') {
109 |       return <Component {...rest} name={name} originalValue={originalValue} fieldState={fieldState} formState={formState} events={events}>{children}</Component>
110 | 
111 |     // Only the above three are allowed
112 |     } else {
113 |       throw new Error('Field must have a `component` prop or `render` prop')
114 |     }
115 |   }
116 | }
117 | 
118 | Field.contextTypes = {
119 |   registerField: PropTypes.func,
120 |   setFieldState: PropTypes.func,
121 |   getFormState: PropTypes.func,
122 |   onChange: PropTypes.func
123 | }
124 | 
125 | Field.defaultProps = {
126 |   format: value => value
127 | }
128 | 
129 | Field.propTypes = {
130 |   name: PropTypes.string.isRequired,
131 |   onChange: PropTypes.func,
132 |   format: PropTypes.func,
133 |   trim: PropTypes.bool
134 | }
135 | 
136 | export default Field
137 | 


--------------------------------------------------------------------------------
/src/FieldTypes.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | const cleanProps = props => {
 5 |   delete props.name
 6 |   delete props.originalValue
 7 |   delete props.formState
 8 |   delete props.fieldState
 9 |   delete props.events
10 |   return props
11 | }
12 | 
13 | /****************************************
14 |   <input type="text">
15 | *****************************************/
16 | 
17 | const InputField = ({ name, fieldState, events, ...rest }) => {
18 |   const props = cleanProps(rest)
19 |   return <input {...props} name={name} type={fieldState.props.type || 'text'} value={fieldState.value} {...events} />
20 | }
21 | 
22 | InputField.propTypes = {
23 |   name: PropTypes.string.isRequired,
24 |   fieldState: PropTypes.object.isRequired,
25 |   events: PropTypes.object.isRequired
26 | }
27 | 
28 | /****************************************
29 |   <input type="checkbox>
30 | *****************************************/
31 | 
32 | const CheckboxField = ({ name, originalValue, fieldState, events, ...rest }) => {
33 |   const { value: stateValue } = fieldState
34 |   const checked = stateValue !== ''
35 |   const props = cleanProps(rest)
36 |   return <input {...props} name={name} type="checkbox" value={originalValue} checked={checked} {...events} />
37 | }
38 | 
39 | CheckboxField.propTypes = {
40 |   name: PropTypes.string.isRequired,
41 |   originalValue: PropTypes.any.isRequired,
42 |   fieldState: PropTypes.object.isRequired,
43 |   events: PropTypes.object.isRequired
44 | }
45 | 
46 | /****************************************
47 |   <input type="radio>
48 | *****************************************/
49 | 
50 | const RadioField = ({ name, originalValue, fieldState, events, ...rest }) => {
51 |   const { value: stateValue } = fieldState
52 |   const checked = stateValue === originalValue
53 |   const props = cleanProps(rest)
54 |   return <input {...props} name={name} type="radio" value={originalValue} checked={checked} {...events} />
55 | }
56 | 
57 | RadioField.propTypes = {
58 |   name: PropTypes.string.isRequired,
59 |   originalValue: PropTypes.any.isRequired,
60 |   fieldState: PropTypes.object.isRequired,
61 |   events: PropTypes.object.isRequired
62 | }
63 | 
64 | /****************************************
65 |   <select>
66 | *****************************************/
67 | 
68 | const SelectField = ({ name, children, fieldState, events, ...rest }) => {
69 |   const props = cleanProps(rest)
70 |   return <select {...props} name={name} value={fieldState.value} {...events}>{children}</select>
71 | }
72 | 
73 | SelectField.propTypes = {
74 |   name: PropTypes.string.isRequired,
75 |   fieldState: PropTypes.object.isRequired,
76 |   events: PropTypes.object.isRequired
77 | }
78 | 
79 | /****************************************
80 |   <textarea>
81 | *****************************************/
82 | 
83 | const TextareaField = ({ name, fieldState, events, ...rest }) => {
84 |   const props = cleanProps(rest)
85 |   return <textarea {...props} name={name} value={fieldState.value} {...events} />
86 | }
87 | 
88 | TextareaField.propTypes = {
89 |   name: PropTypes.string.isRequired,
90 |   fieldState: PropTypes.object.isRequired,
91 |   events: PropTypes.object.isRequired
92 | }
93 | 
94 | export { InputField, CheckboxField, RadioField, SelectField, TextareaField }
95 | 


--------------------------------------------------------------------------------
/src/Form.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import { cloneDeep } from 'lodash/lang'
  4 | 
  5 | // http://stackoverflow.com/a/5344074
  6 | // const clone = obj => JSON.parse(JSON.stringify(obj))
  7 | const clone = cloneDeep
  8 | 
  9 | const initialFieldState = value => ({
 10 |   value: '',
 11 |   error: '',
 12 |   validField: true,
 13 |   visited: false,
 14 |   dirty: false,
 15 |   active: false,
 16 |   touched: false,
 17 | })
 18 | 
 19 | class Form extends React.Component {
 20 | 
 21 |   static _isMounted = false
 22 | 
 23 |   constructor() {
 24 |     super()
 25 |     this.state = {
 26 |       hasSubmitted: false,
 27 |       submitFailed: false,
 28 |       submitting: false,
 29 |       validForm: true,
 30 |       visited: false,
 31 |       dirty: false,
 32 |       errors: {},
 33 |       fields: {},
 34 |       fieldFormats: {},
 35 |       values: {},
 36 |     }
 37 |     this.registerField = this.registerField.bind(this)
 38 |     this.setFieldState = this.setFieldState.bind(this)
 39 |     this.getFormState = this.getFormState.bind(this)
 40 |     this.onChange = this.onChange.bind(this)
 41 |     this.validate = this.validate.bind(this)
 42 |     this.onSubmit = this.onSubmit.bind(this)
 43 |     this.resetForm = this.resetForm.bind(this)
 44 |   }
 45 | 
 46 |   getChildContext() {
 47 |     return {
 48 |       registerField: this.registerField,
 49 |       setFieldState: this.setFieldState,
 50 |       getFormState: this.getFormState,
 51 |       onChange: this.onChange
 52 |     }
 53 |   }
 54 | 
 55 |   componentDidMount() {
 56 |     this._isMounted = true
 57 |   }
 58 | 
 59 |   componentWillUnmount() {
 60 |     this._isMounted = false
 61 |   }
 62 | 
 63 |   registerField(name, fieldState) {
 64 |     this.setState(prevState => {
 65 |       const newFormState = clone(prevState)
 66 | 
 67 |       // If the previous state already has this name, then two fields are trying to
 68 |       // register the same name which means this field is apart of a radio group
 69 |       if (prevState.fields[name]) {
 70 | 
 71 |         // If the fieldname has already been setup for "radio mode"
 72 |         if (prevState.fields[name].radio) {
 73 |           newFormState.fields[name].props[fieldState.value] = fieldState.props
 74 | 
 75 |         // If the fieldname has not been setup for "radio mode"
 76 |         } else {
 77 |           // This happens when we've encountered a second field with an already-used
 78 |           // name and so now we need to retroactively go back and set the previous
 79 |           // field to be a radio field (by marking it with `radio: true`) and
 80 |           // also to store each respective radio field's value in the props so
 81 |           // know what to set the overall value to when clicked
 82 | 
 83 |           newFormState.fields[name] = Object.assign(newFormState.fields[name], {
 84 |             props: {
 85 |               // This "value" represents the first field that was registered
 86 |               [prevState.fields[name].props.value]: clone(prevState.fields[name].props),
 87 |               // This "value" is the current (the second) radio field. Note that a third
 88 |               // radio field will not hit this `else` clause at all, but will it the
 89 |               // respective `if` clause
 90 |               [fieldState.value]: fieldState.props
 91 |             },
 92 |             radio: true // radio mode
 93 |           })
 94 | 
 95 |         }
 96 | 
 97 |         // Set the value based on which radio is checked
 98 |         for (let key in newFormState.fields[name].props) {
 99 |           if (newFormState.fields[name].props.hasOwnProperty(key) && newFormState.fields[name].props[key].checked) {
100 |             newFormState.fields[name].value = newFormState.fields[name].props[key].value
101 |           }
102 |         }
103 | 
104 |         // Set form's values
105 |         newFormState.values[name] = newFormState.fields[name].value
106 | 
107 |       // Not in radio group mode (or the first radio which doesn't have a duplicate name yet)
108 |       } else {
109 | 
110 |         // Checkbox
111 |         if (fieldState.props.checked === false) {
112 |           fieldState.value = ''
113 |         }
114 | 
115 |         // Blend fieldState into initialFieldState
116 |         newFormState.fields[name] = Object.assign(initialFieldState(), fieldState)
117 | 
118 |         // Assign the value to the form's state list of values
119 |         newFormState.values[name] = newFormState.fields[name].value
120 | 
121 |       }
122 | 
123 |       // Call to validate replaces state with new state
124 |       return this.validate(newFormState)
125 |     })
126 |   }
127 | 
128 |   // When fields get changed in any way: value, blur, focus, etc
129 |   setFieldState(name, state, cb) {
130 |     const formValueFormatter = this.props.format
131 |     const formTrim = this.props.trim
132 |     const fieldValueFormatter = this.state.fields[name].format
133 |     const fieldTrim = this.state.fields[name].trim
134 | 
135 |     this.setState(prevState => {
136 |       let newState = clone(prevState)
137 | 
138 |       // Apply new state
139 |       newState.fields[name] = Object.assign(newState.fields[name], state)
140 | 
141 |       // Apply visited to form also
142 |       if (state.visited) newState.visited = true
143 | 
144 |       // If state has value property then the value changed
145 |       if (state.hasOwnProperty('value')) {
146 | 
147 |         // Apply field format and form format functions
148 |         var value = formValueFormatter(fieldValueFormatter(state.value), name)
149 | 
150 |         // Apply Trim Logic. The field version takes precedence over the form version
151 |         if (fieldTrim === true || (fieldTrim !== false) && formTrim === true && value.trim) {
152 |           value = value.trim()
153 |         }
154 | 
155 |         newState.values[name] = value
156 | 
157 |         // Set some formState values which are not passed into setFieldState
158 |         newState.dirty = true
159 | 
160 |         // Call to validate replaces state with new state
161 |         newState = this.validate(newState)
162 |       }
163 | 
164 |       return newState
165 |     }, () => {
166 |       if (typeof cb === 'function') cb(this.getFormState().fields[name], this.getFormState())
167 |     })
168 | 
169 |   }
170 | 
171 |   getFormState() {
172 |     return clone(this.state)
173 |   }
174 | 
175 |   onChange(name, e) {
176 |     if (this.props.onChange) this.props.onChange(this.getFormState(), name, e)
177 |   }
178 | 
179 |   validate(state) {
180 |     if (!this.props.validate) return state
181 | 
182 |     const newState = clone(state)
183 |     newState.errors = clone(this.props.validate(state.values, this.getFormState()) || {})
184 |     newState.validForm = !Object.keys(newState.errors).length
185 | 
186 |     // Iterate all existing fields and change their `error` message and `validField`
187 |     for (let name in newState.fields) {
188 |       newState.fields[name].error = newState.errors[name] || ''
189 |       newState.fields[name].validField = !newState.fields[name].error
190 |     }
191 | 
192 |     return newState
193 |   }
194 | 
195 |   onSubmit(e) {
196 |     const { validForm, values } = this.state
197 |     if (!validForm || this.props.onSubmit) e.preventDefault()
198 | 
199 |     // Invalid form
200 |     if (!validForm) {
201 |       this.setState({ submitting: false, submitFailed: true, hasSubmitted: true })
202 |       return false
203 |     }
204 | 
205 |     // New state just before submit
206 |     this.setState({ submitting: true, hasSubmitted: true, submitFailed: false }, () => {
207 | 
208 |       // If a custom submit handler was provided
209 |       if (this.props.onSubmit) {
210 |         const submitResponse = this.props.onSubmit(Object.assign({}, values), this.getFormState())
211 | 
212 |         // If the response is a promise
213 |         if (typeof submitResponse === 'object' && typeof submitResponse.then === 'function') {
214 |           submitResponse
215 |             .then(() => {
216 | 
217 |               // Next Tick (wait for possible `componentWillUnmount()`). The user might have
218 |               // unmounted the form in their `onSubmit` callback
219 |               setTimeout(() => {
220 | 
221 |                 // If the form is still mounted
222 |                 if (this._isMounted) {
223 |                   this.setState({ submitting: false, dirty: false })
224 |                 }
225 |               }, 0)
226 |             })
227 |             .catch(() => this.setState({ submitting: false, submitFailed: true }))
228 |         } else {
229 |           throw new Error('`onSubmit` expectes the return value to be a promise.')
230 |         }
231 | 
232 |       }
233 |     })
234 |   }
235 | 
236 |   resetForm() {
237 |     this.setState(prevState => {
238 | 
239 |       const newState = Object.assign(clone(prevState), {
240 |         hasSubmitted: false,
241 |         submitFailed: false,
242 |         submitting: false,
243 |         dirty: false
244 |       })
245 | 
246 |       // Iterate only registered fields to set values
247 |       for (let name in newState.fields) {
248 |         newState.fields[name] = Object.assign({}, prevState.fields[name], initialFieldState())
249 |         newState.values[name] = ''
250 |       }
251 | 
252 |       return newState
253 |     })
254 |   }
255 | 
256 |   render() {
257 |     const props = { onSubmit: this.onSubmit }
258 |     const form = this.props.render
259 |       ? this.props.render(props, this.getFormState())
260 |       : <form {...props}>{this.props.children}</form>
261 | 
262 |     if (!form.type || form.type !== 'form') throw new Error('<Form render={fn} /> must return a single <form> DOM element.')
263 |     if (!form.props.onSubmit) throw new Error('Be sure to spread `formProps` on your returned <form {...formProps}>')
264 | 
265 |     return form
266 |   }
267 | }
268 | 
269 | Form.childContextTypes = {
270 |   registerField: PropTypes.func,
271 |   setFieldState: PropTypes.func,
272 |   getFormState: PropTypes.func,
273 |   onChange: PropTypes.func
274 | }
275 | 
276 | Form.defaultProps = {
277 |   trim: true,
278 |   format: value => value
279 | }
280 | 
281 | Form.propTypes = {
282 |   onSubmit: PropTypes.func,
283 |   validate: PropTypes.func,
284 |   render: PropTypes.func,
285 |   format: PropTypes.func,
286 |   trim: PropTypes.bool
287 | }
288 | 
289 | export default Form
290 | 


--------------------------------------------------------------------------------
/src/connectField.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | const connectField = name => {
 5 |   return WrappedComponent => {
 6 |     return class extends Component {
 7 | 
 8 |       constructor() {
 9 |         super()
10 |         this.onChange = this.onChange.bind(this)
11 |         this.updateFieldState = this.updateFieldState.bind(this)
12 |       }
13 | 
14 |       componentWillMount() {
15 |         this.context.registerField(name, this.props.value)
16 |       }
17 | 
18 |       static contextTypes = {
19 |         registerField: PropTypes.func,
20 |         getFormState: PropTypes.func,
21 |         setFieldState: PropTypes.func,
22 |         onChange: React.PropTypes.func,
23 |       }
24 | 
25 |       // Prop Change for `value`
26 |       componentWillReceiveProps(nextProps) {
27 |         if (nextProps.value === this.props.value) return false
28 |         this.updateFieldState({ value: nextProps.value })
29 |       }
30 | 
31 |       // DOM Change
32 |       onChange(e) {
33 |         const { type, target } = e
34 |         const value = target.type === 'checkbox' ? target.checked : target.value
35 |         this.updateFieldState({ value, dirty: true })
36 |       }
37 | 
38 |       updateFieldState(newState) {
39 |         const { onChange } = this.props
40 |         this.context.setFieldState(name, newState, formState => {
41 |           if (onChange) onChange(e, formState)   // call the field's onChange if the user provided one
42 |           this.context.onChange(name, formState) // call the form's onChange if the user provided one
43 |         })
44 |       }
45 | 
46 |       render() {
47 |         // Bail if name not provided
48 |         if (!name) throw new Error('You must provide a `name` to `connectField`. Usage `connectField(name)(Component)`')
49 |         const formState = this.context.getFormState() || {}
50 |         const fieldState = formState.fields[name]
51 | 
52 |         // Don't render if fieldState hasn't been setup
53 |         if (!fieldState) return null
54 | 
55 |         const input = {
56 |           name,
57 |           value: fieldState.value,
58 |           onChange: this.onChange,
59 |           onFocus: e => this.context.setFieldState(name, { visited: true, active: true }),
60 |           onBlur: e => this.context.setFieldState(name, { active: false, touched: true })
61 |         }
62 | 
63 |         return <WrappedComponent {...this.props} input={input} fieldState={fieldState} formState={formState} />;
64 |       }
65 | 
66 |     }
67 |   }
68 | }
69 | 
70 | export default connectField
71 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Form from './Form'
 2 | import Field from './Field'
 3 | import connectField from './connectField'
 4 | import { InputField, CheckboxField, RadioField, SelectField, TextareaField } from './FieldTypes'
 5 | 
 6 | export {
 7 |   Form,
 8 |   Field,
 9 |   connectField,
10 |   InputField,
11 |   CheckboxField,
12 |   RadioField,
13 |   SelectField,
14 |   TextareaField
15 | }
16 | 


--------------------------------------------------------------------------------
/test/.setup.js:
--------------------------------------------------------------------------------
 1 | require('babel-register')();
 2 | var jsdom = require('jsdom');
 3 | 
 4 | const doc = jsdom.jsdom('<!doctype html><html><body></body></html>')
 5 | const win = doc.defaultView
 6 | 
 7 | global.document = doc
 8 | global.window = win
 9 | global.navigator = win.navigator
10 | 


--------------------------------------------------------------------------------
/test/components/connectField.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | 
  3 | import { expect } from 'chai';
  4 | import { mount, shallow } from 'enzyme';
  5 | 
  6 | import connectField from '../../src/connectField';
  7 | import Form from '../../src/Form';
  8 | import Field from '../../src/Field';
  9 | 
 10 | 
 11 | describe('connect field HOC', () => {
 12 |   // This does feel kind of weird, maybe we should just pass
 13 |   // the three "input" props as separate props?
 14 |   // It will mean more, but its also more generic
 15 |   const mockCustomInput = (props) => {
 16 |       return (
 17 |         <div className="field-wrap">
 18 |           <label htmlFor={`field-` + "test"}>Test</label>
 19 |           <div className="input">
 20 |             <input {...props.input} name="test" />
 21 |           </div>
 22 |           <div className="error">
 23 |             {props.fieldState.error}
 24 |           </div>
 25 |         </div>
 26 |       );
 27 |   }
 28 | 
 29 |   describe('name', () => {
 30 |     it('should throw an error if no name is provided', () => {
 31 |       try {
 32 |         shallow(connectField()(mockCustomInput));
 33 |       } catch (e){
 34 |         expect(e).to.exist;
 35 |       }
 36 |     });
 37 | 
 38 |     it('should register a field with the provided name', () => {
 39 |       const verifyFields = (values) => {
 40 |         expect(values.test).to.exist;
 41 |         return new Promise(resolve => resolve());
 42 |       }
 43 |       const ConnectCustomInput = connectField('test')(mockCustomInput);
 44 |       const wrapperForm = mount(
 45 |         <Form onSubmit={verifyFields}>
 46 |           <ConnectCustomInput />
 47 |         </Form>);
 48 |       const form = wrapperForm.find('form');
 49 |       form.simulate('submit', { preventDefault: () => {} });
 50 |     });
 51 |   });
 52 | 
 53 |   describe('provide props', () => {
 54 |     it('should provide input props', () => {
 55 |       const verifyFields = (values) => {
 56 |         expect(values.test).to.exist;
 57 |         return new Promise(resolve => resolve());
 58 |       }
 59 |       const ConnectCustomInput = connectField('test')(mockCustomInput);
 60 |       const wrapperForm = mount(
 61 |         <Form onSubmit={verifyFields}>
 62 |           <ConnectCustomInput />
 63 |         </Form>);
 64 |       const renderedMock = wrapperForm.find(mockCustomInput);
 65 |       const inputProps = renderedMock.props().input;
 66 |       expect(inputProps).to.exist;
 67 |       expect(inputProps.value).to.exist;
 68 |       expect(inputProps.onChange).to.exist;
 69 |       expect(inputProps.onFocus).to.exist;
 70 |       expect(inputProps.onBlur).to.exist;
 71 |     });
 72 | 
 73 |     it('should provide field state', () => {
 74 |       const verifyFields = (values) => {
 75 |         expect(values.test).to.exist;
 76 |         return new Promise(resolve => resolve());
 77 |       }
 78 |       const ConnectCustomInput = connectField('test')(mockCustomInput);
 79 |       const wrapperForm = mount(
 80 |         <Form onSubmit={verifyFields}>
 81 |           <ConnectCustomInput />
 82 |         </Form>);
 83 |       const renderedMock = wrapperForm.find(mockCustomInput);
 84 |       const fieldState = renderedMock.props().fieldState;
 85 |       expect(fieldState).to.exist;
 86 |     });
 87 | 
 88 |     it('should provide form state', () => {
 89 |       const verifyFields = (values) => {
 90 |         expect(values.test).to.exist;
 91 |         return new Promise(resolve => resolve());
 92 |       }
 93 |       const ConnectCustomInput = connectField('test')(mockCustomInput);
 94 |       const wrapperForm = mount(
 95 |         <Form onSubmit={verifyFields}>
 96 |           <ConnectCustomInput />
 97 |         </Form>);
 98 |       const renderedMock = wrapperForm.find(mockCustomInput);
 99 |       const formState = renderedMock.props().formState;
100 |       expect(formState).to.exist;
101 |     });
102 |   });
103 | 
104 |   describe('updating', () => {
105 |     it('should update state on change', () => {
106 |       const verifyFields = (values) => {
107 |         expect(values.test).to.exist;
108 |         expect(values.test).to.equal('asdf')
109 |         return new Promise(resolve => resolve());
110 |       }
111 |       const ConnectCustomInput = connectField('test')(mockCustomInput);
112 |       const wrapperForm = mount(
113 |         <Form onSubmit={verifyFields}>
114 |           <ConnectCustomInput />
115 |         </Form>);
116 |       const form = wrapperForm.find('form');
117 |       const input = wrapperForm.find('input');
118 |       input.simulate('change', { target: { value: 'asdf' } });
119 |       form.simulate('submit', { preventDefault: () => {} });
120 |     });
121 | 
122 |     it('should mark visited on focus', () => {
123 |       const verifyFields = (values, fields) => {
124 |         expect(fields.fields.test.visited).to.equal(true);
125 |         expect(fields.fields.test.active).to.equal(true);
126 |         return new Promise(resolve => resolve());
127 |       }
128 |       const ConnectCustomInput = connectField('test')(mockCustomInput);
129 |       const wrapperForm = mount(
130 |         <Form onSubmit={verifyFields}>
131 |           <ConnectCustomInput />
132 |         </Form>);
133 |       const form = wrapperForm.find('form');
134 |       const input = wrapperForm.find('input');
135 |       input.simulate('focus');
136 |       form.simulate('submit', { preventDefault: () => {} });
137 |     });
138 | 
139 |     it('should unmark active on blur', () => {
140 |       const verifyFields = (values, fields) => {
141 |         expect(fields.fields.test.visited).to.equal(true);
142 |         expect(fields.fields.test.active).to.equal(false);
143 |         return new Promise(resolve => resolve());
144 |       }
145 |       const ConnectCustomInput = connectField('test')(mockCustomInput);
146 |       const wrapperForm = mount(
147 |         <Form onSubmit={verifyFields}>
148 |           <ConnectCustomInput />
149 |         </Form>);
150 |       const form = wrapperForm.find('form');
151 |       const input = wrapperForm.find('input');
152 |       input.simulate('focus');
153 |       input.simulate('blur');
154 |       form.simulate('submit', { preventDefault: () => {} });
155 |     });
156 | 
157 |     it('should mark touched on blur', () => {
158 |       const verifyFields = (values, fields) => {
159 |         expect(fields.fields.test.touched).to.equal(true);
160 |         expect(fields.fields.test.active).to.equal(false);
161 |         return new Promise(resolve => resolve());
162 |       }
163 |       const ConnectCustomInput = connectField('test')(mockCustomInput);
164 |       const wrapperForm = mount(
165 |         <Form onSubmit={verifyFields}>
166 |           <ConnectCustomInput />
167 |         </Form>);
168 |       const form = wrapperForm.find('form');
169 |       const input = wrapperForm.find('input');
170 |       input.simulate('focus');
171 |       input.simulate('blur');
172 |       form.simulate('submit', { preventDefault: () => {} });
173 |     });
174 |   });
175 | 
176 |   // The element wrapping doesn't work. Not sure why. isValidElement
177 |   // always returns false
178 |   describe.skip('element wrapping', () => {
179 |     it('should be able to except an element and return a component', () => {
180 |       const mockElement = connectField('test')(<mockCustomInput />);
181 |       const renderedMock = mount(<mockElement />);
182 |       expect(renderedMock).to.have.lengthOf(1);
183 |       console.log(renderedMock.find(mockCustomInput));
184 |     });
185 |   });
186 | });
187 | 


--------------------------------------------------------------------------------
/todo.md:
--------------------------------------------------------------------------------
 1 | # Todo's
 2 | 
 3 | - Form's call to `setState` after form has unmounted issues a warning
 4 | - To circumvent HTML form validation, we may need to provide a `noValidate` on the `<form>` when a validation method is passed in. Otherwise our `onSubmit` does not get called
 5 | - Need to make an ability for fields to have multiple/custom values
 6 | - Build other input field types
 7 |   - textarea
 8 |   - select
 9 |   - radio
10 |   - checkbox etc
11 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | var examplePath = process.env.EXAMPLE
 5 | 
 6 | module.exports = {
 7 |   devtool: 'inline-source-map',
 8 |   entry: [
 9 |     'webpack-hot-middleware/client',
10 |     path.resolve(__dirname, 'examples', examplePath, 'index.js')
11 |   ],
12 |   output: {
13 |     path: path.join(__dirname, 'dist'),
14 |     filename: 'bundle.js',
15 |     publicPath: '/dist/'
16 |   },
17 |   plugins: [
18 |     new webpack.HotModuleReplacementPlugin()
19 |   ],
20 |   resolve: {
21 |     alias: {
22 |       'src': path.resolve('./src')
23 |     }
24 |   },
25 |   module: {
26 |     rules: [
27 |       {
28 |         test: /\.js$/,
29 |         loaders: 'babel-loader',
30 |         exclude: /node_mudles/
31 |       }
32 |     ]
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------