22 | ajax.send(values) // however you send data to your server...
23 | .catch(error => {
24 | // how you pass server-side validation errors back is up to you
25 | if(error.validationErrors) {
26 | throw new SubmissionError(error.validationErrors)
27 | } else {
28 | // what you do about other communication errors is up to you
29 | }
30 | })
31 | }/>
32 | ```
33 |
34 |
--------------------------------------------------------------------------------
/examples/wizard/src/Wizard.md:
--------------------------------------------------------------------------------
1 | # Wizard Form
2 |
3 | One common UI design pattern is to separate a single form out into sepearate pages of inputs,
4 | commonly known as a Wizard. There are several ways that this could be accomplished using
5 | `redux-form`, but the simplest and recommended way is to follow these instructions:
6 |
7 | * Connect each page with `reduxForm()` to the same form name.
8 | * Specify the `destroyOnUnmount: false` flag to preserve form data across form component unmounts.
9 | * You may specify sync validation for the entire form
10 | * Use `onSubmit` to transition forward to the next page; this forces validation to run.
11 |
12 | Things that are up to you to implement:
13 |
14 | * Call `props.destroy()` manually after a successful submit.
15 |
16 | ## Running this example locally
17 |
18 | To run this example locally on your machine clone the `redux-form` repository,
19 | then `cd redux-form` to change to the repo directory, and run `npm install`.
20 |
21 | Then run `npm run example:wizard` or manually run the
22 | following commands:
23 | ```
24 | cd ./examples/wizard
25 | npm install
26 | npm start
27 | ```
28 |
29 |
--------------------------------------------------------------------------------
/docs/faq/ReactNative.md:
--------------------------------------------------------------------------------
1 | # Does `redux-form` work with React Native?
2 |
3 | Yes, it does.
4 |
5 | #### If your are using all `react-native@18+`, `redux@4+` and `npm@3+`
6 |
7 | Just import it as usual:
8 |
9 | ```javascript
10 | import {reduxForm} from 'redux-form';
11 | ```
12 |
13 | #### Else
14 |
15 | All you have to do is use:
16 |
17 | ```javascript
18 | import {reduxForm} from 'redux-form/native';
19 | ```
20 | instead of
21 | ```javascript
22 | import {reduxForm} from 'redux-form';
23 | ```
24 |
25 | #### Note:
26 |
27 | `react-redux/native` is deprecated in `react-redux@4+`, it only appears in `react-redux@3`
28 |
29 | #### See Also:
30 |
31 | 1. [[react-native] Depend on npm "react" instead of shipping with a vendored copy #2985](https://github.com/facebook/react-native/issues/2985)
32 | 2. [[react-redux] Update React Native installation instructions #236](https://github.com/rackt/react-redux/issues/236)
33 | 3. [Until React Native works on top of React instead of shipping a fork of React, you’ll need to keep using React Redux 3.x branch and documentation.](https://github.com/erikras/redux-form/issues/473#issuecomment-167690524)
34 |
--------------------------------------------------------------------------------
/examples/simple/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/examples/wizard/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/src/__tests__/reducer.startSubmit.spec.js:
--------------------------------------------------------------------------------
1 | import { startSubmit } from '../actions'
2 |
3 | const describeStartSubmit = (reducer, expect, { fromJS }) => () => {
4 | it('should set submitting on startSubmit', () => {
5 | const state = reducer(fromJS({
6 | foo: {
7 | doesnt: 'matter',
8 | should: 'notchange'
9 | }
10 | }), startSubmit('foo'))
11 | expect(state)
12 | .toEqualMap({
13 | foo: {
14 | doesnt: 'matter',
15 | should: 'notchange',
16 | submitting: true
17 | }
18 | })
19 | })
20 |
21 | it('should set submitting on startSubmit, and NOT reset submitFailed', () => {
22 | const state = reducer(fromJS({
23 | foo: {
24 | doesnt: 'matter',
25 | should: 'notchange',
26 | submitFailed: true
27 | }
28 | }), startSubmit('foo'))
29 | expect(state)
30 | .toEqualMap({
31 | foo: {
32 | doesnt: 'matter',
33 | should: 'notchange',
34 | submitting: true,
35 | submitFailed: true
36 | }
37 | })
38 | })
39 | }
40 |
41 | export default describeStartSubmit
42 |
--------------------------------------------------------------------------------
/src/events/__tests__/silenceEvent.spec.js:
--------------------------------------------------------------------------------
1 | import expect, { createSpy } from 'expect'
2 | import { noop } from 'lodash'
3 | import silenceEvent from '../silenceEvent'
4 |
5 | describe('silenceEvent', () => {
6 | it('should return false if not an event', () => {
7 | expect(silenceEvent(undefined)).toBe(false)
8 | expect(silenceEvent(null)).toBe(false)
9 | expect(silenceEvent(true)).toBe(false)
10 | expect(silenceEvent(42)).toBe(false)
11 | expect(silenceEvent({})).toBe(false)
12 | expect(silenceEvent([])).toBe(false)
13 | expect(silenceEvent(noop)).toBe(false)
14 | })
15 |
16 | it('should return true if an event', () => {
17 | expect(silenceEvent({
18 | preventDefault: noop,
19 | stopPropagation: noop
20 | })).toBe(true)
21 | })
22 |
23 | it('should call preventDefault and stopPropagation', () => {
24 | const preventDefault = createSpy()
25 | const stopPropagation = createSpy()
26 |
27 | silenceEvent({
28 | preventDefault,
29 | stopPropagation
30 | })
31 | expect(preventDefault).toHaveBeenCalled()
32 | expect(stopPropagation).toNotHaveBeenCalled()
33 | })
34 | })
35 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Erik Rasmussen
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/examples/fieldArrays/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/examples/immutable/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/examples/material-ui/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/examples/normalizing/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/examples/asyncValidation/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/examples/remoteSubmit/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/examples/submitValidation/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/examples/syncValidation/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/examples/fieldLevelValidation/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/examples/initializeFromState/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/examples/selectingFormValues/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | devtool: 'eval',
6 | entry: [
7 | 'babel-polyfill',
8 | 'eventsource-polyfill', // necessary for hot reloading with IE
9 | 'webpack-hot-middleware/client',
10 | './src/index'
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js',
15 | publicPath: '/dist/'
16 | },
17 | plugins: [
18 | new webpack.optimize.OccurenceOrderPlugin(),
19 | new webpack.HotModuleReplacementPlugin()
20 | ],
21 | resolve: {
22 | modulesDirectories: [
23 | 'src',
24 | 'node_modules'
25 | ],
26 | extensions: [ '', '.json', '.js' ]
27 | },
28 | module: {
29 | loaders: [
30 | {
31 | test: /\.jsx?/,
32 | loaders: [ 'babel', 'eslint' ],
33 | include: path.join(__dirname, 'src')
34 | },
35 | {
36 | test: /\.json$/,
37 | loader: 'json-loader'
38 | },
39 | {
40 | test: /\.md/,
41 | loaders: [ "html-loader", "markdown-loader" ]
42 | }
43 | ]
44 | }
45 | };
--------------------------------------------------------------------------------
/src/events/getValue.js:
--------------------------------------------------------------------------------
1 | import isEvent from './isEvent'
2 |
3 | const getSelectedValues = options => {
4 | const result = []
5 | if (options) {
6 | for (let index = 0; index < options.length; index++) {
7 | const option = options[ index ]
8 | if (option.selected) {
9 | result.push(option.value)
10 | }
11 | }
12 | }
13 | return result
14 | }
15 |
16 | const getValue = (event, isReactNative) => {
17 | if (isEvent(event)) {
18 | if (!isReactNative && event.nativeEvent && event.nativeEvent.text !== undefined) {
19 | return event.nativeEvent.text
20 | }
21 | if (isReactNative && event.nativeEvent !== undefined) {
22 | return event.nativeEvent.text
23 | }
24 | const { target: { type, value, checked, files }, dataTransfer } = event
25 | if (type === 'checkbox') {
26 | return checked
27 | }
28 | if (type === 'file') {
29 | return files || dataTransfer && dataTransfer.files
30 | }
31 | if (type === 'select-multiple') {
32 | return getSelectedValues(event.target.options)
33 | }
34 | return value
35 | }
36 | return event
37 | }
38 |
39 | export default getValue
40 |
--------------------------------------------------------------------------------
/examples/remoteSubmit/src/RemoteSubmitForm.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Field, reduxForm } from 'redux-form'
3 | import submit from './submit'
4 |
5 | const renderField = ({ input, label, type, meta: { touched, error } }) => (
6 |
7 |
8 |
9 |
10 | {touched && error && {error}}
11 |
12 |
7 |
8 |
9 |
10 | {touched && error && {error}}
11 |
12 |
27 | {page === 1 && }
28 | {page === 2 && }
29 | {page === 3 && }
30 |
31 | )
32 | }
33 | }
34 |
35 | WizardForm.propTypes = {
36 | onSubmit: PropTypes.func.isRequired
37 | }
38 |
39 | export default WizardForm
40 |
--------------------------------------------------------------------------------
/examples/immutable/src/ImmutableForm.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Field, reduxForm } from 'redux-form/immutable' // <--- immutable import
3 | import validate from './validate'
4 |
5 | const renderField = ({ input, label, type, meta: { touched, error } }) => (
6 |
7 |
8 |
9 |
10 | {touched && error && {error}}
11 |
12 |
23 |
24 |
25 | );
26 | }
27 | ```
28 |
29 | The point is that almost any input can be adjusted to use `redux-form`. If you are using an input
30 | component with a non-standard interface many times in your application, it is recommended that
31 | you wrap it in another component that will allow you to do the normal field destructuring:
32 | ``.
33 |
--------------------------------------------------------------------------------
/src/__tests__/reducer.arrayShift.spec.js:
--------------------------------------------------------------------------------
1 | import { arrayShift } from '../actions'
2 |
3 | const describeArrayShift = (reducer, expect, { fromJS }) => () => {
4 | it('should remove from beginning', () => {
5 | const state = reducer(fromJS({
6 | foo: {
7 | values: {
8 | myField: {
9 | subField: [ 'a', 'b', 'c', 'd' ]
10 | }
11 | },
12 | fields: {
13 | myField: {
14 | subField: [
15 | { touched: true, visited: true },
16 | { touched: true },
17 | { touched: true, visited: true },
18 | { touched: true }
19 | ]
20 | }
21 | }
22 | }
23 | }), arrayShift('foo', 'myField.subField'))
24 | expect(state)
25 | .toEqualMap({
26 | foo: {
27 | values: {
28 | myField: {
29 | subField: [ 'b', 'c', 'd' ]
30 | }
31 | },
32 | fields: {
33 | myField: {
34 | subField: [
35 | { touched: true },
36 | { touched: true, visited: true },
37 | { touched: true }
38 | ]
39 | }
40 | }
41 | }
42 | })
43 | })
44 | }
45 |
46 | export default describeArrayShift
47 |
--------------------------------------------------------------------------------
/docs/faq/EnterToSubmit.md:
--------------------------------------------------------------------------------
1 | # How can I submit my form when the user presses Enter?
2 |
3 | The default browser behavior for `text` and `password` inputs when ↵ is pressed is to activate the first `