├── .babelrc ├── .coveralls.yml ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── playground ├── app │ ├── App.js │ ├── conf │ │ ├── embedded.js │ │ ├── index.js │ │ ├── issue.59.js │ │ └── simpleSum.js │ └── index.js ├── index.html └── index.prod.html ├── src ├── actions │ ├── index.js │ ├── remove.js │ ├── require.js │ ├── uiAppend.js │ ├── uiOverride.js │ ├── uiReplace.js │ └── validateAction.js ├── applyRules.js ├── index.js ├── rulesRunner.js └── utils.js ├── test ├── .eslintrc ├── actions │ ├── remove.fromArray.test.js │ ├── remove.nested.test.js │ ├── remove.test.js │ ├── require.nested.test.js │ ├── require.test.js │ ├── uiAppend.test.js │ ├── uiAppend │ │ ├── nested │ │ │ ├── rules.json │ │ │ ├── schema.json │ │ │ └── uiSchema.json │ │ └── uiAppend.nested.test.js │ ├── uiOverride.test.js │ ├── uiReplace.test.js │ ├── validateAction.nested.test.js │ ├── validateAction.test.js │ ├── validateField.test.js │ └── validation.test.js ├── applyRules.render.test.js ├── applyRules.test.js ├── applyRules.validation.test.js ├── calculatedField.test.js ├── issues │ ├── 34.test.js │ ├── 35.test.js │ ├── 38.test.js │ ├── 43.test.js │ ├── 44.test.js │ ├── 46.test.js │ ├── 47.test.js │ ├── 53.test.js │ ├── 59.test.js │ └── 61.test.js ├── rulesRuneer.test.js ├── runRules.normRules.test.js ├── utils.findRelUiSchema.test.js ├── utils.js └── utils.test.js ├── webpack.config.dist.js ├── webpack.config.js ├── webpack.config.prod.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "env"], 3 | "plugins": [ 4 | "transform-object-rest-spread", 5 | "transform-class-properties" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.coveralls.yml: -------------------------------------------------------------------------------- 1 | repo_token: apkhWgDS9UbAI8V6ibKL9JmZEsgBzU6nC -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | indent_style = space 2 | indent_size = 2 3 | charset = utf-8 4 | insert_final_newline = true -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "rules": { 4 | "react/jsx-uses-react": 2, 5 | "react/jsx-uses-vars": 2, 6 | "react/react-in-jsx-scope": 2, 7 | "react/jsx-tag-spacing": 0, 8 | "curly": [2], 9 | "linebreak-style": [2, "unix"], 10 | "semi": [2, "always"], 11 | "comma-dangle": [0], 12 | "no-unused-vars": [2, { 13 | "vars": "all", 14 | "args": "none", 15 | "ignoreRestSiblings": true 16 | }], 17 | "no-console": [0], 18 | "object-curly-spacing": [2, "always"], 19 | "keyword-spacing": ["error"], 20 | "jest/no-disabled-tests": "warn", 21 | "jest/no-focused-tests": "error", 22 | "jest/no-identical-title": "error", 23 | "jest/valid-expect": "error" 24 | }, 25 | "env": { 26 | "es6": true, 27 | "browser": true, 28 | "node": true, 29 | "jest/globals": true 30 | }, 31 | "extends": "eslint:recommended", 32 | "parserOptions": { 33 | "ecmaVersion": 6, 34 | "sourceType": "module", 35 | "ecmaFeatures": { 36 | "jsx": true 37 | } 38 | }, 39 | "plugins": [ 40 | "react", 41 | "jest" 42 | ] 43 | } 44 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | coverage 2 | npm-debug.log 3 | node_modules 4 | build 5 | dist 6 | lib 7 | 8 | 9 | # Numerous always-ignore extensions 10 | *.diff 11 | *.err 12 | *.orig 13 | *.log 14 | *.rej 15 | *.swo 16 | *.swp 17 | *.vi 18 | *~ 19 | *.sass-cache 20 | 21 | # OS or Editor folders 22 | .DS_Store 23 | .cache 24 | .project 25 | .settings 26 | .tmproj 27 | nbproject 28 | Thumbs.db 29 | 30 | # NPM packages folder. 31 | node_modules/ 32 | 33 | # Brunch output folder. 34 | public/ 35 | .idea/ 36 | json-schema-playing.iml 37 | 38 | *.iml 39 | 40 | *.tgz 41 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: 3 | - node_js 4 | node_js: 5 | - "8" 6 | env: 7 | - ACTION="run lint" 8 | - ACTION="run cs-check" 9 | - ACTION="run dist" 10 | - ACTION="test && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js" 11 | script: 12 | - npm $ACTION 13 | - npm test && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/RxNT/react-jsonschema-form-conditionals.svg?branch=master)](https://travis-ci.org/RxNT/react-jsonschema-form-conditionals) 2 | [![Coverage Status](https://coveralls.io/repos/github/RxNT/react-jsonschema-form-conditionals/badge.svg?branch=master)](https://coveralls.io/github/RxNT/react-jsonschema-form-conditionals?branch=master) 3 | [![npm version](https://badge.fury.io/js/react-jsonschema-form-conditionals.svg)](https://badge.fury.io/js/react-jsonschema-form-conditionals) 4 | # Form with conditionals 5 | 6 | This project extends [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) with 7 | conditional logic, which allow to have more complicated logic expressed and controlled with JSON schema. 8 | This is primarily useful for complicated schemas with extended business logic, 9 | which are suspect to changes and need to be manageable and changeable without modifying running application. 10 | 11 | If you need simple rule logic, that does not change a lot, you can use original [mozilla project](https://github.com/mozilla-services/react-jsonschema-form), 12 | by following examples like https://jsfiddle.net/69z2wepo/68259/ 13 | 14 | The project is done to be fully compatible with mozilla, 15 | without imposing additional limitations. 16 | 17 | ## Features 18 | 19 | - Support for [Json Rules Engine](https://github.com/CacheControl/json-rules-engine) and [json-rules-engine-simplified](https://github.com/RxNT/json-rules-engine-simplified) 20 | - Extensible action mechanism 21 | - Configuration over coding 22 | - Lightweight and extensible 23 | 24 | ## Installation 25 | 26 | Install `react-jsonschema-form-conditionals` by running: 27 | 28 | ```bash 29 | npm install --s react-jsonschema-form-conditionals 30 | ``` 31 | 32 | ## Usage 33 | 34 | The simplest example of using `react-jsonschema-form-conditionals` 35 | 36 | ```jsx 37 | import applyRules from 'react-jsonschema-form-conditionals'; 38 | import Engine from 'json-rules-engine-simplified'; 39 | import Form from "react-jsonschema-form"; 40 | 41 | ... 42 | 43 | const rules = [{ 44 | ... 45 | }]; 46 | 47 | let FormWithConditionals = applyRules(schema, uiSchema, rules, Engine)(Form); 48 | 49 | ReactDOM.render( 50 | , 51 | document.querySelector('#app') 52 | ); 53 | ``` 54 | 55 | To show case uses for this library we'll be using simple registration schema example 56 | 57 | ```jsx 58 | 59 | import applyRules from 'react-jsonschema-form-conditionals'; 60 | import Form from "react-jsonschema-form"; 61 | 62 | let schema = { 63 | definitions: { 64 | hobby: { 65 | type: "object", 66 | properties: { 67 | name: { type: "string" }, 68 | durationInMonth: { "type": "integer" }, 69 | } 70 | } 71 | }, 72 | title: "A registration form", 73 | description: "A simple form example.", 74 | type: "object", 75 | required: [ 76 | "firstName", 77 | "lastName" 78 | ], 79 | properties: { 80 | firstName: { 81 | type: "string", 82 | title: "First name" 83 | }, 84 | lastName: { 85 | type: "string", 86 | title: "Last name" 87 | }, 88 | age: { 89 | type: "integer", 90 | title: "Age", 91 | }, 92 | bio: { 93 | type: "string", 94 | title: "Bio", 95 | }, 96 | country: { 97 | type: "string", 98 | title: "Country" 99 | }, 100 | state: { 101 | type: "string", 102 | title: "State" 103 | }, 104 | zip: { 105 | type: "string", 106 | title: "ZIP" 107 | }, 108 | password: { 109 | type: "string", 110 | title: "Password", 111 | minLength: 3 112 | }, 113 | telephone: { 114 | type: "string", 115 | title: "Telephone", 116 | minLength: 10 117 | }, 118 | hobbies: { 119 | type: "array", 120 | items: { "$ref": "#/definitions/hobby" } 121 | } 122 | } 123 | } 124 | 125 | let rules = [{ 126 | ... 127 | }] 128 | 129 | let FormWithConditionals = applyRules(schema, uiSchema, rules, Engine)(Form); 130 | 131 | render(( 132 | 133 | ), document.getElementById("app")); 134 | ``` 135 | 136 | Conditionals functionality is build using 2 things 137 | - Rules engine ([Json Rules Engine](https://github.com/CacheControl/json-rules-engine) or [Simplified Json Rules Engine](https://github.com/RxNT/json-rules-engine-simplified)) 138 | - Schema action mechanism 139 | 140 | Rules engine responsibility is to trigger events, action mechanism 141 | performs needed actions on the requests. 142 | 143 | ## Rules engine 144 | 145 | Project supports 2 rules engines out of the box: 146 | - [Json Rules Engine](https://github.com/CacheControl/json-rules-engine) 147 | - [Simplified Json Rules Engine](https://github.com/RxNT/json-rules-engine-simplified) 148 | 149 | In order to use either of those, you need to specify `Engine` in `applyRules` configuration. 150 | 151 | For example: 152 | 153 | To use [Simplified Json Rules Engine](https://github.com/RxNT/json-rules-engine-simplified), you can do following: 154 | ```js 155 | 156 | import applyRules from 'react-jsonschema-form-conditionals'; 157 | import Form from "react-jsonschema-form"; 158 | 159 | import Engine from 'json-rules-engine-simplified'; 160 | 161 | ... 162 | 163 | let FormWithConditionals = applyRules(schema, uiSchema, rules, Engine)(Form); 164 | 165 | ReactDOM.render( 166 | , 167 | document.querySelector('#app') 168 | ); 169 | ``` 170 | 171 | To use [Json Rules Engine](https://github.com/RxNT/json-rules-engine-simplified), is almost the same: 172 | 173 | ```js 174 | 175 | import applyRules from 'react-jsonschema-form-conditionals'; 176 | import Engine from 'json-rules-engine'; 177 | import Form from "react-jsonschema-form"; 178 | 179 | // ... 180 | 181 | let FormWithConditionals = applyRules(schema, uiSchema, rules, Engine)(Form); 182 | 183 | ReactDOM.render( 184 | , 185 | document.querySelector('#app') 186 | ); 187 | ``` 188 | 189 | ### Extending rules engine 190 | 191 | If non of the provided engines satisfies, your needs, you can 192 | implement your own `Engine` which should 193 | comply to following: 194 | 195 | ```js 196 | class Engine { 197 | constructor(rules, schema) { 198 | } 199 | addRule = (rule) => { 200 | } 201 | run = (formData) => { 202 | return Promise[Event] 203 | } 204 | } 205 | ``` 206 | 207 | Original `rules` and `schema` is used as a parameter for a factory call, 208 | in order to be able to have additional functionality, such as rules to schema compliance validation, 209 | like it's done in Simplified Json Rules Engine](https://github.com/RxNT/json-rules-engine-simplified) 210 | 211 | ## Schema action mechanism 212 | 213 | Rules engine emits events, which are expected to have a `type` and `params` field, 214 | `type` is used to distinguish action that is needed, `params` are used as input for that action: 215 | 216 | ```json 217 | { 218 | "type": "remove", 219 | "params": { 220 | "field": "name" 221 | } 222 | } 223 | ``` 224 | 225 | By default action mechanism defines a supported set of rules, which you can extend as needed: 226 | 227 | - `remove` removes a field or set of fields from `schema` and `uiSchema` 228 | - `require` makes a field or set of fields required 229 | 230 | ### Remove action 231 | 232 | If you want to remove a field, your configuration should look like this: 233 | 234 | ```json 235 | { 236 | "conditions": { }, 237 | "event": { 238 | "type": "remove", 239 | "params": { 240 | "field": "password" 241 | } 242 | } 243 | } 244 | ``` 245 | When `condition` is met, `password` will be removed from both `schema` and `uiSchema`. 246 | 247 | In case you want to remove multiple fields `name`, `password`, rule should look like this: 248 | 249 | ```json 250 | { 251 | "conditions": { }, 252 | "event": { 253 | "type": "remove", 254 | "params": { 255 | "field": [ "name", "password" ] 256 | } 257 | } 258 | } 259 | ``` 260 | 261 | To remove nested schema properties, use json dot notation. e.g. For schema object: 262 | 263 | ```json 264 | { 265 | "type": "object", 266 | "properties": { 267 | "someParentWrapper": { 268 | "type": "object", 269 | "properties": { 270 | "booleanValA": { 271 | "type": "boolean", 272 | "title": "Some boolean input" 273 | }, 274 | "booleanValB": { 275 | "type": "boolean", 276 | "title": "Another boolean input" 277 | } 278 | } 279 | } 280 | } 281 | } 282 | 283 | ``` 284 | 285 | You can remove the nested booleanValA or booleanValB like so: 286 | 287 | ```json 288 | { 289 | "conditions": { }, 290 | "event": { 291 | "type": "remove", 292 | "params": { 293 | "field": "someParentWrapper.booleanValA" 294 | } 295 | } 296 | } 297 | ``` 298 | 299 | ### Require action 300 | 301 | The same convention goes for `require` action 302 | 303 | For a single field: 304 | 305 | ```json 306 | { 307 | "conditions": { }, 308 | "event": { 309 | "type": "require", 310 | "params": { 311 | "field": "password" 312 | } 313 | } 314 | } 315 | ``` 316 | 317 | For multiple fields: 318 | 319 | ```json 320 | { 321 | "conditions": { }, 322 | "event": { 323 | "type": "require", 324 | "params": { 325 | "field": [ "name", "password"] 326 | } 327 | } 328 | } 329 | ``` 330 | 331 | ## UiSchema actions 332 | 333 | API defines a set of actions, that you can take on `uiSchema`, they cover most of the 334 | 335 | - `uiAppend` appends `uiSchema` specified in params with an original `uiSchema` 336 | - `uiOverride` replaces field in original `uiSchema` with fields in `params`, keeping unrelated entries 337 | - `uiRepalce` replaces whole `uiSchema` with a conf schema 338 | 339 | To show case, let's take a simple `schema` 340 | 341 | ```json 342 | { 343 | "properties": { 344 | "lastName": { "type": "string" }, 345 | "firstName": { "type": "string" }, 346 | "nickName": { "type": "string"} 347 | } 348 | } 349 | ``` 350 | 351 | and `uiSchema` 352 | 353 | ```json 354 | { 355 | "ui:order": ["firstName"], 356 | "lastName": { 357 | "classNames": "col-md-1", 358 | }, 359 | "firstName": { 360 | "ui:disabled": false, 361 | "num": 23 362 | }, 363 | "nickName": { 364 | "classNames": "col-md-12" 365 | } 366 | } 367 | ``` 368 | with event `params` something like this 369 | ```json 370 | { 371 | "ui:order": [ "lastName" ], 372 | "lastName": { 373 | "classNames": "has-error" 374 | }, 375 | "firstName" : { 376 | "classNames": "col-md-6", 377 | "ui:disabled": true, 378 | "num": 22 379 | } 380 | } 381 | ``` 382 | 383 | And look at different results depend on the choosen action. 384 | 385 | ### uiAppend 386 | 387 | UiAppend can handle `arrays` and `string`, with fallback to `uiOverride` behavior for all other fields. 388 | 389 | So the expected result `uiSchema` will be: 390 | ```json 391 | { 392 | "ui:order": ["firstName", "lastName"], 393 | "lastName": { 394 | "classNames": "col-md-1 has-error" 395 | }, 396 | "firstName": { 397 | "classNames": "col-md-6", 398 | "ui:disabled": true, 399 | "num": 22 400 | }, 401 | "nickName": { 402 | "classNames": "col-md-12" 403 | } 404 | } 405 | ``` 406 | 407 | In this case it 408 | - added `lastName` to `ui:order` array, 409 | - appended `has-error` to `classNames` in `lastName` field 410 | - added `classNames` and enabled `firstName` 411 | - as for the `num` in `firstName` it just overrode it 412 | 413 | This is useful for example if you want to add some additional markup in your code, without touching layout that you've defined. 414 | 415 | ### uiOverride 416 | 417 | `uiOverride` behaves similar to append, but instead of appending it completely replaces overlapping values 418 | 419 | So the expected result `uiSchema` will be: 420 | ```json 421 | { 422 | "ui:order": [ "lastName" ], 423 | "lastName": { 424 | "classNames": "has-error" 425 | }, 426 | "firstName": { 427 | "classNames": "col-md-6", 428 | "ui:disabled": true, 429 | "num": 22 430 | }, 431 | "nickName": { 432 | "classNames": "col-md-12" 433 | } 434 | } 435 | ``` 436 | 437 | In this case it 438 | - `ui:order` was replaced with configured value 439 | - `className` for the `lastName` was replaced with `has-error` 440 | - added `classNames` and enabled `firstName` 441 | - as for the `num` in `firstName` it just overrode it 442 | 443 | ### uiReplace 444 | 445 | `uiReplace` just replaces all fields in `uiSchema` with `params` fields, leaving unrelated fields untouched. 446 | 447 | So the result `uiSchema` will be 448 | ```json 449 | { 450 | "ui:order": [ "lastName" ], 451 | "lastName": { 452 | "classNames": "has-error" 453 | }, 454 | "firstName" : { 455 | "classNames": "col-md-6", 456 | "ui:disabled": true, 457 | "num": 22 458 | }, 459 | "nickName": { 460 | "classNames": "col-md-12" 461 | } 462 | } 463 | ``` 464 | 465 | ## Extension mechanism 466 | 467 | You can extend existing actions list, by specifying `extraActions` on the form. 468 | 469 | Let's say we need to introduce `replaceClassNames` action, that 470 | would just specify `classNames` `col-md-4` for all fields except for `ignore`d one. 471 | We also want to trigger it only when `password` is `empty`. 472 | 473 | This is how we can do this: 474 | 475 | ```js 476 | import applyRules from 'react-jsonschema-form-conditionals'; 477 | import Engine from 'json-rules-engine-simplified'; 478 | import Form from "react-jsonschema-form"; 479 | 480 | ... 481 | 482 | const rules = [ 483 | { 484 | conditons: { 485 | password: "empty" 486 | }, 487 | event: { 488 | type: "replaceClassNames", 489 | params: { 490 | classNames: "col-md-4", 491 | ignore: [ "password" ] 492 | } 493 | } 494 | } 495 | ]; 496 | 497 | 498 | let extraActions = { 499 | replaceClassNames: function(params, schema, uiSchema, formData) { 500 | Object.keys(schema.properties).forEach((field) => { 501 | if (uiSchema[field] === undefined) { 502 | uiSchema[field] = {} 503 | } 504 | uiSchema[field].classNames = params.classNames; 505 | } 506 | } 507 | }; 508 | 509 | let FormWithConditionals = applyRules(schema, uiSchema, rules, Engine, extraActions)(Form); 510 | 511 | ReactDOM.render( 512 | , 513 | document.querySelector('#app') 514 | ); 515 | ``` 516 | 517 | Provided snippet does just that. 518 | 519 | ### Extension with calculated values 520 | 521 | In case you need to calculate value, based on other field values, you can also do that. 522 | 523 | Let's say we want to have schema with `a`, `b` and `sum` fields 524 | 525 | ```js 526 | import applyRules from 'react-jsonschema-form-conditionals'; 527 | import Engine from 'json-rules-engine-simplified'; 528 | import Form from "react-jsonschema-form"; 529 | 530 | ... 531 | 532 | const rules = [ 533 | { 534 | conditons: { 535 | a: { not: "empty" }, 536 | b: { not: "empty" } 537 | }, 538 | event: { 539 | type: "updateSum" 540 | } 541 | } 542 | ]; 543 | 544 | 545 | let extraActions = { 546 | updateSum: function(params, schema, uiSchema, formData) { 547 | formData.sum = formData.a + formData.b; 548 | } 549 | }; 550 | 551 | let FormWithConditionals = applyRules(schema, uiSchema, rules, Engine, extraActions)(Form); 552 | 553 | ReactDOM.render( 554 | , 555 | document.querySelector('#app') 556 | ); 557 | ``` 558 | 559 | This is how you can do that. 560 | 561 | > WARNING!!! You need to be careful with a rules order, when using calculated values. 562 | > Put calculation rules at the top of your rules specification. 563 | 564 | For example, let's say you want to mark `sum` field, if you have sum `greater` than `10`. The rule would look something like this: 565 | 566 | ```json 567 | { 568 | "conditions": { 569 | "sum": { "greater" : 10 } 570 | }, 571 | "event": { 572 | "type": "appendClass", 573 | "classNames": "has-success" 574 | } 575 | } 576 | ``` 577 | 578 | But it will work only if you put it after `updateSum` rule, like this 579 | ```json 580 | [ 581 | { 582 | "conditons": { 583 | "a": { "not": "empty" }, 584 | "b": { "not": "empty" } 585 | }, 586 | "event": { 587 | "type": "updateSum" 588 | } 589 | }, 590 | { 591 | "conditions": { 592 | "sum": { "greater" : 10 } 593 | }, 594 | "event": { 595 | "type": "appendClass", 596 | "classNames": "has-success" 597 | } 598 | } 599 | ]; 600 | ``` 601 | 602 | Otherwise it will work with **old `sum` values** and therefor show incorrect value. 603 | 604 | ### Rules order 605 | 606 | Originally actions performed in sequence defined in the array. If you have interdependent rules, that you need to run in order 607 | you can specify `order` on a rule, so that it would be executed first. Rules are executed based on order from lowest to highest with 608 | rules without order executed last. 609 | 610 | For example to make updateSum work regardless the order rules were added, you can do following: 611 | ```json 612 | [ 613 | { 614 | "conditions": { 615 | "sum": { "greater" : 10 } 616 | }, 617 | "order": 1, 618 | "event": { 619 | "type": "appendClass", 620 | "classNames": "has-success" 621 | } 622 | }, 623 | { 624 | "conditons": { 625 | "a": { "not": "empty" }, 626 | "b": { "not": "empty" } 627 | }, 628 | "order": 0, 629 | "event": { 630 | "type": "updateSum" 631 | } 632 | } 633 | ] 634 | ``` 635 | Here although `updateSum` comes after `appendClass`, it will be executed first, since it has a lower order. 636 | 637 | ## Action validation mechanism 638 | 639 | All default actions are validated by default, checking that field exists in the schema, to save you some headaches. 640 | There are 2 levels of validation 641 | 642 | - `propTypes` validation, using FB `prop-types` package 643 | - explicit validation 644 | 645 | You can define those validations in your actions as well, to improve actions usability. 646 | 647 | All validation is disabled in production. 648 | 649 | ### Prop types action validation 650 | 651 | This is reuse of familiar `prop-types` validation used with React components, and it's used in the same way: 652 | 653 | In case of `require` it can look like this: 654 | ```js 655 | require.propTypes = { 656 | field: PropTypes.oneOfType([ 657 | PropTypes.string, 658 | PropTypes.arrayOf(PropTypes.string), 659 | ]).isRequired, 660 | }; 661 | ``` 662 | 663 | The rest is magic. 664 | 665 | WARNING, the default behavior of `prop-types` is to send errors to console, 666 | which you need to have running in order to see them. 667 | 668 | For our `replaceClassNames` action, it can look like this: 669 | 670 | ```js 671 | replaceClassNames.propTypes = { 672 | classNames: PropTypes.string.isRequired, 673 | ignore: PropTypes.arrayOf(PropTypes.string) 674 | }; 675 | ``` 676 | 677 | ## Explicit validation 678 | 679 | In order to provide more granular validation, you can specify validate function on 680 | your action, that will receive `params`, `schema` and `uiSchema` so you could provide appropriate validation. 681 | 682 | For example, validation for `require` can be done like this: 683 | 684 | ```js 685 | require.validate = function({ field }, schema, uiSchema) { 686 | if (Array.isArray(field)) { 687 | field 688 | .filter(f => schema && schema.properties && schema.properties[f] === undefined) 689 | .forEach(f => console.error(`Field "${f}" is missing from schema on "require"`)); 690 | } else if ( 691 | schema && 692 | schema.properties && 693 | schema.properties[field] === undefined 694 | ) { 695 | console.error(`Field "${field}" is missing from schema on "require"`); 696 | } 697 | }; 698 | ``` 699 | 700 | Validation is not mandatory, and will be done only if field is provided. 701 | 702 | For our `replaceClassNames` action, it would look similar: 703 | ```js 704 | replaceClassNames.validate = function({ ignore }, schema, uiSchema) { 705 | if (Array.isArray(field)) { 706 | ignore 707 | .filter(f => schema && schema.properties && schema.properties[f] === undefined) 708 | .forEach(f => console.error(`Field "${f}" is missing from schema on "replaceClassNames"`)); 709 | } else if ( 710 | schema && 711 | schema.properties && 712 | schema.properties[ignore] === undefined 713 | ) { 714 | console.error(`Field "${ignore}" is missing from schema on "replaceClassNames"`); 715 | } 716 | }; 717 | ``` 718 | 719 | # Listening to configuration changes 720 | 721 | In order to listen for configuration changes you can specify `onSchemaConfChange`, which will be notified every time `schema` or `uiSchema` changes it's value. 722 | 723 | ```js 724 | let FormWithConditionals = applyRules(schema, uiSchema, rules, Engine, extraActions)(Form); 725 | 726 | ReactDOM.render( 727 | { console.log("configuration changed") }}/>, 728 | document.querySelector('#app') 729 | ); 730 | 731 | ``` 732 | 733 | ## Contribute 734 | 735 | - Issue Tracker: github.com/RxNT/react-jsonschema-form-conditionals/issues 736 | - Source Code: github.com/RxNT/react-jsonschema-form-conditionals 737 | 738 | ## Support 739 | 740 | If you are having issues, please let us know. 741 | 742 | ## License 743 | 744 | The project is licensed under the Apache-2.0 license. 745 | 746 | 747 | ## Migration 748 | 749 | ### Migration to 0.4.x 750 | 751 | The only significant change is signature of `applyRules` call. In 0.4.0 `schema`, `uiSchema`, `rules`, `Engine` and `extraActions` all consider to be constant that is why, they moved to `applyRules` call. 752 | This helps improve performance on large schemas. 753 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-jsonschema-form-conditionals", 3 | "description": "Extension of react-jsonschema-form with conditional field support", 4 | "private": false, 5 | "author": "mavarazy@gmail.com", 6 | "version": "0.3.17", 7 | "scripts": { 8 | "build:lib": "rimraf lib && cross-env NODE_ENV=production babel -d lib/ src/", 9 | "build:dist": "rimraf dist && cross-env NODE_ENV=production webpack --config webpack.config.dist.js --optimize-minimize", 10 | "build:playground": "rimraf build && cross-env NODE_ENV=production webpack --config webpack.config.prod.js --optimize-minimize && cp playground/index.prod.html build/index.html", 11 | "cs-check": "prettier -l $npm_package_prettierOptions '{playground,src,test}/**/*.js'", 12 | "cs-format": "prettier $npm_package_prettierOptions '{playground,src,test}/**/*.js' --write", 13 | "dist": "npm run build:lib && npm run build:dist", 14 | "lint": "eslint --fix src test playground", 15 | "precommit": "lint-staged", 16 | "prepush": "npm test", 17 | "publish-to-gh-pages": "npm run build:playground && gh-pages --dist build/", 18 | "publish-to-npm": "npm run dist && npm publish && npm version patch", 19 | "start": "webpack-dev-server", 20 | "tdd": "jest --watchAll", 21 | "test": "jest" 22 | }, 23 | "jest": { 24 | "verbose": true, 25 | "collectCoverage": true, 26 | "collectCoverageFrom": [ 27 | "src/**/*.{js,jsx}" 28 | ] 29 | }, 30 | "prettierOptions": "--jsx-bracket-same-line --trailing-comma es5 --semi", 31 | "lint-staged": { 32 | "{playground,src,test}/**/*.js": [ 33 | "npm run lint", 34 | "npm run cs-format", 35 | "git add" 36 | ] 37 | }, 38 | "main": "lib/index.js", 39 | "files": [ 40 | "dist", 41 | "lib" 42 | ], 43 | "engineStrict": false, 44 | "engines": { 45 | "node": ">=8" 46 | }, 47 | "peerDependencies": { 48 | "prop-types": "^15.5.10", 49 | "react": "^16.0.0", 50 | "react-jsonschema-form": "^1.0.0" 51 | }, 52 | "dependencies": { 53 | "deepcopy": "^0.6.3", 54 | "selectn": "^1.1.2" 55 | }, 56 | "devDependencies": { 57 | "atob": "^2.0.3", 58 | "babel-cli": "^6.0.0", 59 | "babel-core": "^6.0.0", 60 | "babel-eslint": "^8.0.1", 61 | "babel-jest": "^21.0.2", 62 | "babel-loader": "^7.1.2", 63 | "babel-plugin-transform-class-properties": "^6.24.1", 64 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 65 | "babel-polyfill": "^6.26.0", 66 | "babel-preset-env": "^1.6.0", 67 | "babel-preset-react": "^6.24.1", 68 | "babel-preset-stage-0": "^6.24.1", 69 | "babel-register": "^6.26.0", 70 | "coveralls": "^3.0.0", 71 | "cross-env": "^5.0.5", 72 | "css-loader": "^0.28.7", 73 | "enzyme": "^3.1.0", 74 | "enzyme-adapter-react-16": "^1.0.3", 75 | "eslint": "^4.6.1", 76 | "eslint-plugin-jest": "^21.0.2", 77 | "eslint-plugin-react": "^7.3.0", 78 | "eslint-plugin-standard": "^3.0.1", 79 | "exit-hook": "^1.1.1", 80 | "express": "^4.15.4", 81 | "extract-text-webpack-plugin": "^3.0.0", 82 | "gh-pages": "^1.0.0", 83 | "has-flag": "^2.0.0", 84 | "html": "1.0.0", 85 | "husky": "^0.14.3", 86 | "jest": "^21.0.2", 87 | "jest-cli": "^21.1.0", 88 | "jsdom": "^11.2.0", 89 | "json-rules-engine": "^2.0.2", 90 | "json-rules-engine-simplified": "^0.1.11", 91 | "lint-staged": "^4.1.3", 92 | "prettier": "^1.6.1", 93 | "react": "^16.0.0", 94 | "react-dom": "^16.0.0", 95 | "react-jsonschema-form": "^1.0.0", 96 | "react-test-renderer": "^16.0.0", 97 | "react-transform-catch-errors": "^1.0.2", 98 | "react-transform-hmr": "^1.0.4", 99 | "regenerator-runtime": "^0.11.0", 100 | "rimraf": "^2.6.1", 101 | "sinon": "^4.0.2", 102 | "style-loader": "^0.19.0", 103 | "webpack": "^3.5.6", 104 | "webpack-dev-server": "^2.7.1", 105 | "webpack-hot-middleware": "^2.19.1" 106 | }, 107 | "directories": { 108 | "test": "test" 109 | }, 110 | "repository": { 111 | "type": "git", 112 | "url": "git+https://github.com/RxNT/react-jsonschema-form-conditionals.git" 113 | }, 114 | "keywords": [ 115 | "react", 116 | "form", 117 | "json-schema", 118 | "conditional", 119 | "predicate" 120 | ], 121 | "license": "Apache-2.0", 122 | "homepage": "https://github.com/RxNT/react-jsonschema-form-conditionals#readme" 123 | } 124 | -------------------------------------------------------------------------------- /playground/app/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Form from "react-jsonschema-form"; 3 | import applyRules from "../../src/applyRules"; 4 | import conf from "./conf"; 5 | 6 | let { schema, uiSchema, rules, rulesEngine, extraActions, formData } = conf; 7 | 8 | let FormToDisplay = applyRules( 9 | schema, 10 | uiSchema, 11 | rules, 12 | rulesEngine, 13 | extraActions 14 | )(Form); 15 | 16 | export default function() { 17 | return ; 18 | } 19 | -------------------------------------------------------------------------------- /playground/app/conf/embedded.js: -------------------------------------------------------------------------------- 1 | import Engine from "json-rules-engine-simplified"; 2 | 3 | const conf = { 4 | schema: { 5 | type: "object", 6 | properties: { 7 | general: { 8 | type: "object", 9 | properties: { 10 | firstName: { 11 | type: "string", 12 | title: "First Name", 13 | }, 14 | lastName: { 15 | type: "string", 16 | title: "Last Name", 17 | }, 18 | }, 19 | }, 20 | }, 21 | }, 22 | uiSchema: { 23 | general: { 24 | "ui:order": ["firstName", "lastName"], 25 | }, 26 | }, 27 | formData: { 28 | firstName: "adming", 29 | heightMeasure: "cms", 30 | weight: 117, 31 | weightMeasure: "Kgs", 32 | }, 33 | rules: [ 34 | { 35 | conditions: { 36 | "general.firstName": { is: "admin" }, 37 | }, 38 | event: { 39 | type: "remove", 40 | params: { 41 | field: ["general.firstName"], 42 | }, 43 | }, 44 | }, 45 | ], 46 | rulesEngine: Engine, 47 | }; 48 | 49 | export default conf; 50 | -------------------------------------------------------------------------------- /playground/app/conf/index.js: -------------------------------------------------------------------------------- 1 | import Engine from "json-rules-engine-simplified"; 2 | 3 | const conf = { 4 | schema: { 5 | type: "object", 6 | properties: { 7 | height: { 8 | type: "integer", 9 | title: "Height", 10 | }, 11 | heightMeasure: { 12 | type: "string", 13 | title: "Height Measure", 14 | enum: ["In", "ft", "cms"], 15 | }, 16 | weight: { 17 | type: "number", 18 | title: "Weight", 19 | }, 20 | weightMeasure: { 21 | type: "string", 22 | title: "Weight Measure", 23 | enum: ["Lbs", "Kgs"], 24 | }, 25 | bmi: { 26 | type: "number", 27 | title: "BMI", 28 | }, 29 | oxygen: { 30 | type: "number", 31 | title: "Oxygen", 32 | }, 33 | }, 34 | }, 35 | uiSchema: { 36 | height: { 37 | classNames: "col-md-9", 38 | "ui:autofocus": true, 39 | }, 40 | heightMeasure: { 41 | classNames: "col-md-3", 42 | }, 43 | weight: { 44 | classNames: "col-md-9", 45 | }, 46 | weightMeasure: { 47 | classNames: "col-md-3", 48 | }, 49 | bmi: { 50 | classNames: "col-md-9", 51 | "ui:disabled": true, 52 | }, 53 | oxygen: { 54 | classNames: "col-md-9", 55 | }, 56 | }, 57 | rules: [ 58 | { 59 | conditions: { 60 | height: { greater: 0 }, 61 | }, 62 | event: { 63 | type: "remove", 64 | params: { field: ["bmi", "heightMeasure"] }, 65 | }, 66 | }, 67 | { 68 | conditions: { 69 | height: { greater: 0 }, 70 | heightMeasure: { not: "empty" }, 71 | weight: { greater: 0 }, 72 | weightMeasure: { not: "empty" }, 73 | }, 74 | event: { 75 | type: "calculateBMI", 76 | params: { field: "bmi" }, 77 | }, 78 | }, 79 | { 80 | conditions: { 81 | bmi: { greater: 25 }, 82 | }, 83 | event: { 84 | type: "uiAppend", 85 | params: { 86 | bmi: { 87 | classNames: "has-error", 88 | "ui:disabled": false, 89 | }, 90 | }, 91 | }, 92 | }, 93 | { 94 | conditions: { 95 | bmi: { 96 | greater: 18.5, 97 | lessEq: 25, 98 | }, 99 | }, 100 | event: { 101 | type: "uiAppend", 102 | params: { 103 | bmi: { 104 | classNames: "has-success", 105 | }, 106 | }, 107 | }, 108 | }, 109 | { 110 | conditions: { 111 | bmi: { 112 | lessEq: 18.5, 113 | }, 114 | }, 115 | event: { 116 | type: "uiAppend", 117 | params: { 118 | bmi: { 119 | classNames: "has-warning", 120 | }, 121 | }, 122 | }, 123 | }, 124 | { 125 | conditions: { bmi: { lessEq: 15 } }, 126 | event: { 127 | type: "uiOverride", 128 | params: { bmi: { "ui:help": "Very severely underweight" } }, 129 | }, 130 | }, 131 | { 132 | conditions: { bmi: { greater: 15, lessEq: 16 } }, 133 | event: { 134 | type: "uiOverride", 135 | params: { bmi: { "ui:help": "Severely underweight" } }, 136 | }, 137 | }, 138 | { 139 | conditions: { bmi: { greater: 16, lessEq: 18.5 } }, 140 | event: { 141 | type: "uiOverride", 142 | params: { bmi: { "ui:help": "Underweight" } }, 143 | }, 144 | }, 145 | { 146 | conditions: { bmi: { greater: 18.5, lessEq: 25 } }, 147 | event: { 148 | type: "uiOverride", 149 | params: { bmi: { "ui:help": "Normal" } }, 150 | }, 151 | }, 152 | { 153 | conditions: { bmi: { greater: 25, lessEq: 30 } }, 154 | event: { 155 | type: "uiOverride", 156 | params: { bmi: { "ui:help": "Overweight" } }, 157 | }, 158 | }, 159 | { 160 | conditions: { bmi: { greater: 30, lessEq: 35 } }, 161 | event: { 162 | type: "uiOverride", 163 | params: { bmi: { "ui:help": "Obese Class I (Moderately obese)" } }, 164 | }, 165 | }, 166 | { 167 | conditions: { bmi: { greater: 35, lessEq: 40 } }, 168 | event: { 169 | type: "uiOverride", 170 | params: { bmi: { "ui:help": "Obese Class II (Severely obese)" } }, 171 | }, 172 | }, 173 | { 174 | conditions: { bmi: { greater: 40 } }, 175 | event: { 176 | type: "uiOverride", 177 | params: { bmi: { "ui:help": "Obese Class III (Very severely obese)" } }, 178 | }, 179 | }, 180 | ], 181 | extraActions: { 182 | calculateBMI: function({ field }, schema, uiSchema, formData) { 183 | let weightKilo = formData.weight; 184 | switch (formData.weightMeasure) { 185 | case "Lbs": 186 | weightKilo = formData.weight * 0.453592; 187 | break; 188 | } 189 | let heightMeters = formData.height / 100; 190 | switch (formData.heightMeasure) { 191 | case "In": 192 | heightMeters = formData.height * 0.0254; 193 | break; 194 | case "ft": 195 | heightMeters = formData.height * 0.3048; 196 | break; 197 | } 198 | if (!uiSchema[field]) { 199 | uiSchema[field] = {}; 200 | } 201 | let bmi = (weightKilo / (heightMeters * heightMeters)).toFixed(2); 202 | formData[field] = bmi; 203 | }, 204 | }, 205 | rulesEngine: Engine, 206 | }; 207 | 208 | export default conf; 209 | -------------------------------------------------------------------------------- /playground/app/conf/issue.59.js: -------------------------------------------------------------------------------- 1 | import Engine from "json-rules-engine-simplified"; 2 | 3 | const conf = { 4 | schema: { 5 | type: "object", 6 | properties: { 7 | hasBenefitsReference: { 8 | title: "Do you have a Benefits Reference Number?", 9 | type: "boolean", 10 | }, 11 | benefitsReference: { 12 | title: "Benefits Reference Number", 13 | type: "string", 14 | }, 15 | hasBD2Reference: { 16 | title: "Do you have a BD2 Number?", 17 | type: "boolean", 18 | }, 19 | BD2Reference: { 20 | title: "BD2 Number", 21 | type: "string", 22 | }, 23 | }, 24 | }, 25 | uiSchema: {}, 26 | formData: {}, 27 | rules: [ 28 | { 29 | conditions: { 30 | hasBenefitsReference: { is: true }, 31 | }, 32 | event: [ 33 | { 34 | type: "require", 35 | params: { 36 | field: ["hasBD2Reference", "BD2Reference"], 37 | }, 38 | }, 39 | ], 40 | }, 41 | ], 42 | rulesEngine: Engine, 43 | }; 44 | 45 | export default conf; 46 | -------------------------------------------------------------------------------- /playground/app/conf/simpleSum.js: -------------------------------------------------------------------------------- 1 | import Engine from "json-rules-engine-simplified"; 2 | 3 | const SCHEMA = { 4 | type: "object", 5 | properties: { 6 | a: { type: "number" }, 7 | b: { type: "number" }, 8 | sum: { type: "number" }, 9 | }, 10 | }; 11 | 12 | const RULES = [ 13 | { 14 | conditions: { 15 | a: { greater: 0 }, 16 | }, 17 | event: { 18 | type: "sum", 19 | }, 20 | }, 21 | ]; 22 | 23 | const EXTRA_ACTIONS = { 24 | sum: (params, schema, uiSchema, formData) => { 25 | formData.sum = formData.a + formData.b; 26 | }, 27 | }; 28 | 29 | export default { 30 | schema: SCHEMA, 31 | uiSchema: {}, 32 | rules: RULES, 33 | rulesEngine: Engine, 34 | formData: { a: 1, b: 2 }, 35 | extraActions: EXTRA_ACTIONS, 36 | }; 37 | -------------------------------------------------------------------------------- /playground/app/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from "react-dom"; 2 | import React from "react"; 3 | import App from "./App"; 4 | 5 | ReactDOM.render(, document.getElementById("app")); 6 | -------------------------------------------------------------------------------- /playground/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Forms with predicates 6 | 7 | 8 | 10 | 11 | 12 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /playground/index.prod.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | react-jsonschema-form-conditionals playground 9 | 10 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 20 |
21 |
22 |