├── .nvmrc
├── demo-app
    ├── .env
    ├── README.md
    ├── public
    │   ├── favicon.ico
    │   ├── manifest.json
    │   └── index.html
    ├── src
    │   ├── App.test.js
    │   ├── formValidator.js
    │   ├── index.js
    │   ├── index.css
    │   ├── App.css
    │   ├── App.js
    │   ├── ReactoFormExample.js
    │   ├── ReactoFormHookExample.js
    │   ├── ReactoFormExampleMUI.js
    │   ├── ReactoFormHookExampleMUI.js
    │   ├── ReactoFormHookExampleUpdateMUI.js
    │   └── serviceWorker.js
    ├── .gitignore
    └── package.json
├── .eslintignore
├── .gitignore
├── lib
    ├── shared
    │   ├── bracketsToDots.js
    │   ├── propTypes.js
    │   ├── bracketsToDots.test.js
    │   ├── filterErrorsForNames.js
    │   ├── getDateTimeValuesFromDate.js
    │   ├── getDateFromDateTimeValues.js
    │   └── recursivelyCloneElements.js
    ├── index.js
    ├── muiCheckboxOptions.js
    ├── muiOptions.js
    ├── FormList.test.js
    ├── __snapshots__
    │   ├── Form.test.js.snap
    │   └── FormList.test.js.snap
    ├── Form.test.js
    ├── useReactoForm.js
    ├── FormList.js
    └── Form.js
├── jestSetup.js
├── LICENSE
├── CHANGELOG.md
├── babel.config.js
├── package.json
└── README.md


/.nvmrc:
--------------------------------------------------------------------------------
1 | 16.13.0
2 | 


--------------------------------------------------------------------------------
/demo-app/.env:
--------------------------------------------------------------------------------
1 | SKIP_PREFLIGHT_CHECK=true


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | cjs
2 | esm
3 | node_modules
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | cjs
3 | esm
4 | .DS_Store
5 | node_modules
6 | npm-debug.log
7 | .idea
8 | 


--------------------------------------------------------------------------------
/demo-app/README.md:
--------------------------------------------------------------------------------
1 | A small app demoing ReactoForm for example code and testing purposes. Run it with `npm start`.
2 | 


--------------------------------------------------------------------------------
/demo-app/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/longshotlabs/reacto-form/HEAD/demo-app/public/favicon.ico


--------------------------------------------------------------------------------
/lib/shared/bracketsToDots.js:
--------------------------------------------------------------------------------
1 | import toPath from "lodash/toPath";
2 | 
3 | export default function bracketsToDots(pathString) {
4 |   return toPath(pathString).join(".");
5 | }
6 | 


--------------------------------------------------------------------------------
/demo-app/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-named-as-default,import/no-named-as-default-member */
2 | import Form from "./Form";
3 | import FormList from "./FormList";
4 | import muiOptions from "./muiOptions";
5 | import useReactoForm from "./useReactoForm";
6 | 
7 | export { Form, FormList, muiOptions, useReactoForm };
8 | 


--------------------------------------------------------------------------------
/lib/shared/propTypes.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from "prop-types";
 2 | 
 3 | const customPropTypes = {
 4 |   errors: PropTypes.arrayOf(
 5 |     PropTypes.shape({
 6 |       message: PropTypes.string.isRequired,
 7 |       name: PropTypes.string.isRequired,
 8 |     })
 9 |   ),
10 | };
11 | 
12 | export default customPropTypes;
13 | 


--------------------------------------------------------------------------------
/lib/muiCheckboxOptions.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   nullValue: false,
 3 |   onChangeGetValue: (event) => event.target.checked || false,
 4 |   propNames: {
 5 |     errors: false,
 6 |     hasBeenValidated: false,
 7 |     isReadOnly: "disabled",
 8 |     onChanging: false,
 9 |     onSubmit: false,
10 |     value: "checked",
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/lib/shared/bracketsToDots.test.js:
--------------------------------------------------------------------------------
1 | import bracketsToDots from "./bracketsToDots";
2 | 
3 | test("bracketsToDots", () => {
4 |   expect(bracketsToDots("a[0].b")).toBe("a.0.b");
5 |   expect(bracketsToDots("a[0].b[2]")).toBe("a.0.b.2");
6 |   expect(bracketsToDots("a[0].")).toBe("a.0.");
7 |   expect(bracketsToDots("a.[0].")).toBe("a.0.");
8 | });
9 | 


--------------------------------------------------------------------------------
/lib/muiOptions.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   nullValue: "",
 3 |   onChangeGetValue: (event) => event.target.value,
 4 |   onChangingGetValue: (event) => event.target.value,
 5 |   propNames: {
 6 |     errors: false,
 7 |     hasBeenValidated: false,
 8 |     isReadOnly: "disabled",
 9 |     onChange: "onBlur",
10 |     onChanging: "onChange",
11 |     onSubmit: false,
12 |   },
13 | };
14 | 


--------------------------------------------------------------------------------
/demo-app/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/jestSetup.js:
--------------------------------------------------------------------------------
1 | // This file is loaded from the jest.setupFiles config in package.json
2 | 
3 | import "core-js/stable"; // eslint-disable-line import/no-extraneous-dependencies
4 | import Enzyme from "enzyme"; // eslint-disable-line import/no-extraneous-dependencies
5 | import Adapter from "@wojtekmaj/enzyme-adapter-react-17"; // eslint-disable-line import/no-extraneous-dependencies
6 | 
7 | Enzyme.configure({ adapter: new Adapter() });
8 | 


--------------------------------------------------------------------------------
/demo-app/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/demo-app/src/formValidator.js:
--------------------------------------------------------------------------------
 1 | import SimpleSchema from "simpl-schema";
 2 | 
 3 | const formSchema = new SimpleSchema({
 4 |   firstName: {
 5 |     type: String,
 6 |     min: 4
 7 |   },
 8 |   lastName: {
 9 |     type: String,
10 |     min: 2
11 |   },
12 |   isMarried: {
13 |     type: Boolean,
14 |     optional: true
15 |   }
16 | });
17 | 
18 | const validator = formSchema.getFormValidator();
19 | 
20 | export default validator;
21 | 


--------------------------------------------------------------------------------
/demo-app/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(<App />, document.getElementById('root'));
 8 | 
 9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 | 


--------------------------------------------------------------------------------
/demo-app/src/index.css:
--------------------------------------------------------------------------------
 1 | html, body, div#root { height: 100%; }
 2 | 
 3 | div#root {
 4 |   background-color: #444444;
 5 |   padding-top: 20px;
 6 |   padding-bottom: 20px;
 7 | }
 8 | 
 9 | body {
10 |   margin: 0;
11 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
12 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
13 |     sans-serif;
14 |   -webkit-font-smoothing: antialiased;
15 |   -moz-osx-font-smoothing: grayscale;
16 | }
17 | 
18 | code {
19 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
20 |     monospace;
21 | }
22 | 


--------------------------------------------------------------------------------
/lib/shared/filterErrorsForNames.js:
--------------------------------------------------------------------------------
 1 | import bracketsToDots from "./bracketsToDots";
 2 | 
 3 | export default function filterErrorsForNames(errors, names, exact) {
 4 |   if (!Array.isArray(errors) || !Array.isArray(names)) return [];
 5 | 
 6 |   // Accept paths that may contain brackets or dots, making them all dots
 7 |   names = names.map((name) => bracketsToDots(name));
 8 | 
 9 |   return errors.filter((error) => {
10 |     const errorName = bracketsToDots(error.name);
11 |     return names.some((name) => {
12 |       if (name === errorName) return true;
13 |       return !exact && errorName.startsWith(`${name}.`);
14 |     });
15 |   });
16 | }
17 | 


--------------------------------------------------------------------------------
/demo-app/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   animation: App-logo-spin infinite 20s linear;
 7 |   height: 40vmin;
 8 |   pointer-events: none;
 9 | }
10 | 
11 | .App-header {
12 |   background-color: #282c34;
13 |   min-height: 100vh;
14 |   display: flex;
15 |   flex-direction: column;
16 |   align-items: center;
17 |   justify-content: center;
18 |   font-size: calc(10px + 2vmin);
19 |   color: white;
20 | }
21 | 
22 | .App-link {
23 |   color: #61dafb;
24 | }
25 | 
26 | @keyframes App-logo-spin {
27 |   from {
28 |     transform: rotate(0deg);
29 |   }
30 |   to {
31 |     transform: rotate(360deg);
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/demo-app/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@material-ui/core": "^4.11.2",
 7 |     "react": "^16.8.6",
 8 |     "react-dom": "^16.8.6",
 9 |     "react-scripts": "^5.0.1",
10 |     "reacto-form": "^1.5.0",
11 |     "reacto-form-inputs": "^1.1.0",
12 |     "simpl-schema": "^1.10.2"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": "react-app"
22 |   },
23 |   "browserslist": {
24 |     "production": [
25 |       ">0.2%",
26 |       "not dead",
27 |       "not op_mini all"
28 |     ],
29 |     "development": [
30 |       "last 1 chrome version",
31 |       "last 1 firefox version",
32 |       "last 1 safari version"
33 |     ]
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/lib/shared/getDateTimeValuesFromDate.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Convert a Date instance to an object with properties for the various pieces
 3 |  *
 4 |  * @param {Function} propsFunc - Takes in element and returns a props object
 5 |  * @param {Moment} moment - An instance of moment.tz
 6 |  * @param {String} timezone - A timezone identifier
 7 |  */
 8 | export default function getDateTimeValuesFromDate(date, moment, timezone) {
 9 |   if (
10 |     !date ||
11 |     !(date instanceof Date) ||
12 |     !moment ||
13 |     typeof timezone !== "string"
14 |   ) {
15 |     // The defaults have to be "" rather than undefined or null so that React knows they are "controlled" inputs
16 |     return {
17 |       dayValue: "",
18 |       monthValue: "",
19 |       timeValue: "",
20 |       yearValue: "",
21 |     };
22 |   }
23 |   const m = moment(date).tz(timezone);
24 |   return {
25 |     dayValue: m.format("DD"),
26 |     monthValue: m.format("M"),
27 |     timeValue: m.format("HH:mm"),
28 |     yearValue: m.format("YYYY"),
29 |   };
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017-2020 Eric Dobbertin
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | 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, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # reacto-form CHANGELOG
 2 | 
 3 | ## 1.5.1
 4 | 
 5 | Update `@babel/runtime` and `lodash` dependencies to their latest versions
 6 | 
 7 | ## 1.5.0
 8 | 
 9 | Add support for MUI `Checkbox` along with examples of it in demo app.
10 | 
11 | ## 1.4.2
12 | 
13 | Fix form `value` prop data getting lost after a successful submission.
14 | 
15 | ## 1.4.1
16 | 
17 | Upgrade transitive dependencies to fix vulnerabilities
18 | 
19 | ## 1.4.0
20 | 
21 | Both `form.submit()` and `form.validate()` now reliably return a Promise that resolves with the updated errors array. This allows you to await form submission and easily check the errors after.
22 | 
23 | ## 1.3.0
24 | 
25 | - Update `Form` component to work with MUI in a way similar to `useReactoForm`
26 | - Allow settings keys to `false` in `propNames` to omit those input props
27 | 
28 | ## 1.2.0
29 | 
30 | - The `getInputProps` function returned by `useReactoForm` hook now returns a `hasBeenValidated` boolean prop.
31 | - `useReactoForm` hook now includes `resetValue` in returned object.
32 | 
33 | ## 1.1.0
34 | 
35 | Introduce React Hook: `useReactoForm`
36 | 
37 | ## 1.0.0
38 | 
39 | Various non-breaking changes
40 | 
41 | ## 0.0.1
42 | 
43 | Initial release
44 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | // See https://babeljs.io/docs/en/config-files#root-babelconfigjs-files
 2 | module.exports = function getBabelConfig(api) {
 3 |   const isTest = api.env("test");
 4 | 
 5 |   // Config for when running Jest tests
 6 |   if (isTest) {
 7 |     return {
 8 |       plugins: ["@babel/plugin-proposal-class-properties"],
 9 |       presets: ["@babel/env", "@babel/preset-react"],
10 |     };
11 |   }
12 | 
13 |   // We set this in the `build:modules` package.json script
14 |   const esmodules = process.env.BABEL_MODULES === "1";
15 | 
16 |   const babelEnvOptions = {
17 |     modules: esmodules ? false : "auto",
18 |     // https://babeljs.io/docs/en/babel-preset-env#targets
19 |     targets: {
20 |       // 'browsers' target is ignored when 'esmodules' is true
21 |       esmodules,
22 |     },
23 |   };
24 | 
25 |   return {
26 |     ignore: ["**/*.test.js", "__snapshots__"],
27 |     plugins: [
28 |       "@babel/plugin-proposal-class-properties",
29 |       [
30 |         "@babel/plugin-transform-runtime",
31 |         {
32 |           useESModules: esmodules,
33 |         },
34 |       ],
35 |     ],
36 |     presets: [["@babel/env", babelEnvOptions], "@babel/preset-react"],
37 |     sourceMaps: true,
38 |   };
39 | };
40 | 


--------------------------------------------------------------------------------
/lib/shared/getDateFromDateTimeValues.js:
--------------------------------------------------------------------------------
 1 | const oneOrTwoDigits = /^\d{1,2}$/;
 2 | const upToFourDigits = /^\d{1,4}$/;
 3 | const timeFormat = /^\d{1,2}:\d{2}$/;
 4 | 
 5 | /**
 6 |  * Convert a Date instance to an object with properties for the various pieces
 7 |  *
 8 |  * @param {Object} obj - Object with properties for date/time pieces
 9 |  * @param {Moment} moment - An instance of moment.tz
10 |  * @param {String} timezone - A timezone identifier
11 |  */
12 | export default function getDateFromDateTimeValues(obj, moment, timezone) {
13 |   if (!moment || typeof timezone !== "string") return null;
14 | 
15 |   const { dayValue, monthValue, timeValue, yearValue } = obj;
16 | 
17 |   if (typeof dayValue !== "string" || !dayValue.match(oneOrTwoDigits))
18 |     return null;
19 |   if (
20 |     typeof monthValue !== "string" ||
21 |     !monthValue.match(oneOrTwoDigits) ||
22 |     Number(monthValue) > 12 ||
23 |     Number(monthValue) < 1
24 |   )
25 |     return null;
26 |   if (typeof timeValue !== "string" || !timeValue.match(timeFormat))
27 |     return null;
28 |   if (typeof yearValue !== "string" || !yearValue.match(upToFourDigits))
29 |     return null;
30 | 
31 |   const dateString = `${yearValue}-${monthValue}-${dayValue} ${timeValue}`;
32 |   return moment.tz(dateString, "YYYY-M-DD H:mm", timezone).toDate();
33 | }
34 | 


--------------------------------------------------------------------------------
/lib/shared/recursivelyCloneElements.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | /**
 4 |  * Recursively clone elements
 5 |  *
 6 |  * @param {React node} elements - React elements to traverse through. This can be an array or a single
 7 |  *                                element or null, so it's ok to pass the `children` prop directly.
 8 |  * @param {Function} [getProps] - A function that takes an element and returns props to be applied to the clone of that element
 9 |  * @param {Function} [shouldStopRecursing] - A function that takes an element and returns a truthy value if `recursivelyCloneElements`
10 |  *                                         should not be called for that element's children
11 |  */
12 | export default function recursivelyCloneElements(
13 |   elements,
14 |   getProps,
15 |   shouldStopRecursing
16 | ) {
17 |   const newElements = React.Children.map(elements, (element) => {
18 |     if (!element || typeof element === "string" || !element.props)
19 |       return element;
20 | 
21 |     if (typeof getProps !== "function") getProps = () => ({});
22 |     if (typeof shouldStopRecursing !== "function")
23 |       shouldStopRecursing = () => false;
24 | 
25 |     const children = shouldStopRecursing(element)
26 |       ? element.props.children
27 |       : recursivelyCloneElements(element.props.children, getProps);
28 | 
29 |     return React.cloneElement(element, getProps(element), children);
30 |   });
31 | 
32 |   return Array.isArray(newElements) && newElements.length === 1
33 |     ? newElements[0]
34 |     : newElements;
35 | }
36 | 


--------------------------------------------------------------------------------
/demo-app/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <!--
 9 |       manifest.json provides metadata used when your web app is installed on a
10 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
11 |     -->
12 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>You need to enable JavaScript to run this app.</noscript>
26 |     <div id="root"></div>
27 |     <!--
28 |       This HTML file is a template.
29 |       If you open it directly in the browser, you will see an empty page.
30 | 
31 |       You can add webfonts, meta tags, or analytics to this file.
32 |       The build step will place the bundled scripts into the <body> tag.
33 | 
34 |       To begin the development, run `npm start` or `yarn start`.
35 |       To create a production bundle, use `npm run build` or `yarn build`.
36 |     -->
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/lib/FormList.test.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import renderer from "react-test-renderer";
 3 | import { Input } from "reacto-form-inputs";
 4 | import Form from "./Form";
 5 | import FormList from "./FormList";
 6 | 
 7 | test("has isFormList property set to true", () => {
 8 |   expect(FormList.isFormList).toBe(true);
 9 | });
10 | 
11 | test("snapshot Input child", () => {
12 |   const component = renderer.create(
13 |     <FormList name="list" value={["VALUE", "VALUE 2"]}>
14 |       <Input />
15 |     </FormList>
16 |   );
17 | 
18 |   const tree = component.toJSON();
19 |   expect(tree).toMatchSnapshot();
20 | });
21 | 
22 | test("snapshot Form child", () => {
23 |   const component = renderer.create(
24 |     <FormList
25 |       name="list"
26 |       value={[{ foo: { bar: "VALUE" } }, { foo: { bar: "VALUE2" } }]}
27 |     >
28 |       <Form>
29 |         <Input name="foo.bar" />
30 |       </Form>
31 |     </FormList>
32 |   );
33 | 
34 |   const tree = component.toJSON();
35 |   expect(tree).toMatchSnapshot();
36 | });
37 | 
38 | test("snapshot Input child - fixed count", () => {
39 |   const component = renderer.create(
40 |     <FormList
41 |       name="list"
42 |       value={["VALUE", "VALUE 2"]}
43 |       minCount={2}
44 |       maxCount={2}
45 |     >
46 |       <Input />
47 |     </FormList>
48 |   );
49 | 
50 |   const tree = component.toJSON();
51 |   expect(tree).toMatchSnapshot();
52 | });
53 | 
54 | test("snapshot Form child - fixed count", () => {
55 |   const component = renderer.create(
56 |     <FormList
57 |       maxCount={2}
58 |       minCount={2}
59 |       name="list"
60 |       value={[{ foo: { bar: "VALUE" } }, { foo: { bar: "VALUE2" } }]}
61 |     >
62 |       <Form>
63 |         <Input name="foo.bar" />
64 |       </Form>
65 |     </FormList>
66 |   );
67 | 
68 |   const tree = component.toJSON();
69 |   expect(tree).toMatchSnapshot();
70 | });
71 | 


--------------------------------------------------------------------------------
/demo-app/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import Paper from '@material-ui/core/Paper';
 3 | import Tabs from '@material-ui/core/Tabs';
 4 | import Tab from '@material-ui/core/Tab';
 5 | import ReactoFormExample from "./ReactoFormExample";
 6 | import ReactoFormExampleMUI from "./ReactoFormExampleMUI";
 7 | import ReactoFormHookExample from "./ReactoFormHookExample";
 8 | import ReactoFormHookExampleMUI from "./ReactoFormHookExampleMUI";
 9 | import ReactoFormHookExampleUpdateMUI from "./ReactoFormHookExampleUpdateMUI";
10 | import './App.css';
11 | 
12 | function App() {
13 |   const [currentTab, setCurrentTab] = useState(0);
14 |   const [updateFormData, setUpdateFormData] = useState({
15 |     firstName: "Existing",
16 |     lastName: "Name",
17 |     isMarried: true
18 |   });
19 | 
20 |   return (
21 |     <Paper style={{ height: "100%", marginLeft: 30, marginRight: 30 }}>
22 |       <Tabs
23 |         centered
24 |         indicatorColor="primary"
25 |         onChange={(event, newValue) => setCurrentTab(newValue)}
26 |         textColor="primary"
27 |         value={currentTab}
28 |         style={{
29 |           borderBottomColor: "#cccccc",
30 |           borderBottomStyle: "solid",
31 |           borderBottomWidth: 1
32 |         }}
33 |       >
34 |         <Tab label="useReactoForm Hook with Material UI" />
35 |         <Tab label="useReactoForm Hook with Material UI - Update Form" />
36 |         <Tab label="Form with Material UI" />
37 |         <Tab label="useReactoForm Hook" />
38 |         <Tab label="Form" />
39 |       </Tabs>
40 |       <div style={{ margin: 50 }}>
41 |         {currentTab === 0 && <ReactoFormHookExampleMUI />}
42 |         {currentTab === 1 && <ReactoFormHookExampleUpdateMUI setUpdateFormData={setUpdateFormData} updateFormData={updateFormData} />}
43 |         {currentTab === 2 && <ReactoFormExampleMUI />}
44 |         {currentTab === 3 && <ReactoFormHookExample />}
45 |         {currentTab === 4 && <ReactoFormExample />}
46 |       </div>
47 |     </Paper>
48 |   );
49 | }
50 | 
51 | export default App;
52 | 


--------------------------------------------------------------------------------
/demo-app/src/ReactoFormExample.js:
--------------------------------------------------------------------------------
 1 | import React, { useRef } from "react";
 2 | import { makeStyles } from '@material-ui/core/styles';
 3 | import Button from '@material-ui/core/Button';
 4 | import { Form } from "reacto-form";
 5 | import { ErrorsBlock, Field, Input } from "reacto-form-inputs";
 6 | import validator from "./formValidator";
 7 | 
 8 | const useStyles = makeStyles(theme => ({
 9 |   button: {
10 |     marginTop: theme.spacing(1),
11 |   },
12 |   errors: {
13 |     color: theme.palette.error.main
14 |   },
15 |   field: {
16 |     marginBottom: theme.spacing(2),
17 |     marginTop: theme.spacing(2),
18 |   },
19 |   input: {
20 |     display: "block",
21 |     lineHeight: 2,
22 |     marginTop: theme.spacing(0.5),
23 |     width: "100%"
24 |   },
25 |   root: {
26 |     marginLeft: "auto",
27 |     marginRight: "auto",
28 |     width: "50%",
29 |   }
30 | }));
31 | 
32 | async function mySubmissionFunction(...args) {
33 |   console.log("Submit", ...args);
34 | }
35 | 
36 | export default function ReactoFormExample() {
37 |   const classes = useStyles();
38 |   const formRef = useRef(null);
39 | 
40 |   return (
41 |     <div className={classes.root}>
42 |       <Form
43 |         logErrorsOnSubmit
44 |         onSubmit={mySubmissionFunction}
45 |         ref={formRef}
46 |         validator={validator}
47 |       >
48 |         <Field name="firstName" className={classes.field} label="First name">
49 |           <Input name="firstName"className={classes.input} />
50 |           <ErrorsBlock names={["firstName"]} className={classes.errors} />
51 |         </Field>
52 |         <Field name="lastName" className={classes.field} label="Last name">
53 |           <Input name="lastName" className={classes.input} />
54 |           <ErrorsBlock names={["lastName"]} className={classes.errors} />
55 |         </Field>
56 |         <Button
57 |           className={classes.button}
58 |           color="primary"
59 |           onClick={() => formRef.current && formRef.current.submit()}
60 |           variant="contained"
61 |         >
62 |           Submit
63 |         </Button>
64 |       </Form>
65 |     </div>
66 |   );
67 | }
68 | 


--------------------------------------------------------------------------------
/demo-app/src/ReactoFormHookExample.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { makeStyles } from '@material-ui/core/styles';
 3 | import Button from '@material-ui/core/Button';
 4 | import { ErrorsBlock, Field, Input } from "reacto-form-inputs";
 5 | import useReactoForm from "reacto-form/esm/useReactoForm";
 6 | import validator from "./formValidator";
 7 | 
 8 | const useStyles = makeStyles(theme => ({
 9 |   button: {
10 |     marginTop: theme.spacing(1),
11 |   },
12 |   errors: {
13 |     color: theme.palette.error.main
14 |   },
15 |   field: {
16 |     marginBottom: theme.spacing(2),
17 |     marginTop: theme.spacing(2),
18 |   },
19 |   input: {
20 |     display: "block",
21 |     lineHeight: 2,
22 |     marginTop: theme.spacing(0.5),
23 |     width: "100%"
24 |   },
25 |   root: {
26 |     marginLeft: "auto",
27 |     marginRight: "auto",
28 |     width: "50%",
29 |   }
30 | }));
31 | 
32 | async function mySubmissionFunction(...args) {
33 |   console.log("Submit", ...args);
34 | }
35 | 
36 | export default function ReactoFormHookExample() {
37 |   const classes = useStyles();
38 | 
39 |   const {
40 |     getErrors,
41 |     getInputProps,
42 |     submitForm
43 |   } = useReactoForm({
44 |     logErrorsOnSubmit: true,
45 |     onChange: (val) => { console.log("onChangeForm", val); },
46 |     onChanging: (val) => { console.log("onChangingForm", val); },
47 |     onSubmit: mySubmissionFunction,
48 |     validator,
49 |   });
50 | 
51 |   return (
52 |     <div className={classes.root}>
53 |       <Field name="firstName" className={classes.field} errors={getErrors(["firstName"])} label="First name">
54 |         <Input className={classes.input} {...getInputProps("firstName")} />
55 |         <ErrorsBlock errors={getErrors(["firstName"])} className={classes.errors} />
56 |       </Field>
57 |       <Field name="lastName" className={classes.field} errors={getErrors(["lastName"])} label="Last name">
58 |         <Input className={classes.input} {...getInputProps("lastName")} />
59 |         <ErrorsBlock errors={getErrors(["lastName"])} className={classes.errors} />
60 |       </Field>
61 |       <Button
62 |         className={classes.button}
63 |         color="primary"
64 |         onClick={submitForm}
65 |         variant="contained"
66 |       >
67 |         Submit
68 |       </Button>
69 |     </div>
70 |   );
71 | }
72 | 


--------------------------------------------------------------------------------
/demo-app/src/ReactoFormExampleMUI.js:
--------------------------------------------------------------------------------
 1 | import React, { useRef } from "react";
 2 | import { makeStyles } from '@material-ui/core/styles';
 3 | import Button from '@material-ui/core/Button';
 4 | import TextField from '@material-ui/core/TextField';
 5 | import Form from "reacto-form/esm/Form";
 6 | import muiOptions from "reacto-form/esm/muiOptions";
 7 | import validator from "./formValidator";
 8 | 
 9 | TextField.isFormInput = true;
10 | 
11 | const useStyles = makeStyles(theme => ({
12 |   button: {
13 |     marginTop: theme.spacing(1),
14 |   },
15 |   errors: {
16 |     color: theme.palette.error.main
17 |   },
18 |   field: {
19 |     marginBottom: theme.spacing(2),
20 |     marginTop: theme.spacing(2),
21 |   },
22 |   input: {
23 |     display: "block",
24 |     lineHeight: 2,
25 |     marginTop: theme.spacing(0.5),
26 |     width: "100%"
27 |   },
28 |   root: {
29 |     marginLeft: "auto",
30 |     marginRight: "auto",
31 |     width: "50%",
32 |   }
33 | }));
34 | 
35 | export default function ReactoFormExample() {
36 |   const classes = useStyles();
37 |   const formRef = useRef(null);
38 | 
39 |   return (
40 |     <div className={classes.root}>
41 |       <Form
42 |         inputOptions={muiOptions}
43 |         logErrorsOnSubmit
44 |         onChange={(formData) => { console.log("onChange", formData); }}
45 |         onChanging={(formData) => { console.log("onChanging", formData); }}
46 |         onSubmit={(formData) => { console.log("onSubmit", formData); }}
47 |         ref={formRef}
48 |         validator={validator}
49 |       >
50 |         <TextField
51 |           error={formRef.current && formRef.current.hasErrors(["firstName"])}
52 |           fullWidth
53 |           helperText={formRef.current && formRef.current.getFirstErrorMessage(["firstName"])}
54 |           label="First name"
55 |           name="firstName"
56 |           onKeyPress={(event) => {
57 |             if (event.key === "Enter") formRef.current && formRef.current.submit();
58 |           }}
59 |         />
60 |         <TextField
61 |           error={formRef.current && formRef.current.hasErrors(["lastName"])}
62 |           fullWidth
63 |           helperText={formRef.current && formRef.current.getFirstErrorMessage(["lastName"])}
64 |           label="Last name"
65 |           name="lastName"
66 |           onKeyPress={(event) => {
67 |             if (event.key === "Enter") formRef.current && formRef.current.submit();
68 |           }}
69 |         />
70 |         <Button
71 |           className={classes.button}
72 |           color="primary"
73 |           onClick={() => formRef.current && formRef.current.submit()}
74 |           variant="contained"
75 |         >
76 |           Submit
77 |         </Button>
78 |       </Form>
79 |     </div>
80 |   );
81 | }
82 | 


--------------------------------------------------------------------------------
/demo-app/src/ReactoFormHookExampleMUI.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { makeStyles } from '@material-ui/core/styles';
 3 | import Button from '@material-ui/core/Button';
 4 | import Checkbox from '@material-ui/core/Checkbox';
 5 | import FormControlLabel from '@material-ui/core/FormControlLabel';
 6 | import FormGroup from '@material-ui/core/FormGroup';
 7 | import TextField from '@material-ui/core/TextField';
 8 | import muiOptions from "reacto-form/esm/muiOptions";
 9 | import muiCheckboxOptions from "reacto-form/esm/muiCheckboxOptions";
10 | import useReactoForm from "reacto-form/esm/useReactoForm";
11 | import validator from "./formValidator";
12 | 
13 | const useStyles = makeStyles(theme => ({
14 |   button: {
15 |     marginTop: theme.spacing(1),
16 |   },
17 |   root: {
18 |     marginLeft: "auto",
19 |     marginRight: "auto",
20 |     width: "50%",
21 |   }
22 | }));
23 | 
24 | async function mySubmissionFunction(...args) {
25 |   console.log("Submit", ...args);
26 | }
27 | 
28 | export default function ReactoFormHookExampleMUI() {
29 |   const classes = useStyles();
30 | 
31 |   const {
32 |     getFirstErrorMessage,
33 |     getInputProps,
34 |     hasErrors,
35 |     submitForm
36 |   } = useReactoForm({
37 |     logErrorsOnSubmit: true,
38 |     onChange: (val) => { console.log("onChangeForm", val); },
39 |     onChanging: (val) => { console.log("onChangingForm", val); },
40 |     onSubmit: mySubmissionFunction,
41 |     validator,
42 |     isReadOnly: true
43 |   });
44 | 
45 |   return (
46 |     <div className={classes.root}>
47 |       <TextField
48 |         label="First name"
49 |         error={hasErrors(["firstName"])}
50 |         fullWidth
51 |         helperText={getFirstErrorMessage(["firstName"])}
52 |         onKeyPress={(event) => {
53 |           if (event.key === "Enter") submitForm();
54 |         }}
55 |         {...getInputProps("firstName", muiOptions)}
56 |       />
57 |       <TextField
58 |         label="Last name"
59 |         error={hasErrors(["lastName"])}
60 |         fullWidth
61 |         helperText={getFirstErrorMessage(["lastName"])}
62 |         onKeyPress={(event) => {
63 |           if (event.key === "Enter") submitForm();
64 |         }}
65 |         {...getInputProps("lastName", muiOptions)}
66 |       />
67 |       <FormGroup row>
68 |         <FormControlLabel
69 |           control={
70 |             <Checkbox color="primary" />
71 |           }
72 |           label="Are you married?"
73 |           {...getInputProps("isMarried", muiCheckboxOptions)}
74 |         />
75 |       </FormGroup>
76 |       <Button
77 |         className={classes.button}
78 |         color="primary"
79 |         onClick={submitForm}
80 |         variant="contained"
81 |       >
82 |         Submit
83 |       </Button>
84 |     </div>
85 |   );
86 | }
87 | 


--------------------------------------------------------------------------------
/demo-app/src/ReactoFormHookExampleUpdateMUI.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { makeStyles } from '@material-ui/core/styles';
 3 | import Button from '@material-ui/core/Button';
 4 | import Checkbox from '@material-ui/core/Checkbox';
 5 | import FormControlLabel from '@material-ui/core/FormControlLabel';
 6 | import FormGroup from '@material-ui/core/FormGroup';
 7 | import TextField from '@material-ui/core/TextField';
 8 | import muiOptions from "reacto-form/esm/muiOptions";
 9 | import muiCheckboxOptions from "reacto-form/esm/muiCheckboxOptions";
10 | import useReactoForm from "reacto-form/esm/useReactoForm";
11 | import validator from "./formValidator";
12 | 
13 | const useStyles = makeStyles(theme => ({
14 |   button: {
15 |     marginTop: theme.spacing(1),
16 |   },
17 |   root: {
18 |     marginLeft: "auto",
19 |     marginRight: "auto",
20 |     width: "50%",
21 |   }
22 | }));
23 | 
24 | export default function ReactoFormHookExampleUpdateMUI(props) {
25 |   const {
26 |     setUpdateFormData,
27 |     updateFormData
28 |   } = props;
29 | 
30 |   const classes = useStyles();
31 | 
32 |   const {
33 |     getFirstErrorMessage,
34 |     getInputProps,
35 |     hasErrors,
36 |     submitForm
37 |   } = useReactoForm({
38 |     logErrorsOnSubmit: true,
39 |     onChange: (val) => { console.log("onChangeForm", val); },
40 |     onChanging: (val) => { console.log("onChangingForm", val); },
41 |     onSubmit(formData) {
42 |       setUpdateFormData(formData);
43 |     },
44 |     validator,
45 |     value: updateFormData,
46 |   });
47 | 
48 |   return (
49 |     <div className={classes.root}>
50 |       <TextField
51 |         label="First name"
52 |         error={hasErrors(["firstName"])}
53 |         fullWidth
54 |         helperText={getFirstErrorMessage(["firstName"])}
55 |         onKeyPress={(event) => {
56 |           if (event.key === "Enter") submitForm();
57 |         }}
58 |         {...getInputProps("firstName", muiOptions)}
59 |       />
60 |       <TextField
61 |         label="Last name"
62 |         error={hasErrors(["lastName"])}
63 |         fullWidth
64 |         helperText={getFirstErrorMessage(["lastName"])}
65 |         onKeyPress={(event) => {
66 |           if (event.key === "Enter") submitForm();
67 |         }}
68 |         {...getInputProps("lastName", muiOptions)}
69 |       />
70 |       <FormGroup row>
71 |         <FormControlLabel
72 |           control={
73 |             <Checkbox color="primary" />
74 |           }
75 |           label="Are you married?"
76 |           {...getInputProps("isMarried", muiCheckboxOptions)}
77 |         />
78 |       </FormGroup>
79 |       <Button
80 |         className={classes.button}
81 |         color="primary"
82 |         onClick={submitForm}
83 |         variant="contained"
84 |       >
85 |         Submit
86 |       </Button>
87 |     </div>
88 |   );
89 | }
90 | 


--------------------------------------------------------------------------------
/lib/__snapshots__/Form.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`form snapshot 1 1`] = `
  4 | <div
  5 |   className={null}
  6 |   style={Object {}}
  7 | >
  8 |   <div
  9 |     className=""
 10 |     style={Object {}}
 11 |   >
 12 |     <label
 13 |       style={Object {}}
 14 |     >
 15 |       LABEL
 16 |     </label>
 17 |     <p>
 18 |       Text above
 19 |     </p>
 20 |     <input
 21 |       name="foo.bar"
 22 |       onBlur={[Function]}
 23 |       onChange={[Function]}
 24 |       onKeyPress={[Function]}
 25 |       readOnly={false}
 26 |       style={Object {}}
 27 |       type="text"
 28 |       value="TEST VALUE"
 29 |     />
 30 |     <p>
 31 |       Text below
 32 |     </p>
 33 |   </div>
 34 | </div>
 35 | `;
 36 | 
 37 | exports[`form snapshot 2 - complex nesting 1`] = `
 38 | <div
 39 |   className={null}
 40 |   style={Object {}}
 41 | >
 42 |   <div
 43 |     className=""
 44 |     style={Object {}}
 45 |   >
 46 |     <label
 47 |       style={Object {}}
 48 |     >
 49 |       TYPE LABEL
 50 |     </label>
 51 |     <p>
 52 |       Text above
 53 |     </p>
 54 |     <input
 55 |       name="type"
 56 |       onBlur={[Function]}
 57 |       onChange={[Function]}
 58 |       onKeyPress={[Function]}
 59 |       readOnly={false}
 60 |       style={Object {}}
 61 |       type="text"
 62 |       value="monkey"
 63 |     />
 64 |     <p>
 65 |       Text below
 66 |     </p>
 67 |   </div>
 68 |   <div
 69 |     className="form-section"
 70 |   >
 71 |     <h2>
 72 |       Inner Form
 73 |     </h2>
 74 |     <div
 75 |       className={null}
 76 |       style={Object {}}
 77 |     >
 78 |       <div
 79 |         className=""
 80 |         style={Object {}}
 81 |       >
 82 |         <label
 83 |           style={Object {}}
 84 |         >
 85 |           FOOBAR LABEL
 86 |         </label>
 87 |         <p>
 88 |           Text above
 89 |         </p>
 90 |         <input
 91 |           name="bar"
 92 |           onBlur={[Function]}
 93 |           onChange={[Function]}
 94 |           onKeyPress={[Function]}
 95 |           readOnly={false}
 96 |           style={Object {}}
 97 |           type="text"
 98 |           value="TEST VALUE"
 99 |         />
100 |         <p>
101 |           Text below
102 |         </p>
103 |       </div>
104 |       <div
105 |         className=""
106 |         style={Object {}}
107 |       >
108 |         <label
109 |           style={Object {}}
110 |         >
111 |           BIP LABEL
112 |         </label>
113 |         <p>
114 |           Text above
115 |         </p>
116 |         <input
117 |           name="bip"
118 |           onBlur={[Function]}
119 |           onChange={[Function]}
120 |           onKeyPress={[Function]}
121 |           readOnly={false}
122 |           style={Object {}}
123 |           type="text"
124 |           value=""
125 |         />
126 |         <p>
127 |           Text below
128 |         </p>
129 |       </div>
130 |     </div>
131 |   </div>
132 | </div>
133 | `;
134 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "reacto-form",
  3 |   "version": "1.5.1",
  4 |   "description": "A reference implementation of the Composable Form Specification for React (see https://composableforms.netlify.app)",
  5 |   "author": "Long Shot Labs (https://www.longshotlabs.co/)",
  6 |   "license": "MIT",
  7 |   "repository": {
  8 |     "type": "git",
  9 |     "url": "https://github.com/longshotlabs/reacto-form.git"
 10 |   },
 11 |   "bugs": {
 12 |     "url": "https://github.com/longshotlabs/reacto-form/issues"
 13 |   },
 14 |   "homepage": "https://github.com/longshotlabs/reacto-form",
 15 |   "files": [
 16 |     "CHANGELOG.md",
 17 |     "cjs",
 18 |     "esm",
 19 |     "LICENSE",
 20 |     "README.md"
 21 |   ],
 22 |   "browserslist": [
 23 |     "last 2 version",
 24 |     "> 1%",
 25 |     "maintained node versions",
 26 |     "not dead"
 27 |   ],
 28 |   "eslintConfig": {
 29 |     "extends": [
 30 |       "airbnb-base",
 31 |       "plugin:jsx-a11y/recommended",
 32 |       "plugin:react/recommended",
 33 |       "prettier"
 34 |     ],
 35 |     "parser": "@babel/eslint-parser",
 36 |     "env": {
 37 |       "browser": true,
 38 |       "jest": true
 39 |     },
 40 |     "settings": {
 41 |       "react": {
 42 |         "version": "detect"
 43 |       }
 44 |     },
 45 |     "rules": {
 46 |       "arrow-body-style": 0,
 47 |       "consistent-return": 0,
 48 |       "max-len": 0,
 49 |       "no-param-reassign": 0,
 50 |       "no-underscore-dangle": 0,
 51 |       "no-use-before-define": [
 52 |         2,
 53 |         "nofunc"
 54 |       ],
 55 |       "no-unused-expressions": 0,
 56 |       "no-console": 0,
 57 |       "space-before-function-paren": 0,
 58 |       "react/prefer-stateless-function": 0,
 59 |       "react/destructuring-assignment": 0,
 60 |       "react/no-multi-comp": 0,
 61 |       "react/jsx-filename-extension": 0,
 62 |       "jsx-a11y/href-no-hash": "off",
 63 |       "jsx-a11y/anchor-is-valid": [
 64 |         "warn",
 65 |         {
 66 |           "aspects": [
 67 |             "invalidHref"
 68 |           ]
 69 |         }
 70 |       ]
 71 |     }
 72 |   },
 73 |   "jest": {
 74 |     "setupFilesAfterEnv": [
 75 |       "raf/polyfill",
 76 |       "<rootDir>/jestSetup.js"
 77 |     ],
 78 |     "testEnvironment": "jsdom"
 79 |   },
 80 |   "main": "./cjs/index.js",
 81 |   "module": "./esm/index.js",
 82 |   "scripts": {
 83 |     "build": "npm run build:modules && npm run build:common",
 84 |     "build:common": "rm -rf cjs/** && BABEL_ENV=production babel lib --out-dir cjs",
 85 |     "build:modules": "rm -rf esm/** && BABEL_ENV=production BABEL_MODULES=1 babel lib --out-dir esm",
 86 |     "lint": "BABEL_ENV=test eslint ./lib",
 87 |     "prepublishOnly": "npm run lint && npm test && npm run build",
 88 |     "test": "jest ./lib"
 89 |   },
 90 |   "peerDependencies": {
 91 |     "react": ">=16.8 || >=17"
 92 |   },
 93 |   "dependencies": {
 94 |     "@babel/runtime": "^7.27.0",
 95 |     "clone": "^2.1.2",
 96 |     "lodash": "^4.17.20",
 97 |     "prop-types": "^15.7.2"
 98 |   },
 99 |   "devDependencies": {
100 |     "@babel/cli": "^7.12.8",
101 |     "@babel/core": "^7.16.0",
102 |     "@babel/eslint-parser": "^7.16.3",
103 |     "@babel/plugin-proposal-class-properties": "^7.16.0",
104 |     "@babel/plugin-transform-runtime": "^7.16.0",
105 |     "@babel/preset-env": "^7.16.0",
106 |     "@babel/preset-react": "^7.16.0",
107 |     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
108 |     "composable-form-tests": "^1.1.0",
109 |     "core-js": "^3.19.1",
110 |     "enzyme": "^3.11.0",
111 |     "eslint": "^8.2.0",
112 |     "eslint-config-airbnb": "^19.0.0",
113 |     "eslint-config-prettier": "^8.3.0",
114 |     "eslint-plugin-import": "^2.25.3",
115 |     "eslint-plugin-jsx-a11y": "^6.5.1",
116 |     "eslint-plugin-react": "^7.27.0",
117 |     "jest": "^27.3.1",
118 |     "jsdom": "^18.1.0",
119 |     "raf": "^3.4.1",
120 |     "react": "^17.0.2",
121 |     "react-dom": "^17.0.2",
122 |     "react-test-renderer": "^17.0.2",
123 |     "reacto-form-inputs": "^1.2.0"
124 |   }
125 | }
126 | 


--------------------------------------------------------------------------------
/lib/Form.test.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { mount } from "enzyme";
  3 | import renderer from "react-test-renderer";
  4 | import { Field, Input } from "reacto-form-inputs";
  5 | import Form from "./Form";
  6 | 
  7 | test("has isForm property set to true", () => {
  8 |   expect(Form.isForm).toBe(true);
  9 | });
 10 | 
 11 | test("form snapshot 1", () => {
 12 |   const component = renderer.create(
 13 |     <Form value={{ foo: { bar: "TEST VALUE" } }}>
 14 |       <Field label="LABEL">
 15 |         <p>Text above</p>
 16 |         <Input name="foo.bar" />
 17 |         <p>Text below</p>
 18 |       </Field>
 19 |     </Form>
 20 |   );
 21 | 
 22 |   const tree = component.toJSON();
 23 |   expect(tree).toMatchSnapshot();
 24 | });
 25 | 
 26 | test("form snapshot 2 - complex nesting", () => {
 27 |   const component = renderer.create(
 28 |     <Form value={{ foo: { bar: "TEST VALUE" }, type: "monkey" }}>
 29 |       <Field label="TYPE LABEL">
 30 |         <p>Text above</p>
 31 |         <Input name="type" />
 32 |         <p>Text below</p>
 33 |       </Field>
 34 |       <div className="form-section">
 35 |         <h2>Inner Form</h2>
 36 |         <Form name="foo">
 37 |           <Field label="FOOBAR LABEL">
 38 |             <p>Text above</p>
 39 |             <Input name="bar" />
 40 |             <p>Text below</p>
 41 |           </Field>
 42 |           <Field label="BIP LABEL">
 43 |             <p>Text above</p>
 44 |             <Input name="bip" />
 45 |             <p>Text below</p>
 46 |           </Field>
 47 |         </Form>
 48 |       </div>
 49 |     </Form>
 50 |   );
 51 | 
 52 |   const tree = component.toJSON();
 53 |   expect(tree).toMatchSnapshot();
 54 | });
 55 | 
 56 | test("sets value prop on child input for simple name", () => {
 57 |   const wrapper = mount(
 58 |     <Form value={{ foo: "BAR" }}>
 59 |       <Input name="foo" />
 60 |     </Form>
 61 |   );
 62 | 
 63 |   expect(wrapper.find("input").prop("value")).toBe("BAR");
 64 | });
 65 | 
 66 | test("sets value prop on child input for path name", () => {
 67 |   const wrapper = mount(
 68 |     <Form value={{ foo: [{ a: "VAL" }] }}>
 69 |       <Input name="foo[0].a" />
 70 |     </Form>
 71 |   );
 72 | 
 73 |   expect(wrapper.find("input").prop("value")).toBe("VAL");
 74 | });
 75 | 
 76 | test("keeps child input value prop if present", () => {
 77 |   const wrapper = mount(
 78 |     <Form value={{ foo: "BAR" }}>
 79 |       <Input name="foo" value="DEFAULT" />
 80 |     </Form>
 81 |   );
 82 | 
 83 |   expect(wrapper.find("input").prop("value")).toBe("DEFAULT");
 84 | });
 85 | 
 86 | test("sets value prop on nested descendant input", () => {
 87 |   const wrapper = mount(
 88 |     <Form value={{ foo: "BAR" }}>
 89 |       <div>
 90 |         <Field label="LABEL">
 91 |           <div>
 92 |             <Input name="foo" />
 93 |           </div>
 94 |         </Field>
 95 |       </div>
 96 |     </Form>
 97 |   );
 98 | 
 99 |   expect(wrapper.find("input").prop("value")).toBe("BAR");
100 | });
101 | 
102 | test("simple form value is updated after user enters input", () => {
103 |   const wrapper = mount(
104 |     <Form value={{ foo: "BAR" }}>
105 |       <Input name="foo" />
106 |     </Form>
107 |   );
108 | 
109 |   expect(wrapper.instance().getValue()).toEqual({ foo: "BAR" });
110 | 
111 |   wrapper.find("input").simulate("change", { target: { value: "NEW" } });
112 | 
113 |   expect(wrapper.instance().getValue()).toEqual({ foo: "NEW" });
114 | });
115 | 
116 | test("path form value is updated after user enters input", () => {
117 |   const wrapper = mount(
118 |     <Form value={{ foo: [{ a: "VAL" }] }}>
119 |       <Input name="foo[0].a" />
120 |     </Form>
121 |   );
122 | 
123 |   expect(wrapper.instance().getValue()).toEqual({ foo: [{ a: "VAL" }] });
124 | 
125 |   wrapper.find("input").simulate("change", { target: { value: "NEW" } });
126 | 
127 |   expect(wrapper.instance().getValue()).toEqual({ foo: [{ a: "NEW" }] });
128 | });
129 | 
130 | test("blurring input triggers form onChanging and onChange", () => {
131 |   const onChange = jest.fn().mockName("onChange");
132 |   const onChanging = jest.fn().mockName("onChanging");
133 | 
134 |   const wrapper = mount(
135 |     <Form onChange={onChange} onChanging={onChanging}>
136 |       <Input name="foo" />
137 |     </Form>
138 |   );
139 | 
140 |   expect(onChange).toHaveBeenCalledTimes(1);
141 |   expect(onChanging).toHaveBeenCalledTimes(1);
142 | 
143 |   expect(onChange.mock.calls[0][0]).toEqual({ foo: null });
144 |   expect(onChanging.mock.calls[0][0]).toEqual({ foo: null });
145 | 
146 |   onChange.mockClear();
147 |   onChanging.mockClear();
148 | 
149 |   wrapper.find("input").simulate("blur", { target: { value: "NEW" } });
150 | 
151 |   expect(onChange).toHaveBeenCalledTimes(1);
152 |   expect(onChanging).toHaveBeenCalledTimes(1);
153 | 
154 |   expect(onChange.mock.calls[0][0]).toEqual({ foo: "NEW" });
155 |   expect(onChanging.mock.calls[0][0]).toEqual({ foo: "NEW" });
156 | });
157 | 


--------------------------------------------------------------------------------
/demo-app/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.1/8 is considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl)
104 |     .then(response => {
105 |       // Ensure service worker exists, and that we really are getting a JS file.
106 |       const contentType = response.headers.get('content-type');
107 |       if (
108 |         response.status === 404 ||
109 |         (contentType != null && contentType.indexOf('javascript') === -1)
110 |       ) {
111 |         // No service worker found. Probably a different app. Reload the page.
112 |         navigator.serviceWorker.ready.then(registration => {
113 |           registration.unregister().then(() => {
114 |             window.location.reload();
115 |           });
116 |         });
117 |       } else {
118 |         // Service worker found. Proceed as normal.
119 |         registerValidSW(swUrl, config);
120 |       }
121 |     })
122 |     .catch(() => {
123 |       console.log(
124 |         'No internet connection found. App is running in offline mode.'
125 |       );
126 |     });
127 | }
128 | 
129 | export function unregister() {
130 |   if ('serviceWorker' in navigator) {
131 |     navigator.serviceWorker.ready.then(registration => {
132 |       registration.unregister();
133 |     });
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/lib/useReactoForm.js:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import clone from "clone";
  3 | import get from "lodash/get";
  4 | import isEqual from "lodash/isEqual";
  5 | import set from "lodash/set";
  6 | import bracketsToDots from "./shared/bracketsToDots";
  7 | import filterErrorsForNames from "./shared/filterErrorsForNames";
  8 | 
  9 | /**
 10 |  * @summary To ensure we do not mutate objects passed in, we'll do a deep clone.
 11 |  * @param {Any} value Any value
 12 |  * @return {Object} Cloned value
 13 |  */
 14 | function cloneValue(value) {
 15 |   return value ? clone(value) : {};
 16 | }
 17 | 
 18 | /**
 19 |  * @summary Main ReactoForm hook
 20 |  */
 21 | export default function useReactoForm(props) {
 22 |   const {
 23 |     hasBeenValidated: hasBeenValidatedProp,
 24 |     logErrorsOnSubmit = false,
 25 |     onChange = () => {},
 26 |     onChanging = () => {},
 27 |     onSubmit = () => {},
 28 |     revalidateOn = "changing",
 29 |     shouldSubmitWhenInvalid = false,
 30 |     validateOn = "submit",
 31 |     validator,
 32 |     value: valueProp,
 33 |   } = props;
 34 | 
 35 |   const [errors, setErrors] = useState([]);
 36 |   const [hasBeenValidated, setHasBeenValidated] = useState(
 37 |     hasBeenValidatedProp || false
 38 |   );
 39 |   const [forceReset, setForceReset] = useState(0);
 40 |   const [formData, setFormData] = useState({});
 41 | 
 42 |   // isReadOnly can be passed as a function, which is then called with
 43 |   // the current form data to determine whether it should be read only.
 44 |   let { isReadOnly } = props;
 45 |   if (typeof isReadOnly === "function") {
 46 |     isReadOnly = !!isReadOnly(formData);
 47 |   }
 48 | 
 49 |   /**
 50 |    * @summary Set field value in state using lodash set
 51 |    * @return {Object} A copy of formData, mutated
 52 |    */
 53 |   function setFieldValueInFormData(fieldPath, fieldValue) {
 54 |     const formDataCopy = clone(formData);
 55 |     set(formDataCopy, fieldPath, fieldValue === undefined ? null : fieldValue);
 56 |     setFormData(formDataCopy);
 57 |     return formDataCopy;
 58 |   }
 59 | 
 60 |   // Whenever a changed value prop comes in, we reset state to that, thus becoming clean.
 61 |   useEffect(() => {
 62 |     setErrors([]);
 63 |     setHasBeenValidated(false);
 64 |     setFormData(cloneValue(valueProp));
 65 |   }, [valueProp, forceReset]);
 66 | 
 67 |   // Let props override the `hasBeenValidated` state
 68 |   useEffect(() => {
 69 |     if (
 70 |       typeof hasBeenValidatedProp === "boolean" &&
 71 |       hasBeenValidatedProp !== hasBeenValidated
 72 |     ) {
 73 |       setHasBeenValidated(hasBeenValidatedProp);
 74 |     }
 75 |   }, [hasBeenValidatedProp]);
 76 | 
 77 |   /**
 78 |    * @summary Validate the form
 79 |    * @return {Promise<Object[]>} Promised array of error objects
 80 |    */
 81 |   async function validateForm() {
 82 |     if (typeof validator !== "function") return [];
 83 | 
 84 |     let customValidatorErrors;
 85 |     try {
 86 |       customValidatorErrors = await validator(formData);
 87 |     } catch (error) {
 88 |       console.error(error);
 89 |       return [];
 90 |     }
 91 | 
 92 |     if (!Array.isArray(customValidatorErrors)) {
 93 |       console.error("validator function must return or promise an array");
 94 |       return [];
 95 |     }
 96 | 
 97 |     setErrors(customValidatorErrors);
 98 |     setHasBeenValidated(true);
 99 | 
100 |     return customValidatorErrors;
101 |   }
102 | 
103 |   /**
104 |    *
105 |    */
106 |   async function submitForm() {
107 |     const validationErrors = await validateForm();
108 | 
109 |     if (logErrorsOnSubmit && validationErrors.length > 0)
110 |       console.error(validationErrors);
111 | 
112 |     if (validationErrors.length && !shouldSubmitWhenInvalid) return null;
113 | 
114 |     // onSubmit should ideally return a Promise so that we can wait
115 |     // for submission to complete, but we won't worry about it if it doesn't
116 |     let submissionResult;
117 |     try {
118 |       submissionResult = await onSubmit(
119 |         formData,
120 |         validationErrors.length === 0
121 |       );
122 |     } catch (error) {
123 |       console.error('Form "onSubmit" function error:', error);
124 |       return null;
125 |     }
126 | 
127 |     const { ok = true, errors: submissionErrors } = submissionResult || {};
128 | 
129 |     // Submission result must be an object with `ok` bool prop
130 |     // and optional submission errors
131 |     if (ok) {
132 |       // Because `valueProp` is sometimes stale in this function, we have to
133 |       // force a reset this way rather than by calling `setFormData` directly
134 |       setForceReset(forceReset + 1);
135 |       return null;
136 |     }
137 | 
138 |     if (submissionErrors) {
139 |       if (Array.isArray(submissionErrors)) {
140 |         setErrors(submissionErrors);
141 |       } else {
142 |         console.error(
143 |           'onSubmit returned an object with "errors" property that is not a valid errors array'
144 |         );
145 |       }
146 |     }
147 | 
148 |     return null;
149 |   }
150 | 
151 |   function getErrors(fieldPaths, { includeDescendantErrors = false } = {}) {
152 |     if (!Array.isArray(fieldPaths)) {
153 |       throw new Error(
154 |         "First argument to getErrors must be an array of field paths"
155 |       );
156 |     }
157 |     return filterErrorsForNames(errors, fieldPaths, !includeDescendantErrors);
158 |   }
159 | 
160 |   function getFirstError(fieldPaths, options) {
161 |     const fieldErrors = getErrors(fieldPaths, options);
162 |     if (fieldErrors.length === 0) return null;
163 |     return fieldErrors[0];
164 |   }
165 | 
166 |   return {
167 |     formData,
168 |     getInputProps(fieldPath, getInputPropsOptions = {}) {
169 |       const {
170 |         isForm,
171 |         nullValue,
172 |         onChangeGetValue,
173 |         onChangingGetValue,
174 |         propNames = {},
175 |       } = getInputPropsOptions;
176 | 
177 |       let fieldErrors = filterErrorsForNames(errors, [fieldPath], false);
178 | 
179 |       // Adjust the error names to correct scope for forms
180 |       if (isForm) {
181 |         const canonicalName = bracketsToDots(fieldPath);
182 |         fieldErrors = fieldErrors.map((err) => ({
183 |           ...err,
184 |           name: bracketsToDots(err.name).slice(canonicalName.length + 1),
185 |         }));
186 |       }
187 | 
188 |       function onInputValueChange(...onChangeArgs) {
189 |         // The composable forms spec calls for new value to be passed
190 |         // directly as the first arg. Many popular libraries pass
191 |         // an Event as the first arg, and `onChangeGetValue` can be
192 |         // used to determine and return the new value.
193 |         const inputValue = onChangeGetValue
194 |           ? onChangeGetValue(...onChangeArgs)
195 |           : onChangeArgs[0];
196 | 
197 |         const updatedFormData = setFieldValueInFormData(fieldPath, inputValue);
198 | 
199 |         // Now bubble up the `onChange`, possibly validating first
200 |         if (
201 |           validateOn === "changed" ||
202 |           validateOn === "changing" ||
203 |           (hasBeenValidated &&
204 |             (revalidateOn === "changed" || revalidateOn === "changing"))
205 |         ) {
206 |           validateForm()
207 |             .then((updatedErrors) => {
208 |               onChange(updatedFormData, updatedErrors.length === 0);
209 |               return null;
210 |             })
211 |             .catch((error) => {
212 |               console.error(error);
213 |             });
214 |         } else {
215 |           onChange(updatedFormData, errors.length === 0);
216 |         }
217 |       }
218 | 
219 |       function onInputValueChanging(...onChangingArgs) {
220 |         // The composable forms spec calls for new value to be passed
221 |         // directly as the first arg. Many popular libraries pass
222 |         // an Event as the first arg, and `onChangeGetValue` can be
223 |         // used to determine and return the new value.
224 |         const inputValue = onChangingGetValue
225 |           ? onChangingGetValue(...onChangingArgs)
226 |           : onChangingArgs[0];
227 | 
228 |         const updatedFormData = setFieldValueInFormData(fieldPath, inputValue);
229 | 
230 |         if (
231 |           validateOn === "changing" ||
232 |           (hasBeenValidated && revalidateOn === "changing")
233 |         ) {
234 |           validateForm()
235 |             .then((updatedErrors) => {
236 |               onChanging(updatedFormData, updatedErrors.length === 0);
237 |               return null;
238 |             })
239 |             .catch((error) => {
240 |               console.error(error);
241 |             });
242 |         } else {
243 |           onChanging(updatedFormData, errors.length === 0);
244 |         }
245 |       }
246 | 
247 |       // Some input components (MUI) do not accept a `null` value.
248 |       // For these, passing `{ nullValue: "" }` options does the trick.
249 |       let value = get(formData, fieldPath, null);
250 |       if (value === null && nullValue !== undefined) value = nullValue;
251 | 
252 |       const inputProps = {
253 |         [propNames.errors || "errors"]: fieldErrors,
254 |         [propNames.hasBeenValidated || "hasBeenValidated"]: hasBeenValidated,
255 |         [propNames.isReadOnly || "isReadOnly"]: isReadOnly,
256 |         [propNames.name || "name"]: fieldPath,
257 |         [propNames.onChange || "onChange"]: onInputValueChange,
258 |         [propNames.onChanging || "onChanging"]: onInputValueChanging,
259 |         [propNames.onSubmit || "onSubmit"]: submitForm,
260 |         [propNames.value || "value"]: value,
261 |       };
262 | 
263 |       // If propNames key is set to `false`, omit the prop
264 |       [
265 |         "errors",
266 |         "hasBeenValidated",
267 |         "isReadOnly",
268 |         "name",
269 |         "onChange",
270 |         "onChanging",
271 |         "onSubmit",
272 |         "value",
273 |       ].forEach((key) => {
274 |         if (propNames[key] === false) delete inputProps[key];
275 |       });
276 | 
277 |       return inputProps;
278 |     },
279 |     getErrors,
280 |     getFirstError,
281 |     getFirstErrorMessage(fieldPaths, options) {
282 |       const fieldError = getFirstError(fieldPaths, options);
283 |       return (fieldError && fieldError.message) || null;
284 |     },
285 |     hasBeenValidated,
286 |     hasErrors(fieldPaths, options) {
287 |       return getErrors(fieldPaths, options).length > 0;
288 |     },
289 |     // Form is dirty if value prop doesn't match value state. Whenever a changed
290 |     // value prop comes in, we reset state to that, thus becoming clean.
291 |     isDirty: !isEqual(formData, valueProp),
292 |     resetValue() {
293 |       // Because `valueProp` is sometimes stale in this function, we have to
294 |       // force a reset this way rather than by calling `setFormData` directly
295 |       setForceReset(forceReset + 1);
296 |     },
297 |     submitForm,
298 |   };
299 | }
300 | 


--------------------------------------------------------------------------------
/lib/FormList.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import PropTypes from "prop-types";
  3 | import isEqual from "lodash/isEqual";
  4 | import clone from "clone";
  5 | 
  6 | import bracketsToDots from "./shared/bracketsToDots";
  7 | import customPropTypes from "./shared/propTypes";
  8 | import filterErrorsForNames from "./shared/filterErrorsForNames";
  9 | import recursivelyCloneElements from "./shared/recursivelyCloneElements";
 10 | 
 11 | const styles = {
 12 |   button: {
 13 |     paddingTop: 0,
 14 |     paddingRight: 0,
 15 |     paddingLeft: 0,
 16 |     paddingBottom: 0,
 17 |     width: "3.5rem",
 18 |     height: "3.5rem",
 19 |     verticalAlign: "-webkit-baseline-middle",
 20 |   },
 21 |   item: {
 22 |     display: "flex",
 23 |     flexDirection: "row",
 24 |     borderWidth: 1,
 25 |     borderColor: "#cccccc",
 26 |     borderBottomStyle: "solid",
 27 |     borderTopStyle: "none",
 28 |     borderLeftStyle: "none",
 29 |     borderRightStyle: "none",
 30 |     paddingBottom: "1rem",
 31 |     marginBottom: "1rem",
 32 |   },
 33 |   itemLeft: {
 34 |     paddingRight: "1.5rem",
 35 |   },
 36 |   itemRight: {
 37 |     flexGrow: 1,
 38 |   },
 39 |   lastItem: {
 40 |     display: "flex",
 41 |     flexDirection: "row",
 42 |   },
 43 |   list: {
 44 |     borderWidth: 1,
 45 |     borderColor: "#cccccc",
 46 |     borderStyle: "solid",
 47 |     borderRadius: 3,
 48 |     padding: "1rem",
 49 |   },
 50 |   addItemRow: {
 51 |     borderWidth: 1,
 52 |     borderColor: "#cccccc",
 53 |     borderBottomStyle: "none",
 54 |     borderTopStyle: "solid",
 55 |     borderLeftStyle: "none",
 56 |     borderRightStyle: "none",
 57 |     paddingTop: "1rem",
 58 |     marginTop: "1rem",
 59 |   },
 60 | };
 61 | 
 62 | class FormList extends Component {
 63 |   static isFormList = true;
 64 | 
 65 |   constructor(props) {
 66 |     super(props);
 67 | 
 68 |     let { minCount, value } = props;
 69 |     value = clone(value || []);
 70 |     minCount = minCount || 0;
 71 |     while (value.length < minCount) {
 72 |       value.push(null);
 73 |     }
 74 | 
 75 |     this.state = { value };
 76 | 
 77 |     this.elementRefs = [];
 78 |   }
 79 | 
 80 |   // eslint-disable-next-line camelcase
 81 |   UNSAFE_componentWillMount() {
 82 |     const { value } = this.state;
 83 |     this.handleChanging(value);
 84 |     this.handleChanged(value);
 85 |   }
 86 | 
 87 |   // eslint-disable-next-line camelcase
 88 |   UNSAFE_componentWillReceiveProps(nextProps) {
 89 |     const { value } = this.props;
 90 |     let { minCount, value: nextValue } = nextProps;
 91 |     const { value: stateValue } = this.state;
 92 | 
 93 |     // Whenever a changed value prop comes in, we reset state to that, thus becoming clean.
 94 |     if (!isEqual(value, nextValue)) {
 95 |       nextValue = clone(nextValue || []);
 96 |       minCount = minCount || 0;
 97 |       while (nextValue.length < minCount) {
 98 |         nextValue.push(null);
 99 |       }
100 | 
101 |       // We also keep the array length the same so that items don't disappear and
102 |       // confuse the user.
103 |       while (nextValue.length < stateValue.length) {
104 |         nextValue.push(null);
105 |       }
106 | 
107 |       this.setState({ value: nextValue });
108 |       this.handleChanging(nextValue);
109 |       this.handleChanged(nextValue);
110 |     }
111 |   }
112 | 
113 |   handleChanged(value) {
114 |     const { onChange } = this.props;
115 |     if (!isEqual(value, this.lastChangedValue)) {
116 |       this.lastChangedValue = value;
117 |       onChange(value);
118 |     }
119 |   }
120 | 
121 |   handleChanging(value) {
122 |     const { onChanging } = this.props;
123 |     if (!isEqual(value, this.lastChangingValue)) {
124 |       this.lastChangingValue = value;
125 |       onChanging(value);
126 |     }
127 |   }
128 | 
129 |   handleClickRemoveItem(index) {
130 |     return () => {
131 |       const { minCount } = this.props;
132 |       const { value } = this.state;
133 | 
134 |       if (value.length === Math.max(minCount || 0, 0)) return;
135 | 
136 |       value.splice(index, 1); // mutation is ok because we cloned, and likely faster
137 |       this.setState({ value });
138 |       this.handleChanging(value);
139 |       this.handleChanged(value);
140 |     };
141 |   }
142 | 
143 |   getFieldValueHandler(index, isChanged) {
144 |     return (itemValue) => {
145 |       const { value } = this.state;
146 |       value[index] = itemValue;
147 |       this.setState({ value });
148 |       if (isChanged) {
149 |         this.handleChanged(value);
150 |       } else {
151 |         this.handleChanging(value);
152 |       }
153 |     };
154 |   }
155 | 
156 |   getValue() {
157 |     return this.state.value;
158 |   }
159 | 
160 |   handleClickAddItem = () => {
161 |     const { value } = this.state;
162 |     value.push(null);
163 |     this.setState({ value });
164 |   };
165 | 
166 |   resetValue() {
167 |     let { minCount, value } = this.props;
168 |     value = clone(value || []);
169 |     minCount = minCount || 0;
170 |     while (value.length < minCount) {
171 |       value.push(null);
172 |     }
173 |     this.setState({ value });
174 | 
175 |     this.elementRefs.forEach((element) => {
176 |       if (element && typeof element.resetValue === "function")
177 |         element.resetValue();
178 |     });
179 |   }
180 | 
181 |   renderArrayItems() {
182 |     const {
183 |       buttonClassName,
184 |       buttonStyle,
185 |       children,
186 |       errors,
187 |       itemAreaClassName,
188 |       itemAreaStyle,
189 |       itemClassName,
190 |       itemStyle,
191 |       itemRemoveAreaClassName,
192 |       itemRemoveAreaStyle,
193 |       minCount,
194 |       name,
195 |       onSubmit,
196 |       removeButtonText,
197 |     } = this.props;
198 | 
199 |     const { value } = this.state;
200 | 
201 |     // We'll do these checks just once, outside of the `value.map`, for speed.
202 |     // This extra loop might be slower for small arrays, but will help with large arrays.
203 |     let itemChild;
204 |     let errorsChild;
205 |     React.Children.forEach(children, (child) => {
206 |       if (child.type.isFormList) {
207 |         throw new Error(
208 |           "reacto-form FormList: FormList may not be a child of FormList"
209 |         );
210 |       }
211 |       if (child.type.isForm || child.type.isFormInput) {
212 |         if (itemChild)
213 |           throw new Error(
214 |             "reacto-form FormList: FormList must have exactly one Input or Form child"
215 |           );
216 |         itemChild = child;
217 |       }
218 |       if (child.type.isFormErrors) {
219 |         if (errorsChild)
220 |           throw new Error(
221 |             "reacto-form FormList: FormList may have no more than one ErrorsBlock child"
222 |           );
223 |         errorsChild = child;
224 |       }
225 |     });
226 | 
227 |     const hasMoreThanMinCount = value.length > Math.max(minCount || 0, 0);
228 | 
229 |     this.elementRefs = [];
230 | 
231 |     return value.map((itemValue, index) => {
232 |       const itemName = `${name}[${index}]`;
233 |       const kids = React.Children.map(children, (child) => {
234 |         if (child.type.isForm || child.type.isFormInput) {
235 |           let filteredErrors = filterErrorsForNames(errors, [itemName], false);
236 |           // Adjust the error names to correct scope
237 |           if (child.type.isForm) {
238 |             filteredErrors = filteredErrors.map((err) => {
239 |               return {
240 |                 ...err,
241 |                 name: bracketsToDots(err.name).slice(
242 |                   `${name}.${index}`.length + 1
243 |                 ),
244 |               };
245 |             });
246 |           }
247 | 
248 |           return React.cloneElement(
249 |             child,
250 |             {
251 |               errors: filteredErrors,
252 |               name: itemName,
253 |               onChange: this.getFieldValueHandler(index, true),
254 |               onChanging: this.getFieldValueHandler(index, false),
255 |               onSubmit,
256 |               ref: (el) => {
257 |                 this.elementRefs.push(el);
258 |               },
259 |               value: itemValue,
260 |             },
261 |             recursivelyCloneElements(child.props.children)
262 |           );
263 |         }
264 | 
265 |         if (child.type.isFormErrors) {
266 |           return React.cloneElement(
267 |             child,
268 |             {
269 |               errors: filterErrorsForNames(errors, [itemName], true),
270 |               names: [itemName],
271 |             },
272 |             recursivelyCloneElements(child.props.children)
273 |           );
274 |         }
275 | 
276 |         return recursivelyCloneElements(child);
277 |       });
278 | 
279 |       let resolvedItemStyle =
280 |         index + 1 === value.length ? styles.lastItem : styles.item;
281 |       resolvedItemStyle = { ...resolvedItemStyle, ...itemStyle };
282 | 
283 |       return (
284 |         <div className={itemClassName} key={itemName} style={resolvedItemStyle}>
285 |           {hasMoreThanMinCount && (
286 |             <div
287 |               className={itemRemoveAreaClassName}
288 |               style={{ ...styles.itemLeft, ...itemRemoveAreaStyle }}
289 |             >
290 |               <button
291 |                 type="button"
292 |                 className={buttonClassName}
293 |                 onClick={this.handleClickRemoveItem(index)}
294 |                 style={{ ...styles.button, ...buttonStyle }}
295 |               >
296 |                 {removeButtonText}
297 |               </button>
298 |             </div>
299 |           )}
300 |           <div
301 |             className={itemAreaClassName}
302 |             style={{ ...styles.itemRight, ...itemAreaStyle }}
303 |           >
304 |             {kids}
305 |           </div>
306 |         </div>
307 |       );
308 |     });
309 |   }
310 | 
311 |   renderAddItemButton() {
312 |     const {
313 |       addButtonText,
314 |       addItemRowStyle,
315 |       buttonClassName,
316 |       itemClassName,
317 |     } = this.props;
318 | 
319 |     const { value } = this.state;
320 | 
321 |     let resolvedStyle = value.length === 0 ? {} : styles.addItemRow;
322 |     resolvedStyle = { ...resolvedStyle, ...addItemRowStyle };
323 | 
324 |     return (
325 |       <div className={itemClassName} style={resolvedStyle}>
326 |         <button
327 |           type="button"
328 |           className={buttonClassName}
329 |           onClick={this.handleClickAddItem}
330 |           style={styles.button}
331 |         >
332 |           {addButtonText}
333 |         </button>
334 |       </div>
335 |     );
336 |   }
337 | 
338 |   render() {
339 |     const { className, maxCount, style } = this.props;
340 |     let { value } = this.state;
341 |     if (!value) value = [];
342 |     const hasFewerThanMaxCount =
343 |       value.length < maxCount || maxCount === undefined || maxCount === null;
344 | 
345 |     return (
346 |       <div className={className} style={{ ...styles.list, ...style }}>
347 |         {this.renderArrayItems()}
348 |         {hasFewerThanMaxCount && this.renderAddItemButton()}
349 |       </div>
350 |     );
351 |   }
352 | }
353 | 
354 | FormList.propTypes = {
355 |   addButtonText: PropTypes.string,
356 |   addItemRowStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
357 |   buttonClassName: PropTypes.string,
358 |   buttonStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
359 |   children: PropTypes.node.isRequired,
360 |   className: PropTypes.string,
361 |   errors: customPropTypes.errors,
362 |   itemAreaClassName: PropTypes.string,
363 |   itemAreaStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
364 |   itemClassName: PropTypes.string,
365 |   itemStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
366 |   itemRemoveAreaClassName: PropTypes.string,
367 |   itemRemoveAreaStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
368 |   maxCount: PropTypes.number,
369 |   minCount: PropTypes.number,
370 |   name: PropTypes.string.isRequired,
371 |   onChanging: PropTypes.func,
372 |   onChange: PropTypes.func,
373 |   onSubmit: PropTypes.func,
374 |   removeButtonText: PropTypes.string,
375 |   style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
376 |   value: PropTypes.arrayOf(PropTypes.any),
377 | };
378 | 
379 | FormList.defaultProps = {
380 |   addButtonText: "+",
381 |   addItemRowStyle: {},
382 |   buttonClassName: null,
383 |   buttonStyle: {},
384 |   className: null,
385 |   errors: undefined,
386 |   itemAreaClassName: null,
387 |   itemAreaStyle: {},
388 |   itemClassName: null,
389 |   itemStyle: {},
390 |   itemRemoveAreaClassName: null,
391 |   itemRemoveAreaStyle: {},
392 |   minCount: 0,
393 |   maxCount: undefined,
394 |   onChanging() {},
395 |   onChange() {},
396 |   onSubmit() {},
397 |   removeButtonText: "–",
398 |   style: {},
399 |   value: undefined,
400 | };
401 | 
402 | export default FormList;
403 | 


--------------------------------------------------------------------------------
/lib/__snapshots__/FormList.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`snapshot Form child - fixed count 1`] = `
  4 | <div
  5 |   className={null}
  6 |   style={
  7 |     Object {
  8 |       "borderColor": "#cccccc",
  9 |       "borderRadius": 3,
 10 |       "borderStyle": "solid",
 11 |       "borderWidth": 1,
 12 |       "padding": "1rem",
 13 |     }
 14 |   }
 15 | >
 16 |   <div
 17 |     className={null}
 18 |     style={
 19 |       Object {
 20 |         "borderBottomStyle": "solid",
 21 |         "borderColor": "#cccccc",
 22 |         "borderLeftStyle": "none",
 23 |         "borderRightStyle": "none",
 24 |         "borderTopStyle": "none",
 25 |         "borderWidth": 1,
 26 |         "display": "flex",
 27 |         "flexDirection": "row",
 28 |         "marginBottom": "1rem",
 29 |         "paddingBottom": "1rem",
 30 |       }
 31 |     }
 32 |   >
 33 |     <div
 34 |       className={null}
 35 |       style={
 36 |         Object {
 37 |           "flexGrow": 1,
 38 |         }
 39 |       }
 40 |     >
 41 |       <div
 42 |         className={null}
 43 |         style={Object {}}
 44 |       >
 45 |         <input
 46 |           name="foo.bar"
 47 |           onBlur={[Function]}
 48 |           onChange={[Function]}
 49 |           onKeyPress={[Function]}
 50 |           readOnly={false}
 51 |           style={Object {}}
 52 |           type="text"
 53 |           value="VALUE"
 54 |         />
 55 |       </div>
 56 |     </div>
 57 |   </div>
 58 |   <div
 59 |     className={null}
 60 |     style={
 61 |       Object {
 62 |         "display": "flex",
 63 |         "flexDirection": "row",
 64 |       }
 65 |     }
 66 |   >
 67 |     <div
 68 |       className={null}
 69 |       style={
 70 |         Object {
 71 |           "flexGrow": 1,
 72 |         }
 73 |       }
 74 |     >
 75 |       <div
 76 |         className={null}
 77 |         style={Object {}}
 78 |       >
 79 |         <input
 80 |           name="foo.bar"
 81 |           onBlur={[Function]}
 82 |           onChange={[Function]}
 83 |           onKeyPress={[Function]}
 84 |           readOnly={false}
 85 |           style={Object {}}
 86 |           type="text"
 87 |           value="VALUE2"
 88 |         />
 89 |       </div>
 90 |     </div>
 91 |   </div>
 92 | </div>
 93 | `;
 94 | 
 95 | exports[`snapshot Form child 1`] = `
 96 | <div
 97 |   className={null}
 98 |   style={
 99 |     Object {
100 |       "borderColor": "#cccccc",
101 |       "borderRadius": 3,
102 |       "borderStyle": "solid",
103 |       "borderWidth": 1,
104 |       "padding": "1rem",
105 |     }
106 |   }
107 | >
108 |   <div
109 |     className={null}
110 |     style={
111 |       Object {
112 |         "borderBottomStyle": "solid",
113 |         "borderColor": "#cccccc",
114 |         "borderLeftStyle": "none",
115 |         "borderRightStyle": "none",
116 |         "borderTopStyle": "none",
117 |         "borderWidth": 1,
118 |         "display": "flex",
119 |         "flexDirection": "row",
120 |         "marginBottom": "1rem",
121 |         "paddingBottom": "1rem",
122 |       }
123 |     }
124 |   >
125 |     <div
126 |       className={null}
127 |       style={
128 |         Object {
129 |           "paddingRight": "1.5rem",
130 |         }
131 |       }
132 |     >
133 |       <button
134 |         className={null}
135 |         onClick={[Function]}
136 |         style={
137 |           Object {
138 |             "height": "3.5rem",
139 |             "paddingBottom": 0,
140 |             "paddingLeft": 0,
141 |             "paddingRight": 0,
142 |             "paddingTop": 0,
143 |             "verticalAlign": "-webkit-baseline-middle",
144 |             "width": "3.5rem",
145 |           }
146 |         }
147 |         type="button"
148 |       >
149 |         –
150 |       </button>
151 |     </div>
152 |     <div
153 |       className={null}
154 |       style={
155 |         Object {
156 |           "flexGrow": 1,
157 |         }
158 |       }
159 |     >
160 |       <div
161 |         className={null}
162 |         style={Object {}}
163 |       >
164 |         <input
165 |           name="foo.bar"
166 |           onBlur={[Function]}
167 |           onChange={[Function]}
168 |           onKeyPress={[Function]}
169 |           readOnly={false}
170 |           style={Object {}}
171 |           type="text"
172 |           value="VALUE"
173 |         />
174 |       </div>
175 |     </div>
176 |   </div>
177 |   <div
178 |     className={null}
179 |     style={
180 |       Object {
181 |         "display": "flex",
182 |         "flexDirection": "row",
183 |       }
184 |     }
185 |   >
186 |     <div
187 |       className={null}
188 |       style={
189 |         Object {
190 |           "paddingRight": "1.5rem",
191 |         }
192 |       }
193 |     >
194 |       <button
195 |         className={null}
196 |         onClick={[Function]}
197 |         style={
198 |           Object {
199 |             "height": "3.5rem",
200 |             "paddingBottom": 0,
201 |             "paddingLeft": 0,
202 |             "paddingRight": 0,
203 |             "paddingTop": 0,
204 |             "verticalAlign": "-webkit-baseline-middle",
205 |             "width": "3.5rem",
206 |           }
207 |         }
208 |         type="button"
209 |       >
210 |         –
211 |       </button>
212 |     </div>
213 |     <div
214 |       className={null}
215 |       style={
216 |         Object {
217 |           "flexGrow": 1,
218 |         }
219 |       }
220 |     >
221 |       <div
222 |         className={null}
223 |         style={Object {}}
224 |       >
225 |         <input
226 |           name="foo.bar"
227 |           onBlur={[Function]}
228 |           onChange={[Function]}
229 |           onKeyPress={[Function]}
230 |           readOnly={false}
231 |           style={Object {}}
232 |           type="text"
233 |           value="VALUE2"
234 |         />
235 |       </div>
236 |     </div>
237 |   </div>
238 |   <div
239 |     className={null}
240 |     style={
241 |       Object {
242 |         "borderBottomStyle": "none",
243 |         "borderColor": "#cccccc",
244 |         "borderLeftStyle": "none",
245 |         "borderRightStyle": "none",
246 |         "borderTopStyle": "solid",
247 |         "borderWidth": 1,
248 |         "marginTop": "1rem",
249 |         "paddingTop": "1rem",
250 |       }
251 |     }
252 |   >
253 |     <button
254 |       className={null}
255 |       onClick={[Function]}
256 |       style={
257 |         Object {
258 |           "height": "3.5rem",
259 |           "paddingBottom": 0,
260 |           "paddingLeft": 0,
261 |           "paddingRight": 0,
262 |           "paddingTop": 0,
263 |           "verticalAlign": "-webkit-baseline-middle",
264 |           "width": "3.5rem",
265 |         }
266 |       }
267 |       type="button"
268 |     >
269 |       +
270 |     </button>
271 |   </div>
272 | </div>
273 | `;
274 | 
275 | exports[`snapshot Input child - fixed count 1`] = `
276 | <div
277 |   className={null}
278 |   style={
279 |     Object {
280 |       "borderColor": "#cccccc",
281 |       "borderRadius": 3,
282 |       "borderStyle": "solid",
283 |       "borderWidth": 1,
284 |       "padding": "1rem",
285 |     }
286 |   }
287 | >
288 |   <div
289 |     className={null}
290 |     style={
291 |       Object {
292 |         "borderBottomStyle": "solid",
293 |         "borderColor": "#cccccc",
294 |         "borderLeftStyle": "none",
295 |         "borderRightStyle": "none",
296 |         "borderTopStyle": "none",
297 |         "borderWidth": 1,
298 |         "display": "flex",
299 |         "flexDirection": "row",
300 |         "marginBottom": "1rem",
301 |         "paddingBottom": "1rem",
302 |       }
303 |     }
304 |   >
305 |     <div
306 |       className={null}
307 |       style={
308 |         Object {
309 |           "flexGrow": 1,
310 |         }
311 |       }
312 |     >
313 |       <input
314 |         name="list[0]"
315 |         onBlur={[Function]}
316 |         onChange={[Function]}
317 |         onKeyPress={[Function]}
318 |         readOnly={false}
319 |         style={Object {}}
320 |         type="text"
321 |         value="VALUE"
322 |       />
323 |     </div>
324 |   </div>
325 |   <div
326 |     className={null}
327 |     style={
328 |       Object {
329 |         "display": "flex",
330 |         "flexDirection": "row",
331 |       }
332 |     }
333 |   >
334 |     <div
335 |       className={null}
336 |       style={
337 |         Object {
338 |           "flexGrow": 1,
339 |         }
340 |       }
341 |     >
342 |       <input
343 |         name="list[1]"
344 |         onBlur={[Function]}
345 |         onChange={[Function]}
346 |         onKeyPress={[Function]}
347 |         readOnly={false}
348 |         style={Object {}}
349 |         type="text"
350 |         value="VALUE 2"
351 |       />
352 |     </div>
353 |   </div>
354 | </div>
355 | `;
356 | 
357 | exports[`snapshot Input child 1`] = `
358 | <div
359 |   className={null}
360 |   style={
361 |     Object {
362 |       "borderColor": "#cccccc",
363 |       "borderRadius": 3,
364 |       "borderStyle": "solid",
365 |       "borderWidth": 1,
366 |       "padding": "1rem",
367 |     }
368 |   }
369 | >
370 |   <div
371 |     className={null}
372 |     style={
373 |       Object {
374 |         "borderBottomStyle": "solid",
375 |         "borderColor": "#cccccc",
376 |         "borderLeftStyle": "none",
377 |         "borderRightStyle": "none",
378 |         "borderTopStyle": "none",
379 |         "borderWidth": 1,
380 |         "display": "flex",
381 |         "flexDirection": "row",
382 |         "marginBottom": "1rem",
383 |         "paddingBottom": "1rem",
384 |       }
385 |     }
386 |   >
387 |     <div
388 |       className={null}
389 |       style={
390 |         Object {
391 |           "paddingRight": "1.5rem",
392 |         }
393 |       }
394 |     >
395 |       <button
396 |         className={null}
397 |         onClick={[Function]}
398 |         style={
399 |           Object {
400 |             "height": "3.5rem",
401 |             "paddingBottom": 0,
402 |             "paddingLeft": 0,
403 |             "paddingRight": 0,
404 |             "paddingTop": 0,
405 |             "verticalAlign": "-webkit-baseline-middle",
406 |             "width": "3.5rem",
407 |           }
408 |         }
409 |         type="button"
410 |       >
411 |         –
412 |       </button>
413 |     </div>
414 |     <div
415 |       className={null}
416 |       style={
417 |         Object {
418 |           "flexGrow": 1,
419 |         }
420 |       }
421 |     >
422 |       <input
423 |         name="list[0]"
424 |         onBlur={[Function]}
425 |         onChange={[Function]}
426 |         onKeyPress={[Function]}
427 |         readOnly={false}
428 |         style={Object {}}
429 |         type="text"
430 |         value="VALUE"
431 |       />
432 |     </div>
433 |   </div>
434 |   <div
435 |     className={null}
436 |     style={
437 |       Object {
438 |         "display": "flex",
439 |         "flexDirection": "row",
440 |       }
441 |     }
442 |   >
443 |     <div
444 |       className={null}
445 |       style={
446 |         Object {
447 |           "paddingRight": "1.5rem",
448 |         }
449 |       }
450 |     >
451 |       <button
452 |         className={null}
453 |         onClick={[Function]}
454 |         style={
455 |           Object {
456 |             "height": "3.5rem",
457 |             "paddingBottom": 0,
458 |             "paddingLeft": 0,
459 |             "paddingRight": 0,
460 |             "paddingTop": 0,
461 |             "verticalAlign": "-webkit-baseline-middle",
462 |             "width": "3.5rem",
463 |           }
464 |         }
465 |         type="button"
466 |       >
467 |         –
468 |       </button>
469 |     </div>
470 |     <div
471 |       className={null}
472 |       style={
473 |         Object {
474 |           "flexGrow": 1,
475 |         }
476 |       }
477 |     >
478 |       <input
479 |         name="list[1]"
480 |         onBlur={[Function]}
481 |         onChange={[Function]}
482 |         onKeyPress={[Function]}
483 |         readOnly={false}
484 |         style={Object {}}
485 |         type="text"
486 |         value="VALUE 2"
487 |       />
488 |     </div>
489 |   </div>
490 |   <div
491 |     className={null}
492 |     style={
493 |       Object {
494 |         "borderBottomStyle": "none",
495 |         "borderColor": "#cccccc",
496 |         "borderLeftStyle": "none",
497 |         "borderRightStyle": "none",
498 |         "borderTopStyle": "solid",
499 |         "borderWidth": 1,
500 |         "marginTop": "1rem",
501 |         "paddingTop": "1rem",
502 |       }
503 |     }
504 |   >
505 |     <button
506 |       className={null}
507 |       onClick={[Function]}
508 |       style={
509 |         Object {
510 |           "height": "3.5rem",
511 |           "paddingBottom": 0,
512 |           "paddingLeft": 0,
513 |           "paddingRight": 0,
514 |           "paddingTop": 0,
515 |           "verticalAlign": "-webkit-baseline-middle",
516 |           "width": "3.5rem",
517 |         }
518 |       }
519 |       type="button"
520 |     >
521 |       +
522 |     </button>
523 |   </div>
524 | </div>
525 | `;
526 | 


--------------------------------------------------------------------------------
/lib/Form.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import PropTypes from "prop-types";
  3 | import isEqual from "lodash/isEqual";
  4 | import get from "lodash/get";
  5 | import set from "lodash/set";
  6 | import unset from "lodash/unset";
  7 | import clone from "clone";
  8 | 
  9 | import bracketsToDots from "./shared/bracketsToDots";
 10 | import customPropTypes from "./shared/propTypes";
 11 | import filterErrorsForNames from "./shared/filterErrorsForNames";
 12 | import recursivelyCloneElements from "./shared/recursivelyCloneElements";
 13 | 
 14 | // To ensure we do not mutate objects passed in, we'll do a deep clone.
 15 | function cloneValue(value) {
 16 |   return value ? clone(value) : {};
 17 | }
 18 | 
 19 | class Form extends Component {
 20 |   static isForm = true;
 21 | 
 22 |   constructor(props) {
 23 |     super(props);
 24 | 
 25 |     this.state = {
 26 |       errors: [],
 27 |       hasBeenValidated: false,
 28 |       value: cloneValue(props.value),
 29 |     };
 30 | 
 31 |     this.elementRefs = [];
 32 |   }
 33 | 
 34 |   componentDidMount() {
 35 |     this._isMounted = true;
 36 |   }
 37 | 
 38 |   // eslint-disable-next-line camelcase
 39 |   UNSAFE_componentWillReceiveProps(nextProps) {
 40 |     const { hasBeenValidated, value } = this.props;
 41 |     const {
 42 |       hasBeenValidated: hasBeenValidatedNext,
 43 |       value: nextValue,
 44 |     } = nextProps;
 45 | 
 46 |     // Whenever a changed value prop comes in, we reset state to that, thus becoming clean.
 47 |     if (!isEqual(value, nextValue)) {
 48 |       this.setState({ errors: [], value: cloneValue(nextValue) });
 49 |     }
 50 | 
 51 |     // Let props override the `hasBeenValidated` state
 52 |     if (
 53 |       typeof hasBeenValidatedNext === "boolean" &&
 54 |       hasBeenValidatedNext !== hasBeenValidated
 55 |     ) {
 56 |       this.setState({ hasBeenValidated: hasBeenValidatedNext });
 57 |     }
 58 |   }
 59 | 
 60 |   componentWillUnmount() {
 61 |     this._isMounted = false;
 62 |   }
 63 | 
 64 |   getFieldOnSubmitHandler(fieldHandler) {
 65 |     return () => {
 66 |       if (fieldHandler) fieldHandler();
 67 |       this.submit();
 68 |     };
 69 |   }
 70 | 
 71 |   getFieldOnChangeHandler(fieldName, fieldHandler) {
 72 |     return (value) => {
 73 |       if (fieldHandler) fieldHandler(value);
 74 | 
 75 |       const { validateOn, revalidateOn } = this.props;
 76 |       const { errors, hasBeenValidated } = this.state;
 77 | 
 78 |       this.doSet(this.state.value, fieldName, value);
 79 | 
 80 |       if (
 81 |         validateOn === "changed" ||
 82 |         validateOn === "changing" ||
 83 |         (hasBeenValidated &&
 84 |           (revalidateOn === "changed" || revalidateOn === "changing"))
 85 |       ) {
 86 |         this.validate().then((updatedErrors) => {
 87 |           if (!this._isMounted) return null;
 88 |           this.props.onChange(this.state.value, updatedErrors.length === 0);
 89 |         });
 90 |       } else {
 91 |         this.props.onChange(this.state.value, errors.length === 0);
 92 |       }
 93 |     };
 94 |   }
 95 | 
 96 |   getFieldOnChangingHandler(fieldName, fieldHandler) {
 97 |     return (value) => {
 98 |       if (fieldHandler) fieldHandler(value);
 99 | 
100 |       const { validateOn, revalidateOn } = this.props;
101 |       const { errors, hasBeenValidated } = this.state;
102 | 
103 |       this.doSet(this.state.value, fieldName, value);
104 | 
105 |       if (
106 |         validateOn === "changing" ||
107 |         (hasBeenValidated && revalidateOn === "changing")
108 |       ) {
109 |         this.validate().then((updatedErrors) => {
110 |           if (!this._isMounted) return null;
111 |           this.props.onChanging(this.state.value, updatedErrors.length === 0);
112 |         });
113 |       } else {
114 |         this.props.onChanging(this.state.value, errors.length === 0);
115 |       }
116 |     };
117 |   }
118 | 
119 |   getValue() {
120 |     return this.state.value;
121 |   }
122 | 
123 |   getErrors(fieldPaths, { includeDescendantErrors = false } = {}) {
124 |     const { errors } = this.props;
125 | 
126 |     if (!Array.isArray(fieldPaths)) {
127 |       throw new Error(
128 |         "First argument to getErrors must be an array of field paths"
129 |       );
130 |     }
131 | 
132 |     return filterErrorsForNames(errors, fieldPaths, !includeDescendantErrors);
133 |   }
134 | 
135 |   getFirstError(fieldPaths, options) {
136 |     const fieldErrors = this.getErrors(fieldPaths, options);
137 |     if (fieldErrors.length === 0) return null;
138 |     return fieldErrors[0];
139 |   }
140 | 
141 |   getFirstErrorMessage(fieldPaths, options) {
142 |     const fieldError = this.getFirstError(fieldPaths, options);
143 |     return (fieldError && fieldError.message) || null;
144 |   }
145 | 
146 |   resetValue() {
147 |     this.setState(
148 |       {
149 |         errors: [],
150 |         hasBeenValidated: false,
151 |         value: cloneValue(this.props.value),
152 |       },
153 |       () => {
154 |         this.elementRefs.forEach((element) => {
155 |           if (element && typeof element.resetValue === "function")
156 |             element.resetValue();
157 |         });
158 |       }
159 |     );
160 |   }
161 | 
162 |   doSet(obj, path, value, callback) {
163 |     // Since we clone the object whenever we set state from props, we can directly
164 |     // set the prop rather than copying the whole object.
165 |     if (value === undefined) {
166 |       unset(obj, path);
167 |     } else {
168 |       set(obj, path, value);
169 |     }
170 |     this.setState({ value: obj }, callback);
171 |   }
172 | 
173 |   // Form is dirty if value prop doesn't match value state. Whenever a changed
174 |   // value prop comes in, we reset state to that, thus becoming clean.
175 |   isDirty() {
176 |     return !isEqual(this.state.value, this.props.value);
177 |   }
178 | 
179 |   hasErrors(fieldPaths, options) {
180 |     return this.getErrors(fieldPaths, options).length > 0;
181 |   }
182 | 
183 |   /**
184 |    * @return {Promise<Object[]>} A Promise that resolves with an array of errors. If the
185 |    *   array is empty, there were no errors and submission was successful.
186 |    */
187 |   submit() {
188 |     const { logErrorsOnSubmit, onSubmit, shouldSubmitWhenInvalid } = this.props;
189 |     const { value } = this.state;
190 |     return this.validate()
191 |       .then((errors) => {
192 |         if (logErrorsOnSubmit && errors.length > 0) console.error(errors);
193 | 
194 |         if (!this._isMounted) return errors;
195 |         if (errors.length && !shouldSubmitWhenInvalid) return errors;
196 | 
197 |         return Promise.resolve()
198 |           .then(() => {
199 |             // onSubmit should ideally return a Promise so that we can wait
200 |             // for submission to complete, but we won't worry about it if it doesn't
201 |             return onSubmit(value, errors.length === 0);
202 |           })
203 |           .then(({ ok = true, errors: submissionErrors = [] } = {}) => {
204 |             // Submission result must be an object with `ok` bool prop
205 |             // and optional submission errors
206 |             if (!Array.isArray(submissionErrors)) {
207 |               throw new Error(
208 |                 "onSubmit returned an errors value that is not an array"
209 |               );
210 |             }
211 | 
212 |             if (this._isMounted) {
213 |               if (ok) {
214 |                 this.resetValue();
215 |               } else {
216 |                 this.setState({ errors: submissionErrors });
217 |               }
218 |             }
219 | 
220 |             return submissionErrors;
221 |           })
222 |           .catch((error) => {
223 |             if (error) console.error('Form "onSubmit" function error:', error);
224 |           });
225 |       })
226 |       .catch((error) => {
227 |         if (error) console.error('Form "validate" function error:', error);
228 |       });
229 |   }
230 | 
231 |   validate() {
232 |     const { validator } = this.props;
233 |     const { value } = this.state;
234 | 
235 |     if (typeof validator !== "function") return Promise.resolve([]);
236 | 
237 |     return validator(value).then((errors) => {
238 |       if (!Array.isArray(errors)) {
239 |         console.error(
240 |           "validator function must return a Promise that resolves with an array"
241 |         );
242 |         return [];
243 |       }
244 | 
245 |       if (this._isMounted) {
246 |         this.setState({ errors, hasBeenValidated: true });
247 |       }
248 | 
249 |       return errors;
250 |     });
251 |   }
252 | 
253 |   renderFormFields() {
254 |     let { value } = this.state;
255 |     if (!value) value = {};
256 | 
257 |     const {
258 |       children,
259 |       inputOptions: { nullValue, propNames },
260 |     } = this.props;
261 | 
262 |     let { errors: propErrors } = this.props;
263 |     const { errors: stateErrors, hasBeenValidated } = this.state;
264 |     if (!Array.isArray(propErrors)) propErrors = [];
265 |     const errors = propErrors.concat(stateErrors);
266 | 
267 |     this.elementRefs = [];
268 | 
269 |     const propsFunc = (element) => {
270 |       const newProps = {};
271 | 
272 |       if (element.type.isFormField) {
273 |         const name = element.props[propNames.name];
274 |         if (!name) return {};
275 | 
276 |         if (element.props.errors === undefined) {
277 |           newProps.errors = filterErrorsForNames(errors, [name], false);
278 |         }
279 |       } else if (element.type.isFormErrors) {
280 |         const { names } = element.props;
281 |         if (!names) return {};
282 |         if (element.props[propNames.errors] === undefined) {
283 |           newProps[propNames.errors] = filterErrorsForNames(
284 |             errors,
285 |             names,
286 |             true
287 |           );
288 |         }
289 |       } else if (
290 |         element.type.isFormInput ||
291 |         element.type.isForm ||
292 |         element.type.isFormList
293 |       ) {
294 |         const name = element.props[propNames.name];
295 |         if (!name) return {};
296 | 
297 |         newProps[propNames.onChange] = this.getFieldOnChangeHandler(
298 |           name,
299 |           element.props[propNames.onChange]
300 |         );
301 |         newProps[propNames.onChanging] = this.getFieldOnChangingHandler(
302 |           name,
303 |           element.props[propNames.onChanging]
304 |         );
305 |         newProps[propNames.onSubmit] = this.getFieldOnSubmitHandler(
306 |           element.props[propNames.onSubmit]
307 |         );
308 | 
309 |         if (element.props[propNames.value] === undefined) {
310 |           // Some input components (MUI) do not accept a `null` value.
311 |           // For these, passing `{ nullValue: "" }` options does the trick.
312 |           let inputValue = get(value, name);
313 |           if (inputValue === null && nullValue !== undefined)
314 |             inputValue = nullValue;
315 |           newProps[propNames.value] = inputValue;
316 |         }
317 | 
318 |         if (element.props[propNames.errors] === undefined) {
319 |           newProps[propNames.errors] = filterErrorsForNames(
320 |             errors,
321 |             [name],
322 |             false
323 |           );
324 | 
325 |           // Adjust the error names to correct scope
326 |           if (element.type.isForm) {
327 |             const canonicalName = bracketsToDots(name);
328 |             newProps[propNames.errors] = newProps[propNames.errors].map(
329 |               (err) => {
330 |                 return {
331 |                   ...err,
332 |                   name: bracketsToDots(err.name).slice(
333 |                     canonicalName.length + 1
334 |                   ),
335 |                 };
336 |               }
337 |             );
338 |           }
339 |         }
340 | 
341 |         newProps[propNames.hasBeenValidated] = hasBeenValidated;
342 | 
343 |         if (element.type.isFormInput) {
344 |           if (typeof element.props[propNames.isReadOnly] === "function") {
345 |             newProps[propNames.isReadOnly] = element.props.isReadOnly(value);
346 |           }
347 |         }
348 | 
349 |         newProps.ref = (el) => {
350 |           this.elementRefs.push(el);
351 |         };
352 |       }
353 | 
354 |       return newProps;
355 |     };
356 |     return recursivelyCloneElements(children, propsFunc, (element) => {
357 |       // Leave children of nested forms alone because they're handled by that form
358 |       // Leave children of lists alone because the FormList component deals with duplicating them
359 |       return element.type.isForm || element.type.isFormList;
360 |     });
361 |   }
362 | 
363 |   render() {
364 |     const { className, style } = this.props;
365 | 
366 |     return (
367 |       <div className={className} style={style}>
368 |         {this.renderFormFields()}
369 |       </div>
370 |     );
371 |   }
372 | }
373 | 
374 | Form.propTypes = {
375 |   children: PropTypes.node.isRequired,
376 |   className: PropTypes.string,
377 |   errors: customPropTypes.errors,
378 |   hasBeenValidated: PropTypes.bool,
379 |   inputOptions: PropTypes.shape({
380 |     // eslint-disable-next-line react/forbid-prop-types
381 |     nullValue: PropTypes.any,
382 |     propNames: PropTypes.shape({
383 |       errors: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
384 |       hasBeenValidated: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
385 |       isReadOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
386 |       name: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
387 |       onChange: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
388 |       onChanging: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
389 |       onSubmit: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
390 |       value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
391 |     }),
392 |   }),
393 |   logErrorsOnSubmit: PropTypes.bool,
394 |   // Top-level forms and those under FormList do not need a name
395 |   name: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
396 |   onChange: PropTypes.func,
397 |   onChanging: PropTypes.func,
398 |   onSubmit: PropTypes.func,
399 |   revalidateOn: PropTypes.oneOf(["changing", "changed", "submit"]),
400 |   style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
401 |   shouldSubmitWhenInvalid: PropTypes.bool,
402 |   validateOn: PropTypes.oneOf(["changing", "changed", "submit"]),
403 |   validator: PropTypes.func,
404 |   value: PropTypes.object, // eslint-disable-line react/forbid-prop-types
405 | };
406 | 
407 | Form.defaultProps = {
408 |   className: null,
409 |   errors: undefined,
410 |   hasBeenValidated: false,
411 |   inputOptions: {
412 |     nullValue: undefined,
413 |     propNames: {
414 |       errors: "errors",
415 |       hasBeenValidated: "hasBeenValidated",
416 |       isReadOnly: "isReadOnly",
417 |       name: "name",
418 |       onChange: "onChange",
419 |       onChanging: "onChanging",
420 |       onSubmit: "onSubmit",
421 |       value: "value",
422 |     },
423 |   },
424 |   logErrorsOnSubmit: false,
425 |   name: null,
426 |   onChange() {},
427 |   onChanging() {},
428 |   onSubmit() {},
429 |   revalidateOn: "changing",
430 |   style: {},
431 |   shouldSubmitWhenInvalid: false,
432 |   validateOn: "submit",
433 |   validator: undefined,
434 |   value: undefined,
435 | };
436 | 
437 | export default Form;
438 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # reacto-form
  2 | 
  3 | This package is a very lightweight implementation of a form handler that works with React input based on the [Composable Form Specification](https://composableforms.netlify.app/user/). ReactoForm works best with inputs that fully implement this specification, but it can be adjusted to work with most React form input components that are at least similar to the specification.
  4 | 
  5 | This package exports the following things that help you quickly combine, validate, and submit form data collected by React input components:
  6 | 
  7 | - `useReactoForm` React hook (preferred)
  8 | - `Form` React component (in case you're stuck with a class component)
  9 | 
 10 | Additionally, it exports a `FormList` React component that is an example of building a dynamic array from form inputs.
 11 | 
 12 | Another package, [reacto-form-inputs](https://github.com/longshotlabs/reacto-form-inputs), provides examples of various types of inputs that conform to the spec. In general they are robust, tested, and production ready, but you may want to copy and modify them to style them to your needs. Alternatively, ReactoForm can be made to work with many popular React UI frameworks, and this is most likely what you want to do with this package.
 13 | 
 14 | ## Installation
 15 | 
 16 | ```bash
 17 | npm i reacto-form
 18 | ```
 19 | 
 20 | ## Importing
 21 | 
 22 | ### Recommended
 23 | 
 24 | Import CommonJS from `reacto-form/cjs/<ComponentName>`. Example, assuming you have Babel configured to convert all `import` to `require`:
 25 | 
 26 | ```js
 27 | import Form from "reacto-form/cjs/Form";
 28 | import FormList from "reacto-form/cjs/FormList";
 29 | import useReactoForm from "reacto-form/cjs/useReactoForm";
 30 | ```
 31 | 
 32 | Import ECMAScript module from `reacto-form/esm/<ComponentName>`. Example:
 33 | 
 34 | ```js
 35 | import Form from "reacto-form/esm/Form";
 36 | import FormList from "reacto-form/esm/FormList";
 37 | import useReactoForm from "reacto-form/esm/useReactoForm";
 38 | ```
 39 | 
 40 | ### Alternative
 41 | 
 42 | You can also use named imports from the package entry point, but this may result in a larger bundle size versus importing directly from the component path.
 43 | 
 44 | ```js
 45 | import { Form, FormList, useReactoForm } from "reacto-form";
 46 | ```
 47 | 
 48 | ## Example
 49 | 
 50 | See https://github.com/longshotlabs/reacto-form-inputs#example
 51 | 
 52 | ## Demo App
 53 | 
 54 | ```bash
 55 | cd demo-app
 56 | npm start
 57 | ```
 58 | 
 59 | ## useReactoForm Hook
 60 | 
 61 | _Available since v1.2.0_
 62 | 
 63 | The newest and best way to use ReactoForm is with the aptly named `useReactoForm` React hook. Unless your form is in a class component, where React hooks don't work, you should always use this hook. For class components, use the `Form` component described below.
 64 | 
 65 | In a nutshell, you call the hook in your component function, passing options, and then use the returned functions to inject the proper form logic into all of your input components as standard props.
 66 | 
 67 | Here's the simplest possible example, using [SimpleSchema](https://github.com/aldeed/simple-schema-js) to create the validator function. You could choose to write your own validation function or use any validation package you like, with a small wrapper to adjust the errors structure if necessary.
 68 | 
 69 | ```js
 70 | import React from "react";
 71 | import Button from "@material-ui/core/Button";
 72 | import { ErrorsBlock, Field, Input } from "reacto-form-inputs";
 73 | import useReactoForm from "reacto-form/esm/useReactoForm";
 74 | import SimpleSchema from "simpl-schema";
 75 | 
 76 | const formSchema = new SimpleSchema({
 77 |   firstName: {
 78 |     type: String,
 79 |     min: 4,
 80 |   },
 81 |   lastName: {
 82 |     type: String,
 83 |     min: 2,
 84 |   },
 85 | });
 86 | 
 87 | const validator = formSchema.getFormValidator();
 88 | 
 89 | export default function ReactoFormHookExample() {
 90 |   // Here we call the hook function. None of the options are required, but in general
 91 |   // you would always want a `validator` function and an `onSubmit` function.
 92 |   const { getErrors, getInputProps, submitForm } = useReactoForm({
 93 |     onChange: (formData) => {
 94 |       console.log("onChangeForm", formData);
 95 |     },
 96 |     onChanging: (formData) => {
 97 |       console.log("onChangingForm", formData);
 98 |     },
 99 |     onSubmit: (formData) => {
100 |       console.log("onSubmitForm", formData);
101 |     },
102 |     validator,
103 |     // value - optionally pass an object representing the current form data, if it's an update form or has default values
104 |   });
105 | 
106 |   return (
107 |     /* Note that we need not wrap our fields in <form>, or really in anything */
108 |     <div>
109 |       /* We can use `getErrors` to get all of the errors related to one or more
110 |       fields, based on the field path */
111 |       <Field
112 |         name="firstName"
113 |         errors={getErrors(["firstName"])}
114 |         label="First name"
115 |       >
116 |         /* We can use `getInputProps` to get all props for a single field path
117 |         */
118 |         <Input {...getInputProps("firstName")} />
119 |         <ErrorsBlock errors={getErrors(["firstName"])} />
120 |       </Field>
121 |       <Field name="lastName" errors={getErrors(["lastName"])} label="Last name">
122 |         <Input {...getInputProps("lastName")} />
123 |         <ErrorsBlock errors={getErrors(["lastName"])} />
124 |       </Field>
125 |       /* The submit action must call the `submitForm` function that `useReactoForm`
126 |       returned */
127 |       <Button onClick={submitForm}>Submit</Button>
128 |     </div>
129 |   );
130 | }
131 | ```
132 | 
133 | Here's a full list of what you can pass to `useReactoForm`:
134 | 
135 | - `hasBeenValidated`: Pass a boolean to override the internal tracking of whether the `validator` function has been called since the form was created or reset.
136 | - `isReadOnly`. Pass a boolean or a function that accepts the current form data object as its only argument and returns a boolean. If `true`, all inputs controlled by the form will be in read-only mode (disabled). ReactoForm also automatically makes all of the inputs read only while the form is being submitted.
137 | - `logErrorsOnSubmit`: Pass `true` to log all errors in the console when `submitForm` is called, if there are any errors. This can be helpful during initial development and when debugging in case you have forgotten to show any errors in the UI.
138 | - `onChange`: This function will be called with the new form data object whenever any input changes
139 | - `onChanging`: This function will be called with the new form data object whenever any input is in the process of changing (for example, while a slider is moving but not yet released, while a finger is moving but not yet lifted, while a user is typing but hasn't yet tabbed to the next field).
140 | - `onSubmit`: This function will be called with the form data object when you call `submitForm`, if the form is valid or `shouldSubmitWhenInvalid` is `true`.
141 | - `revalidateOn`: Set this to "changing", "changed", or "submit". The default is "changing". This determines how often `validator` will be called (thus reactively updating `errors`) when `hasBeenValidated` is `true`. When `hasBeenValidated` is `false`, then the `validateOn` setting is used.
142 |   - Note that these are additive; "changing" causes validation before `onChanging` is called, before `onChange` is called, AND before `onSubmit` is called; "changed" causes validation before `onChange` is called AND before `onSubmit` is called; "submit" causes validation only before `onSubmit` is called.
143 |   - If you don't need validation, simply don't pass a `validator` function.
144 | - `shouldSubmitWhenInvalid`: Normally `onSubmit` will not be called if `validator` returns any errors. To override this and call `onSubmit` anyway, set this option to `true`. The second argument passed to `onSubmit` will be an `isValid` boolean.
145 | - `validateOn`: Set this to "changing", "changed", or "submit". The default is "submit". This determines how often `validator` will be called (thus reactively updating `errors`) when `hasBeenValidated` is `false`. When `hasBeenValidated` is `true`, then the `revalidateOn` setting is used.
146 |   - Note that these are additive; "changing" causes validation before `onChanging` is called, before `onChange` is called, AND before `onSubmit` is called; "changed" causes validation before `onChange` is called AND before `onSubmit` is called; "submit" causes validation only before `onSubmit` is called.
147 |   - If you don't need validation, simply don't pass a `validator` function.
148 | - `validator`: This is the validation function. Use any validation library you want as long as you return an errors array with [this structure](https://composableforms.netlify.app/spec/errors/#errors), or a Promise that resolves with such an array.
149 | - `value`: The current form data. Pass this for an update form or to provide default values for some of the inputs.
150 | 
151 | Here's a full list of what you can get from the object returned by `useReactoForm`:
152 | 
153 | - `getInputProps`: A function that returns a props object that conforms to the [Composable Form Input Specification](https://composableforms.netlify.app/user/input/). Pass a unique field path string as the first argument. For example, `getInputProps("email")` will return input props that result in the form data object `{ email: "" }` while `getInputProps("address.city")` will return input props that result in the form data object `{ address: { city: "" } }`. If you are using a compliant input component, simply pass the returned props to that input and everything will be wired up for you. If you are using a non-compliant input component, you may still be able to make it work. See the Material UI example below.
154 | - `formData`: The current form data object. This initially matches the `value` you provide but changes as the user fills out the form. If you call `resetValue`, this will once again match the `value` you provide.
155 | - `getErrors`: A function that returns an errors array like this: https://composableforms.netlify.app/spec/errors/#errors. The signature is `(fieldPaths, { includeDescendantErrors = false } = {})`. `fieldPaths` is an array of object paths. `includeDescendantErrors` would for example include an error for `"address.city"` when `fieldPaths` is `["address"]`.
156 | - `getFirstError`: A function similar to `getErrors` but returns only the first error matching any field path, or `null` if there are none. The signature is `(fieldPaths, { includeDescendantErrors = false } = {})`.
157 | - `getFirstErrorMessage`: A function similar to `getFirstError` but returns only the first error message string matching any field path, or `null` if there are none. The signature is `(fieldPaths, { includeDescendantErrors = false } = {})`.
158 | - `hasBeenValidated`: Boolean indicating whether `validator` has been called since the form was created or since `resetValue` was last called.
159 | - `hasErrors`: A function similar to `getErrors` but returns only `true` if there are any errors or `false` if not. The signature is `(fieldPaths, { includeDescendantErrors = false } = {})`.
160 | - `isDirty`: This will be `true` if the form data state has changed from the initial form `value` (i.e. if the user has changed any inputs).
161 | - `resetValue`: Call this function to reset `formData` to `value`, thus causing `isDirty` to be `false`.
162 | - `submitForm`: Call this function to validate and submit all inputs (i.e., to call `validator` followed by `onSubmit`).
163 | 
164 | ### useReactoForm Hook with non-compliant inputs (Material UI example)
165 | 
166 | Material UI is a great framework, but unfortunately the React input components do not currently match the [Composable Form Input Specification](https://composableforms.netlify.app/user/input/) in several ways. For example, the [TextField](https://material-ui.com/api/text-field/) has the following differences:
167 | 
168 | - It complains when you pass `null` as `value`, and it considers the input to be "uncontrolled" when you pass `undefined` as `value`. Instead, it expects an empty string.
169 | - `onChange` is called while changing, `onBlur` is called after the change, and `onChanging` is never called and causes a console warning.
170 | - `isReadOnly` prop is named `disabled`
171 | 
172 | Fortunately, the `useReactoForm` `getInputProps` function takes some options which allow us to change the names of the returned props, omit returned props, and convert `null` value to some other value:
173 | 
174 | ```js
175 | getInputProps("email", {
176 |   nullValue: "",
177 |   onChangeGetValue: (event) => event.target.value,
178 |   onChangingGetValue: (event) => event.target.value,
179 |   propNames: {
180 |     errors: false,
181 |     hasBeenValidated: false,
182 |     isReadOnly: "disabled",
183 |     onChange: "onBlur",
184 |     onChanging: "onChange",
185 |     onSubmit: false,
186 |   },
187 | });
188 | ```
189 | 
190 | To simplify this further, this package exports these options as `muiOptions`:
191 | 
192 | ```js
193 | import muiOptions from "reacto-form/esm/muiOptions";
194 | 
195 | getInputProps("email", muiOptions);
196 | ```
197 | 
198 | Similarly, you can import `muiCheckboxOptions` for an MUI `Checkbox` component:
199 | 
200 | ```js
201 | import muiOptions from "reacto-form/esm/muiCheckboxOptions";
202 | 
203 | getInputProps("isMarried", muiCheckboxOptions);
204 | ```
205 | 
206 | Here's a full example:
207 | 
208 | ```js
209 | import React from "react";
210 | import Button from "@material-ui/core/Button";
211 | import Checkbox from "@material-ui/core/Checkbox";
212 | import FormControlLabel from "@material-ui/core/FormControlLabel";
213 | import FormGroup from "@material-ui/core/FormGroup";
214 | import TextField from "@material-ui/core/TextField";
215 | import muiCheckboxOptions from "reacto-form/esm/muiCheckboxOptions";
216 | import muiOptions from "reacto-form/esm/muiOptions";
217 | import useReactoForm from "reacto-form/esm/useReactoForm";
218 | import SimpleSchema from "simpl-schema";
219 | 
220 | const formSchema = new SimpleSchema({
221 |   firstName: {
222 |     type: String,
223 |     min: 4,
224 |   },
225 |   lastName: {
226 |     type: String,
227 |     min: 2,
228 |   },
229 |   isMarried: {
230 |     type: Boolean,
231 |     optional: true,
232 |   },
233 | });
234 | 
235 | const onSubmit = (formData) => {
236 |   console.log("onSubmitForm", formData);
237 | };
238 | const validator = formSchema.getFormValidator();
239 | 
240 | export default function ReactoFormHookExampleMUI() {
241 |   const {
242 |     getFirstErrorMessage,
243 |     getInputProps,
244 |     hasErrors,
245 |     submitForm,
246 |   } = useReactoForm({
247 |     onSubmit,
248 |     validator,
249 |   });
250 | 
251 |   return (
252 |     <div>
253 |       <TextField
254 |         label="First name"
255 |         error={hasErrors(["firstName"])}
256 |         fullWidth
257 |         helperText={getFirstErrorMessage(["firstName"])}
258 |         {...getInputProps("firstName", muiOptions)}
259 |       />
260 |       <TextField
261 |         label="Last name"
262 |         error={hasErrors(["lastName"])}
263 |         fullWidth
264 |         helperText={getFirstErrorMessage(["lastName"])}
265 |         {...getInputProps("lastName", muiOptions)}
266 |       />
267 |       <FormGroup row>
268 |         <FormControlLabel
269 |           control={<Checkbox color="primary" />}
270 |           label="Are you married?"
271 |           {...getInputProps("isMarried", muiCheckboxOptions)}
272 |         />
273 |       </FormGroup>
274 |       <Button onClick={submitForm}>Submit</Button>
275 |     </div>
276 |   );
277 | }
278 | ```
279 | 
280 | ## Form Component
281 | 
282 | Implements the [Form spec](spec/form.md).
283 | 
284 | In addition to following the spec, these props are supported:
285 | 
286 | - Use `style` or `className` props to help style the HTML form container, which is a DIV rather than a FORM.
287 | - Set `logErrorsOnSubmit` to `true` to log validation errors to the console when submitting. This can help you figure out why your form isn't submitting if, for example, you forgot to include an ErrorsBlock somewhere so there is an error not shown to the user.
288 | 
289 | [Usage](https://composableforms.netlify.app/user/form/)
290 | 
291 | ### Using Form with non-compliant inputs (Material UI example)
292 | 
293 | _Works in 1.3.0+_
294 | 
295 | Material UI is a great framework, but unfortunately the React input components do not currently match the [Composable Form Input Specification](https://composableforms.netlify.app/user/input/) in several ways. For example, the [TextField](https://material-ui.com/api/text-field/) has the following differences:
296 | 
297 | - It complains when you pass `null` as `value`, and it considers the input to be "uncontrolled" when you pass `undefined` as `value`. Instead, it expects an empty string.
298 | - `onChange` is called while changing, `onBlur` is called after the change, and `onChanging` is never called and causes a console warning.
299 | - `isReadOnly` prop is named `readOnly`
300 | 
301 | Fortunately, the `Form` component takes some options in the `inputOptions` props which allow us to change the names of the returned props, omit returned props, and convert `null` value to some other value:
302 | 
303 | ```js
304 | const inputOptions = {
305 |   nullValue: "",
306 |   propNames: {
307 |     errors: false,
308 |     hasBeenValidated: false,
309 |     isReadOnly: "readOnly",
310 |     onChange: "onBlur",
311 |     onChanging: "onChange",
312 |     onSubmit: false,
313 |   },
314 | };
315 | 
316 | <Form inputOptions={inputOptions}>/* MUI inputs */</Form>;
317 | ```
318 | 
319 | To simplify this further, this package exports these options as `muiOptions`:
320 | 
321 | ```js
322 | import muiOptions from "reacto-form/esm/muiOptions";
323 | 
324 | <Form inputOptions={muiOptions}>/* MUI inputs */</Form>;
325 | ```
326 | 
327 | Here's a full example:
328 | 
329 | ```js
330 | import React, { useRef } from "react";
331 | import Button from "@material-ui/core/Button";
332 | import TextField from "@material-ui/core/TextField";
333 | import Form from "reacto-form/esm/Form";
334 | import muiOptions from "reacto-form/esm/muiOptions";
335 | import SimpleSchema from "simpl-schema";
336 | 
337 | const formSchema = new SimpleSchema({
338 |   firstName: {
339 |     type: String,
340 |     min: 4,
341 |   },
342 |   lastName: {
343 |     type: String,
344 |     min: 2,
345 |   },
346 | });
347 | 
348 | const onSubmit = (formData) => {
349 |   console.log("onSubmitForm", formData);
350 | };
351 | const validator = formSchema.getFormValidator();
352 | 
353 | export default function ReactoFormExampleMUI() {
354 |   const formRef = useRef(null);
355 | 
356 |   return (
357 |     <div>
358 |       <Form
359 |         inputOptions={muiOptions}
360 |         onSubmit={onSubmit}
361 |         ref={formRef}
362 |         validator={validator}
363 |       >
364 |         <TextField
365 |           error={formRef.current && formRef.current.hasErrors(["firstName"])}
366 |           fullWidth
367 |           helperText={
368 |             formRef.current &&
369 |             formRef.current.getFirstErrorMessage(["firstName"])
370 |           }
371 |           label="First name"
372 |           name="firstName"
373 |         />
374 |         <TextField
375 |           error={formRef.current && formRef.current.hasErrors(["lastName"])}
376 |           fullWidth
377 |           helperText={
378 |             formRef.current &&
379 |             formRef.current.getFirstErrorMessage(["lastName"])
380 |           }
381 |           label="Last name"
382 |           name="lastName"
383 |         />
384 |         <Button onClick={() => formRef.current && formRef.current.submit()}>
385 |           Submit
386 |         </Button>
387 |       </Form>
388 |     </div>
389 |   );
390 | }
391 | ```
392 | 
393 | ## FormList Component
394 | 
395 | Implements the [FormList spec](spec/list.md).
396 | 
397 | This implementation appears as a list with the item template on the right and remove buttons on the left, plus a final row with an add button in it.
398 | 
399 | In addition to following the spec, you can use the following props to help style the component:
400 | 
401 | - addButtonText: String to use as the text of the add button. Default "+"
402 | - addItemRowStyle: Style object for the row after the last item, where the add button is
403 | - buttonClassName: String of space-delimited classes to use on the add and remove buttons
404 | - buttonStyle: Style object for the add and remove buttons
405 | - className: String of space-delimited classes to use on the list container
406 | - itemAreaClassName: String of space-delimited classes to use on the inner container of each item
407 | - itemAreaStyle: Style object for the inner container of each item
408 | - itemClassName: String of space-delimited classes to use on the outer container of each item
409 | - itemStyle: Style object for the outer container of each item
410 | - itemRemoveAreaClassName: String of space-delimited classes to use on the remove button area of each item
411 | - itemRemoveAreaStyle: Style object for the remove button area of each item
412 | - removeButtonText: String to use as the text of the remove buttons. Default "–"
413 | - style: Style object for the list container
414 | 
415 | If you want a different add/remove experience that can't be achieved with classes or styles, then you'll need to make your own implementation of FormList.
416 | 
417 | [Usage](https://composableforms.netlify.app/user/list/)
418 | 


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