From e480fc4377cf2dfec27d5599c0d263541801121d Mon Sep 17 00:00:00 2001 From: Stan Zhang Date: Mon, 7 Aug 2017 15:10:34 -0700 Subject: [PATCH 1/3] Add more documentation about when `onValidChange` is called --- README.md | 37 ++++++++++++++++++++++++++++++++++--- package.json | 9 +++++++-- 2 files changed, 41 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 6070a2b..1c3c65c 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,13 @@ Components for providing validation via React context. +# Motivation + +There are several scenarios where a parent component's validation depends on whether or not its descendant elements validate. By +using the [React `context` api][react-docs-context], manual crawling of the React render tree can be avoided. Instead, a handler +function in the context can be called to update the parent's state whenever the descendant updates. This simplifies the +implementation of validation in the parent component. + # Install This package is available on `npm`. Install it using: @@ -10,7 +17,6 @@ This package is available on `npm`. Install it using: npm install react-validation-context --save ``` - # Usage This library revolves around the idea of "validity". A component can have one of the following validities: @@ -29,6 +35,10 @@ change handlers. In general, a validity change handler has the following API: - `@param {Validity} isValid` - The current validity of the component. - `@param {Validity} wasValid` - The previous validity of the component. +The `name` identifier is also key to this library. It allows a collection of descendants to be validated by a parent component. +Essentially, this library provides a way of tracking the validities of these various names. Note that this is **not** the same as +tracking the validities of the components themselves, since a component's name may change as well! + ## `Validates` The `Validates` component is used to wrap a component that can be validated, providing the logic for validation change handlers. @@ -40,9 +50,30 @@ The `Validates` component is used to wrap a component that can be validated, pro - `{Function} onValidChange` - Validity change handler. - `{ReactElement} children` - Children. The component only accepts a single child, and will simply render as that child. +#### When is the `onValidChange` handler called? + +The function passed as the `onValidChange` prop will be called when: +- The component mounts and the `validates` prop is not `undefined` +- The component unmounts and the `validates` prop is not `undefined` +- The component's `validates` prop changes + +During these cases, the `onValidChange` handler is called with: +- The component's `name` prop +- The component's validity +- The component's previous validity + +However, if the component's `name` changes and the `validates` prop is not `undefined`, then the `onValidChange` handler will +first be called with: +- The previous `name` prop +- `undefined`, to indicate that the previous `name` no longer has validation defined +- The component's previous validity, if applicable + +Then, if the `validates` prop has changed, the `onValidChange` handler is called **a second time**. + ### Context -If `onValidChange` is present in `Validate`'s context, it will call that context handler appropriately. +If `onValidChange` is present in `Validate`'s context, it will call that context handler whenever the `onValidChange` handler in +the props would be called, as described above. ### Example usage @@ -83,7 +114,7 @@ export default class RequiredInput extends React.Component { {children} {validates ? null : 'This input is required'} - + ; } } diff --git a/package.json b/package.json index ee6bff8..c6bbf57 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,13 @@ "test" ], "nyc": { - "require": ["babel-register"], - "reporter": ["text", "html"] + "require": [ + "babel-register" + ], + "reporter": [ + "text", + "html" + ] }, "scripts": { "build": "babel *.js -d lib", From c903b3f0e37cf80b6cf3872301421ca15f3c9b6a Mon Sep 17 00:00:00 2001 From: Stan Zhang Date: Tue, 8 Aug 2017 16:58:16 -0700 Subject: [PATCH 2/3] Update and streamline demo --- demo/.babelrc | 15 ++++- demo/.eslintrc.json | 22 +------ demo/README.md | 7 +- demo/build.js | 104 +++++++++++++----------------- demo/package.json | 74 ++++++++++----------- demo/src/.eslintrc.json | 4 ++ demo/src/app.js | 27 ++++---- demo/src/app.less | 1 + demo/src/form.js | 68 +++++++++++-------- demo/src/index.js | 30 +++++++-- demo/src/input.js | 57 +++++++++------- demo/webpack.config.base.js | 91 ++++++++++++++------------ demo/webpack.config.js | 26 ++++++-- demo/webpack.config.live.js | 18 ++++++ demo/webpack.config.production.js | 57 ---------------- 15 files changed, 294 insertions(+), 307 deletions(-) create mode 100644 demo/src/.eslintrc.json create mode 100644 demo/webpack.config.live.js delete mode 100644 demo/webpack.config.production.js diff --git a/demo/.babelrc b/demo/.babelrc index 0939263..686781c 100644 --- a/demo/.babelrc +++ b/demo/.babelrc @@ -1,5 +1,16 @@ { - "presets": ["react", "es2015"], - "plugins": ["transform-object-rest-spread"] + "presets": [ + ["env", { + "targets": { + "browsers": ["defaults"] + }, + "modules": false + }], + "react" + ], + "plugins": [ + "react-hot-loader/babel", + "transform-object-rest-spread" + ] } diff --git a/demo/.eslintrc.json b/demo/.eslintrc.json index dd690ce..25d2a60 100644 --- a/demo/.eslintrc.json +++ b/demo/.eslintrc.json @@ -1,24 +1,4 @@ { - "extends": ["eslint:recommended", "plugin:react/recommended"], - "parser": "babel-eslint", - "parserOptions": { - "ecmaVersion": 6, - "sourceType": "module", - "ecmaFeatures": { - "impliedStrict": true, - "jsx": true - } - }, - "env": { - "browser": true, - "es6": true - }, - "globals": { - "require": true, - "module": true - }, - "plugins": [ - "react" - ] + "extends": ["godaddy"] } diff --git a/demo/README.md b/demo/README.md index db766e6..0769b6c 100644 --- a/demo/README.md +++ b/demo/README.md @@ -8,15 +8,10 @@ Demo for react-validation-context. Install the dependencies: `npm install` -If you want to simultaneously work on `react-validation-context`, [you can use `npm link`][npm-docs-link]. - The following build scripts are available. You can run them using `npm run