├── .babelrc ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── setupJest.js ├── src ├── Array.test.jsx ├── Button.jsx ├── Down.jsx ├── Element.jsx ├── Fieldset.jsx ├── Fieldset.test.jsx ├── FieldsetIndex.jsx ├── Form.jsx ├── Form.test.jsx ├── If.jsx ├── Input.jsx ├── Input.test.jsx ├── Integrate.jsx ├── Integrate.test.jsx ├── Last.jsx ├── Path.jsx ├── ProvideIndexes.jsx ├── ProvideProps.jsx ├── Remove.jsx ├── Select.jsx ├── Select.test.jsx ├── Tbody.jsx ├── Tbody.test.jsx ├── Textarea.jsx ├── Textarea.test.jsx ├── Up.jsx ├── Value.jsx ├── Word.jsx ├── Word.test.jsx ├── Working.jsx ├── index.js └── utils │ ├── markAsDirty.js │ ├── set.js │ ├── shallowCompare.js │ ├── traverse.js │ └── wait.js └── tempPolyfill.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "development": { 4 | "presets": [ 5 | ["babel-preset-env", { 6 | "targets": { 7 | "node": "6.10" 8 | } 9 | }], 10 | "stage-0", 11 | "react" 12 | ], 13 | "plugins": [ 14 | "transform-decorators", 15 | "transform-class-properties" 16 | ] 17 | }, 18 | "test": { 19 | "presets": [ 20 | ["babel-preset-env", { 21 | "targets": { 22 | "node": "6.10" 23 | } 24 | }], 25 | "stage-0", 26 | "react" 27 | ], 28 | "plugins": [ 29 | "transform-decorators", 30 | "transform-class-properties" 31 | ] 32 | }, 33 | "browser": { 34 | "presets": [ 35 | ["babel-preset-env", { 36 | "targets": { 37 | "browsers": "last 3 versions, > 1%" 38 | }, 39 | "modules": false, 40 | "loose": true 41 | }], 42 | "stage-0", 43 | "react" 44 | ], 45 | "plugins": [ 46 | "transform-decorators", 47 | "transform-class-properties", 48 | "transform-proto-to-assign" 49 | ] 50 | }, 51 | "module": { 52 | "presets": [ 53 | ["babel-preset-env", { 54 | "targets": { 55 | "node": "6.10" 56 | }, 57 | "modules": false 58 | }], 59 | "stage-0", 60 | "react" 61 | ], 62 | "plugins": [ 63 | "transform-decorators", 64 | "transform-class-properties" 65 | ] 66 | } 67 | }, 68 | "sourceMaps": true 69 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | coverage 4 | tests -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "parser": "babel-eslint", 4 | "globals": { 5 | "it": true, 6 | "expect": true, 7 | "describe": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | coverage 2 | dist 3 | lib 4 | module 5 | node_modules 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | coverage 2 | node_modules 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | - "7" 5 | - "8" 6 | script: npm test:coverage 7 | notifications: 8 | email: 9 | recipients: 10 | - zlatkofedor@cherryprojects.com 11 | on_success: change 12 | on_failure: always 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Zlatko Fedor 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React controlled form 2 | 3 | Intuitive react forms for building powerful applications. 4 | 5 | All components are [controlled](https://facebook.github.io/react/docs/forms.html#why-controlled-components) 6 | That means form is always showing the current state and data are immutable. 7 | Each form has own internal state that means you can skip onChange event. 8 | If you will change the value prop of the form component it will change the state of the form immediately. 9 | 10 | [![NPM version][npm-image]][npm-url] 11 | [![build status][travis-image]][travis-url] 12 | [![Test coverage][coveralls-image]][coveralls-url] 13 | 14 | [npm-image]: https://img.shields.io/npm/v/react-form-controlled.svg?style=flat-square 15 | [npm-url]: https://www.npmjs.com/react-form-controlled 16 | [travis-image]: https://img.shields.io/travis/seeden/react-form-controlled/master.svg?style=flat-square 17 | [travis-url]: https://travis-ci.org/seeden/react-form-controlled 18 | [coveralls-image]: https://img.shields.io/coveralls/seeden/react-form-controlled/master.svg?style=flat-square 19 | [coveralls-url]: https://coveralls.io/r/seeden/react-form-controlled?branch=master 20 | [github-url]: https://github.com/seeden/react-form-controlled 21 | 22 | # Features 23 | 24 | - Immutable data 25 | - Controlled behavior (support for "uncontrolled" behaviour) 26 | - Build on latest standards ES6 and promises 27 | - Support for isomorphic application 28 | - You are able to use forms without special components 29 | - Support for arrays/lists and indexes 30 | - Standard html elements like an input, select, textarea and fieldset (arrays) 31 | - Custom components and support for 3rd party libraries 32 | - Validation 33 | - Tests and coverage 34 | 35 | 36 | # Support us 37 | 38 | Star this project on [GitHub][github-url]. 39 | 40 | # Examples 41 | 42 | ## Simple usage 43 | 44 | ```js 45 | import React, { Component } from 'react'; 46 | import Form from 'react-form-controlled'; 47 | 48 | export default class Example extends Component { 49 | constructor(props, context) { 50 | super(props, context); 51 | 52 | this.formData = { 53 | firstName: null, 54 | lastName: null 55 | }; 56 | } 57 | 58 | onSubmit = (data) => { 59 | alert(`Hi ${data.firstName} ${data.lastName}`); 60 | } 61 | 62 | render() { 63 | return ( 64 |
68 | 71 | 72 | 75 | 76 | 77 |
78 | ); 79 | } 80 | } 81 | ``` 82 | 83 | ## Where is the input value? 84 | 85 | Value is automatically added as prop to the inputs. When you will change it it will reload whole form (controlled form, but this is the work for React). 86 | 87 | ## Arrays and controlled state 88 | 89 | ```js 90 | import React, { Component } from 'react'; 91 | import Form from 'react-form-controlled'; 92 | 93 | export default class Example extends Component { 94 | constructor(props, context) { 95 | super(props, context); 96 | 97 | this.state = { 98 | users: [{ 99 | firstName: 'Zlatko' 100 | }, { 101 | firstName: 'Livia' 102 | }] 103 | }; 104 | } 105 | 106 | onChange = (data) => { 107 | this.setState(data); 108 | } 109 | 110 | onSubmit = (data) => { 111 | alert(`Hi ${data.users[0].firstName}`); 112 | } 113 | 114 | render() { 115 | return ( 116 |
121 |
122 | 125 |
126 | 127 | 128 |
129 | ); 130 | } 131 | } 132 | ``` 133 | 134 | ## You can do what do you want with value. 135 | 136 | ```js 137 | import React, { Component } from 'react'; 138 | import Form from 'react-form-controlled'; 139 | 140 | export default class Example extends Component { 141 | constructor(props, context) { 142 | super(props, context); 143 | 144 | this.state = { 145 | users: [{ 146 | firstName: 'Zlatko' 147 | }, { 148 | firstName: 'Livia' 149 | }] 150 | }; 151 | } 152 | 153 | onChange = (data) => { 154 | this.setState(data); 155 | } 156 | 157 | onSubmit = (data) => { 158 | alert(`Hi ${data.users[0].firstName}`); 159 | } 160 | 161 | render() { 162 | return ( 163 |
168 | 169 |
value.map((user, index) => ( 172 | 173 |
174 | 177 |
178 | 179 | ))} 180 | /> 181 |
182 | 183 | 184 | 185 |
186 | ); 187 | } 188 | } 189 | ``` 190 | 191 | 192 | ## Simple arrays 193 | 194 | If you are using fieldset with simple array do not enter the name attribute. 195 | 196 | ```js 197 | import React, { Component } from 'react'; 198 | import Form from 'react-form-controlled'; 199 | 200 | export default class Example extends Component { 201 | constructor(props, context) { 202 | super(props, context); 203 | 204 | this.state = { 205 | items: [123, 222] 206 | }; 207 | } 208 | 209 | onSubmit = (data) => { 210 | alert(`Hi ${data.users[0].firstName}`); 211 | } 212 | 213 | render() { 214 | return ( 215 |
219 |
220 | 221 |
222 | 223 | 224 |
225 | ); 226 | } 227 | } 228 | ``` 229 | 230 | ## Complex objects 231 | 232 | If you want to use complex names you can use dot or array notation. 233 | 234 | ```js 235 | import React, { Component } from 'react'; 236 | import Form from 'react-form-controlled'; 237 | 238 | export default class Example extends Component { 239 | constructor(props, context) { 240 | super(props, context); 241 | 242 | this.state = { 243 | users: [{ 244 | firstName: 'Zlatko', 245 | stats: { 246 | followers: 10, 247 | }, 248 | }, { 249 | firstName: 'Livia', 250 | stats: { 251 | followers: 22, 252 | }, 253 | }] 254 | }; 255 | } 256 | 257 | onSubmit = (data) => { 258 | alert(`Hi ${data.users[0].firstName}`); 259 | } 260 | 261 | render() { 262 | return ( 263 |
267 |
268 | 271 | 274 |
275 | 276 | 277 |
278 | ); 279 | } 280 | } 281 | ``` 282 | 283 | or you can use one more fieldset 284 | 285 | ```js 286 | import React, { Component } from 'react'; 287 | import Form from 'react-form-controlled'; 288 | 289 | export default class Example extends Component { 290 | constructor(props, context) { 291 | super(props, context); 292 | 293 | this.state = { 294 | users: [{ 295 | firstName: 'Zlatko', 296 | stats: { 297 | followers: 10, 298 | }, 299 | }, { 300 | firstName: 'Livia', 301 | stats: { 302 | followers: 22, 303 | }, 304 | }] 305 | }; 306 | } 307 | 308 | onSubmit = (data) => { 309 | alert(`Hi ${data.users[0].firstName}`); 310 | } 311 | 312 | render() { 313 | return ( 314 |
318 |
319 | 322 |
323 | 326 |
327 |
328 | 329 | 330 |
331 | ); 332 | } 333 | } 334 | ``` 335 | 336 | ## Indexes 337 | 338 | If you are using arrays with fieldset you want to use indexes. 339 | 340 | ### Props 341 | 342 | #### render: function 343 | 344 | Instead of having a component rendered for you, you can pass in a function. Your render function will be called with the same props that are passed to the component. 345 | 346 | ```js 347 | import React, { Component } from 'react'; 348 | import Form, { Index } from 'react-form-controlled'; 349 | 350 | export default class Component extends Component { 351 | constructor(props, context) { 352 | super(props, context); 353 | 354 | this.state = { 355 | users: [{ 356 | firstName: 'Zlatko', 357 | }, { 358 | firstName: 'Livia', 359 | }] 360 | }; 361 | } 362 | 363 | onSubmit = (data) => { 364 | alert(`Hi ${data.users[0].firstName}`); 365 | } 366 | 367 | render() { 368 | return ( 369 |
373 |
374 | 382 |
383 | 384 | 385 |
386 | ); 387 | } 388 | } 389 | ``` 390 | 391 | ## Parent values 392 | 393 | You can use value from parent with dot notation. Example ".selected" 394 | 395 | ```js 396 | import React, { Component } from 'react'; 397 | import Form, { Index } from 'react-form-controlled'; 398 | 399 | export default class Component extends Component { 400 | constructor(props, context) { 401 | super(props, context); 402 | 403 | this.state = { 404 | options: ['dog', 'mouse', 'cat'], 405 | selected: 1, 406 | }; 407 | } 408 | 409 | onSubmit = (data) => { 410 | alert(`Selected option is ${data.options[data.selected]}`); 411 | } 412 | 413 | render() { 414 | return ( 415 |
419 |
420 | ( 422 | 423 | )} 424 | /> 425 | 426 |
427 | 428 | 429 |
430 | ); 431 | } 432 | } 433 | ``` 434 | 435 | ## Integrate with 3rd party libraries 436 | 437 | Integration is very easy you can use Integrate component. Here is example with [react-select](https://github.com/JedWatson/react-select) library. 438 | ### Props 439 | #### value: string 440 | Name of the integrated value property. 441 | #### onChange: function 442 | OnChange callback of the integrated component. 443 | #### name: string 444 | Name of the state property. You can use standard dot notation as always :) 445 | 446 | ```js 447 | import React, { Component } from 'react'; 448 | import Form, { Integrate } from 'react-form-controlled'; 449 | import Select from 'react-select'; 450 | 451 | export default class Component extends Component { 452 | onSubmit = (data) => { 453 | alert(`Selected option is ${data.selected}`); 454 | } 455 | 456 | render() { 457 | const options = [ 458 | { value: 'one', label: 'One' }, 459 | { value: 'two', label: 'Two' } 460 | ]; 461 | 462 | return ( 463 |
466 | ( 469 | 512 | ( 514 | 515 | )} 516 | /> 517 | 518 | 519 | 520 | 521 | 522 | ); 523 | } 524 | } 525 | ``` 526 | Remove, Up and Down components has same properties like index. You can use render and component property as well. 527 | 528 | ## Move item up/down in array 529 | 530 | ```js 531 | import React, { Component } from 'react'; 532 | import Form, { Up, Down } from 'react-form-controlled'; 533 | 534 | export default class Component extends Component { 535 | constructor(props, context) { 536 | super(props, context); 537 | 538 | this.state = { 539 | users: [{ 540 | firstName: 'Zlatko', 541 | }, { 542 | firstName: 'Livia', 543 | }] 544 | }; 545 | } 546 | 547 | onSubmit = (data) => { 548 | alert(`Hi ${data.users[0].firstName}`); 549 | } 550 | 551 | render() { 552 | return ( 553 |
557 |
558 | 559 | ( 561 | 562 | )} 563 | /> 564 | ( 566 | 567 | )} 568 | /> 569 |
570 | 571 | 572 |
573 | ); 574 | } 575 | } 576 | ``` 577 | 578 | ## Working state 579 | 580 | You can simply handle working state and show loading indicator. Form property onSubmit is based on promises. During you processing of this callback is form in the "isWorking" state. 581 | If the form is in the isWorking state you are not able to submit form again. 582 | 583 | ```js 584 | import React, { Component } from 'react'; 585 | import Form, { Working } from 'react-form-controlled'; 586 | 587 | export default class Component extends Component { 588 | constructor(props, context) { 589 | super(props, context); 590 | 591 | this.state = { 592 | users: [{ 593 | firstName: 'Zlatko', 594 | }, { 595 | firstName: 'Livia', 596 | }] 597 | }; 598 | } 599 | 600 | onSubmit = async (data) => { 601 | return new Promise((resolve) => { 602 | alert(`Hi ${data.users[0].firstName}`); 603 | 604 | setTimeout(resolve, 3000); 605 | }); 606 | } 607 | 608 | render() { 609 | return ( 610 |
614 |
615 | 616 |
617 | 618 | isWorking ? 'isWorking' : 'idle'} 620 | /> 621 | 622 | 623 | ); 624 | } 625 | } 626 | ``` 627 | 628 | ## So far so good (more complex form) 629 | 630 | Try to image simple quiz with questions and answers. Y 631 | 632 | ## Combination with other components 633 | 634 | If you want to disable autoreplace of the standard components like an input, select, textarea etc... 635 | You can disable this behavior with the form parameter skipReplace. 636 | This feature is great if you want to use this library with other 3rd libraries. 637 | You will be able to use Input, Select, Textarea and Fieldset. 638 | 639 | ```js 640 | import Form, { Input, Select, Textarea, Fieldset } from from 'react-form-controlled'; 641 | 642 | export default class Component extends Component { 643 | constructor(props, context) { 644 | super(props, context); 645 | 646 | this.state = { 647 | users: [{ 648 | firstName: 'Zlatko', 649 | }, { 650 | firstName: 'Livia', 651 | }] 652 | }; 653 | } 654 | 655 | onSubmit(data) { 656 | alert(`Hi ${data.users[0].firstName}`); 657 | } 658 | 659 | render() { 660 | return ( 661 |
666 |
667 | 671 |
672 | 673 | 674 |
675 | ); 676 | } 677 | } 678 | ``` 679 | 680 | # Support for schemas and validation? 681 | 682 | This part is moved to another library named react-form-controlled-validate 683 | 684 | Yes, you can use JSON schema as property to the form. Why JSON schema? Because it is a standard. 685 | ```js 686 | 687 | const schema = { 688 | type: "object", 689 | properties: { 690 | firstName: { 691 | type: "string" 692 | }, 693 | lastName: { 694 | type: "string" 695 | } 696 | } 697 | }; 698 | 699 |
700 | 701 | const hasError = form.hasError('firstName'); //true 702 | const isValid = from.isValid('firstName'); //false 703 | const errors = form.getErrors(); //[{path: 'firstName', error: '...'}] 704 | ``` 705 | 706 | # Support us 707 | 708 | Star this project on [GitHub][github-url]. 709 | 710 | ## Try our other React components 711 | 712 | - Translate your great project [react-translate-maker](https://github.com/CherrySoftware/react-translate-maker) 713 | - Google Analytics [react-g-analytics](https://github.com/seeden/react-g-analytics) 714 | - Google AdSense via Google Publisher Tag [react-google-publisher-tag](https://github.com/seeden/react-google-publisher-tag) 715 | 716 | ## License 717 | 718 | The MIT License (MIT) 719 | 720 | Copyright (c) 2017 [Zlatko Fedor](http://github.com/seeden) 721 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-form-controlled", 3 | "version": "0.20.11", 4 | "description": "Intuitive react forms for building powerful applications", 5 | "author": { 6 | "name": "Zlatko Fedor", 7 | "email": "zlatkofedor@cherryprojects.com", 8 | "url": "http://www.cherryprojects.com/" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git://github.com/seeden/react-form-controlled.git" 13 | }, 14 | "keywords": [ 15 | "react", 16 | "react-component", 17 | "react-form", 18 | "form", 19 | "controlled", 20 | "input", 21 | "select", 22 | "react-select", 23 | "textarea", 24 | "redux-form", 25 | "redux" 26 | ], 27 | "private": false, 28 | "license": "MIT", 29 | "main": "./dist/index.js", 30 | "browser": "./lib/index.js", 31 | "module": "./module/index.js", 32 | "esnext": "./src/index.js", 33 | "engines": { 34 | "node": ">= 6.10" 35 | }, 36 | "scripts": { 37 | "prepublish": "npm run build", 38 | "test": "jest ./src/", 39 | "test:coverage": "jest --coverage ./src/", 40 | "test:watch": "jest --watch ./src/", 41 | "build-browser": "cross-env BABEL_ENV=browser babel ./src --out-dir ./lib --source-maps --copy-files", 42 | "build-module": "cross-env BABEL_ENV=module babel ./src --out-dir ./module --source-maps --copy-files", 43 | "build-node": "babel ./src --out-dir ./dist --source-maps --copy-files", 44 | "build": "npm run build-node && npm run build-browser && npm run build-module", 45 | "eslint": "node ./node_modules/eslint/bin/eslint.js --ext .js,.jsx ./src" 46 | }, 47 | "jest": { 48 | "setupFiles": [ 49 | "/setupJest.js" 50 | ] 51 | }, 52 | "dependencies": { 53 | "babel-runtime": "^6.26.0", 54 | "diacritics": "^1.3.0", 55 | "lodash": "^4.17.4", 56 | "prop-types": "^15.6.0" 57 | }, 58 | "devDependencies": { 59 | "babel-cli": "^6.26.0", 60 | "babel-core": "^6.26.0", 61 | "babel-eslint": "^8.0.2", 62 | "babel-plugin-transform-class-properties": "^6.24.1", 63 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 64 | "babel-plugin-transform-proto-to-assign": "^6.26.0", 65 | "babel-plugin-transform-runtime": "^6.23.0", 66 | "babel-preset-env": "^1.6.1", 67 | "babel-preset-react": "^6.24.1", 68 | "babel-preset-stage-0": "^6.24.1", 69 | "babel-preset-stage-1": "^6.24.1", 70 | "cross-env": "^5.1.1", 71 | "enzyme": "^3.2.0", 72 | "enzyme-adapter-react-16": "^1.1.0", 73 | "eslint": "^4.11.0", 74 | "eslint-config-airbnb": "^16.1.0", 75 | "eslint-loader": "^1.9.0", 76 | "eslint-plugin-import": "^2.8.0", 77 | "eslint-plugin-jsx-a11y": "^6.0.2", 78 | "eslint-plugin-react": "^7.5.1", 79 | "jest": "^21.2.1", 80 | "jest-cli": "^21.2.1", 81 | "react": "^16.1.1", 82 | "react-dom": "^16.1.1", 83 | "react-test-renderer": "^16.1.1" 84 | }, 85 | "peerDependencies": { 86 | "react": "15.x || 16.x" 87 | }, 88 | "typings": "react-form-controlled.d.ts" 89 | } 90 | -------------------------------------------------------------------------------- /setupJest.js: -------------------------------------------------------------------------------- 1 | import './tempPolyfill'; 2 | import { configure } from 'enzyme'; 3 | import Adapter from 'enzyme-adapter-react-16'; 4 | 5 | configure({ adapter: new Adapter() }); 6 | -------------------------------------------------------------------------------- /src/Array.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import Form, { Remove, Down, Up } from '../src'; 4 | 5 | describe('Up', () => { 6 | it('should be able to move up item in array', (done) => { 7 | const value = { 8 | items: [1, 2, 3], 9 | }; 10 | 11 | function onChange(state) { 12 | expect(state.items).toEqual([1, 3, 2]); 13 | done(); 14 | } 15 | 16 | const wrapper = mount(( 17 | 18 |
19 | 20 | ( 22 | 23 | )} 24 | /> 25 |
26 | 27 | )); 28 | 29 | expect(wrapper.find('input').first().props().value).toBe(1); 30 | 31 | wrapper.find('button').last().simulate('click'); 32 | }); 33 | }); 34 | 35 | describe('Down', () => { 36 | it('should be able to move down item in array', (done) => { 37 | const value = { 38 | items: [1, 2, 3], 39 | }; 40 | 41 | function onChange(state) { 42 | expect(state.items).toEqual([2, 1, 3]); 43 | done(); 44 | } 45 | 46 | const wrapper = mount(( 47 |
48 |
49 | 50 | ( 52 | 53 | )} 54 | /> 55 |
56 |
57 | )); 58 | 59 | expect(wrapper.find('input').first().props().value).toBe(1); 60 | 61 | wrapper.find('button').first().simulate('click'); 62 | }); 63 | }); 64 | 65 | describe('Remove', () => { 66 | it('should be able to remove item from array', (done) => { 67 | const value = { 68 | items: [1, 2, 3], 69 | }; 70 | 71 | function onChange(state) { 72 | expect(state.items).toEqual([2, 3]); 73 | done(); 74 | } 75 | 76 | const wrapper = mount(( 77 |
78 |
79 | 80 | ( 82 | 83 | )} 84 | /> 85 |
86 |
87 | )); 88 | 89 | wrapper.find('button').first().simulate('click'); 90 | }); 91 | }); 92 | 93 | describe('Remove pure', () => { 94 | it('should be able to remove item from array as children function', (done) => { 95 | const value = { 96 | items: [1, 2, 3], 97 | }; 98 | 99 | function onChange(state) { 100 | expect(state.items).toEqual([2, 3]); 101 | done(); 102 | } 103 | 104 | const wrapper = mount(( 105 |
106 |
107 | 108 | 109 | {({ onClick }) => 110 | 111 | } 112 | 113 |
114 |
115 | )); 116 | 117 | wrapper.find('button').first().simulate('click'); 118 | }); 119 | }); 120 | -------------------------------------------------------------------------------- /src/Button.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import Element from './Element'; 3 | import wait from './utils/wait'; 4 | 5 | export default class Button extends Element { 6 | static propTypes = { 7 | render: PropTypes.func, 8 | text: PropTypes.string, 9 | children: PropTypes.func, 10 | }; 11 | 12 | static defaultProps = { 13 | text: 'Button', 14 | }; 15 | 16 | async process() { 17 | throw new Error('You need to implement process'); 18 | } 19 | 20 | onClick = async (...args) => { 21 | const result = await this.process(); 22 | if (typeof result === 'undefined') { 23 | return; 24 | } 25 | 26 | const { onClick } = this.props; 27 | if (onClick) { 28 | await wait(0); 29 | onClick(...args, result); 30 | } 31 | } 32 | 33 | render() { 34 | const { children, render } = this.props; 35 | const newProps = { 36 | onClick: this.onClick, 37 | }; 38 | 39 | if (typeof children === 'function') { 40 | return this.replaceChildren(children(newProps)); 41 | } if (typeof render === 'function') { 42 | return this.replaceChildren(render(newProps)); 43 | } 44 | 45 | throw new Error('You need to set property render or children as function'); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/Down.jsx: -------------------------------------------------------------------------------- 1 | import Button from './Button'; 2 | 3 | export default class Down extends Button { 4 | static defaultProps = { 5 | text: 'Remove', 6 | }; 7 | 8 | async process() { 9 | return this.getParent().down(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/Element.jsx: -------------------------------------------------------------------------------- 1 | import { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import shallowEqual from './utils/shallowCompare'; 4 | 5 | export default class Element extends Component { 6 | static propTypes = { 7 | name: PropTypes.oneOfType([ 8 | PropTypes.string, 9 | PropTypes.number, 10 | ]).isRequired, 11 | }; 12 | 13 | static contextTypes = { 14 | fieldset: PropTypes.object.isRequired, 15 | }; 16 | 17 | state = {}; 18 | 19 | constructor(props, context) { 20 | super(props, context); 21 | 22 | this.value = this.getOriginalValue(props, context); 23 | } 24 | 25 | componentDidMount() { 26 | const parent = this.getParent(); 27 | // I am form 28 | if (!parent) { 29 | return; 30 | } 31 | 32 | parent.registerChild(this, this.props.name); 33 | } 34 | 35 | shouldComponentUpdate(nextProps, nextState) { 36 | const { sameChildren } = nextProps; 37 | const form = this.getForm(); 38 | 39 | if (sameChildren === true || (typeof sameChildren === 'undefined' && form.props.sameChildren === true)) { 40 | const sameProps = shallowEqual(this.props, nextProps, ['children']); 41 | if (!sameProps) { 42 | return true; 43 | } 44 | 45 | const sameState = shallowEqual(this.state, nextState, []); 46 | if (!sameState) { 47 | return true; 48 | } 49 | 50 | return false; 51 | } 52 | 53 | return true; 54 | } 55 | 56 | componentWillUnmount() { 57 | const parent = this.getParent(); 58 | // I am form 59 | if (!parent) { 60 | return; 61 | } 62 | 63 | parent.unregisterChild(this, this.props.name); 64 | } 65 | 66 | getIndexes() { 67 | return this.getParent().getIndexes(); 68 | } 69 | 70 | getTotals() { 71 | return this.getParent().getTotals(); 72 | } 73 | 74 | getOriginalValue(props, context) { 75 | const { name } = props; 76 | const { fieldset } = context; 77 | if (!fieldset) { 78 | return undefined; 79 | } 80 | 81 | return fieldset.getChildValue(name); 82 | } 83 | 84 | getValue() { 85 | return this.value; 86 | } 87 | 88 | getParent() { 89 | return this.context.fieldset; 90 | } 91 | 92 | getPath() { 93 | const { name } = this.props; 94 | return this.getPathByName(name); 95 | } 96 | 97 | getPathByName(name) { 98 | const parent = this.getParent(); 99 | if (!parent) { 100 | return undefined; 101 | } 102 | 103 | return parent.buildPath(name); 104 | } 105 | 106 | getForm() { 107 | const parent = this.getParent(); 108 | if (!parent) { 109 | return undefined; 110 | } 111 | 112 | return parent.getForm(); 113 | } 114 | 115 | setValue(value, component = this, notifyChildren) { 116 | const { value: currentValue } = this; 117 | if (currentValue === value) { 118 | return; 119 | } 120 | 121 | this.value = value; 122 | 123 | if (notifyChildren) { 124 | this.forceUpdate(); 125 | return; 126 | } 127 | 128 | this.notifyParent(value, component); 129 | 130 | if (component === this) { 131 | this.forceUpdate(); 132 | } 133 | } 134 | 135 | replaceChildren(children) { 136 | return this.getParent().replaceChildren(children); 137 | } 138 | 139 | originalValueChanged() { 140 | const value = this.getOriginalValue(this.props, this.context); 141 | this.setValue(value, this, true); 142 | } 143 | 144 | notifyParent(value, component) { 145 | const { name } = this.props; 146 | const parent = this.getParent(); 147 | 148 | // form has no parent 149 | if (parent) { 150 | parent.setChildValue(name, value, component); 151 | } 152 | } 153 | 154 | render() { 155 | return null; 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /src/Fieldset.jsx: -------------------------------------------------------------------------------- 1 | import React, { createElement } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import get from 'lodash/get'; 4 | import isNumber from 'lodash/isNumber'; 5 | import Element from './Element'; 6 | import set from './utils/set'; 7 | import traverse from './utils/traverse'; 8 | import Input from './Input'; 9 | import Select from './Select'; 10 | import Textarea from './Textarea'; 11 | 12 | function isEmpty(value) { 13 | return typeof value === 'undefined' || value === null || value === ''; 14 | } 15 | 16 | export default class Fieldset extends Element { 17 | static propTypes = { 18 | ...Element.propTypes, 19 | onChange: PropTypes.func, 20 | index: PropTypes.number, 21 | total: PropTypes.number, 22 | children: PropTypes.node, 23 | tagName: PropTypes.string, 24 | childrenOnly: PropTypes.bool, 25 | children: PropTypes.node, 26 | sameChildren: PropTypes.bool, 27 | }; 28 | 29 | static childContextTypes = { 30 | fieldset: PropTypes.object.isRequired, 31 | }; 32 | 33 | static contextTypes = { 34 | fieldset: PropTypes.object, 35 | }; 36 | 37 | constructor(...args) { 38 | super(...args); 39 | 40 | this.registeredChildren = []; 41 | } 42 | 43 | getTotals() { 44 | const totals = []; 45 | if (typeof this.props.total !== 'undefined') { 46 | totals.push(this.props.total); 47 | } 48 | 49 | const parent = this.getParent(); 50 | if (!parent) { 51 | return totals; 52 | } 53 | 54 | const parentTotals = parent.getTotals(); 55 | return [...totals, ...parentTotals]; 56 | } 57 | 58 | getIndexes() { 59 | const indexes = []; 60 | if (typeof this.props.index !== 'undefined') { 61 | indexes.push(this.props.index); 62 | } 63 | 64 | const parent = this.getParent(); 65 | if (!parent) { 66 | return indexes; 67 | } 68 | 69 | const parentIndexes = parent.getIndexes(); 70 | return [...indexes, ...parentIndexes]; 71 | } 72 | 73 | setValue(value, component, notifyChildren) { 74 | super.setValue(value, component, notifyChildren); 75 | 76 | if (notifyChildren) { 77 | this.notifyChildren(); 78 | } 79 | } 80 | 81 | originalValueChanged() { 82 | super.originalValueChanged(); 83 | this.notifyChildren(); 84 | } 85 | 86 | notifyChildren() { 87 | const { registeredChildren } = this; 88 | registeredChildren.forEach(child => child.originalValueChanged()); 89 | } 90 | 91 | registerChild(child, name) { 92 | if (name && name[0] === '.') { 93 | const parent = this.getParent(); 94 | parent.registerChild(child, name.substr(1)); 95 | return; 96 | } 97 | 98 | this.registeredChildren.push(child); 99 | } 100 | 101 | unregisterChild(child, name) { 102 | if (name && name[0] === '.') { 103 | const parent = this.getParent(); 104 | parent.unregisterChild(child, name.substr(1)); 105 | return; 106 | } 107 | 108 | const pos = this.registeredChildren.indexOf(child); 109 | if (pos !== -1) { 110 | this.registeredChildren.splice(pos, 1); 111 | } 112 | } 113 | 114 | getChildContext() { 115 | return { 116 | fieldset: this, 117 | }; 118 | } 119 | 120 | async remove(index) { 121 | if (typeof index === 'undefined') { 122 | const parent = this.getParent(); 123 | return parent.remove(this.getCurrentIndex()); 124 | } 125 | 126 | const value = this.getValue(); 127 | if (!Array.isArray(value) || index < 0 || value.length <= index) { 128 | return undefined; 129 | } 130 | 131 | this.setValue([ 132 | ...value.slice(0, index), 133 | ...value.slice(index + 1), 134 | ]); 135 | 136 | return index; 137 | } 138 | 139 | async up(index) { 140 | if (typeof index === 'undefined') { 141 | const parent = this.getParent(); 142 | return parent.up(this.getCurrentIndex()); 143 | } 144 | 145 | const value = this.getValue(); 146 | if (!Array.isArray(value) || index <= 0 || value.length <= index) { 147 | return undefined; 148 | } 149 | 150 | this.setValue([ 151 | ...value.slice(0, index - 1), 152 | value[index], 153 | value[index - 1], 154 | ...value.slice(index + 1), 155 | ]); 156 | 157 | return index; 158 | } 159 | 160 | getCurrentIndex() { 161 | const { name } = this.props; 162 | if (name === undefined) { 163 | throw new Error('This is not an array'); 164 | } 165 | 166 | const indexNumber = Number(name); 167 | if (indexNumber.toString() !== name.toString() || !isNumber(indexNumber)) { 168 | throw new Error(`Index ${indexNumber} is not a number`); 169 | } 170 | 171 | return indexNumber; 172 | } 173 | 174 | async down(index) { 175 | if (typeof index === 'undefined') { 176 | const parent = this.getParent(); 177 | return parent.down(this.getCurrentIndex()); 178 | } 179 | 180 | const retVar = this.up(index + 1); 181 | return typeof retVar === 'undefined' 182 | ? retVar 183 | : index; 184 | } 185 | 186 | // return current or parent fieldset 187 | resolveByPath(path, callback) { 188 | if (path[0] === '.') { 189 | const subPath = path.substr(1); 190 | if (isEmpty(subPath)) { 191 | return callback(null, this, subPath); 192 | } 193 | 194 | const parent = this.getParent(); 195 | return parent.resolveByPath(subPath, callback); 196 | } 197 | 198 | return callback(null, this, path); 199 | } 200 | 201 | getChildValue(path) { 202 | if (isEmpty(path)) { 203 | return this.getValue(); 204 | } 205 | 206 | return this.resolveByPath(path, (err, current, subPath) => { 207 | if (err) { 208 | throw err; 209 | } 210 | 211 | const value = current.getValue(); 212 | if (isEmpty(subPath)) { 213 | return value; 214 | } 215 | 216 | return get(value, subPath); 217 | }); 218 | } 219 | 220 | setChildValue(path, value, component) { 221 | this.resolveByPath(path, (err, current, subPath) => { 222 | if (err) { 223 | throw err; 224 | } 225 | 226 | let newValue = value; 227 | if (!isEmpty(subPath)) { 228 | let currentValue = current.getValue(); 229 | 230 | // current value can be null or undefined 231 | if (!currentValue) { 232 | const firstChar = subPath[0]; 233 | const isCharNumber = Number(firstChar).toString() === firstChar; 234 | currentValue = isCharNumber ? [] : {}; 235 | } 236 | 237 | newValue = set(currentValue, subPath, value); 238 | } 239 | 240 | current.setValue(newValue, component); 241 | 242 | const { onChange } = current.props; 243 | if (onChange) { 244 | onChange(newValue, component); 245 | } 246 | }); 247 | } 248 | 249 | buildPath(path) { 250 | return this.resolveByPath(path, (err, current, subPath) => { 251 | if (err) { 252 | throw err; 253 | } 254 | 255 | const currentPath = current.getPath(); 256 | if (isEmpty(subPath)) { 257 | return currentPath; 258 | } 259 | 260 | return currentPath ? `${currentPath}.${subPath}` : subPath; 261 | }); 262 | } 263 | 264 | disableSmartUpdate(name) { 265 | if (!name || name[0] !== '.' || name === '.') { 266 | return; 267 | } 268 | 269 | this.smartUpdate = false; 270 | 271 | const parent = this.getParent(); 272 | if (!parent) { 273 | return; 274 | } 275 | 276 | parent.disableSmartUpdate(name.substr(1)); 277 | } 278 | 279 | replaceChildren(children) { 280 | const { skipReplace } = this.getForm().props; 281 | if (skipReplace) { 282 | return children; 283 | } 284 | 285 | return traverse(children, null, (child) => { 286 | if (child.props && child.props.skipReplace) { 287 | return undefined; 288 | } 289 | 290 | const childChildren = (child.props && child.props.children) || child.children; 291 | 292 | if (child.type === 'input') { 293 | return {childChildren}; 294 | } else if (child.type === 'select') { 295 | return ; 296 | } else if (child.type === 'textarea') { 297 | return ; 298 | } else if (child.type === 'fieldset' && child.props.name !== undefined) { 299 | return
{childChildren}
; 300 | } else if (child.type === 'tbody' && child.props.name !== undefined) { 301 | return
{childChildren}
; 302 | } 303 | 304 | return undefined; 305 | }); 306 | } 307 | 308 | processChildren(children) { 309 | const value = this.getValue(); 310 | const { render } = this.props; 311 | 312 | if (typeof render === 'function') { 313 | return this.replaceChildren(render({ value })); 314 | } 315 | 316 | const path = this.getPath(); 317 | const { skipMap } = this.props; 318 | if (Array.isArray(value) && !skipMap) { 319 | const childrenOnly = this.props.tagName === 'tbody'; 320 | 321 | return value.map((item, index) => { 322 | const uniqueKey = `${path}.${index}`; 323 | 324 | return ( 325 |
331 | {children} 332 |
333 | ); 334 | }); 335 | } 336 | 337 | return this.replaceChildren(children); 338 | } 339 | 340 | render() { 341 | const children = this.processChildren(this.props.children); 342 | const { tagName = 'fieldset', className, style, childrenOnly } = this.props; 343 | 344 | if (childrenOnly) { 345 | return children; 346 | } 347 | 348 | return createElement(tagName, { 349 | className, 350 | style, 351 | 'data-path': this.getPath(), 352 | }, children); 353 | } 354 | } 355 | -------------------------------------------------------------------------------- /src/Fieldset.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import Form, { 4 | Input, 5 | Fieldset, 6 | FieldsetIndex, 7 | If, 8 | Last, 9 | } from '../src'; 10 | 11 | describe('Fieldset', () => { 12 | it('should be able to create object', (done) => { 13 | const value = { 14 | data: { 15 | inputValue: 123, 16 | }, 17 | }; 18 | 19 | function onChange(state) { 20 | expect(state.data.inputValue).toBe('222'); 21 | done(); 22 | } 23 | 24 | const wrapper = mount(( 25 |
26 |
27 | 28 |
29 |
30 | )); 31 | 32 | expect(wrapper.find('form').length).toBe(1); 33 | expect(wrapper.find('input').props().value).toBe(123); 34 | 35 | wrapper.find('input').simulate('change', { target: { 36 | value: '222', 37 | } }); 38 | }); 39 | 40 | it('should be able to create object as html fieldset', (done) => { 41 | const value = { 42 | data: { 43 | inputValue: 123, 44 | }, 45 | }; 46 | 47 | function onChange(state) { 48 | expect(state.data.inputValue).toBe('222'); 49 | done(); 50 | } 51 | 52 | const wrapper = mount(( 53 |
54 |
55 | 56 |
57 |
58 | )); 59 | 60 | expect(wrapper.find('form').length).toBe(1); 61 | expect(wrapper.find('input').props().value).toBe(123); 62 | 63 | wrapper.find('input').simulate('change', { target: { 64 | value: '222', 65 | } }); 66 | }); 67 | 68 | it('should be able to create complex object', (done) => { 69 | const value = { 70 | data: [{ 71 | inputValue: 123, 72 | }], 73 | }; 74 | 75 | function onChange(state) { 76 | expect(state.data[0].inputValue).toBe('222'); 77 | done(); 78 | } 79 | 80 | const wrapper = mount(( 81 |
82 |
83 |
84 | 85 |
86 |
87 |
88 | )); 89 | 90 | expect(wrapper.find('form').length).toBe(1); 91 | expect(wrapper.find('input').props().value).toBe(123); 92 | 93 | wrapper.find('input').simulate('change', { target: { 94 | value: '222', 95 | } }); 96 | }); 97 | 98 | it('should be able to simplify complex object', (done) => { 99 | const value = { 100 | data: [{ 101 | inputValue: 123, 102 | }], 103 | }; 104 | 105 | function onChange(state) { 106 | expect(state.data[0].inputValue).toBe('222'); 107 | done(); 108 | } 109 | 110 | const wrapper = mount(( 111 |
112 |
113 | 114 |
115 |
116 | )); 117 | 118 | expect(wrapper.find('form').length).toBe(1); 119 | expect(wrapper.find('input').props().value).toBe(123); 120 | 121 | wrapper.find('input').simulate('change', { target: { 122 | value: '222', 123 | } }); 124 | }); 125 | 126 | it('should be able to simplify complex object by array notation', (done) => { 127 | const value = { 128 | data: [{ 129 | inputValue: 123, 130 | }], 131 | }; 132 | 133 | function onChange(state) { 134 | expect(state.data[0].inputValue).toBe('222'); 135 | done(); 136 | } 137 | 138 | const wrapper = mount(( 139 |
140 |
141 | 142 |
143 |
144 | )); 145 | 146 | expect(wrapper.find('form').length).toBe(1); 147 | expect(wrapper.find('input').props().value).toBe(123); 148 | 149 | wrapper.find('input').simulate('change', { target: { 150 | value: '222', 151 | } }); 152 | }); 153 | 154 | it('should be able to simplify complex object by dot and array notation', (done) => { 155 | const value = { 156 | data: [{ 157 | inputValue: 123, 158 | }], 159 | }; 160 | 161 | function onChange(state) { 162 | expect(state.data[0].inputValue).toBe('222'); 163 | done(); 164 | } 165 | 166 | const wrapper = mount(( 167 |
168 | 169 |
170 | )); 171 | 172 | expect(wrapper.find('form').length).toBe(1); 173 | expect(wrapper.find('input').props().value).toBe(123); 174 | 175 | wrapper.find('input').simulate('change', { target: { 176 | value: '222', 177 | } }); 178 | }); 179 | 180 | it('should be able to simplify array object', (done) => { 181 | const value = { 182 | data: [{ 183 | inputValue: 123, 184 | }, { 185 | inputValue: 222, 186 | }], 187 | }; 188 | 189 | function onChange(state) { 190 | expect(state.data[0].inputValue).toBe('333'); 191 | done(); 192 | } 193 | 194 | const wrapper = mount(( 195 |
196 |
197 | 198 |
199 |
200 | )); 201 | 202 | expect(wrapper.find('form').length).toBe(1); 203 | expect(wrapper.find('input').at(0).props().value).toBe(123); 204 | expect(wrapper.find('input').at(1).props().value).toBe(222); 205 | 206 | wrapper.find('input').first().simulate('change', { target: { 207 | value: '333', 208 | }}); 209 | }); 210 | 211 | it('should be able to simplify array object with complex array', () => { 212 | const value = { 213 | data: [[1, 2, 3], [4, 5, 6]], 214 | }; 215 | 216 | const wrapper = mount(( 217 |
218 |
219 | 220 |
221 |
222 | )); 223 | 224 | expect(wrapper.find('form').length).toBe(1); 225 | expect(wrapper.find('input').length).toBe(6); 226 | expect(wrapper.find('input').get(0).value).toBe('1'); 227 | expect(wrapper.find('input').get(1).value).toBe('2'); 228 | expect(wrapper.find('input').get(2).value).toBe('3'); 229 | expect(wrapper.find('input').get(3).value).toBe('4'); 230 | }); 231 | 232 | it('should be able to simplify array object with index', () => { 233 | const value = { 234 | data: [{ 235 | inputValue: 123, 236 | }, { 237 | inputValue: 222, 238 | }], 239 | }; 240 | 241 | const wrapper = mount(( 242 |
243 |
244 | ( 246 | {`${index + 1}.`} 247 | )} 248 | /> 249 | 250 |
251 |
252 | )); 253 | 254 | expect(wrapper.find('form').length).toBe(1); 255 | expect(wrapper.find('span').length).toBe(2); 256 | expect(wrapper.find('span').at(0).text()).toBe('1.'); 257 | expect(wrapper.find('span').at(1).text()).toBe('2.'); 258 | }); 259 | 260 | it('should be able to get original path for event onChange', (done) => { 261 | const value = { 262 | data: [{ 263 | inputValue: 123, 264 | }, { 265 | inputValue: 222, 266 | }], 267 | }; 268 | 269 | function onChange(state, component) { 270 | expect(component.getPath()).toBe('data.0.inputValue'); 271 | done(); 272 | } 273 | 274 | const wrapper = mount(( 275 |
276 |
277 | 278 |
279 |
280 | )); 281 | 282 | wrapper.find('input').first().simulate('change', { target: { 283 | value: '333', 284 | } }); 285 | }); 286 | 287 | it('should be able to use simple array', () => { 288 | const value = { 289 | data: [123, 222], 290 | }; 291 | 292 | const wrapper = mount(( 293 |
294 |
295 | 296 |
297 |
298 | )); 299 | 300 | expect(wrapper.find('form').length).toBe(1); 301 | expect(wrapper.find('input').length).toBe(2); 302 | expect(wrapper.find('input').at(0).props().value).toBe('123'); 303 | expect(wrapper.find('input').at(1).props().value).toBe('222'); 304 | }); 305 | 306 | it('should be able to use provideIndex', (done) => { 307 | const value = { 308 | data: [123, 222], 309 | }; 310 | 311 | function onClick(index, evn, id) { 312 | expect(index).toBe(0); 313 | done(); 314 | } 315 | 316 | const wrapper = mount(( 317 |
318 |
319 | 320 | 322 |
326 |
327 | )); 328 | 329 | wrapper.find('button').first().simulate('click'); 330 | }); 331 | 332 | it('should be able to use provideIndex on child', (done) => { 333 | const value = { 334 | data: [123, 222], 335 | }; 336 | 337 | function onClick(index, evn, id) { 338 | expect(index).toBe(0); 339 | done(); 340 | } 341 | 342 | const wrapper = mount(( 343 |
344 |
345 | 346 | 348 |
352 |
353 | )); 354 | 355 | wrapper.find('button').first().simulate('click'); 356 | }); 357 | 358 | it('should be able to get parent value', (done) => { 359 | const value = { 360 | test: '111', 361 | data: [{ 362 | options: [1, 2, 3], 363 | selected: 2, 364 | }], 365 | }; 366 | 367 | let count = 0; 368 | 369 | function onChange(state) { 370 | count += 1; 371 | 372 | if (count === 1) { 373 | expect(state.data[0].selected).toBe('222'); 374 | 375 | expect(wrapper.find('textarea').at(0).props().value).toBe(1); 376 | 377 | wrapper.find('textarea').first().simulate('change', { target: { 378 | value: '33333', 379 | } }); 380 | } else if (count === 2) { 381 | expect(state.data[0].options[0]).toBe('33333'); 382 | done(); 383 | } 384 | } 385 | 386 | const wrapper = mount(( 387 |
388 |
389 |
390 |