{"_id":"hbp-spark","_rev":"75-bdcd3d28fac2bf4783c0f4338e7a5fd6","name":"hbp-spark","dist-tags":{"latest":"1.1.27","unstable":"1.1.24-unstable"},"versions":{"1.0.0":{"name":"hbp-spark","version":"1.0.0","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","lodash":"^4.17.5","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0","react-jss":"^8.4.0"},"dependencies":{"axios":"^0.18.0","lodash":"^4.17.5","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"2025b95b6c72245d25e0f88105d623ca2d919f26","_id":"hbp-spark@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"9.3.0","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-UprOGHx/os5yE1H1hffFQyefmF3Voueq3b1o1nlCuS6712zsrhWnl38GRZBza33QrExx/Ef5Jt69q2SvvF2iBw==","shasum":"4910b9ec842991659293ba6b4599622bff349a45","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.0.tgz","fileCount":21,"unpackedSize":153724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2KWICRA9TVsSAnZWagAA5rkP/1Zhun01Vi/kxrwPPO6f\nsC0Omtn9I9VTBNVuCkOs6ohQBqOLIO/wCu1SRgYaVZfpFW/CAMEPyoLgqpLk\nczE8rgpuGzwWWwMNPp323pjIoK0HRqNcOp9B8peCENrvVTnNRsfbwXcw/F08\npDt50thhW7FqLDviHOsFe5a4WSbDo+LFUcrtnfFOw0g44hhLhm6FImWtqi3j\nTSzlCaALwzRmEoEkOCbIy5hVsYMN0Tc0eBZxXGd9QftdAtYrS8nb7cn8J72A\nnYYYaW9O7FiaAkEO4IZ1/Bpm8vu3+sE2M6VU6DmyDMva9+pZsRwgnxN5sqj4\nMd6m9slVaxFZyEGvnefLiIWNBoQ3B7NAvR3KA2bvw5vn8t5AmGOuadZ6ardt\nF9ATSSA5AZlhuKXDfK1tOAGtEQxDZKdPfPXcvuQIOD7v9YB4UG2MKd+k7Uua\nNmFycpkxTl1vkyv445I0PHhf9WohDH0GMUn4ZMxrul682KOVmCxGh3KmSLa+\nQ1QQ1eU0CUhaG8yjURBP0j5ItbuYkZM/B/l4ZrhWEsZOOfmu28hle7yNjtP/\nHOYAiySgq4A6t+ClpplahJpC2x5q21hDFJYDQTFRjHynS5yooADTQEwqzCLE\njDKdrIV7l64l4RJ1+c3eh5E4we7i8OG87gw0WbBCauRmYgZSGeyG8FjHkL5P\npynl\r\n=33jl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuOoMTniG6mgmxhpsPLN1qZD54JYnDqhpEO+gquKqZUwIgS1qYp5YEgPw+jIcvRFe+vjUEkZGIA6cu07tAdx4vwwI="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.0_1524147591902_0.945656133234196"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.1":{"name":"hbp-spark","version":"1.0.1","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3"},"dependencies":{"axios":"^0.18.0","lodash":"^4.17.5","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"d110d36ad8d597ed3a3791111b4570c1459ba2ac","_id":"hbp-spark@1.0.1","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-jjpe7oLjh2flas39X7GStwVwMWKokZrJpx5/1/NmxlKQ2hPZ9XGUykTB2QQpe0HO6MWpuSrUO9hdPx6iltxZQQ==","shasum":"e8a281d9f8aae6584da03e4dd2de7e4dd74af173","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.1.tgz","fileCount":6,"unpackedSize":9988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2LUwCRA9TVsSAnZWagAAAf0P/RtjUTjuhigfNNyRPWAj\nFRaLyqnM1becB4e9cW2JtUxPVWFwJ1ikDW4ogE39sD1pP5h8/lg6cxiAZOPL\nL2fVVLlvPU/4HnP1Ec2y63ZQrSlEUNIHgRHu5p6p4Ln9kCIFV4f3b0zghnD7\nehN7lPGfEctWD89354t2eoMgHjdB5f6DS8OiXI+cEOYdC5NtwPIajxRnIcBB\nppMIL6hKrkPklsaZqMdFrPov0R27kvQuLkVeufMQ3nz24aadK6lA8ea8O43e\niRZ+43x1jZMLZiUx3LFmunMIZkJhD5T/08wBfHAVuhnTOhEgv10OPW7Ui7CT\nwI1Alwamwb7Po6rlEfaV54zvllp6CamVtjtdSoeyT5L6wnfGQ86lVPLqofj3\n2UpTBHaetuF+U37jSi9isom/FdocWC614tsgKBpQgBX+C2nz7LDk6p95uIDL\nvaM3dPx7vnLOoBqkC01l3CA/qY1uWBsPco0xJhtufiNiGsD11ySxfpEmuryP\n8QigMbmIQ8djCWApqM4Ckf/xZs3ZRYhudpxkpjUksMxnC5DTe4RogW4kuGoF\nK3+5PSM+GfrFi/ciBbSmelsuynmjI1+QREosbiiHazAvPMnRq2hMuhElL0wk\nQzJTTJYsPF1HZdABWy6QXP4QJvlT2uqLaovsF+IOxm7Z5M8AZ6sE94nnrmF9\n65rg\r\n=LnPO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2kQqTukYBNZejt/yrNBbtftJkKZxoX2PFUVvMkmnPtAiAqdHfK3w7rOBwmrRjTGtSsU9GfJDzEh+sgYpb1vfFprQ=="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.1_1524151600081_0.19565895171590397"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.2":{"name":"hbp-spark","version":"1.0.2","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3"},"dependencies":{"axios":"^0.18.0","lodash":"^4.17.5","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"001e448343cdf3cc91419666cdbde1e4969da458","_id":"hbp-spark@1.0.2","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-t8AvYhkFYaeyURibXmdiGu9cXDa03f5/mGQO+t2sUG8zWQ9sJxm4yskQkhykYeQQoAh2Lx6s9qxMKXWUv3lBFQ==","shasum":"7a15740c8d2a7e2fd872917b0118758ed779d92c","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.2.tgz","fileCount":6,"unpackedSize":9995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2Lm2CRA9TVsSAnZWagAA0EQP/3JmrRH1UOTi6HkdaLzW\n5/T0Ka57/yLjjMc+0H7fbQpS0gSEdZP3vuny65l2OXdCg3FQu5iRt0TqXRBV\nmYilXTWoNfdPVCXBcWSoBbo6N37EsGfzbge1hSZyE3ubaZih7mWPItwfavzY\nQATZKgINr7G4dOLjJFUZKTdRUJX7FryOOWGcdKP0KhpvB8i1ynHxeaoCFxxs\nhQ7Sx9KuUIjdNEN5clAtqWbXFcSd7+GDyLEKY87NAjpj3JF8oS5uSu2ZVSv6\nbbiW0cmdBZd8hEraMkAFLpYA2r5aPEhM2keaZUhmmZWYHGL2Zl9tL52996CX\na38LFFnYk3TAqcGyuSqdI2j6DWz6JuXsRbwVg0DTwe7cUoqcnK3jL4TQiFc/\nNPExcQHAF7xYr6qDf1P9t+R0rCBHMZy35SrN/CMQ3wYd8VYI4MFGdsRP99YU\nE7KmUu6iXSkPHPE/v/5U3oQOjsqhyIFDId2UUTFdbhgNhzt6v9CG7qUocJTW\nwJxlUHwdn+H/2JEHpo+4oVL+TtH92CrqxxFgw8Cl7lbF4z4bmt7Ssbw8bJXc\n+iGQRxhAbInRzYJMBNpmgp3+rkmA3pozuwQ6VHy9FmMFf7ouw/3D9RYPT4OJ\nAZ8qH3OAMfREQepd1dWeiLTMndCk3weZVOx4tMVZARdtzGVB+j/BRJhEt1g/\no7pk\r\n=/CCE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5pGxT2TOTGOzXJCht4Srh0zPHXSvMff7DdP+T0XE4/QIgdzxqzp3NBk2sMwXYguMW4bAsoKOozrxAW5adv6qiYX8="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.2_1524152757392_0.9185221232313316"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.6":{"name":"hbp-spark","version":"1.0.6","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3"},"dependencies":{"axios":"^0.18.0","lodash":"^4.17.5","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"6eac573cee1e9acc046bfb2700f791d07f85fc49","_id":"hbp-spark@1.0.6","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-UdX3foW7CJSLpfEmYWyW0qF8zMZFI/hO/cGpGcQ/pDwG6K5nMUmnYime+4f62Bf9j0TDGuivgGqLdUNM9uG+Qg==","shasum":"bd9b97522ca3ca45dfdfdc1002c66acc83df26ef","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.6.tgz","fileCount":20,"unpackedSize":144667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2NszCRA9TVsSAnZWagAAQHIP/16IgZk9ZizxXgCX9BZ1\nOHdgaWSInsfuwNn1wB7ZBdMsgJsv4El0fQY9IdTJ/Nn1HJ/IyIvcmAFzJRK4\nqyGiD+kgebfhnrZLrEUeBKM7B1ATUsEvwidDWbsu4askuCaLJqnJIepJkFLK\n2rCfcL1zWiV4V0OLBhMHykerGI3KYwJGsxbWe6y72kc32AboRav425FzefeR\nybWY9Mg1nXTb9UH77amHkNgXV50+ULvsF6V2aN4uDL+iYJyH1nnvZigBWzHb\noDlaUygOLK3mGOw3Bn+D51mGRP87D6Pzqr0VJv3esodQ1tP0aiAvSJgvSa3w\nTgL7S9fubGtsEsx2HNv/4ucqcPR//TgErtXi3EWU4yrbehPma42vNc8vyB8m\n/mZDct+Of+JfG7nLyxXEaR0NUoAg7UB3PChWI+lZf/StDWxhzvQcjBO/l4f8\nZdCp/MAfvjvkfwhZzAU21we9nlx2Fl5WHwsf4dikmlkobkEJGvt40dcxSZVf\nx924e5FKQjm74O/UkXmDWa8wlR/Ofg6lC5RUqdWsYvGuywYCc53S0BnxXRQE\nAhGzGzSYAEm06OibuwaJBE9OiueX1t0f7fgDG8jf8NX7eZceLsBWRKncIGI8\nSDoXa+lPAwa8mWLkdv0gqKToG5nLIIMKmP4TYPZFZ2NoIJ2qrvCaWFVJ9q+V\nLjSD\r\n=PSG8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJk9cJF51HNvntEhJ/eA+Z2yH5RxrnrJwRb7LZOxZD5gIhAKIo+HeWQTl8CfeM8GKZG+E/iUQqKcEO291QK0GB3a1Z"}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.6_1524161331190_0.9447296653826367"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.7":{"name":"hbp-spark","version":"1.0.7","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3"},"dependencies":{"axios":"^0.18.0","lodash":"^4.17.5","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"d6d0cf918f5d72e42b20191a789e6d695ee595e0","_id":"hbp-spark@1.0.7","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-zQDOmFc6aAwmFcCZlVKvlWZWuls7nyD7wGuybrw2szEdv4F+YynbcrLUxKutBfTLb9a35NUBozmVkBtZYI0ujg==","shasum":"23f05ee6dabf5e86477a7526b9cef1afa64e1dc9","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.7.tgz","fileCount":20,"unpackedSize":144667,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa2N0XCRA9TVsSAnZWagAAj4cQAIcjCCOzehLqHMwF064y\nEREhZh1LqIEWVGi1G0vQqc7O89wrSJt620B5U9eOeblb5tf9VXr/FXplXCIU\nhpx/TVcQm4eFTqSwtgo/1xYrJbBHC9+1/VxHEeWwWKHCOmnhgLXGt4yjI1CO\n+zWgqCLO9TrTVMQsxiEStJBYbxVrkhGmvFq+YbMJKrgJi2/xaXhWCIZRoSyq\nBWolMF6OaEgR6PO8AGwOCONIB3fJMuj9ZbwuQP8+CjMf3ZAJvKqj70lznA1o\nLMf/+5wmVUNqYV8Ca1TgMDO2y41mcfkyy71Pf2M1eySw85h/t0DqgqmRm1n/\nOZh0z/QJuBRrZHuZL7A48EglvsAbDiU4vQcUKRlkfxNUI4tvYX2EumfxFqoF\n5798WfgQzvgqBOAmondT1jS73gQ8/GbydfAkITFWUF9IYNiZ0pxGwt/ceD/c\nc1spxCLV6qR8IIj1X7vHx5R2Mr3Rmmd6GKW+lPWF6PotoPegUbnPbEtYrLti\nuLSfSLd1JNDHthwvbQOW8UZ2Umdvgowh5ZCTNGEkboSJa6BuCL9mNX63FsCU\nYI8CV5MKfSo3SKuVbwHHTDbIHLEMs8oGe7+0h/640GdfAnv1HBK+BlT2iDgp\nu3LUDLCwmPsNgTQru/Oqhs0/umxbQmrFTtJ8+s94n86FODb9ouxu9k0obJRD\nUEV3\r\n=VZxj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyalgarmc9uf1BkUJrrtNpZSpwzeiuWpzJdUJIChG7CAIhAMUq2NAoKPXKWp087moVfdQ45l5oa6ISlUbzq13EVFTl"}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.7_1524161815427_0.8838737350286598"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.8":{"name":"hbp-spark","version":"1.0.8","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3"},"dependencies":{"axios":"^0.18.0","lodash":"^4.17.5","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"6a149dfb9730f9fc9805709bbc7afe2324e0bdc8","_id":"hbp-spark@1.0.8","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-WLRAP3ht5kMD/n0gn4PF/a4KXTMBot8Z4bIOl1p4OBL4Q6DfcjzAjd4aZ0siD41yex1cYlpaS59NZx/LLLLD7g==","shasum":"4a725efa1cf30706bf06c0c89a60be948add3636","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.8.tgz","fileCount":21,"unpackedSize":154936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3e9JCRA9TVsSAnZWagAAX2oP/0rUKcqV2KuVUXb7X4+/\nM4OhlUyVxwYKtI2ozIndbjmHHqNhxw8YhI9dh/lb208b9TELisFdZs4/TxLR\nkYbyKrAYbRkm3IWQkrtmL/X8x1vSXuWTsnIH5ErnmHBEfkiopgOtL3iCPSiA\nm5K2TZpWd4G97Ed0rSCafQ+oanr31IB45Lb6A6VOOtK6lRXu+IoOtUcGf5Y6\nbXgxYIwLcmytAIP7l33sMTxJjW4NOA9bB80N7coHZezGpc8DpRIjOLKdTZ7i\nmFvOVqWf88oYAPdZ2Uxj80JC2pJ1qKvs4sCQ6l6UocsIymQkNqEJosQlpDgx\nZq/4BGyXEcYgtPe7M5JvjWWAhYyfRRI76bsC0ADN7z7ialsvdvKqOc/nEdE2\nInVn7Sx7AVPo3xTV1mq59RZG6i3fQhy+RBvKSQX/c2WXdmC1vUiuUTJ8ld7+\nEtAbW6Y8X7q0ahw4M/kwAv5ONoUMldBenP1hf4gqh+Z0439lU7MMjNSr/Tja\nndTK9iD2VheqwP0y61AXDcv3M0sxni8CLPE0qREIJHddKVp03gBNzqu7H3uL\nXnv/iwh4b7op7abtJkzJDHxHwKDDZu5bNsSt6lgwRNDXVbE8II+fYIa48SwI\nxgHUE3yfKQX7lDJzwCNt887aRXCEFFEVTYDwgpLKl2UvjTBZiW1w+UF9QM+T\n7ibG\r\n=8VJb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCX4y8L1wXQ+QCbs2dhN97YoOfaqX/+lCRqa5bhnF1HNQIgXzvwAkH+JsY2NfDOFcc7E3Dubo7g2vmLXdoOWDzln6w="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.8_1524494152370_0.24773924566132255"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.9":{"name":"hbp-spark","version":"1.0.9","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=3.1","mobx-react":">=4.1","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"1beff238790b310930361ca1ee338d56155d1d7f","_id":"hbp-spark@1.0.9","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-kFS6O7MMaNdhb1XbDY2kg65yGLxWxyiEWc0ePCoD20hol6IIcyYYmTRotzK0oiBrlcwIyn7fFFNtLlZPo7MMzQ==","shasum":"82b4f3cf93fa1667e8c820e83f5014e841c386a9","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.9.tgz","fileCount":21,"unpackedSize":155099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3tyACRA9TVsSAnZWagAAElwQAJ0rD6X3JXuR+VKm/4hi\nXzOe3hwW8jmsy2hqpn7QdoKnHQWFoFfxYysEdCrjnApOVs1nPtvxpN1nmFx0\nz9rYAPHhSVhKl+dkc8jOz72vrx837ohyeUBSLwev7o7wtNmPdSGc329MAouW\nB6j50giEePioyGEomWBIdaEMsCy7ybEeBv0nUURzkRHVmPzWWxhQicxw7NWh\n52RL9FmuM6KhSQs6KMuCO8fKR22qyeHujo3nUacU4r34Z85oxG0EUQgMKkIu\n7vjCouRTIVEAjZiPNbokN3TvYixTc9ntsiQckLrqqtB2Hs0R3Bhemw1p7xaR\nkjqLwstCVDSM+rf4Z2ltTff4gu1xjay41t09R/rETi6JdNTIulcQpQ5M/Mk9\nDHL/97QUPOMay4MsIVnHOkhsTR4Y3J9Ysdmkx4HUQ+l6oOj34+24/C2OOpb4\no3qxNZ0+B/WIzxAPnCaQU8GB8o3oxIf6w5irs6x3zE0GLUv3RaCYVrebuDNQ\nQDqVuKUQFOVuMbZaUVY2VSjJpAVi3TADecOG8QSPniwVyjdzDItnfTIVR7Dw\nIMC6oM9D3ShaZvWm1ZJIh4qumkRHOMtMbyesb0gYz523voJby9KZ7CC/19KJ\ntNNLsRfU8DhxLrNgvkvL5n+gG+ysYuG3gYqh+UmyEwWRLIHBV9AM91dOPDXd\nauzE\r\n=ifdw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArPI0ghHYwpJYNvGzELWtxNZnBk2tJRHY1imPkYFCYXAiB/J8JubJ3BIjM6ZgrtY8M+EMI2iqM64Zi9O++fWLokRg=="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.9_1524554879915_0.914761828348506"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.10-unstable":{"name":"hbp-spark","version":"1.0.10-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=3.1","mobx-react":">=4.1","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"49e2b616b51b0c11b8aea4f19b481bdd538f43e1","readme":"# HBP React UI\n\nA library of useful user-interface components built with React on top of React Bootstrap and MobX.","readmeFilename":"README.md","_id":"hbp-spark@1.0.10-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-wiTsS3x+976vEmCBhLG0TbB+GP/alpt3LKQ5PmdKc+oqWDjnayGOK4IXQ9LVVi8luX3BJ9dn05tARs3v7uoAgg==","shasum":"84c0eba54f0b8c176618fb06c7e902f56515e7a5","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.10-unstable.tgz","fileCount":22,"unpackedSize":173931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3ugOCRA9TVsSAnZWagAAoE4P/iRSOBjGKiMfhO0dZ/Iw\nvzJh7xNb5H8sRYi6nnxVusdnueHxCL7MRRIPPrBOJ/k2Hr+Jzf+p8uevM6AB\nxi6pC70V+MkG8V9Ieky0DcezfUS1v7SyvHnuH+wWPLAqClq9x+Khi6CXzOad\nqFmBWJXCV6SySm4DkfmY6OYMcSqXzJa+YikdOZRB+Igw/6DORdSNyV+GA6VJ\nTHmR06vxgLweNEYZ888nBARvX/Bqe873ocIvydd5D5cARWZ/OF59dIihhbeH\nCmdntKz3j1kBGfvMPZBWlFP89pU0iDUl9NI6/OD5OivsIChu+R1rj7Sg5PP+\nqhviQgB3Ts7ZECUDfbJHHJ+Z2oMZ3oyAs3RbSGw8VMLBEI12tXJToZEC+gMN\nN04I5H5SZzmATJohytKVDugQ85C3+7helDB+QtriBmL0LY2qoLMV66PG2qz3\nXgaqbJfCE/DpFgtr7OsasuUXB4zo3PPoRK7KINS5k1+2ptcISLODcjV+qnpf\nrZB7bQ+a4qtTTFgj55NfbJXfWew9RNrIUia3L/RduvPiEo+9+DHqCJ3bDKQD\nnc/u8jLaXqjLtTx81nETRd6qzXIrDxhZwTQ3GVcJNPiM3vPz3FZbQA0Ca+FC\nC/7HFE6AxwodrbZrhTc3yVkBvv5TMDL3PKGR+ODEDhMFszlDTsOn7OCP4Aal\n2q5S\r\n=llD+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLBdwB+Fv1KZpeIP46Zi3g+lgJV8QyRBcxFq6GluvG2AiApdf1SCugf4Tvwqt0f3C1OLuRsx08bbDFRpZPFAkag2A=="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.10-unstable_1524557837785_0.6978624268340463"},"_hasShrinkwrap":false},"1.0.10":{"name":"hbp-spark","version":"1.0.10","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=3.1","mobx-react":">=4.1","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"3f90fa1140523d9ba559a0eb8f85b93f07b9e67c","_id":"hbp-spark@1.0.10","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-TgsQBR2cg4DM1Sp0gbxbiG5ehw45QrwwF4R4rpddwfr5CkaUcHP3iGpZ3/g05/8H5+jIPQFL5ujmRq/BDDTg/A==","shasum":"c7a5566a4f875cb5dc6399b803e66aa0440bd5ab","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.10.tgz","fileCount":22,"unpackedSize":173935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3vV5CRA9TVsSAnZWagAAFUYP/A9PkDOajn5CwKdz4PI8\nqSESmmRP2wctPtgkQEFkRygk/tS/JRRx6o+trCJOQvG4u2SHwyG1avDrE3H4\nUvsYBXxPXkzGdJT0HNAyzsp2fCpUDYmZjOvCG+FSruwva4ZbnhMRUYjQtq96\n3vJaHWQRfJ41zCEFF5E7C3pKRE26zunZPAOwYDvlgG5ZIvCflk2yz/fzWGk4\nHyiTLVhH9HpZhP3Vg9yt/gWwMBRbSPn87rAeqRFFKYJOz0uwrQIDB23lHn+m\n16vlbvU00aM+m5xfhxpzKmHgFZzP157AwixcS+h3pbwuzg04QV37/aqBXq9d\n8kxJf/PI2Woq+oCeJakcAKWGr4i/nXNPeNIQyR1N6vvjMBI6ty0FsS4euwBQ\nre4HqmHwlv5HlveNfmLX3urxjWbgI0s7BiPA+/PHVQeB4Qz2Bw+3BijN1S4R\nwAgo4bGZPyhqIhzHQ3UqKYdOrY1aBOIjkpTv2q98UAV9mKJZHIBrSL3SM/Uv\nDmmbf2NA1XkiuWp+/mPO2q8nTMftW66RqwtMw7q81F74OmaGtImEJWvR5/cH\n0fLi2wvvm33pBZLS8+NyF0a0LY9aHcRNAiMp+e1IgS32ZpqpzoMujAO64aOx\nx3+UWnL9DctAPiLmFhUKSqkr8LP5uCcCoPnQlvQbdw+wxqlFCTNFEeh8/fnf\nU6dX\r\n=2jdj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAravNOAJbBLf7d4+vsRoO1ZeCm1ipjNJZR294RzOBQUAiBq/nsNR1h5cUz9eVug4Mvu80+zpeOh1JU/um8cWgx2Xg=="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.10_1524561273543_0.31474562510440274"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.12-unstable":{"name":"hbp-spark","version":"1.0.12-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-syntax-async-functions":"^6.13.0","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=3.1.9","mobx-react":">=4.1","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"0592aba4bc8f1aec7450bc9d576404ea2d6fd895","readme":"# HBP React UI\n\nA library of useful user-interface components built with React on top of React Bootstrap and MobX.","readmeFilename":"README.md","_id":"hbp-spark@1.0.12-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-eLhEJpA+5/u3d8C2/qUg56Pn0HDJzmJIoiWdnKLSEJ5XwdYRH6ebfDLqynCptQZoE4coa0BKq2I923/BDvjEEQ==","shasum":"ad2bdfa344edc527fdeafa2e341c4556b70a4585","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.12-unstable.tgz","fileCount":22,"unpackedSize":176262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3xUhCRA9TVsSAnZWagAAMNgP/1crDlo9satl1WnJ9onX\nhYgn2bC+rG404HViF4FbZ9fzrzuZ7ziT9dcfQOkOvqIKmvXR4g0Zg59Ko8fy\nJGKYOYxzAsy3r/C7E2NhI/ZPZlVnbc/Ll/LWD5oPwiaOY8VCLX39HKJ2dLWs\nXNWWzJN2QNe2obEFJzVWLiOsqgGc3HiZlT3hTFkpwI5uyN0ZM4pa5LbP8mYm\nU8s2PSZsrvIpYmaUTx+guWr/nq6mzsqo8CmF1rEHXyHX56DMrcsiLzh06E8T\nGE5SSvIFmW+XvAnWIZGuHC8BgGT6Zx4Pm4rl6472d2iyZRPFkQBWoF8vY/Im\nO6Mg6BHBiPfuFSbYTKFZIwsvdaQTO9ZzJoR0ydX9TvjSGongQ/utr8cJSN2j\nwzsCodBgo+OCj9JzOM19g0LjcgF2nmYX9amUjiu85/TFu7s7dAYWUxqhN5fK\n51SdTGo7nWmTwcSA68Zpr6tKcX/KmeGI5snBIZW37Xc5uqmHcvvIw73bY5PF\nBnuEqiy+vHLNFMCQuznzl9u0ZIS1Sz0545DXC+DuMgwD/FH/3jkz1nVreS/y\njDPJEQ9MrixmBFvfXSwrEFgBdSl2us3R76lZXmUVjyIrt1tb4b1anlM1yWV9\no8Adx2+LK883hDEWARgHsusCzod3j/56rjTFVK2Rw7PpkHhNTIUcVb7HJAZd\niIFG\r\n=/7Xs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+F6yYoVJAP/aTmDVus5igg+13L4a7zP88fA9nmdNmLwIgSxEAToazPdxAgoucxiCQr5TWUPR+9sF2BgS8GaKKZIk="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.12-unstable_1524569377002_0.8980040502088085"},"_hasShrinkwrap":false},"1.0.13-unstable":{"name":"hbp-spark","version":"1.0.13-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=3.1.9","mobx-react":">=4.1","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"7eec1c747c03901ea332a033384eb27add5b616e","readme":"# HBP React UI\n\nA library of useful user-interface components built with React on top of React Bootstrap and MobX.","readmeFilename":"README.md","_id":"hbp-spark@1.0.13-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-1PQPJtkHn9w6Hkdf46eCX4KCFS9d78okcvnAuIKsoSMMq9ITnYd7WfROSqh+J/hfRE9a2gpFC5bGNlljB6K1XQ==","shasum":"a75b98d843a4f3d8dd754b6f00cbbd54778940cb","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.13-unstable.tgz","fileCount":22,"unpackedSize":176268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3xjaCRA9TVsSAnZWagAAZXMP/RJTXFnJLA2D6zD7cIVh\nF2DaxRaGWg7h1iXbmnk/XdU1grNrWBHCszxQsAwvCngciH/JGXPFI3JmaQcL\n8kzAqrAS1u6K3a9u3Hmqrbw7xSJHBUNxQL8zVrmQaMP4MTjHshX9mz+YUHWk\nquCaNqgWdfAUXTVH8vAgfIeDgsI5yEtB6i9lxpr8e5e+EIoEem8KM9iCt3jo\n1DG8HFbnldAWw4BT7vKh60ZXjFqkquuJCcj9wBm/2Pb4gT8vtJjzG9K/mIpI\n4IWqErVRy1ZXG9BGaI9E7TEnjt6sdjzVuYjK89zzecT5D2FixtR4Tgh46h4K\nu0gBb+9VWlMzYKup8uHwj3HhuV4Ehpk2u9ygaPfa7bKVrplYUCED2T2xVUvg\n2/UAz0AUhgbGZsKB5WwLkqFQZcP6AFk253/FpMkpXzTX/i1WWxgNF3osB2hq\nCcSKzlpG70Hrb4SYwAgc7ncYMZ2gA+QMDVmpk8oqCcPHpYNHsjmh7ldmiVmI\nGcpUC70c30LBMcCmcJuzv7bDSPPUvLd53OyEPGpqXW+lqwPMKurEoqLtP4j7\nvhoP7MNsc2WOylSCJBbXDoq8Mr4KglUOXzS8ElOvOGJf8/Ti1d+J1g47EgNX\nKjQuuvLU9U5w4pl/Rm+oiPWSVV20aFZSykYuqNpz3PMPGbXY4nlA3Aa+ij3y\n6PWL\r\n=ADJZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrKNOvYQ93BcATQ4V0DOkCYu+AqJB45O2XRIzVp1hXQgIgab5IAL7zyzKpbN9G9bikHTfJP1A+c0UFClE4vDPDC3s="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.13-unstable_1524570330135_0.4152646439997556"},"_hasShrinkwrap":false},"1.0.11":{"name":"hbp-spark","version":"1.0.11","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"2a896585eb183f72541667c465024c01990b3be0","_id":"hbp-spark@1.0.11","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-z65G7i0P/rSWro0r0GY77bUj0cHWniBSldPoTWYjAW1Ouhr3cd+8G0a0Rp/mREQ/Ixj8avs5jcKhRLA0PhMcQA==","shasum":"f42d9447983f8186a954103cbe1d80221c932440","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.11.tgz","fileCount":22,"unpackedSize":176580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3ygPCRA9TVsSAnZWagAAkWEP/iauoMEYlpJbQUFdhLMB\nUVqTnCtijIhGlhmNejHdTJyB45x1xYo+J9yFAFH/i7jrYmLwSVTW11+YYPfk\nw6BoksTBmU2WINBhD5yasxOu7ROrlQgMza/cufAwkLwANrZAJRxpkmA5MT71\n0ntqfGUDKg39ECbBGoOiwsLwcPEZKiCvBTpyjKSpPgZZVNL8ktgEvn/zuFG6\nV3pda0+OaR9s9nAwrO+HsEc7ssMWTM2JIGKhaGqysH8KdLtX4Sglu5ulgLMh\nCUJ2JqdwNPZ6CiftPhW1esHbtCB2wrAw2yvGsIy+kuQnbvmdI7j8xCDtV/hm\nKPbsxBGDIf7mWaEd69qTOdbJ5Cw0EOy700unrxpN4iAF9q95w0uw7LUi4e58\nmr/03lYIcPGNGPwKFywkx6+Ov213N/Wpv4glw0B3QL/qx0kqIfn3458tFEgw\nU73BEPKQN5ccRZQqqrasRKPLlPA8HMj8Yo8nuxL5DSuXMEP4BcNufgLsJeXb\ngQX84tW+eF3cxV9Dc5OtLJt8X+7hKyXerMLXBdq1jOdVhDpQOUwfxQHw+v6T\nexfGB8Ki2Hrs/Si9Ee/uOoTxjihqiBxaQFlrA/XFU2K59pBtDXbScff1Ctbd\n8q93BYUF+UmvqbtRP+UxqT8WkYJDD1OPL5FqCW1ZJ2ZBtwRhVhac7rBH2kbm\nFWku\r\n=kBA/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfRvw5YFH/qt2iIp8OZW3fFco2qiWiUU67k+wnk/E+OAiEAnLgJ5aADUYkF6x1f7Lad8GpV5PVDoVQl9y32QFxWwMg="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.11_1524574222934_0.72187198661235"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.12":{"name":"hbp-spark","version":"1.0.12","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"fc7931b359f8b936bd9cb9369e3835f818b46801","_id":"hbp-spark@1.0.12","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-IxnMHRJ0cKG8lyB6VXE10sbjRf23+aUtqQPIOtc4jbUi6f8KevcJr06I80mCyRTK1pod3Lr9V6Jgqo0UC7HHZw==","shasum":"4706bba029991f902efb8e6df4a929c2d05798f8","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.12.tgz","fileCount":22,"unpackedSize":178429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4CVlCRA9TVsSAnZWagAAt0oP/0chHlxlfsf4psJF3nnp\ntLJUKiDOGQAKZr7WCiZdLXfgHkchIDLcLHj83UE+N6z/lmho+c+9xyFT0Dy3\nvTVrcKUht/aO4/D6zDdckuq/nhdKYVwq3A8B8OaPb0ansSkgRLej+L/+jTbT\nQgAV+LRWu4O9zniRHDuckvdT7e9GJBswtXsq914gL+f6/s5h/tCDXIXBTcxz\nLvLNvlkhUs0OWuRi9O62jn64YVtexW4xfVHQL17rxOBSds2vc4Z0t2qZt5u8\ncn9u871aFjFJFL1DYvRMEaK5Dkohi6CHjORwhmc8vbEGb2mYQ7RrYk3tGPw/\nRkHL51D4S74nMej9bQYoSi65rUvlTUEeAMGePx1OBOYKWMNxgdYavAshlJ5X\nmb8CjigCPCHpGpnsiCPFLsSDjc9rf0N7EkrHvInNOfjCYWyikbt3x7AA9sWr\nV0qUG/z9VFnetENux++B9h0xgE5w7Z//iuEt4hzBtGR3FXhUILznyFGuf/dD\nFDZtl5wwI/+LE7uwCWY0UDzneXXTmna2GKzACvtWgFz3kL2QXm/9TX2Tw4iX\nUT0nBovFwwWrkUzHVIVpAV/K03ACiKsf9SHzgUnBL6PcJkE/T250Ho9KP/sE\nxNYfmABCfcoYs6zYsEnNjl7OFZPki0GBNQc0cNXiZ/cxcK19GAHR6AfiaXPX\ncFyj\r\n=/B0k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlA48qu8ji9VgEssePkw+KvHRrFkylM/WBNsn4CucT5AiA71xHgvX0T1Hb3oSO97eJxABzx5JcZrfUDiazYwoinOA=="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.12_1524639077346_0.2712371292577156"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.13":{"name":"hbp-spark","version":"1.0.13","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"f290b3bdfb8748b45f17e38aa1a5ecc951fd9f5a","_id":"hbp-spark@1.0.13","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-VzsTjlYVfc9gZnQsgbSs9dOeYeze6Tqx06JnUn5OcWfxFmonEM8Twim1+xlqJFPCxCheDl1sC1LcKBH4eXus7w==","shasum":"e21adb3dbe0860ffda8740bdb2007c346afb5fbd","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.13.tgz","fileCount":22,"unpackedSize":138209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4H2bCRA9TVsSAnZWagAAjacP/jJGC8onLa+oCFXuIGkG\nzwfL703uQdJAuV8+7K6Gee2R/LlLnJ92AWY4WWq/5mqO+QyjCkpe1yOlsJET\nI8ZG1zDvwi3Bgt2QvSeOooQu1GLnuOmAI/P+3cQrT9AERjDssyrPaav4B7Bs\nm2W6PhI5Rx5kXcUNZ6A56tBQrMow4xg+cdGytELqgukh5g12j6zIX3ci/QDz\n5Pkdu2RRLPKkQwM+Yw9gZo+Bg3WJ/hWMOOY8sknYuOKWcgnbOdkEosIjYrXl\nnaRi5ywFoebX9a3MHvsP0D1RFBheCGFdwWrWdx6DJRL48Di/x4VAJ3ohMzTm\nO/oSnz42SyvCE0kjTvuko2ii9xkFJ6jKl3vD5CQ2+PBh/FXOSSL/WKu3F4ow\nH6DbBwgtXbp+Z5VLZQ3NTPtcMOdDxqEda9HwBEIAn9JklC3KeynOJmZRmE4j\nKsA0V5gIACN2gFZTmmTNV74iZYTHSAausY22hwCv3FvrOzx+WLletoKjgyeh\nQK8f+WFF6uFCh2cWcbL2aRvKHcdincQoSMuDmfQLmKs5kAK6Lc3AyfqgjLrp\nOnwKplnDIpecZmrtb4brTKMwhv0vXPIpBNlFq7buVsL1j6OjaeMIR2GWVTkj\nX3fyIstDnQMLDTV2jyGNGC7ntwqCo4TfZxmWpNwQTeRQuA9t0GCLhgT/9D09\nP+Iu\r\n=PXcG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2kZgJBuDZRdSGOOxIIoi9KXL6tvlqAxKNc2OUwm5l1AiB32sAIdfDUXSFI1+0Kl0Q1nTUlHEHr4qbafo4vFHEPCA=="}]},"maintainers":[{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.13_1524661658990_0.9056739365711035"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.14-unstable":{"name":"hbp-spark","version":"1.0.14-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"86afe3570cc207cce561d55561074663a87a21b7","readme":"# HBP React UI\n\nA library of useful user-interface components built with React on top of React Bootstrap and MobX.","readmeFilename":"README.md","_id":"hbp-spark@1.0.14-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-6YdRAuemnQRA58UkQIB71QCaKr4P5ypEVMn4b9eP9Z4ZtEbMZAxkIbyeKh9phS5FlumGYbChU/UTketcl/Dxcw==","shasum":"579efaf2ad78ecd2d8d9dfebef432263da5d3360","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.14-unstable.tgz","fileCount":22,"unpackedSize":149999,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4aJACRA9TVsSAnZWagAARUEP/jivFpk5XhgoDFzRNlK5\nZ56G/WC63SOh3SC7+dCjF5YV32T7tu5edaVrWePV6elzaVAFm8UneUKmzQkr\nLDZ1kfAkgyxHh12DDpn+Q5F5qKI/EraOQ7MYSg7X3G7PO8/xt9/AX6br82jg\nfICjxIGsFIsuQbJxADspGpaYrqeXP+ar8DoWxwXGr7zLFnbQftEpYQuHA/V4\nEs7pCJMCCuwwUew0YpkLvwH6g6O3YDWmFKTAjM8bRBUzW94moNqHVGCnatkk\nxRx75MC4D7i4HimbUKDLzZycHsFTUG/mGmw7qVUXVw6HbnsKtbdov7/AyG7X\nzdCDHl2uD8EzvEfLxSotIxOXhE+xVlTrINn8zBXECesNxO7x2Urdkx9gO6fR\nDdkrcaNy8qUTfq4vQa7COIbd9TJyMfQIit+H7COr80rpbbVvEBECwutBARvy\noAH2vMjyjRKcYS16lnzuYEfulFcEvhAA7ExNoAe3AyiX2oiwaUOojNdmi5ZE\nV7J7Th3bf71WqKysn2cDctCHHKMlXdPrrse8rJTJRh0mHTkn1ny5PtVDmuoS\nCHfvf60i0ckSXG+Gph0Dy6ZqqiQkkeHfmyyLldRX+i5bzGNdwBqC9EGY1pgH\nAM5MbFGNcSniaUNCHoHMOZ7jaEamLwfkKiwX/fbXsZCd8mG+TsxfyG5N550x\nTsNO\r\n=Ja85\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1ONKkIXH39QiKq3r4EyV+ZBv57JIA5YcKJt69nWRdiAIhAKh4M14+qBf4c8jOAsHia48dZGRZbL5lC5lqz2Xgp63o"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.14-unstable_1524736576360_0.020081232941080662"},"_hasShrinkwrap":false},"1.0.15-unstable":{"name":"hbp-spark","version":"1.0.15-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"3b38e1db20faadc625fbdf8f890b72c976015c4a","readme":"# HBP React UI\n\nA library of useful user-interface components built with React on top of React Bootstrap and MobX.","readmeFilename":"README.md","_id":"hbp-spark@1.0.15-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-B3j7xGS7QUWM0P7UdVv7xZzppl0v/2/om5bZm5LexQk0+NBgrVuu+PHrhsDCGXCI5Ghd0JYThZ7KHgRjJxXQ/g==","shasum":"a4f0e91de91b1556184026f0835d4b9353e10acb","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.15-unstable.tgz","fileCount":22,"unpackedSize":150114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4aVSCRA9TVsSAnZWagAAzUAP/ir/AxKPFl++/vT+4IwJ\nog09jtmkrNbGXdjGhEJrf51xuwC3EjMaQhEZi4v0iLFpZ6CR6zXANWmegZHL\n3zgRFpUgRivUBBnf7o9N/eR7726lOO4sJqmTZtQTEenrWvDrMs0TagI4rEAB\nCcjlmw2sIHYq+M6o5ujsF3rsfmVnifqxXCW2bfdo95t5lVPJOK5vHETB10i6\ngcORWBEl0Oh8YQFxSPwb72AYtQ2+yPvGF4kQf7Z2JBOwfOY+4hnw2dttucK7\nZpuT/CVJMEvm3a2XgBw08yUGC3hHW7Uu+VXzIzP7nGkS23W0JRE5DSMKTpvW\ni37Ah/pNlodVDJWlH7QmlWeDIaYEA9fNbiwPHNH5scuBw3+XTS2PCIiYmVXf\nSqazYCqHNFxcbPDbR4o0EWKVj9TCR6bzfE/btZyf3ouDPCGS8CydCZyLWaFI\nE4wNjKC3D9hQpxI4wTikTIKzb5lKBK/dUMQU30u3rMPST9Ri03Fx2QEQXgYi\ncillUfgd38r3x1Svqmv2IaObbiNBs0Wd6/e3DVEhnr4mM7v1G1jMBYWM18Ic\naDEPUzDByqGlXZHJAtD7u4PXKx/Fe7oV7WLWSvWtH+hA2m24LxxaVWenswIC\nBO5h+LAq5dSH+1zkLojCN1qhn1USH9VQSbDGJd9wGn1AWZbuBxrcyGghtPv2\nkSz3\r\n=6n9F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBRggypTVC5ac/7n4rTyKkYHY++gUDy7uFDkau33lVTQIgJuU+MhpOOBzFpIbjb1sp07oG1y3L5y3H99FOEj3XkMk="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.15-unstable_1524737362580_0.12444454700167618"},"_hasShrinkwrap":false},"1.0.16-unstable":{"name":"hbp-spark","version":"1.0.16-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"f97ecf254b9515d70d346b58f9a297e645bf9ee5","readme":"# HBP React UI\n\nA library of useful user-interface components built with React on top of React Bootstrap and MobX.","readmeFilename":"README.md","_id":"hbp-spark@1.0.16-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-XN4AcYi/DkpZ4xD5lIGBLztcYXtbt6S8YeQyy6IZWNxKq4uwuDXFlsR/WeBW99Bt6f1e+uiy1MKRWBTU6IY8QQ==","shasum":"47b9cbc2974a672d5ff2625977e5e3ae8abc5147","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.16-unstable.tgz","fileCount":22,"unpackedSize":150114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4cMhCRA9TVsSAnZWagAAyIYP/0Qmx2bDs1lXizSViJZ7\nmOGnIOREPtw4+5G1/GFKnysxrecbFeJcdSVOpVJaJUwgr2zi3ENrO9+5Oioz\nGTu4Sye206ZYSTMMqr1gladPDr7PZXEwB/r8G3YJ+ZF9UQUzR7zl9GrAQ/04\nRxyNLbw/+6Fs32JxmwId7oA4KANazJxxC0sqoibzUIqik3r70huMrKm1TuSQ\ndRn397PjYptOf40VPNBZ6k0R2EbOLAUO3wQ3NuPyMt7OAT3aqGuP7TUU/iP3\nSJET80E71cfM+FR8o24KGtIkY5xKXs4R38FzNrGf7rIiQQ3qf0bct21eH9eU\nl4TlQ14WL1PWcTArgz2sTY2dqSfkFZv8OCNuttRMYiMV1xfL/bdc/pcOPg2D\n+Q4GW7AxSchqyrTAlLtOS2wE6dCK38BHnjQ4910DfakZpmI93L5yXPe4gAr8\ntZPprteT0R4ehhohqd+W8L5bIpmml5/IPRj3mVgKEq8NreuDGb+GGhDozxRF\nvUsfj6p45U45NK2z0Pkt5Bw+Xd5Rj6nL/2ZdA3htDVJitClgvCVF+Xd2uLAP\nK4u4T1+zG+ySio/lXuPNPYuyYq2XazFNDb8DKyxXKvhv8ss1LSDjpdTD/c0/\nOuyacmGPc9o2LOGxZvs/e7XlYltxXa+C9uFJNBDMxyPbwAsBSftKzgTKGWcq\nEywT\r\n=ZumN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeoufSns8fgKaZH+06u6UXyPYJk0jK79Rk6bd+vbeHegIgZjQ55g/Q7FRxpPYgbnDmHZn/muKCI7aKPdSGc3xMujA="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.16-unstable_1524744993037_0.21644510146228457"},"_hasShrinkwrap":false},"1.0.17-unstable":{"name":"hbp-spark","version":"1.0.17-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"262118ed8119eca63312680633a51e36770eddaa","readme":"# HBP React UI\n\nA library of useful user-interface components built with React on top of React Bootstrap and MobX.","readmeFilename":"README.md","_id":"hbp-spark@1.0.17-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-O8DgxMxqbzsaZTlkFDHyWgQ0lZG3QHuVP3GU7VQiCN7wH8TchZ9EBUGirLPwyCBs/g/+Qt29azR00qzSONr5Wg==","shasum":"c8c8781caf499d2ceb236af0790fb0672e0ca4e9","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.17-unstable.tgz","fileCount":22,"unpackedSize":150459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4ddRCRA9TVsSAnZWagAAyAcQAJlJwBK7A4cMBxRBgDcO\nTyjNPboGJ1ZAbaQC8cGshW2FZVj/FWFeTtd8dwInigbtKfXfA/ATGqdzOUGQ\nzk/XtkIaHkeFbwpuP7gvnGlFvw9ml2Xa93nptWNTLzGk5c/TbUgs/PySQkux\nC7YU5Cv1MXCDcCbHM2PQhGiM2XXZsX1oklpuYQIlKHQbcz8NOUN7I96CkjAh\nGx358bBCHdnZtrOZHg83JyhAUaVlyHrNdtub+iSz78y/pQvfaLzTRw+qsHWA\n9iGnGwDXMkM0qPtIQvoXtJfk9fN/GpevahilK5ePxyRWv/baEOVVyI5lvCMt\nvrWO1m87v2kmQDGFxvzgSNPPxQFPsyWZe36XcAkF+tByA9tR5eNdLFGajgPf\nLN1KwKMtJjKKy8pEml0LcRcThMNSt9DTrpX5GQRjMurDXH7xFXFp2czHUWJ4\np/QQn5lpy+KLWWhxf5EjkhXDutsjKaj0f2DVeXkBmx2UT9U2anJVLrXXqhrY\nWAQyRuYCZ2eIO0H0CV3B33SQ18ly7x+rhqI/DBYWPT4NP6+YWza6iRxlT6+L\nUmc1ziWRVR90iE/Pqx1pfiBNFLrHg30vzWn1pRk1wkpjt2weCWETyIylfD8L\nmQpDBF/XqIZRjkIDTrISXSE3+UTbxf3KLyBiehYS082oyQdkBkUQfq/SMsHy\nK/4D\r\n=NMg6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDHl53gl/9ZouMGIQquAjZVRRqRnQGaxDY38oV24C25wIgDKV9BZ+YMCMIddhO3P+UhiYEIn23NkUvSPia7Yh3MlI="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.17-unstable_1524750161150_0.6656890216141353"},"_hasShrinkwrap":false},"1.0.18-unstable":{"name":"hbp-spark","version":"1.0.18-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"17e3f135b70628890271ce875591a972407d547e","readme":"# HBP React UI\n\nA library of useful user-interface components built with React on top of React Bootstrap and MobX.","readmeFilename":"README.md","_id":"hbp-spark@1.0.18-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-DhCzg0NrEHBF5kX4wmdtr0uAPPLeuNJsKUk0Welm+A6QmIWdMrzvpttozm7GViR/ALHfYQzJclOhLrIcvJmz9w==","shasum":"8d774cc27415e08be0cc1ade2d40e478f9f91d56","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.18-unstable.tgz","fileCount":22,"unpackedSize":150459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4dmBCRA9TVsSAnZWagAAqjUP/1Tmg8wXlHZvI4ufpw2C\ngRt0MjSdW9rlH9Od4xj8vwBrdVPZLD37l3ponSztovFxfuBB9i5j8XnE/XxL\nX2T62ERDFBJ9cXz5ZSgcJDIVXj0+ZNA5hFhlh8dvPyKN+9OSdvcLm7VPlguK\nau3XNdbFx7mIgEGmYhRRVu+7Ty27/BgegArwiqQPYZ1BRLYr7nYbP4BotVhi\n3iIvOWVB+IG2TP5qk7MY9YPDBb+tHMwZnBT1lq6SWPx+27FzTX9lZuajZ9WH\naTl6WL/pg/Mu+NllKg1PeBIG65LHorFYetkNKzj5DwIVbd+zBU3rqC21GHPa\n5gxC3u2Z1wRTojFMDqEoB2dZgoF85JHMHAK7b9cupV6jpl+aVsYXX9gIljJZ\ngvkevpqo1y2kUZEXrVSCpnb6P8CtxEkDLjAZNFcnoMn0B+dvHqjJXf2FGDvn\nuNawUP6WMJmkGfCrblanu3pZvCJnODjhs4iPtOh2rVYQxXl0U74pblVBFFM6\nUNHjdJo8CKV+R8blVI/7IWXjPsVghXAl6cGx1bPgmoFKJ37eKh7zW2R+XUgu\nWHUeSll1Yg7c7k5dX3J5JJ/BAWVZ/xmHJUS1bXiVB9LraLzUeg+lwSnVCahM\nOP7kl8vYAgEGBz2yvVIkXhGAXQu3Xpvdx5C5YtG3QUMNgKqYakXhqoPAL0M5\nHISv\r\n=+b+s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAG2Espxj8kGVkZSbswilpmqp9NmBFoJn/Sn3EtCM4iPAiEApRjlFIa7HrfNu2eW3GSnOVIog9A9gkUXxJqxyHj2FHI="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.18-unstable_1524750721212_0.05616823873390886"},"_hasShrinkwrap":false},"1.0.14":{"name":"hbp-spark","version":"1.0.14","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md","test":"npx jest","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"f5a012c680b5f57a0ea351d389a9e1c115537255","_id":"hbp-spark@1.0.14","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-ql6JN/xE+XPfe4U8jzbxoTSJ9rJTF1ULK62dv8Ak5VvmKsPWc6hPG33kPXb6ARXWlqBLHwjZO3BwclFexy9cWA==","shasum":"3458130b27db6a681a09897b15a6041c038f2479","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.14.tgz","fileCount":22,"unpackedSize":150450,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4s3CCRA9TVsSAnZWagAAdTgP/ik4mzzGlRkKc/w0RU5E\n6OtphxlNlIZPun54r4tW59QNy1GWk8C08UpQgmM7tc+x+H+1QKJeCgg9mkC2\nHmzndn1afnLSA5HujCQLfd5DSyhh8/xHNVh8F1I8z33Sdor0Lk3WP2ULLAXC\nvBSuCsg1E5kE5pfT2ScowQaUO64wKIfuU2ZOVUzPKFkFaTaCm2DJzIjIg+3C\nUc5Doa4yVVl79O2/fTIISpb5a4hCx+9OrcGIu/Jtc+DFPxb/xFDNxay4ZKJY\nRedsxmFNEPXRUWx3ZWx8D9zY1TlfZx1JN3k4+NSVS8sM5LLmzz46qK0N1dH4\nYtq3d0IC0/X4GL3awoxZahcT5zoT88KNTT2XaspZJAKfJFFuP/J/SoiecEbX\nm17d6gu0gHaygI0JxP4upvD3k6jmM30g+n9omz/AyBmCBYgle68kRlW7S5r1\nREPQoM3YY2r3wqO+H1So+Y+ONkgx5wrfn3w6U4AFGLRJsxACfi/C8WFsdsbL\nsAvGiQVZqb7dA3H+UE4FFDDpEMZoMqrEumFnx+GnX1RGZZ3J1XM+AVWxX+m4\nQagx5Uhugu1B7eL9hB57a1nVW2/zafeaO5XWp3gBa/vVSS294m9Hr9l3z0fh\nXuqnPfdRBfB6ouSQIM8IChovTKhGizbEIm988LrvGoKwGpbWtbwmL1wH3rLk\n/Eyx\r\n=x3ei\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf2ERYx19fEEx9tUs0m3+W4RycqICx/6s8U2kW6+6k/QIgZC1Ggmrb5f1t6vuqufvoXjDtxPpLNBMsEE7UTUeSOdU="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.14_1524813249395_0.5885795515758869"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.19-unstable":{"name":"hbp-spark","version":"1.0.19-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && npx documentation build ./src/index.js -f md -o ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"8fc1720db429b4ef61ab5d15d927c11614709236","readme":"<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Form][1]\n    -   [values][2]\n-   [FormStore][3]\n    -   [changeValue][4]\n    -   [values][5]\n    -   [addNestedInstance][6]\n    -   [duplicateNestedInstance][7]\n    -   [moveNestedInstance][8]\n    -   [removeNestedInstance][9]\n    -   [update][10]\n    -   [parentPath][11]\n    -   [genSiblingPath][12]\n-   [action][13]\n-   [action][14]\n-   [Fields][15]\n    -   [InputTextField][16]\n        -   [Options][17]\n    -   [InputTextMultipleField][18]\n        -   [Options][19]\n    -   [SelectField][20]\n        -   [Options][21]\n    -   [DropdownSelectField][22]\n        -   [Options][23]\n    -   [TreeSelectField][24]\n        -   [Options][25]\n    -   [NestedField][26]\n        -   [Options][27]\n    -   [CheckBoxField][28]\n        -   [Options][29]\n    -   [TextAreaField][30]\n-   [NestedRemoveButton][31]\n-   [NestedMoveUpButton][32]\n-   [NestedMoveDownButton][33]\n-   [NestedDuplicateButton][34]\n-   [ClipboardStore][35]\n    -   [reset][36]\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][37]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][37]** a structured object of the form field values\n\n## FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][38]** the underlying form definition\n    Check the [Field Default Definitions][39] for implementation details\n\n### changeValue\n\n**Parameters**\n\n-   `path` **[string][40]** the field path\n-   `value` **[object][37]** the new value\n\n### values\n\nGet the form field values\n\nReturns **[object][37]** a structured object of the form field values\n\n### addNestedInstance\n\nadd a new instance to a nested field\n\n**Parameters**\n\n-   `path` **[string][40]** the field path\n\n### duplicateNestedInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][40]** the field path\n-   `index` **[object][37]** the instance to duplicate index\n\n### moveNestedInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `path` **[string][40]** the field path\n-   `index` **[object][37]** the instance to move\n-   `newIndex` **[object][37]** the index that instance will have\n\n### removeNestedInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][40]** the field path\n-   `index` **[object][37]** the instance to remove index\n\n### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][40]** the field path\n-   `updated` **[object][37]** the updated field definition\n\n### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][40] | field)** can be either be a field path or a field object\n\n### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][40] | field)** can be either a field path or a field object\n-   `name` **[string][40]** name of the sibling\n\n## action\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][37]** structured object of the form field values\n-   `mergeWithCurrentForm` **[object][37]** whether or not to reset the whole form or mergeWithCurrentForm with the passed in values\n-   `path` **[object][37]** base path for change\n-   `recursive` **[object][37]** whether or not to apply changes recursively (internal use)\n\n## action\n\nResets the whole form to their default values\n\n## Fields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][40]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][41]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][40]** \"\" - The field label\n-   `type` **[string][40]** \"InputText\"\n-   `inputType` **[string][40]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `value` **[string][40]** \"\" - The current value of the field\n-   `defaultValue` **[string][40]** \"\" - The defaultValue of the field\n-   `path` **[string][40]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][42]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][42]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][40]** \"\" - The field label\n-   `type` **[string][40]** \"InputTextMultiple\"\n-   `value` **[array][43]** \\[] - The current value of the field\n-   `defaultValue` **[array][43]** \\[] - The defaultValue of the field\n-   `path` **[string][40]** \"\" - Field path\n-   `max` **[number][44]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][42]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][42]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][40]** \"\" - The field label\n-   `type` **[string][40]** \"Select\"\n-   `value` **[string][40]** \"\" - The current value of the field\n-   `defaultValue` **[string][40]** \"\" - The defaultValue of the field\n-   `options` **[array][43]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `path` **[string][40]** \"\" - Field path\n-   `mappingValue` **[string][40]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][40]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][40]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][42]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][40]** \"\" - The field label\n-   `type` **[string][40]** \"DropdownSelect\"\n-   `value` **[array][43]** \\[] - The current value of the field\n-   `defaultValue` **[array][43]** \\[] - The defaultValue of the field\n-   `options` **[array][43]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][40]** null - url to fetch the select options from\n-   `path` **[string][40]** \"\" - Field path\n-   `allowCustomValues` **[boolean][42]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][40]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][40]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][40]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][42]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][44]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][42]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][40]** \"\" - The field label\n-   `type` **[string][40]** \"TreeSelect\"\n-   `value` **[array][43]** \\[] - The current value of the field\n-   `defaultValue` **[array][43]** \\[] - The defaultValue of the field\n-   `data` **[array][43]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][43]** null - url to fetch the tree structure from\n-   `path` **[string][40]** \"\" - Field path\n-   `mappingValue` **[string][40]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][40]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][40]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][40]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][42]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][44]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][42]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][42]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][42]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][40]** \"\" - The field label\n-   `buttonLabel` **[string][40]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][40]** \"Nested\"\n-   `min` **[number][44]** 1 - min of nested children the field can have\n-   `max` **[number][44]** 1 - max of nested children the field can have\n-   `fields` **[object][37]** {} - The nested fields definitions\n-   `value` **[string][40]** \\[] - The value of the field\n-   `defaultValue` **[array][43]** \\[] - The defaultValue of the field\n-   `path` **[string][40]** \"\" - Field path\n-   `topAddButton` **[string][40]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][40]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][42]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][40]** \"\" - The field label\n-   `type` **[string][40]** \"CheckBox\"\n-   `value` **[string][40]** false - The current value of the field\n-   `defaultValue` **[string][40]** false - The defaultValue of the field\n-   `path` **[string][40]** \"\" - Field path\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n## NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n## NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n## NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n## NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n## ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n### reset\n\nClear the value stored in the virtual clipboard\n\n[1]: #form\n\n[2]: #values\n\n[3]: #formstore\n\n[4]: #changevalue\n\n[5]: #values-1\n\n[6]: #addnestedinstance\n\n[7]: #duplicatenestedinstance\n\n[8]: #movenestedinstance\n\n[9]: #removenestedinstance\n\n[10]: #update\n\n[11]: #parentpath\n\n[12]: #gensiblingpath\n\n[13]: #action\n\n[14]: #action-1\n\n[15]: #fields\n\n[16]: #inputtextfield\n\n[17]: #options\n\n[18]: #inputtextmultiplefield\n\n[19]: #options-1\n\n[20]: #selectfield\n\n[21]: #options-2\n\n[22]: #dropdownselectfield\n\n[23]: #options-3\n\n[24]: #treeselectfield\n\n[25]: #options-4\n\n[26]: #nestedfield\n\n[27]: #options-5\n\n[28]: #checkboxfield\n\n[29]: #options-6\n\n[30]: #textareafield\n\n[31]: #nestedremovebutton\n\n[32]: #nestedmoveupbutton\n\n[33]: #nestedmovedownbutton\n\n[34]: #nestedduplicatebutton\n\n[35]: #clipboardstore\n\n[36]: #reset\n\n[37]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[38]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[39]: https://gitlab.humanbrainproject.org/HumanBrainProject/hbp-spark/blob/master/src/FieldsDefaultDefinition.js\n\n[40]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[41]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[42]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[43]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[44]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n","readmeFilename":"README.md","_id":"hbp-spark@1.0.19-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-wOb8RSfdAWkJJ9ORmIeFvKTjrLnf9aGzCgNuIzMXTIcXS+sQ+cHY6zN6Dx7hqbAT2QBSGzCDDEYhROwJ4EPIxQ==","shasum":"ee3e302675615f1dc7ea83119d62724dea6d34a6","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.19-unstable.tgz","fileCount":24,"unpackedSize":180438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6WN3CRA9TVsSAnZWagAAuEUP/iLaJr0c3q7/Yvt5yf+s\nkTx/NGFozfcxXK1c2UmIfZ/w0Q/DkuOeDC6PpWE1rGIrqbthfWFz980Tlwu0\n5c7aU8lWoYzDa2MTeYBrA4IhnCHbnLKIPqFgB98oGwlDRfsplN0baePEnXk+\n8qm5UE49i/fhFpl4FXMYzDvcC5MuCMM5tpdI7Xzx/dTLrWSdiy5VOuVnhRyc\nZSMrFu0pBqh6oFYa98w0KiVYZF/4MlnWqFgldls89Z8z+jpIhhMmHzc3rUcV\n6InjJRTx9c/hTWgGyipX0nZgRvAfl+gsP/gpP7LF3RK0ZYvJEGCQBS/YoJ1R\n1P4ztDMWh8oLTxfZQnoLqu/UJT06IoVwkbfymqvsG4OUHBal8jpsmfhJ3BsM\nuqwBAr+rrguxFUfneqCNi+hh71bfDKJ8SvAzaktE1YiXOJhpS07ooB5K9MAd\nc4hT+ggU7ElQ1ppOv9yXCQfUCF20UJwO85/CGVeBwL2979zCtCJOU5vDC030\n4OipNJVXO/I9lPMj3dnYSgh0ln+pfpE3oAm9jgXu7ZpaUOGFEoXML+Os0uBr\nNyTdOP0aN6izFe0IJQcuIrYYMb1hI8F7UPPZyRfRGKXH/pZNKNHWkY6Cx1Df\nl+QnPqkJGJ7HmEOqAoUq8f34NTBp+fF8TxOw+hgtX6jkxq2hqnvCTVBdaYj+\nGgZ5\r\n=s2pe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDFWaJk3nU5zt1Ak7I2mzWRLfUOJ3eNLnZNjJJxxX8qgIgTMjmM+DBjgZlWuQI5+qXEZqaykoG1jjTH70fp8uD4to="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.19-unstable_1525244790826_0.7744390544517139"},"_hasShrinkwrap":false},"1.0.19":{"name":"hbp-spark","version":"1.0.19","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && npx documentation build ./src/index.js -f md -o ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"2a30a675d15efae0e423250fc7e7b4846d210ae1","_id":"hbp-spark@1.0.19","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-MNjpKQ2M9PdNPkUom0Faw9fs4aF18a9Zai9TT92IfVooK0CB21zJYacLjBgW+h2O7tdfnKRyUCLy3NkPaSEvvw==","shasum":"77c42c2ca03d03e64f03f87ee97c15c16282c23c","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.19.tgz","fileCount":24,"unpackedSize":180429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6WOxCRA9TVsSAnZWagAAJjIQAJZaEeXKWGsvetgoMZZ0\np2RtPPU4dUcIDLNYPx9HK7nOAKzJ8CZbOEPaWjWq1idQZnhmRzAayBL4+lUN\nKTNEAL/GMAnhQBbL9L2oy8p2bzQiWT6u6tzqgrG/gy3q/YtJG/D/Qj2NN2fF\nfzlokb7TGdX6Qhi0ZA+ivvoxGFQBWtpTeYkesGin6FrHLmClF3YUamoec1aP\np9TgFsNRNk2wUfsUbzvIIT2vPmC8fl6buYdLoPGA3pjUwQSTjqNBsEB2CI80\nKHtbk8s1W99FmYL2RHsfhPn0Cedx4CwPS5ijMojRKNUAnt5Ofc0Ex0uc2dPz\ni1SUTOtGth1kT/JTINVgFo8jdQFYh3VqUWhBeRdTXnDUeOCRaXDwDT4pGNhW\nxK6mVPBec+BaD3qcdtO+OBzQdzU/Vx+tjzZQ2Fr0RI/ddA8env0ShPf5su2H\nebCGKB88SF81KorXTaw9CyxuOtldpU7+bd1Y7BuuovbBkG/lCnzdqY9+UT0s\nZy8T1tL3BtFZ+fWTob5b3uiNZCubNEbSkMdDtsapJ9dypkeX4x1YlhtztTVn\nBR8g2xsit9wyRNdbrD3S6++3KWPmyX1DFlSHrrbP3c/NrR6GOwAKsclFPYtx\nLy3KAJd4VEwtgS9a0tH0j/wDwE2zkQUV7CtJMEAfQg2FmnnT9iHrzEOUKoL3\n2t3L\r\n=0678\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEjSxH72X4JC29bji4ef31DSqSfLMOXQ0UlbJipP6lXDAiAEHIwsC2SRrK6oEOAlx1BWkFP0WK0hO6fwjBkCBxiAnw=="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.19_1525244847334_0.3732428757166122"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.20-unstable":{"name":"hbp-spark","version":"1.0.20-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && npx documentation build ./src/index.js -f md -o ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"e3a6421de65f1e703c071f8fadf4461bb2ee54e2","readme":"<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Form][1]\n    -   [values][2]\n-   [FormStore][3]\n    -   [changeValue][4]\n    -   [values][5]\n    -   [addNestedInstance][6]\n    -   [duplicateNestedInstance][7]\n    -   [moveNestedInstance][8]\n    -   [removeNestedInstance][9]\n    -   [update][10]\n    -   [parentPath][11]\n    -   [genSiblingPath][12]\n-   [action][13]\n-   [action][14]\n-   [Fields][15]\n    -   [InputTextField][16]\n        -   [Options][17]\n    -   [TextAreaField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [SelectField][22]\n        -   [Options][23]\n    -   [DropdownSelectField][24]\n        -   [Options][25]\n    -   [TreeSelectField][26]\n        -   [Options][27]\n    -   [NestedField][28]\n        -   [Options][29]\n    -   [CheckBoxField][30]\n        -   [Options][31]\n    -   [GroupSelectField][32]\n        -   [Options][33]\n-   [Fields][34]\n    -   [InputTextField][35]\n        -   [Options][36]\n    -   [TextAreaField][37]\n        -   [Options][38]\n    -   [InputTextMultipleField][39]\n        -   [Options][40]\n    -   [SelectField][41]\n        -   [Options][42]\n    -   [DropdownSelectField][43]\n        -   [Options][44]\n    -   [TreeSelectField][45]\n        -   [Options][46]\n    -   [NestedField][47]\n        -   [Options][48]\n    -   [CheckBoxField][49]\n        -   [Options][50]\n    -   [GroupSelectField][51]\n        -   [Options][52]\n-   [NestedRemoveButton][53]\n-   [NestedMoveUpButton][54]\n-   [NestedMoveDownButton][55]\n-   [NestedDuplicateButton][56]\n-   [ActionIcon][57]\n-   [GenericList][58]\n-   [ClipboardStore][59]\n    -   [reset][60]\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][61]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][61]** a structured object of the form field values\n\n## FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][62]** the underlying form definition\n    Check the [Field Default Definitions][63] for implementation details\n\n### changeValue\n\n**Parameters**\n\n-   `path` **[string][64]** the field path\n-   `value` **[object][61]** the new value\n\n### values\n\nGet the form field values\n\nReturns **[object][61]** a structured object of the form field values\n\n### addNestedInstance\n\nadd a new instance to a nested field\n\n**Parameters**\n\n-   `path` **[string][64]** the field path\n\n### duplicateNestedInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][64]** the field path\n-   `index` **[object][61]** the instance to duplicate index\n\n### moveNestedInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `path` **[string][64]** the field path\n-   `index` **[object][61]** the instance to move\n-   `newIndex` **[object][61]** the index that instance will have\n\n### removeNestedInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][64]** the field path\n-   `index` **[object][61]** the instance to remove index\n\n### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][64]** the field path\n-   `updated` **[object][61]** the updated field definition\n\n### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][64] | field)** can be either be a field path or a field object\n\n### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][64] | field)** can be either a field path or a field object\n-   `name` **[string][64]** name of the sibling\n\n## action\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][61]** structured object of the form field values\n-   `mergeWithCurrentForm` **[object][61]** whether or not to reset the whole form or mergeWithCurrentForm with the passed in values\n-   `path` **[object][61]** base path for change\n-   `recursive` **[object][61]** whether or not to apply changes recursively (internal use)\n\n## action\n\nResets the whole form to their default values\n\n## Fields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][64]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][65]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"InputText\"\n-   `inputType` **[string][64]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `value` **[string][64]** \"\" - The current value of the field\n-   `defaultValue` **[string][64]** \"\" - The defaultValue of the field\n-   `path` **[string][64]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][66]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][66]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"InputText\"\n-   `value` **[string][64]** \"\" - The current value of the field\n-   `defaultValue` **[string][64]** \"\" - The defaultValue of the field\n-   `path` **[string][64]** \"\" - Field path\n-   `emptyToNull` **[boolean][66]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"InputTextMultiple\"\n-   `value` **[array][67]** \\[] - The current value of the field\n-   `defaultValue` **[array][67]** \\[] - The defaultValue of the field\n-   `path` **[string][64]** \"\" - Field path\n-   `max` **[number][68]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][66]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][66]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"Select\"\n-   `value` **[string][64]** \"\" - The current value of the field\n-   `defaultValue` **[string][64]** \"\" - The defaultValue of the field\n-   `options` **[array][67]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `path` **[string][64]** \"\" - Field path\n-   `mappingValue` **[string][64]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][64]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][64]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][66]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"DropdownSelect\"\n-   `value` **[array][67]** \\[] - The current value of the field\n-   `defaultValue` **[array][67]** \\[] - The defaultValue of the field\n-   `options` **[array][67]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][64]** null - url to fetch the select options from\n-   `path` **[string][64]** \"\" - Field path\n-   `allowCustomValues` **[boolean][66]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][64]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][64]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][64]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][66]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][68]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][66]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"TreeSelect\"\n-   `value` **[array][67]** \\[] - The current value of the field\n-   `defaultValue` **[array][67]** \\[] - The defaultValue of the field\n-   `data` **[array][67]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][67]** null - url to fetch the tree structure from\n-   `path` **[string][64]** \"\" - Field path\n-   `mappingValue` **[string][64]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][64]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][64]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][64]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][66]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][68]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][66]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][66]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][66]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `buttonLabel` **[string][64]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][64]** \"Nested\"\n-   `min` **[number][68]** 1 - min of nested children the field can have\n-   `max` **[number][68]** 1 - max of nested children the field can have\n-   `fields` **[object][61]** {} - The nested fields definitions\n-   `value` **[string][64]** \\[] - The value of the field\n-   `defaultValue` **[array][67]** \\[] - The defaultValue of the field\n-   `path` **[string][64]** \"\" - Field path\n-   `topAddButton` **[string][64]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][64]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][66]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"CheckBox\"\n-   `value` **[string][64]** false - The current value of the field\n-   `defaultValue` **[string][64]** false - The defaultValue of the field\n-   `path` **[string][64]** \"\" - Field path\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"GroupSelect\"\n-   `value` **[array][67]** \\[] - The current value of the field\n-   `defaultValue` **[array][67]** \\[] - The defaultValue of the field\n-   `options` **[array][67]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][64]** null - url to fetch the select options from\n-   `path` **[string][64]** \"\" - Field path\n-   `mappingValue` **[string][64]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][64]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][64]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][66]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][68]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][66]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][66]** \"false\" - Display choices in line, default is display as a list\n\n## Fields\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"InputText\"\n-   `inputType` **[string][64]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `value` **[string][64]** \"\" - The current value of the field\n-   `defaultValue` **[string][64]** \"\" - The defaultValue of the field\n-   `path` **[string][64]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][66]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][66]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"InputText\"\n-   `value` **[string][64]** \"\" - The current value of the field\n-   `defaultValue` **[string][64]** \"\" - The defaultValue of the field\n-   `path` **[string][64]** \"\" - Field path\n-   `emptyToNull` **[boolean][66]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"InputTextMultiple\"\n-   `value` **[array][67]** \\[] - The current value of the field\n-   `defaultValue` **[array][67]** \\[] - The defaultValue of the field\n-   `path` **[string][64]** \"\" - Field path\n-   `max` **[number][68]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][66]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][66]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"Select\"\n-   `value` **[string][64]** \"\" - The current value of the field\n-   `defaultValue` **[string][64]** \"\" - The defaultValue of the field\n-   `options` **[array][67]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `path` **[string][64]** \"\" - Field path\n-   `mappingValue` **[string][64]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][64]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][64]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][66]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"DropdownSelect\"\n-   `value` **[array][67]** \\[] - The current value of the field\n-   `defaultValue` **[array][67]** \\[] - The defaultValue of the field\n-   `options` **[array][67]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][64]** null - url to fetch the select options from\n-   `path` **[string][64]** \"\" - Field path\n-   `allowCustomValues` **[boolean][66]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][64]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][64]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][64]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][66]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][68]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][66]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"TreeSelect\"\n-   `value` **[array][67]** \\[] - The current value of the field\n-   `defaultValue` **[array][67]** \\[] - The defaultValue of the field\n-   `data` **[array][67]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][67]** null - url to fetch the tree structure from\n-   `path` **[string][64]** \"\" - Field path\n-   `mappingValue` **[string][64]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][64]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][64]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][64]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][66]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][68]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][66]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][66]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][66]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `buttonLabel` **[string][64]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][64]** \"Nested\"\n-   `min` **[number][68]** 1 - min of nested children the field can have\n-   `max` **[number][68]** 1 - max of nested children the field can have\n-   `fields` **[object][61]** {} - The nested fields definitions\n-   `value` **[string][64]** \\[] - The value of the field\n-   `defaultValue` **[array][67]** \\[] - The defaultValue of the field\n-   `path` **[string][64]** \"\" - Field path\n-   `topAddButton` **[string][64]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][64]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][66]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"CheckBox\"\n-   `value` **[string][64]** false - The current value of the field\n-   `defaultValue` **[string][64]** false - The defaultValue of the field\n-   `path` **[string][64]** \"\" - Field path\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][64]** \"\" - The field label\n-   `type` **[string][64]** \"GroupSelect\"\n-   `value` **[array][67]** \\[] - The current value of the field\n-   `defaultValue` **[array][67]** \\[] - The defaultValue of the field\n-   `options` **[array][67]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][64]** null - url to fetch the select options from\n-   `path` **[string][64]** \"\" - Field path\n-   `mappingValue` **[string][64]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][64]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][64]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][66]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][68]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][66]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][66]** \"false\" - Display choices in line, default is display as a list\n\n## NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n## NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n## NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n## NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][64]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][69]\n-   `onClick` **[function][65]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][67]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][66]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][61]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `ItemBody` **[boolean][66]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][67]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n## ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n### reset\n\nClear the value stored in the virtual clipboard\n\n[1]: #form\n\n[2]: #values\n\n[3]: #formstore\n\n[4]: #changevalue\n\n[5]: #values-1\n\n[6]: #addnestedinstance\n\n[7]: #duplicatenestedinstance\n\n[8]: #movenestedinstance\n\n[9]: #removenestedinstance\n\n[10]: #update\n\n[11]: #parentpath\n\n[12]: #gensiblingpath\n\n[13]: #action\n\n[14]: #action-1\n\n[15]: #fields\n\n[16]: #inputtextfield\n\n[17]: #options\n\n[18]: #textareafield\n\n[19]: #options-1\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-2\n\n[22]: #selectfield\n\n[23]: #options-3\n\n[24]: #dropdownselectfield\n\n[25]: #options-4\n\n[26]: #treeselectfield\n\n[27]: #options-5\n\n[28]: #nestedfield\n\n[29]: #options-6\n\n[30]: #checkboxfield\n\n[31]: #options-7\n\n[32]: #groupselectfield\n\n[33]: #options-8\n\n[34]: #fields-1\n\n[35]: #inputtextfield-1\n\n[36]: #options-9\n\n[37]: #textareafield-1\n\n[38]: #options-10\n\n[39]: #inputtextmultiplefield-1\n\n[40]: #options-11\n\n[41]: #selectfield-1\n\n[42]: #options-12\n\n[43]: #dropdownselectfield-1\n\n[44]: #options-13\n\n[45]: #treeselectfield-1\n\n[46]: #options-14\n\n[47]: #nestedfield-1\n\n[48]: #options-15\n\n[49]: #checkboxfield-1\n\n[50]: #options-16\n\n[51]: #groupselectfield-1\n\n[52]: #options-17\n\n[53]: #nestedremovebutton\n\n[54]: #nestedmoveupbutton\n\n[55]: #nestedmovedownbutton\n\n[56]: #nestedduplicatebutton\n\n[57]: #actionicon\n\n[58]: #genericlist\n\n[59]: #clipboardstore\n\n[60]: #reset\n\n[61]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[62]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[63]: https://gitlab.humanbrainproject.org/HumanBrainProject/hbp-spark/blob/master/src/FieldsDefaultDefinition.js\n\n[64]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[65]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[66]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[67]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[68]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[69]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.0.20-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-sShXYpdAsjfVZ6j8kJteP1ZWLo5PN1dsUT12s0vnLRAuMsjO9WepFexa5y93tjewYC/PuD6Ydj7bKO5dlfSSWg==","shasum":"39614f234321e43fdaf08558cb394f11b4be2f43","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.20-unstable.tgz","fileCount":26,"unpackedSize":227184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6cTlCRA9TVsSAnZWagAAFZwP/RnYIM4fVemlfPEJ5EIa\npG8+PO+ZSpzVScdeeXaw3g47gvJE/EqW3AUwTWyAoMo4U06JH0BYeeKs3wJL\nZqAktI1cAUDT/Q0RzuSc0PEWgcu7GS0DlmLas6oserXJOSXOvt1YQweIlPIt\nb3VKGtL2cKMFv3ENgrT4j9JWnk7OpJuJFV1/AbVI7YPkjuooGaEP42nO1VO7\nnHnNmOr00mbi1Ab8cYehuD/TfO7RC2XAzgen2OVX5fN67VaiTFWe2ggbnvuR\nnx+tJ5fbw7DBfdDlkBqK1oQB/75i2/Pgme6s1+yJl/rxYOJrTnFtK8MSv5dO\n5Hqqh7NRemsdkOBdtJ4W4HoTYF4waQ9cxX1TuBVM5eQBDEqT77PaR4ic5Z7e\nKRfV5W4IF3GuDsE4gv3xIskeZnN3VVpPD3ok/aTzcTHkue3WeseMV05kFEGt\nU2H7bK7eZxH9CNZp4/DT97RyopDhILKN78xpsC3S6i0EFCYrblRTX2RZz8WB\n0Qeeta0+OQdBbZyThIB6Sr4jPzJTRkqAKjef9h1zB7MTNN/ywjNf99y09hFs\n+r0/BsJIUf/zXcGjsgZTe/IRESaXTeS/rrzu/bnYR8/90n67a932IOj2YATo\nxKIUgSNUSt9DIq+xQfxhAyzjWmpA25ktI4hxdzjnwiLMhR4S0h8JmAl6cbbx\nGJYm\r\n=eyPn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDX/sGhToYly9fkP31mJm3zwVwmvY96/5UPP0WktFs+IgIhAJE1DerWZ/uEFsiKtw1iNSnay8kCvV9Wo+fBsek3YdXb"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.20-unstable_1525269733215_0.03665313387337665"},"_hasShrinkwrap":false},"1.0.21-unstable":{"name":"hbp-spark","version":"1.0.21-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"2875b6ea88787e8b6501834782326685507db3cb","readme":"# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to simplify entry forms management in React applications.\n\n## Installation:\n\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependancies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so :\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below :\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form datas\n\nAt any time (e.g. a submit button click), the `values()` method of the FormStore object return the processed values from the form in a structured object matching the definition (including nested structures if you used the `Nested`field).\n\n## Example Application\n\nTo run the example application included in the package sources, open a console in the package root and run :\n\n```\nnpm install\n```\n\nThen change your current directory to `./example/`and run :\n\n```\nnpm install\nnpm run start\n```\n\n## Documentation\n\nYou can find a more detailed descriptions of the individual components, including information on how to use them below:\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [changeValue][3]\n        -   [values][4]\n        -   [injectValues][5]\n        -   [reset][6]\n        -   [addNestedInstance][7]\n        -   [duplicateNestedInstance][8]\n        -   [moveNestedInstance][9]\n        -   [removeNestedInstance][10]\n        -   [update][11]\n        -   [parentPath][12]\n        -   [genSiblingPath][13]\n    -   [ClipboardStore][14]\n        -   [reset][15]\n-   [Form][16]\n    -   [values][17]\n-   [FormFields][18]\n    -   [InputTextField][19]\n        -   [Options][20]\n    -   [InputTextMultipleField][21]\n        -   [Options][22]\n    -   [TextAreaField][23]\n        -   [Options][24]\n    -   [NestedField][25]\n        -   [NestedRemoveButton][26]\n        -   [NestedMoveUpButton][27]\n        -   [NestedMoveDownButton][28]\n        -   [NestedDuplicateButton][29]\n        -   [Options][30]\n    -   [SelectField][31]\n        -   [Options][32]\n    -   [DropdownSelectField][33]\n        -   [Options][34]\n    -   [TreeSelectField][35]\n        -   [Options][36]\n    -   [CheckBoxField][37]\n        -   [Options][38]\n    -   [GroupSelectField][39]\n        -   [Options][40]\n-   [SingleField][41]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][42]** the underlying form definition\n    Check the [Field Default Definitions][43] for implementation details\n\n#### changeValue\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n-   `value` **[object][45]** the new value\n\n#### values\n\nGet the form field values\n\nReturns **[object][45]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][45]** structured object of the form field values\n-   `mergeWithCurrentForm` **[object][45]** whether or not to reset the whole form or mergeWithCurrentForm with the passed in values\n-   `path` **[object][45]** base path for change (optional, default `\"\"`)\n-   `recursive` **[object][45]** whether or not to apply changes recursively (internal use) (optional, default `true`)\n\n#### reset\n\n**Parameters**\n\n-   `fields` **[object][45]** optional\n    Resets the whole form to their default values (optional, default `undefined`)\n\n#### addNestedInstance\n\nadd a new instance to a nested field\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n\n#### duplicateNestedInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n-   `index` **[object][45]** the instance to duplicate index\n\n#### moveNestedInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n-   `index` **[object][45]** the instance to move\n-   `newIndex` **[object][45]** the index that instance will have\n\n#### removeNestedInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n-   `index` **[object][45]** the instance to remove index\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n-   `updated` **[object][45]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][44] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][44] | field)** can be either a field path or a field object\n-   `name` **[string][44]** name of the sibling\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][45]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][45]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][44]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][46]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"InputText\"\n-   `inputType` **[string][44]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `value` **[string][44]** \"\" - The current value of the field\n-   `defaultValue` **[string][44]** \"\" - The defaultValue of the field\n-   `path` **[string][44]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][47]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][47]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][47]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readonly` **[boolean][47]** \"false\" - Is the field readonly or not, a readonly field won't be editable but will be processed by FormStore.values()\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"InputTextMultiple\"\n-   `value` **[array][48]** \\[] - The current value of the field\n-   `defaultValue` **[array][48]** \\[] - The defaultValue of the field\n-   `path` **[string][44]** \"\" - Field path\n-   `max` **[number][49]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][47]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][47]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][47]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readonly` **[boolean][47]** \"false\" - Is the field readonly or not, a readonly field won't be editable but will be processed by FormStore.values()\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"InputText\"\n-   `value` **[string][44]** \"\" - The current value of the field\n-   `defaultValue` **[string][44]** \"\" - The defaultValue of the field\n-   `path` **[string][44]** \"\" - Field path\n-   `emptyToNull` **[boolean][47]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][47]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readonly` **[boolean][47]** \"false\" - Is the field readonly or not, a readonly field won't be editable but will be processed by FormStore.values()\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `buttonLabel` **[string][44]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][44]** \"Nested\"\n-   `min` **[number][49]** 1 - min of nested children the field can have\n-   `max` **[number][49]** 1 - max of nested children the field can have\n-   `fields` **[object][45]** {} - The nested fields definitions\n-   `value` **[string][44]** \\[] - The value of the field\n-   `defaultValue` **[array][48]** \\[] - The defaultValue of the field\n-   `path` **[string][44]** \"\" - Field path\n-   `topAddButton` **[string][44]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][44]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][47]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"Select\"\n-   `value` **[string][44]** \"\" - The current value of the field\n-   `defaultValue` **[string][44]** \"\" - The defaultValue of the field\n-   `options` **[array][48]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `path` **[string][44]** \"\" - Field path\n-   `mappingValue` **[string][44]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][44]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][44]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][47]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"DropdownSelect\"\n-   `value` **[array][48]** \\[] - The current value of the field\n-   `defaultValue` **[array][48]** \\[] - The defaultValue of the field\n-   `options` **[array][48]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][44]** null - url to fetch the select options from\n-   `path` **[string][44]** \"\" - Field path\n-   `allowCustomValues` **[boolean][47]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][44]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][44]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][44]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][47]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][49]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][47]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"TreeSelect\"\n-   `value` **[array][48]** \\[] - The current value of the field\n-   `defaultValue` **[array][48]** \\[] - The defaultValue of the field\n-   `data` **[array][48]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][48]** null - url to fetch the tree structure from\n-   `path` **[string][44]** \"\" - Field path\n-   `mappingValue` **[string][44]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][44]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][44]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][44]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][47]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][49]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][47]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][47]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][47]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"CheckBox\"\n-   `value` **[string][44]** false - The current value of the field\n-   `defaultValue` **[string][44]** false - The defaultValue of the field\n-   `path` **[string][44]** \"\" - Field path\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"GroupSelect\"\n-   `value` **[array][48]** \\[] - The current value of the field\n-   `defaultValue` **[array][48]** \\[] - The defaultValue of the field\n-   `options` **[array][48]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][44]** null - url to fetch the select options from\n-   `path` **[string][44]** \"\" - Field path\n-   `mappingValue` **[string][44]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][44]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][44]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][47]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][49]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][47]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][47]** \"false\" - Display choices in line, default is display as a list\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #changevalue\n\n[4]: #values\n\n[5]: #injectvalues\n\n[6]: #reset\n\n[7]: #addnestedinstance\n\n[8]: #duplicatenestedinstance\n\n[9]: #movenestedinstance\n\n[10]: #removenestedinstance\n\n[11]: #update\n\n[12]: #parentpath\n\n[13]: #gensiblingpath\n\n[14]: #clipboardstore\n\n[15]: #reset-1\n\n[16]: #form\n\n[17]: #values-1\n\n[18]: #formfields\n\n[19]: #inputtextfield\n\n[20]: #options\n\n[21]: #inputtextmultiplefield\n\n[22]: #options-1\n\n[23]: #textareafield\n\n[24]: #options-2\n\n[25]: #nestedfield\n\n[26]: #nestedremovebutton\n\n[27]: #nestedmoveupbutton\n\n[28]: #nestedmovedownbutton\n\n[29]: #nestedduplicatebutton\n\n[30]: #options-3\n\n[31]: #selectfield\n\n[32]: #options-4\n\n[33]: #dropdownselectfield\n\n[34]: #options-5\n\n[35]: #treeselectfield\n\n[36]: #options-6\n\n[37]: #checkboxfield\n\n[38]: #options-7\n\n[39]: #groupselectfield\n\n[40]: #options-8\n\n[41]: #singlefield\n\n[42]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[43]: https://gitlab.humanbrainproject.org/HumanBrainProject/hbp-spark/blob/master/src/FieldsDefaultDefinition.js\n\n[44]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[45]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[46]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[47]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[48]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n","readmeFilename":"README.md","_id":"hbp-spark@1.0.21-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-DJoT78/EIXU0JDA/Gd8XyMtOZfCZ7yF1sn3BQcoqkLx665SFXojhUFKf/rDuPhiVkmt7+wgLZH6jsdw6WDlCJw==","shasum":"ba85f966f5de39ce907bda5204cf1464e8a22a01","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.21-unstable.tgz","fileCount":25,"unpackedSize":200926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6sslCRA9TVsSAnZWagAAYUAP/3/OdGA/kr92Cpd3tVQU\n+Zry4ryKfDYMgef8oolkaGXk83CqarRdyyAu4rVxw/LvjzcUDuznivyw71Kz\nNB4REcQ4W6287UzQwbHhlnhOLH3OFZv352gtOJZtG4WC0qZBeaEDPyXcR6dk\nIcV0X0w2l4WFDeh6zhnaXC11IuqXEeTvpuNUALshzmrlgPKw4KDusXkFtpuQ\ng6Egqn0PZbIvhnGfsyrj+IXV0zg3ui4ES1LMbivcZCBBH+7+f09YTKKcVPTi\n1PwPZuUPV3WheR0c3f6VP9qCNgtpiFEo0CtF23QVG9s/C/TJwqODTTJv50A2\nC7nJDi51me0mI3guvxJu1Zlkw4gUf7F5dbSVrZpr/2V/HXLpH7+oz+dCgf5u\ns49I/3k2vLlrwnR33lDyQeCrAp/dAtiAyLCaptBb/7yxotnRYvu6nBbpwM2Z\nuXI2jrb34wy9BNu/LqU8mOAdHGWSGSAXVJa4CUp0a8kO/XcBhsUpXL2rcO7S\n3LF0IxOesqugBxPZhWh+iqXyHJbjz8F4zuLanAxA7xGKSebHVtS6ALvkzRC1\nXntH6NEoRpHEOUTOLgGxxccip2JttYaBB+dyhuyXqnBK3kkDVcQW9bLgf/5D\nEJT91gD020xWgtASJthyeuOaXDBVcM06IsMQVwgJ9Qwt8K497GjhcwNti4Vg\nDHzM\r\n=dBNr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD06FiB8uBMOy7TKZcVRtKK+HMDVfQ/ZV8z/3Ea9A3UjQIhANM4bV/mWT94TdTKt4es6yqIaFQoBkMPz86YkVvtKjkr"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.21-unstable_1525336868810_0.35072409986265995"},"_hasShrinkwrap":false},"1.0.21":{"name":"hbp-spark","version":"1.0.21","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"e09ef0ef6848e5433c4a6f255a58d8407f030250","_id":"hbp-spark@1.0.21","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-OsYVyPHW33tlOcFe+ZCx5KKZ1PUWIBBDaBykCP9cpPCUXRIM9n7b+mw3Puik6Ed5ma0CMhMc8kHD7KmovuFfsw==","shasum":"d064431979667c3e66ff0e67c4902cc314643a1d","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.21.tgz","fileCount":25,"unpackedSize":200917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6stQCRA9TVsSAnZWagAAtl0P/2s+aP6CIjWiJ0wEHJCO\nz/zjJgRdaEesvFbj9tmzEn71Esq8afmJ8T8oF0rwye+ltxnv1LDQani+C8eZ\nhVCyoSGe2K0iUKO0pKFqjrhaYq9KQpXapkJb6Vziqudz/jY5984xEFxyfObi\n9YLrtRXq3j9nDjCFAUjr8rtZbsb2QBTtfWVILAhNTyjg8ciPuPGAZGOVyrxy\ngTNTIpwSR/FdnzKzLoaMmzmg8dzjKKU/I2Z040QWjLuLDskEireFWbPi6RgU\nrxC8ihpIIAvZGo4A6SfUUPgS8Ew9UmjmupjAPLxWqLsKTWRLJu23xYKU/PWL\nDyAINrNUVTts8wRhGDYTbwZD8q3kc19rkjQVJquYtOYp0KRxEn8uG7sVCDCJ\nlbrtLMXVxq5B2znfvU3v0H4fdq5m1/zENI0XS/+PZVjLY2cjlD4TIeo8NiNK\nq0hFqhRblbnXxevjijqthhmVdXj8WnzSi5MWDC9nvxp4Beq2ujK6iTBqNL01\nHLO3w8FalGtQBl/1s4mvE4SUNmoLLL2N6aRN9f1Ekfd6gSIUsWfTXw9Xrxd1\nTH44YNY2KMndas7lB3ObuZ8NScLyamPcor5XsVQijLAYzI1TmMMMllrh+YZT\nXVXJImzdx8ieCW19/Kxv6VNPhvO1u3Js2l5oko561r9tDPhhHQbyp9CBMOh8\nA2Uh\r\n=7GYJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA92xG3JC6GP5I5Jp0JhXcBgF8HnxaGyJjfJero69q7mAiEA7/ukKFrGKpKjXUPLwTjb9U2r1/g71phL7SCqCZyh0Ks="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.21_1525336905083_0.9175748660973653"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.22":{"name":"hbp-spark","version":"1.0.22","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"fc90c7847229d75387425a7c6fe0f05e1e771bc1","_id":"hbp-spark@1.0.22","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-uZ7a70Ft9j24YiMXjTJjAG8cLodVncXnIwjUHyviV/4hha20m2gaIXGPyKtzPCCz6X23VzE9l+d5JDBQ55M8aw==","shasum":"55542b6188edf7e435d82bdb79d4d1e9104927fb","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.22.tgz","fileCount":28,"unpackedSize":222825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7Fx2CRA9TVsSAnZWagAAz9AQAI+jktKdYci3V/NnDC+J\nq4fgf5QWgEBdR0NySTfadfZJZ8KrFsBbc57JBtolfijvXZ4Mh5RH+fsB1AKZ\nZxrBas7MeLDyXTGARZZHOdS1hGEpsNHhRCn76xGAzalTnnw8ZedSvV+fPVn8\npKq2wf2q+3DCRcFSVcKFONakPUbz9PtzfQ3yrJxNKDDhrg26lwCRuEQgqsyf\n40FdHSCQ0u5xo9HmYtrj2TYBciRD6OaCtB7FxqQ6VFMx8BDm9TmMXyj5rpil\n6wCdIwioM5B3A+MwRoKeLjr8GT1oKMW3WM94v+Y2kEySn8d8WLR1SvVTRJWw\nHTDgPORT+d9ok6Io9a+8rgBAEyym3p3DZw5qBEw/q36Lc6ASMLF8yMS7yKIZ\n6F3b2jMGziABHYNgcq/rs4YJKO9qNtGdgVI1oVAXfDHrIYMELG1Cqvk/CikQ\nAKAA1YnxhKjDiRQ+TP8T/zFK99KfcqvSPKI449NzK1X2B+ILojNrHEzlgRAh\nyORJ5Mxwt7pH3WnQfCmYqu8mYezv062lqLMQaG00lpkbs/vXuS1dUyXi6kse\nhLf6x8KQkPkMP9jwdV0pGxZnkoEWtr4PZlXHNSJoFh1vvZON4eRJEcGjOdFD\niKEEVu4w84xupmCjw4BZu0IBWszyvMrqszAa5oK81TQ2+m5JNT+dD2n+mGS7\ng28r\r\n=TItu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNmfVjfPNmoSfyTIXEUDgRS79NvlDnX3s8v44frHniaAIgOsjTrdyqrmnW6f7qcqItOH9yI4yCYQLTr3dnqV7TRew="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.22_1525439604141_0.7744267369815658"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.0.23-unstable":{"name":"hbp-spark","version":"1.0.23-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"b08b4ad13b13ce21b649b8389637f85cc613c01c","readme":"# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to simplify entry forms management in React applications.\n\n## Installation:\n\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependancies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so :\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below :\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form datas\n\nAt any time (e.g. a submit button click), the `values()` method of the FormStore object return the processed values from the form in a structured object matching the definition (including nested structures if you used the `Nested`field).\n\n## Example Application\n\nTo run the example application included in the package sources, open a console in the package root and run :\n\n```\nnpm install\n```\n\nThen change your current directory to `./example/`and run :\n\n```\nnpm install\nnpm run start\n```\n\n## Documentation\n\nYou can find a more detailed descriptions of the individual components, including information on how to use them below:\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [changeValue][3]\n        -   [values][4]\n        -   [injectValues][5]\n        -   [reset][6]\n        -   [addNestedInstance][7]\n        -   [duplicateNestedInstance][8]\n        -   [moveNestedInstance][9]\n        -   [removeNestedInstance][10]\n        -   [update][11]\n        -   [parentPath][12]\n        -   [genSiblingPath][13]\n    -   [ClipboardStore][14]\n        -   [reset][15]\n-   [Form][16]\n    -   [values][17]\n-   [FormFields][18]\n    -   [InputTextField][19]\n        -   [Options][20]\n    -   [InputTextMultipleField][21]\n        -   [Options][22]\n    -   [TextAreaField][23]\n        -   [Options][24]\n    -   [NestedField][25]\n        -   [NestedRemoveButton][26]\n        -   [NestedMoveUpButton][27]\n        -   [NestedMoveDownButton][28]\n        -   [NestedDuplicateButton][29]\n        -   [Options][30]\n    -   [SelectField][31]\n        -   [Options][32]\n    -   [DropdownSelectField][33]\n        -   [Options][34]\n    -   [TreeSelectField][35]\n        -   [Options][36]\n    -   [CheckBoxField][37]\n        -   [Options][38]\n    -   [GroupSelectField][39]\n        -   [Options][40]\n-   [SingleField][41]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][42]** the underlying form definition\n    Check the [Field Default Definitions][43] for implementation details\n\n#### changeValue\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n-   `value` **[object][45]** the new value\n\n#### values\n\nGet the form field values\n\nReturns **[object][45]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][45]** structured object of the form field values\n-   `mergeWithCurrentForm` **[object][45]** whether or not to reset the whole form or mergeWithCurrentForm with the passed in values\n-   `path` **[object][45]** base path for change (optional, default `\"\"`)\n-   `recursive` **[object][45]** whether or not to apply changes recursively (internal use) (optional, default `true`)\n\n#### reset\n\n**Parameters**\n\n-   `fields` **[object][45]** optional\n    Resets the whole form to their default values (optional, default `undefined`)\n\n#### addNestedInstance\n\nadd a new instance to a nested field\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n\n#### duplicateNestedInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n-   `index` **[object][45]** the instance to duplicate index\n\n#### moveNestedInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n-   `index` **[object][45]** the instance to move\n-   `newIndex` **[object][45]** the index that instance will have\n\n#### removeNestedInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n-   `index` **[object][45]** the instance to remove index\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][44]** the field path\n-   `updated` **[object][45]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][44] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][44] | field)** can be either a field path or a field object\n-   `name` **[string][44]** name of the sibling\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][45]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][45]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][44]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][46]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"InputText\"\n-   `inputType` **[string][44]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `value` **[string][44]** \"\" - The current value of the field\n-   `defaultValue` **[string][44]** \"\" - The defaultValue of the field\n-   `path` **[string][44]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][47]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][47]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][47]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readonly` **[boolean][47]** \"false\" - Is the field readonly or not, a readonly field won't be editable but will be processed by FormStore.values()\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"InputTextMultiple\"\n-   `value` **[array][48]** \\[] - The current value of the field\n-   `defaultValue` **[array][48]** \\[] - The defaultValue of the field\n-   `path` **[string][44]** \"\" - Field path\n-   `max` **[number][49]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][47]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][47]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][47]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readonly` **[boolean][47]** \"false\" - Is the field readonly or not, a readonly field won't be editable but will be processed by FormStore.values()\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"InputText\"\n-   `value` **[string][44]** \"\" - The current value of the field\n-   `defaultValue` **[string][44]** \"\" - The defaultValue of the field\n-   `path` **[string][44]** \"\" - Field path\n-   `emptyToNull` **[boolean][47]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][47]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readonly` **[boolean][47]** \"false\" - Is the field readonly or not, a readonly field won't be editable but will be processed by FormStore.values()\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `buttonLabel` **[string][44]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][44]** \"Nested\"\n-   `min` **[number][49]** 1 - min of nested children the field can have\n-   `max` **[number][49]** 1 - max of nested children the field can have\n-   `fields` **[object][45]** {} - The nested fields definitions\n-   `value` **[string][44]** \\[] - The value of the field\n-   `defaultValue` **[array][48]** \\[] - The defaultValue of the field\n-   `path` **[string][44]** \"\" - Field path\n-   `topAddButton` **[string][44]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][44]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][47]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"Select\"\n-   `value` **[string][44]** \"\" - The current value of the field\n-   `defaultValue` **[string][44]** \"\" - The defaultValue of the field\n-   `options` **[array][48]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `path` **[string][44]** \"\" - Field path\n-   `mappingValue` **[string][44]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][44]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][44]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][47]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"DropdownSelect\"\n-   `value` **[array][48]** \\[] - The current value of the field\n-   `defaultValue` **[array][48]** \\[] - The defaultValue of the field\n-   `options` **[array][48]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][44]** null - url to fetch the select options from\n-   `path` **[string][44]** \"\" - Field path\n-   `allowCustomValues` **[boolean][47]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][44]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][44]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][44]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][47]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][49]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][47]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"TreeSelect\"\n-   `value` **[array][48]** \\[] - The current value of the field\n-   `defaultValue` **[array][48]** \\[] - The defaultValue of the field\n-   `data` **[array][48]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][48]** null - url to fetch the tree structure from\n-   `path` **[string][44]** \"\" - Field path\n-   `mappingValue` **[string][44]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][44]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][44]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][44]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][47]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][49]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][47]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][47]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][47]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"CheckBox\"\n-   `value` **[string][44]** false - The current value of the field\n-   `defaultValue` **[string][44]** false - The defaultValue of the field\n-   `path` **[string][44]** \"\" - Field path\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][44]** \"\" - The field label\n-   `type` **[string][44]** \"GroupSelect\"\n-   `value` **[array][48]** \\[] - The current value of the field\n-   `defaultValue` **[array][48]** \\[] - The defaultValue of the field\n-   `options` **[array][48]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][44]** null - url to fetch the select options from\n-   `path` **[string][44]** \"\" - Field path\n-   `mappingValue` **[string][44]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][44]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][44]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][47]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][49]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][47]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][47]** \"false\" - Display choices in line, default is display as a list\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #changevalue\n\n[4]: #values\n\n[5]: #injectvalues\n\n[6]: #reset\n\n[7]: #addnestedinstance\n\n[8]: #duplicatenestedinstance\n\n[9]: #movenestedinstance\n\n[10]: #removenestedinstance\n\n[11]: #update\n\n[12]: #parentpath\n\n[13]: #gensiblingpath\n\n[14]: #clipboardstore\n\n[15]: #reset-1\n\n[16]: #form\n\n[17]: #values-1\n\n[18]: #formfields\n\n[19]: #inputtextfield\n\n[20]: #options\n\n[21]: #inputtextmultiplefield\n\n[22]: #options-1\n\n[23]: #textareafield\n\n[24]: #options-2\n\n[25]: #nestedfield\n\n[26]: #nestedremovebutton\n\n[27]: #nestedmoveupbutton\n\n[28]: #nestedmovedownbutton\n\n[29]: #nestedduplicatebutton\n\n[30]: #options-3\n\n[31]: #selectfield\n\n[32]: #options-4\n\n[33]: #dropdownselectfield\n\n[34]: #options-5\n\n[35]: #treeselectfield\n\n[36]: #options-6\n\n[37]: #checkboxfield\n\n[38]: #options-7\n\n[39]: #groupselectfield\n\n[40]: #options-8\n\n[41]: #singlefield\n\n[42]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[43]: https://gitlab.humanbrainproject.org/HumanBrainProject/hbp-spark/blob/master/src/FieldsDefaultDefinition.js\n\n[44]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[45]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[46]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[47]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[48]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n","readmeFilename":"README.md","_id":"hbp-spark@1.0.23-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-qZALQQA47mywhkJGeDlCcScvU8q760HH2C4K3ApUG6FaFlCgkr+Q1gS4gqiZ+CzDhYRQ9jtq5wefhixVUgvb5Q==","shasum":"7affa7a947ec15964e65342f48e1e2e8879eff18","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.0.23-unstable.tgz","fileCount":28,"unpackedSize":224352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7+7hCRA9TVsSAnZWagAA2/0P/03k6V1auycfz8LF91vG\nzaNYUWN2XKdqd1DkOTAORd+Ksd5zFRZtXq/mTw9omZ+ObSb8CVii3mJPDTd3\nkvawZ/FZNsNesDi8YVWSZZs39cCsSS1pdWzO6o6g2bC8JGXd6McR+AcEa2hL\np00ud+B2pMRvHw/7RBKMhIyfKgxhHKzxyu59p8kTbM5vc8DJTi11e+Q63j6Q\n91FR9i2qLAAr3AW6VR3TSVDAOz22J7yPwtDQXyq8Kt6MHUOAyKDZfwjtgOhk\nQAOTwXwtiDSesOhNDT8JNAV+1nH2Ar9y/bGkwBRge978yTL7U2/tEHFQphF5\nzupPsdsVW0CaEnWEcx06DVHsW9f8JzoSgVztYQEPqKdrZi6kHrqYE0RCkPle\nhv+F5fsEDhK3wJRFH7gh8zwoKQLM5J8O6+bAN3bSOeGfiHGaZO1OwEdzdaAI\n0O+d7RA1Pk1F7lLkn4uH7nRzajWFo94Ajs/yUjy+OtyzK4CcyU9GUZTKT7pZ\no8WXCfKPo2jizkithYDBSryhBDxmDmMvaJBx7lhgFFz4T/VNrEyZXIMuNM1R\nXNKeWlCSNTjD1ljc1ukuBtKgSro+RuMJIo2Q5R2FOnLsB3oNwJPQS7ira0Ao\n/ovI1zI4X8mS9/0jhgN6ebQvzA23X4gLlUphxUS0XC6kdoUXbjZUSCGk6UrV\nror5\r\n=MoUn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzG+arlBIDY3iQfYDQozwCRfJ8WDDBm0lj5yBZK3+wlAiAu8BRgmH8NojYUAzlpgpTFDFq2qJT/k5OzK2xSkSurGg=="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.0.23-unstable_1525673696191_0.7042028712874446"},"_hasShrinkwrap":false},"1.1.0-unstable":{"name":"hbp-spark","version":"1.1.0-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"503652e85ca1ba7c6d788a59ba7ecafddff983ee","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to simplify entry forms management in React applications.\n\n## Installation:\n\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependancies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so :\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below :\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form datas\n\nAt any time (e.g. a submit button click), the `values()` method of the FormStore object return the processed values from the form in a structured object matching the definition (including nested structures if you used the `Nested`field).\n\n## Example Application\n\nTo run the example application included in the package sources, open a console in the package root and run :\n\n```\nnpm install\n```\n\nThen change your current directory to `./example/`and run :\n\n```\nnpm install\nnpm run start\n```\n\n## Documentation\n\nYou can find a more detailed descriptions of the individual components, including information on how to use them below:\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [changeValue][3]\n        -   [values][4]\n        -   [injectValues][5]\n        -   [reset][6]\n        -   [addNestedInstance][7]\n        -   [duplicateNestedInstance][8]\n        -   [moveNestedInstance][9]\n        -   [removeNestedInstance][10]\n        -   [update][11]\n        -   [parentPath][12]\n        -   [genSiblingPath][13]\n    -   [ClipboardStore][14]\n        -   [reset][15]\n-   [Form][16]\n    -   [values][17]\n-   [FormFields][18]\n    -   [InputTextField][19]\n        -   [Options][20]\n    -   [InputTextMultipleField][21]\n        -   [Options][22]\n    -   [TextAreaField][23]\n        -   [Options][24]\n    -   [NestedField][25]\n        -   [NestedRemoveButton][26]\n        -   [NestedMoveUpButton][27]\n        -   [NestedMoveDownButton][28]\n        -   [NestedDuplicateButton][29]\n        -   [Options][30]\n    -   [SelectField][31]\n        -   [Options][32]\n    -   [DropdownSelectField][33]\n        -   [Options][34]\n    -   [TreeSelectField][35]\n        -   [Options][36]\n    -   [CheckBoxField][37]\n        -   [Options][38]\n    -   [GroupSelectField][39]\n        -   [Options][40]\n-   [SingleField][41]\n-   [ActionIcon][42]\n-   [GenericList][43]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][44]** the underlying form definition\n    Check the [Field Default Definitions][45] for implementation details\n\n#### changeValue\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `value` **[object][47]** the new value\n\n#### values\n\nGet the form field values\n\nReturns **[object][47]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][47]** structured object of the form field values\n-   `mergeWithCurrentForm` **[object][47]** whether or not to reset the whole form or mergeWithCurrentForm with the passed in values\n-   `path` **[object][47]** base path for change (optional, default `\"\"`)\n-   `recursive` **[object][47]** whether or not to apply changes recursively (internal use) (optional, default `true`)\n\n#### reset\n\n**Parameters**\n\n-   `fields` **[object][47]** optional\n    Resets the whole form to their default values (optional, default `undefined`)\n\n#### addNestedInstance\n\nadd a new instance to a nested field\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n\n#### duplicateNestedInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `index` **[object][47]** the instance to duplicate index\n\n#### moveNestedInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `index` **[object][47]** the instance to move\n-   `newIndex` **[object][47]** the index that instance will have\n\n#### removeNestedInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `index` **[object][47]** the instance to remove index\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `updated` **[object][47]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][46] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][46] | field)** can be either a field path or a field object\n-   `name` **[string][46]** name of the sibling\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][47]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][47]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][46]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][48]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"InputText\"\n-   `inputType` **[string][46]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `value` **[string][46]** \"\" - The current value of the field\n-   `defaultValue` **[string][46]** \"\" - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][49]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][49]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"InputTextMultiple\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][49]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"InputText\"\n-   `value` **[string][46]** \"\" - The current value of the field\n-   `defaultValue` **[string][46]** \"\" - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `emptyToNull` **[boolean][49]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `buttonLabel` **[string][46]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][46]** \"Nested\"\n-   `min` **[number][51]** 1 - min of nested children the field can have\n-   `max` **[number][51]** 1 - max of nested children the field can have\n-   `fields` **[object][47]** {} - The nested fields definitions\n-   `value` **[string][46]** \\[] - The value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `topAddButton` **[string][46]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][46]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"Select\"\n-   `value` **[string][46]** \"\" - The current value of the field\n-   `defaultValue` **[string][46]** \"\" - The defaultValue of the field\n-   `options` **[array][50]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `path` **[string][46]** \"\" - Field path\n-   `mappingValue` **[string][46]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][46]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][49]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"DropdownSelect\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `options` **[array][50]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][46]** null - url to fetch the select options from\n-   `path` **[string][46]** \"\" - Field path\n-   `allowCustomValues` **[boolean][49]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][46]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][46]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][49]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][49]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"TreeSelect\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `data` **[array][50]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][50]** null - url to fetch the tree structure from\n-   `path` **[string][46]** \"\" - Field path\n-   `mappingValue` **[string][46]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][46]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][46]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][49]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][49]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][49]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"CheckBox\"\n-   `value` **[string][46]** false - The current value of the field\n-   `defaultValue` **[string][46]** false - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"GroupSelect\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `options` **[array][50]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][46]** null - url to fetch the select options from\n-   `path` **[string][46]** \"\" - Field path\n-   `mappingValue` **[string][46]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][46]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][49]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][49]** \"false\" - Display choices in line, default is display as a list\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][46]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][52]\n-   `onClick` **[function][48]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][50]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][49]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][47]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][49]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][50]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #changevalue\n\n[4]: #values\n\n[5]: #injectvalues\n\n[6]: #reset\n\n[7]: #addnestedinstance\n\n[8]: #duplicatenestedinstance\n\n[9]: #movenestedinstance\n\n[10]: #removenestedinstance\n\n[11]: #update\n\n[12]: #parentpath\n\n[13]: #gensiblingpath\n\n[14]: #clipboardstore\n\n[15]: #reset-1\n\n[16]: #form\n\n[17]: #values-1\n\n[18]: #formfields\n\n[19]: #inputtextfield\n\n[20]: #options\n\n[21]: #inputtextmultiplefield\n\n[22]: #options-1\n\n[23]: #textareafield\n\n[24]: #options-2\n\n[25]: #nestedfield\n\n[26]: #nestedremovebutton\n\n[27]: #nestedmoveupbutton\n\n[28]: #nestedmovedownbutton\n\n[29]: #nestedduplicatebutton\n\n[30]: #options-3\n\n[31]: #selectfield\n\n[32]: #options-4\n\n[33]: #dropdownselectfield\n\n[34]: #options-5\n\n[35]: #treeselectfield\n\n[36]: #options-6\n\n[37]: #checkboxfield\n\n[38]: #options-7\n\n[39]: #groupselectfield\n\n[40]: #options-8\n\n[41]: #singlefield\n\n[42]: #actionicon\n\n[43]: #genericlist\n\n[44]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[45]: https://gitlab.humanbrainproject.org/HumanBrainProject/hbp-spark/blob/master/src/FieldsDefaultDefinition.js\n\n[46]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[47]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[48]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[52]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.0-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-fooQCiO5xYdsnq62Idn06yG5vEWbVbq+TO4MAx8pbiDb4QMg/z3fsRJ395nCPDlt1W0QvUQEfc6Q1i/2500NgQ==","shasum":"039a498a70a26b17d5f20ae7881071507cd253e2","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.0-unstable.tgz","fileCount":38,"unpackedSize":291061,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+XTdCRA9TVsSAnZWagAAnCAP/21auiAAI0KRGeofwqV9\n2KSAVrWcs/vHQWRxNehYFDD13KmbJrw/OuqkWERk4zcs4tuPWy8o/bYY1wrI\nTyxPr6QM0nxkGgXMWektLvCBRvAWf/aSkeX1NOs07de5roCY6Axr29PrgYMz\n4PpU/BPEGFHu6cgolQ5g1Q9G6jgvSNkB8MBtQFFOdL0BunDqhfBJ1CkVv3aV\nlf6xkbRmGAWyhyXNsRNPIoT7k33ETLQgWV2gF4npwNqstLX71B19RHwg5Kod\nOu2AikQuFsyRSlnLhKssA8xJZSGrGvWGHZ4u4Jc73y66jQuGa0r9l0LnTXgI\nM9wZTsYrZx8Qh3nBSP+Xb0aKIc3VEsAi5EwD4I5hb4wUmd1LKcPItxxOl4fV\ne9Mabdz3BglhdeqC5OglgtzRdms2o0qfBM/l684rZY1bQaBbM3Mb7CgIBVE6\njxiJQCMnU00MFj6thUEBVrOlG/jlRbOU0Dep4iZioaLG/pWBjcYFCnrcDDLZ\noH1XkvQDEbF3ndFV8gwl5SrUmzhLFSEWrc5NCTyrQQCc9RN00MEgcRPJeLoG\nLgtwNt2FGYR5EhzPYeVQiHjl8RXqZIpMUpnIP2LKa/tdLPSed1FIGRtArrad\n+8PmNU9uc0t4MJiImmIL0vKDfcWSfHkkNe1K3I5RWPltFK0aylmih942fdQN\nMV1J\r\n=71lf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCi9sZLHZN7Q3U6f1sTLFTLz8rhVTyC9SzJYJKexYLezgIhANgh4b0kE0AN4Gtj/KnlXqPBU2/uSLoAeSGNUomNAyi5"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.0-unstable_1526297820692_0.013242660022340758"},"_hasShrinkwrap":false},"1.1.0":{"name":"hbp-spark","version":"1.1.0","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"532983320405ccd7718775b89aa970facb435b13","_id":"hbp-spark@1.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-1kKg06lRN/ezs84hhkyJ0Ugx7+4Nqz4JOBk0mhHbeyFGej8nzRk4DEZF7cSxcRgf97YMkECUC2ggTDlNMVMx1g==","shasum":"5bc479c6f7df90be6a41df6c12aaa8884d0be852","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.0.tgz","fileCount":38,"unpackedSize":291052,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+XfnCRA9TVsSAnZWagAAfK8P/2hwr4SsgpbRRNZBSfjX\nYp6Am54XutHymuFvGoNvSD6kTBGWkmCsl/hjs8BQvtfspQteX7NrtJpIvBRk\nIHLj6+6ilInoGcp878cQDHfb2c2KSIRv8VtIAvV/bqIAzAsmt6tZOFnZzmNu\nJedTEojLS8119gfq1BQ9IEv8L1f3uzpFINoSSPm2MerTiQwwbKM5y0NMozXK\nZaX8U9T43dZVwLWglJGQZwNlKDsmLAuBAv/YsSBml8jZwTi+YGzrTSit2NHW\nRl8Z2pFKMvFkRsbaT1f433Lfa40Qm+yg4Z4nPOg2W2sI0RH6W9hY0mcvQYo/\nAXERuBkQUzuVqnda6qf45werIy9DwSQ96w/bkD8324ewnxkQrf5Bf5Goc3bA\n30gBzHqBJpcHh5yhzJz427mpR0gEh4+81zZ6sOHhYIMeFPMuBohaYKAvu3Sh\nUcKrnVYAbnvIlDuqp82QI6lGXITRf6EZaUJh6D3YhCI6Z86Ov23KOLjsdIUC\nNq3DDoEif3VJjTkV2kdaO07fC8AT1+RZB8B56Vr65xxJ/ovzlJMGYfCnU8v5\nzfWYnC0+w8Z9Ni8t4z9JRf0HKQ9i00WU9fni+6XojUEbyfy+VcjVYsHL4WQ5\nrH2oav+VbzkVhBJ+Duigeacf3B6MormYtBCYZqffZMMFhyef6BYZkzbmeCRp\n//Gr\r\n=xAHj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvIOEdudQTBlzCaG3xlg0y8/pDnXioyKK3AkNZEVY+LgIhAIy+QIUTD2tQUa3A0ZzSvfPSN0kYXP+tZ2QpKB+xRZ0N"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.0_1526298598000_0.5162067704910107"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.1":{"name":"hbp-spark","version":"1.1.1","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"1df0b93fe1433077abe558c7c7fd9d3a10c5cddb","_id":"hbp-spark@1.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-bq8GUK2eKqZy7LUKjDD1usUuZzXCETXmGO1120h0a7PQNhNrIHncFUb6Nj9y+zg6RCfSFJo9eWhNVcQkteKZog==","shasum":"9e1059670a51ac62ec23e809ae93a7e5c7e9c86e","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.1.tgz","fileCount":38,"unpackedSize":296504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+os+CRA9TVsSAnZWagAAkskQAJSUsgoRvrbXvHGBKuoC\n7wJ7hI/7u9siBcfiSLZinKsDXJvovGQJMOhRowX8dkXoyH8sy3XkSI9Ffosa\nfoKpprHmAFRtkptTdQQ5RITrUL/d4VAJ2b9AXB9q/bJ1k9quRE6/5aoYN/cN\nJsyUEtDHyED/XUJqrS/EHfEb/MYMqAVbu+8OQJumUssOWW3VbcX3ct/f7kBZ\n3lNPH5v4pvX8ZTJcp77Ph/HWM/tNJaX6HllnPlr4EqQ80iozwRvwC+klTfi5\nAofm7UCvHqwM/k11esBKsxU31rP/6L7H1f5SvD8Ha55gcDLm9Ln2OqG+yCSs\nZxFOGLVAMbqlX8L7KHjDwsIepQax5UmObuYQmMH0yKmDuJgI0DcsbnNje3Y8\nYVJYmN/PTX4NxWk/qk+pCW94GrwpnhkXV3Sy7TGMhF2l2KFH0LumCKhwoEWf\nNhfj+OTzBmgOpwJ8Go2maZj0p76MaWEuv9jz0f08zXxlpSpl0DXs03Y4MWnz\nasNPAvpoRAnOguBEGH8Sh++lKW6wK7wt75eVbGpRYLPeBwoCL0T00OcxkaPt\noXkrKNHpeAaHUQtSufFIpKJAm9Z/AUBZ/y/tl1B4Ur1IuACdm346ttg8Y5jV\n5NWnDtdvppTEICSpdEHMf0X6gypJmWJUycF9MJ1FGz6ibiT6usTQPXdII2wG\nVmRp\r\n=LQ0w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpPPM0NQzSus2oYo91nFNiTtMLMiLnF5GIxYP1OpkFrwIgO6XaJYJlpE7MFj3fJc/Ghda5gNN0reafL/lddAQUGG8="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.1_1526369085572_0.06569644312833"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.1-unstable":{"name":"hbp-spark","version":"1.1.1-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"20cdce4c445ca16da37056de0239514647eab988","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to simplify entry forms management in React applications.\n\n## Installation:\n\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependancies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so :\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below :\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form datas\n\nAt any time (e.g. a submit button click), the `values()` method of the FormStore object return the processed values from the form in a structured object matching the definition (including nested structures if you used the `Nested`field).\n\n## Example Application\n\nTo run the example application included in the package sources, open a console in the package root and run :\n\n```\nnpm install\n```\n\nThen change your current directory to `./example/`and run :\n\n```\nnpm install\nnpm run start\n```\n\n## Documentation\n\nYou can find a more detailed descriptions of the individual components, including information on how to use them below:\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [changeValue][3]\n        -   [values][4]\n        -   [injectValues][5]\n        -   [reset][6]\n        -   [addNestedInstance][7]\n        -   [duplicateNestedInstance][8]\n        -   [moveNestedInstance][9]\n        -   [removeNestedInstance][10]\n        -   [update][11]\n        -   [parentPath][12]\n        -   [genSiblingPath][13]\n    -   [ClipboardStore][14]\n        -   [reset][15]\n-   [Form][16]\n    -   [values][17]\n-   [FormFields][18]\n    -   [InputTextField][19]\n        -   [Options][20]\n    -   [InputTextMultipleField][21]\n        -   [Options][22]\n    -   [TextAreaField][23]\n        -   [Options][24]\n    -   [NestedField][25]\n        -   [NestedRemoveButton][26]\n        -   [NestedMoveUpButton][27]\n        -   [NestedMoveDownButton][28]\n        -   [NestedDuplicateButton][29]\n        -   [Options][30]\n    -   [SelectField][31]\n        -   [Options][32]\n    -   [DropdownSelectField][33]\n        -   [Options][34]\n    -   [TreeSelectField][35]\n        -   [Options][36]\n    -   [CheckBoxField][37]\n        -   [Options][38]\n    -   [GroupSelectField][39]\n        -   [Options][40]\n-   [SingleField][41]\n-   [ActionIcon][42]\n-   [GenericList][43]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][44]** the underlying form definition\n    Check the [Field Default Definitions][45] for implementation details\n\n#### changeValue\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `value` **[object][47]** the new value\n\n#### values\n\nGet the form field values\n\nReturns **[object][47]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][47]** structured object of the form field values\n-   `mergeWithCurrentForm` **[object][47]** whether or not to reset the whole form or mergeWithCurrentForm with the passed in values\n-   `path` **[object][47]** base path for change (optional, default `\"\"`)\n-   `recursive` **[object][47]** whether or not to apply changes recursively (internal use) (optional, default `true`)\n\n#### reset\n\n**Parameters**\n\n-   `fields` **[object][47]** optional\n    Resets the whole form to their default values (optional, default `undefined`)\n\n#### addNestedInstance\n\nadd a new instance to a nested field\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n\n#### duplicateNestedInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `index` **[object][47]** the instance to duplicate index\n\n#### moveNestedInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `index` **[object][47]** the instance to move\n-   `newIndex` **[object][47]** the index that instance will have\n\n#### removeNestedInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `index` **[object][47]** the instance to remove index\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `updated` **[object][47]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][46] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][46] | field)** can be either a field path or a field object\n-   `name` **[string][46]** name of the sibling\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][47]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][47]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][46]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][48]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"InputText\"\n-   `inputType` **[string][46]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `value` **[string][46]** \"\" - The current value of the field\n-   `defaultValue` **[string][46]** \"\" - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][49]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][49]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"InputTextMultiple\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][49]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"InputText\"\n-   `value` **[string][46]** \"\" - The current value of the field\n-   `defaultValue` **[string][46]** \"\" - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `emptyToNull` **[boolean][49]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `buttonLabel` **[string][46]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][46]** \"Nested\"\n-   `min` **[number][51]** 1 - min of nested children the field can have\n-   `max` **[number][51]** 1 - max of nested children the field can have\n-   `fields` **[object][47]** {} - The nested fields definitions\n-   `value` **[string][46]** \\[] - The value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `topAddButton` **[string][46]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][46]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"Select\"\n-   `value` **[string][46]** \"\" - The current value of the field\n-   `defaultValue` **[string][46]** \"\" - The defaultValue of the field\n-   `options` **[array][50]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `path` **[string][46]** \"\" - Field path\n-   `mappingValue` **[string][46]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][46]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][49]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"DropdownSelect\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `options` **[array][50]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][46]** null - url to fetch the select options from\n-   `path` **[string][46]** \"\" - Field path\n-   `allowCustomValues` **[boolean][49]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][46]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][46]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][49]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][49]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"TreeSelect\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `data` **[array][50]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][50]** null - url to fetch the tree structure from\n-   `path` **[string][46]** \"\" - Field path\n-   `mappingValue` **[string][46]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][46]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][46]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][49]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][49]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][49]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"CheckBox\"\n-   `value` **[string][46]** false - The current value of the field\n-   `defaultValue` **[string][46]** false - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"GroupSelect\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `options` **[array][50]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][46]** null - url to fetch the select options from\n-   `path` **[string][46]** \"\" - Field path\n-   `mappingValue` **[string][46]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][46]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][49]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][49]** \"false\" - Display choices in line, default is display as a list\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][46]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][52]\n-   `onClick` **[function][48]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][50]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][49]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][47]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][49]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][50]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #changevalue\n\n[4]: #values\n\n[5]: #injectvalues\n\n[6]: #reset\n\n[7]: #addnestedinstance\n\n[8]: #duplicatenestedinstance\n\n[9]: #movenestedinstance\n\n[10]: #removenestedinstance\n\n[11]: #update\n\n[12]: #parentpath\n\n[13]: #gensiblingpath\n\n[14]: #clipboardstore\n\n[15]: #reset-1\n\n[16]: #form\n\n[17]: #values-1\n\n[18]: #formfields\n\n[19]: #inputtextfield\n\n[20]: #options\n\n[21]: #inputtextmultiplefield\n\n[22]: #options-1\n\n[23]: #textareafield\n\n[24]: #options-2\n\n[25]: #nestedfield\n\n[26]: #nestedremovebutton\n\n[27]: #nestedmoveupbutton\n\n[28]: #nestedmovedownbutton\n\n[29]: #nestedduplicatebutton\n\n[30]: #options-3\n\n[31]: #selectfield\n\n[32]: #options-4\n\n[33]: #dropdownselectfield\n\n[34]: #options-5\n\n[35]: #treeselectfield\n\n[36]: #options-6\n\n[37]: #checkboxfield\n\n[38]: #options-7\n\n[39]: #groupselectfield\n\n[40]: #options-8\n\n[41]: #singlefield\n\n[42]: #actionicon\n\n[43]: #genericlist\n\n[44]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[45]: https://gitlab.humanbrainproject.org/HumanBrainProject/hbp-spark/blob/master/src/FieldsDefaultDefinition.js\n\n[46]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[47]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[48]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[52]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.1-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-bmZzFr7Z+hdUi6meOyIB7pDYdIWkmj2C5hUzDa7Imudb/kHOvPHjZc5lDF34UTCLjwHM+7wwJCf1DC2//1BLsw==","shasum":"304a0ff3bb965bee02623c9407b572c59d87c25a","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.1-unstable.tgz","fileCount":38,"unpackedSize":296513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+otrCRA9TVsSAnZWagAAtq8QAIARgk9186S4Tqg408QP\nZaTLX2IylYd/E40c86j4Q646pSDFgnmSV8tXe7mocgMtNZhgidtJP4IhEgEq\n4lmBvoUzEsg+qrqQSlB+ICmfSZRSkxcNfhhVmDY7U8s4wPOBh/P7P3B1HyYp\nHqn2uZeyDeLngNltJ9wO/CDG1FvuiF1pO1j7XK5/vISdxuczG+mNaZsJ6182\nsF5cogPgRJpK2KWwkTIGGo9W6/cNBq3heNsKDcvSnF7Zk+CxKH1PIKYpLcs2\neXOoirUu2D/cG43UIsEai14e2amK+AEjs2M7EaxfIHXDnN7FMEDEnJKVjpd8\n39sHpfD0qydLWCpzTNm+O6QHe2yWMkgP5Bmd5z9eok3ENQVc7cu/03cRNQZf\n+I4P5P6H7w5YOyqDRI8EO58ho7qyS94CWiIezJ1icdyNIlehCSfSxjZS8Hc1\nRPZ9u64TO22wZOkXcleVQj+IqUjsW/6KW4rjV+dKJ8sNrZ7uGR4CrzFm4l7C\nzJiVct1TyGbVZu3XHo3tExP1l30VBEx0FNZ9H5rdaWJOF8XCB+1V6JzeB5fx\n3cFdIoTjMXhrMvXLgPaIhJRAXfZwCwmdo3frpRTF4w8fwIzUqczJeWKP48o3\n7zugaKU7rnzW+OvoDLkg5r4gRsHkU7CpOYqd7qYs/KOxOVSonrGzfDpcLV2l\noIa8\r\n=t1hj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2l/mEYpo2MgmVYyPNPHFDFwvfnYy5t55Pu8m6h/JCHAIhAON+uNJ+ehJE7L6waf4ce9aAdz1iYZJtZZWcZxoASQf5"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.1-unstable_1526369131127_0.6797186738254222"},"_hasShrinkwrap":false},"1.1.2":{"name":"hbp-spark","version":"1.1.2","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"f2b393c8c397f225a14dd1b3a48b9c4227fd3448","_id":"hbp-spark@1.1.2","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-pFQ10mWppVth9gipzFa1reBR9tc61r3P/jc1TDJYeSTJcDziD47vBhrd4klRR1zT/B75116UGlkcNS0q8IU2BQ==","shasum":"63635f67bd07a9e839dcc22cacc3e4303406f679","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.2.tgz","fileCount":38,"unpackedSize":296575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+q/9CRA9TVsSAnZWagAATBIQAI7/EGjsQVG5q3Cv03YU\nq3Wf+n/LU7XnGowNQyUSgbTnZj65d0YqtJsJZDK8Sd559ZNfV2681zD1jBDj\nth7pmY/ausymq+F/cUnL5UpjmhsFe6t2qz7q8f1BbxK4MDTLJ/oaT3fOvjq8\nAQI1TPzkYQzjLCAUeK/gDwWJo0JC3GWfig7T3om1diYZNAFMy1qU7mXfeaYQ\npYavrVSFiKnhgQGhhSWGRRhXkic+iwjyiLI032OlqET37Uv8QziulzZDZ+Qr\n3g7Bv+E41CNWj5sfOavCSi54zOKjrE9r5L66FxpmOKdr+kQ0OKlQtKgvnmCh\n4HulhGfj9ytDP674zpbmG64G22kErwBt/l1MBbKu8RshGTg+tfpWYCrw+zMC\n1Uy3E5T9y7eLEgofRpNulfkxHT0NqTWdahnH2LcA5kAT+byEdI9WZKW8Hqv1\nKYPG4scYvjOJuUi/aNeytTa+/Y3zHmcMElQfjSGb7ek1qoAoGvRrpLZFyXa1\ntA83z0VQXgvYPZZQw0Esvk2Ipf2n+9Zuqdm4ecrZYkU7BzW+oMyFmGUnCMg/\njcIGn/lRRc69d6s8SiQMm9GxXCuhnA+DQD/D9ggziOaFXdd33hX+jL8Nkxla\nccKVS+l28s6vF5VlNuFx0mOZGQOzKK6Yx5++VL1U2v0rZ+5PSXgyOx3NNeEr\nMi9Z\r\n=njWe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp9GCJ75dm67BdJWD3elByDJL6aDSLINnjsXccOELMSQIgGrSqLsyS07VM6+Sr+kkTrU6sCP+ynuQjY8VcrKGQHYo="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.2_1526378492070_0.4467819462712823"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.2-unstable":{"name":"hbp-spark","version":"1.1.2-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"c11cd3f3a3e8b7a19ef24b38d394cf7a2591093b","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to simplify entry forms management in React applications.\n\n## Installation:\n\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependancies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so :\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below :\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form datas\n\nAt any time (e.g. a submit button click), the `values()` method of the FormStore object return the processed values from the form in a structured object matching the definition (including nested structures if you used the `Nested`field).\n\n## Example Application\n\nTo run the example application included in the package sources, open a console in the package root and run :\n\n```\nnpm install\n```\n\nThen change your current directory to `./example/`and run :\n\n```\nnpm install\nnpm run start\n```\n\n## Documentation\n\nYou can find a more detailed descriptions of the individual components, including information on how to use them below:\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [changeValue][3]\n        -   [values][4]\n        -   [injectValues][5]\n        -   [reset][6]\n        -   [addNestedInstance][7]\n        -   [duplicateNestedInstance][8]\n        -   [moveNestedInstance][9]\n        -   [removeNestedInstance][10]\n        -   [update][11]\n        -   [parentPath][12]\n        -   [genSiblingPath][13]\n    -   [ClipboardStore][14]\n        -   [reset][15]\n-   [Form][16]\n    -   [values][17]\n-   [FormFields][18]\n    -   [InputTextField][19]\n        -   [Options][20]\n    -   [InputTextMultipleField][21]\n        -   [Options][22]\n    -   [TextAreaField][23]\n        -   [Options][24]\n    -   [NestedField][25]\n        -   [NestedRemoveButton][26]\n        -   [NestedMoveUpButton][27]\n        -   [NestedMoveDownButton][28]\n        -   [NestedDuplicateButton][29]\n        -   [Options][30]\n    -   [SelectField][31]\n        -   [Options][32]\n    -   [DropdownSelectField][33]\n        -   [Options][34]\n    -   [TreeSelectField][35]\n        -   [Options][36]\n    -   [CheckBoxField][37]\n        -   [Options][38]\n    -   [GroupSelectField][39]\n        -   [Options][40]\n-   [SingleField][41]\n-   [ActionIcon][42]\n-   [GenericList][43]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][44]** the underlying form definition\n    Check the [Field Default Definitions][45] for implementation details\n\n#### changeValue\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `value` **[object][47]** the new value\n\n#### values\n\nGet the form field values\n\nReturns **[object][47]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][47]** structured object of the form field values\n-   `mergeWithCurrentForm` **[object][47]** whether or not to reset the whole form or mergeWithCurrentForm with the passed in values\n-   `path` **[object][47]** base path for change (optional, default `\"\"`)\n-   `recursive` **[object][47]** whether or not to apply changes recursively (internal use) (optional, default `true`)\n\n#### reset\n\n**Parameters**\n\n-   `fields` **[object][47]** optional\n    Resets the whole form to their default values (optional, default `undefined`)\n\n#### addNestedInstance\n\nadd a new instance to a nested field\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n\n#### duplicateNestedInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `index` **[object][47]** the instance to duplicate index\n\n#### moveNestedInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `index` **[object][47]** the instance to move\n-   `newIndex` **[object][47]** the index that instance will have\n\n#### removeNestedInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `index` **[object][47]** the instance to remove index\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][46]** the field path\n-   `updated` **[object][47]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][46] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][46] | field)** can be either a field path or a field object\n-   `name` **[string][46]** name of the sibling\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][47]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][47]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][46]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][48]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"InputText\"\n-   `inputType` **[string][46]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `value` **[string][46]** \"\" - The current value of the field\n-   `defaultValue` **[string][46]** \"\" - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][49]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][49]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"InputTextMultiple\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][49]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"InputText\"\n-   `value` **[string][46]** \"\" - The current value of the field\n-   `defaultValue` **[string][46]** \"\" - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `emptyToNull` **[boolean][49]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `buttonLabel` **[string][46]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][46]** \"Nested\"\n-   `min` **[number][51]** 1 - min of nested children the field can have\n-   `max` **[number][51]** 1 - max of nested children the field can have\n-   `fields` **[object][47]** {} - The nested fields definitions\n-   `value` **[string][46]** \\[] - The value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `topAddButton` **[string][46]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][46]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"Select\"\n-   `value` **[string][46]** \"\" - The current value of the field\n-   `defaultValue` **[string][46]** \"\" - The defaultValue of the field\n-   `options` **[array][50]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `path` **[string][46]** \"\" - Field path\n-   `mappingValue` **[string][46]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][46]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][49]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"DropdownSelect\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `options` **[array][50]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][46]** null - url to fetch the select options from\n-   `path` **[string][46]** \"\" - Field path\n-   `allowCustomValues` **[boolean][49]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][46]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][46]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][49]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][49]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"TreeSelect\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `data` **[array][50]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][50]** null - url to fetch the tree structure from\n-   `path` **[string][46]** \"\" - Field path\n-   `mappingValue` **[string][46]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][46]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][46]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][49]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][49]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][49]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"CheckBox\"\n-   `value` **[string][46]** false - The current value of the field\n-   `defaultValue` **[string][46]** false - The defaultValue of the field\n-   `path` **[string][46]** \"\" - Field path\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][46]** \"\" - The field label\n-   `type` **[string][46]** \"GroupSelect\"\n-   `value` **[array][50]** \\[] - The current value of the field\n-   `defaultValue` **[array][50]** \\[] - The defaultValue of the field\n-   `options` **[array][50]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][46]** null - url to fetch the select options from\n-   `path` **[string][46]** \"\" - Field path\n-   `mappingValue` **[string][46]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][46]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][46]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][49]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][51]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][49]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][49]** \"false\" - Display choices in line, default is display as a list\n-   `disabled` **[boolean][49]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][49]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][46]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][52]\n-   `onClick` **[function][48]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][50]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][49]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][47]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][49]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][50]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #changevalue\n\n[4]: #values\n\n[5]: #injectvalues\n\n[6]: #reset\n\n[7]: #addnestedinstance\n\n[8]: #duplicatenestedinstance\n\n[9]: #movenestedinstance\n\n[10]: #removenestedinstance\n\n[11]: #update\n\n[12]: #parentpath\n\n[13]: #gensiblingpath\n\n[14]: #clipboardstore\n\n[15]: #reset-1\n\n[16]: #form\n\n[17]: #values-1\n\n[18]: #formfields\n\n[19]: #inputtextfield\n\n[20]: #options\n\n[21]: #inputtextmultiplefield\n\n[22]: #options-1\n\n[23]: #textareafield\n\n[24]: #options-2\n\n[25]: #nestedfield\n\n[26]: #nestedremovebutton\n\n[27]: #nestedmoveupbutton\n\n[28]: #nestedmovedownbutton\n\n[29]: #nestedduplicatebutton\n\n[30]: #options-3\n\n[31]: #selectfield\n\n[32]: #options-4\n\n[33]: #dropdownselectfield\n\n[34]: #options-5\n\n[35]: #treeselectfield\n\n[36]: #options-6\n\n[37]: #checkboxfield\n\n[38]: #options-7\n\n[39]: #groupselectfield\n\n[40]: #options-8\n\n[41]: #singlefield\n\n[42]: #actionicon\n\n[43]: #genericlist\n\n[44]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[45]: https://gitlab.humanbrainproject.org/HumanBrainProject/hbp-spark/blob/master/src/FieldsDefaultDefinition.js\n\n[46]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[47]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[48]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[52]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.2-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-ZfJbeBCsOBQZMWRIPzdpQUPLeGejVq/q22x6HsVQxItxRl7v9n+MY9uDH+v2OXpYDqScEaCU7adICSUFL91dOQ==","shasum":"6b397a5b3128d377c5eccc34a25583343e3decb8","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.2-unstable.tgz","fileCount":38,"unpackedSize":296584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+rAsCRA9TVsSAnZWagAA50AP/1gdE9gHaDMQHpJFa5xV\nQJLjcqTdrNJMLSoBflspyl0ZPq6Z0hytY8jI0Y9oMHrMx5tkJ6iWgcVFtla6\ns5izjPhxz2wBsmddonWoFlF08fC6gCZkztoqdFS6scI1/Xo5HeGGxZ3Ma+jf\netsY4nQHMFpxUdrq26S07lynSEqzPZkpPUTLdEOFItbtCoVSnVrvvqQAQqPp\nnGODPNOxbvlC+VbdnFSWlpK00pFVTLmbX9332O/F9U4WNj8z1DcqGJkVlrzy\nZRDdzKIz68dSb/uN42tvI0dLrM6rRNLU9nCUzkcLGp0r46Zx+iGsvbG3jGd9\nPK5PEZJsNy+SeOFsruwpWoM9GllJgPh2RsN2ObzsYjaC+eKAteSEm72ELW1Z\nxilmdpq9kEWV5szLSW6l+usE9jzmhzCTv35CyHWZyYIXoIs7Dea6utBxwQpS\nHaUaVzucV36ozh6ZvdrlcF0c9Gh55tma3J6w7DCFQbSJalFpp46o5GFqBLNi\nQ9MRMeW4PpVDtzutyOUV55g+HgqNSTGIELFTJ0biuPp9WWhPHb40WGWPjsyi\nrnMr56VO+s7F6bU8fZUea7VLr1iULd2qZbe8Ga/xzDv1mttshvwUxagMxFG+\nuU+JbDqkwGDcVzIcmVVExGgr7WTaMF3JFaxZvN5SQGe50kzpxuiz9ylOdPoQ\nBZko\r\n=I48X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDob9wxbLfStfdtB8KrKBTRuXShW/ngnYimzZSZFPjc/AiEA/nsFaI0QEBT8lIQxXr24fA9FKPI7b73WFilbZBxqM0g="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.2-unstable_1526378531637_0.4641627101728327"},"_hasShrinkwrap":false},"1.1.3-unstable":{"name":"hbp-spark","version":"1.1.3-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"165d1455861c71d3168eebfc1150a9e80def80bc","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to simplify entry forms management in React applications.\n\n## Installation:\n\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependancies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so :\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below :\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form datas\n\nAt any time (e.g. a submit button click), the `values()` method of the FormStore object return the processed values from the form in a structured object matching the definition (including nested structures if you used the `Nested`field).\n\n## Example Application\n\nTo run the example application included in the package sources, open a console in the package root and run :\n\n```\nnpm install\n```\n\nThen change your current directory to `./example/`and run :\n\n```\nnpm install\nnpm run start\n```\n\n## Documentation\n\nYou can find a more detailed descriptions of the individual components, including information on how to use them below:\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n    -   [ClipboardStore][12]\n        -   [reset][13]\n-   [Form][14]\n    -   [values][15]\n-   [FormFields][16]\n    -   [InputTextField][17]\n        -   [Options][18]\n    -   [InputTextMultipleField][19]\n        -   [Options][20]\n    -   [TextAreaField][21]\n        -   [Options][22]\n    -   [NestedField][23]\n        -   [NestedRemoveButton][24]\n        -   [NestedMoveUpButton][25]\n        -   [NestedMoveDownButton][26]\n        -   [NestedDuplicateButton][27]\n        -   [Options][28]\n        -   [addInstance][29]\n        -   [duplicateInstance][30]\n        -   [moveInstance][31]\n        -   [removeInstance][32]\n    -   [SelectField][33]\n        -   [Options][34]\n    -   [DropdownSelectField][35]\n        -   [Options][36]\n    -   [TreeSelectField][37]\n        -   [Options][38]\n    -   [CheckBoxField][39]\n        -   [Options][40]\n    -   [GroupSelectField][41]\n        -   [Options][42]\n-   [SingleField][43]\n-   [ActionIcon][44]\n-   [GenericList][45]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][46]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][47]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][47]** structured object of the form field values\n-   `merge` **[boolean][48]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][49]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][49]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][49]** the field path\n-   `updated` **[object][47]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][49] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][49] | field)** can be either a field path or a field object\n-   `name` **[string][49]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][49]** a name to uniquely identify the rule\n-   `func` **[function][50]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][49]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][47]** a valid axios instance\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][47]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][47]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][49]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][50]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][49]** \"\" - The field label\n-   `type` **[string][49]** \"InputText\"\n-   `value` **[string][49]** \"\" - The current value of the field\n-   `defaultValue` **[string][49]** \"\" - The defaultValue of the field\n-   `inputType` **[string][49]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][49]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][49]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][48]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][48]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][48]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][48]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n-   `validationRules` **[array][51]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][47]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][47]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][49]** \"\" - The field label\n-   `type` **[string][49]** \"InputTextMultiple\"\n-   `value` **[array][51]** \\[] - The current value of the field\n-   `defaultValue` **[array][51]** \\[] - The defaultValue of the field\n-   `path` **[string][49]** \"\" - Field path\n-   `max` **[number][52]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][48]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][48]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][48]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][48]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][49]** \"\" - The field label\n-   `type` **[string][49]** \"InputText\"\n-   `value` **[string][49]** \"\" - The current value of the field\n-   `defaultValue` **[string][49]** \"\" - The defaultValue of the field\n-   `path` **[string][49]** \"\" - Field path\n-   `emptyToNull` **[boolean][48]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][48]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][48]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][49]** \"\" - The field label\n-   `buttonLabel` **[string][49]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][49]** \"Nested\"\n-   `min` **[number][52]** 1 - min of nested children the field can have\n-   `max` **[number][52]** 1 - max of nested children the field can have\n-   `fields` **[object][47]** {} - The nested fields definitions\n-   `value` **[string][49]** \\[] - The value of the field\n-   `defaultValue` **[array][51]** \\[] - The defaultValue of the field\n-   `path` **[string][49]** \"\" - Field path\n-   `topAddButton` **[string][49]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][49]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][48]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][48]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][48]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][49]** \"\" - The field label\n-   `type` **[string][49]** \"Select\"\n-   `value` **[string][49]** \"\" - The current value of the field\n-   `defaultValue` **[string][49]** \"\" - The defaultValue of the field\n-   `options` **[array][51]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][49]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][49]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][49]** \"\" - Field path\n-   `mappingValue` **[string][49]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][49]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][49]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][48]** \"true\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][48]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][48]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][49]** \"\" - The field label\n-   `type` **[string][49]** \"DropdownSelect\"\n-   `value` **[array][51]** \\[] - The current value of the field\n-   `defaultValue` **[array][51]** \\[] - The defaultValue of the field\n-   `options` **[array][51]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][49]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][49]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][49]** \"\" - Field path\n-   `allowCustomValues` **[boolean][48]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][49]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][49]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][49]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][48]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][52]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][48]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][48]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][48]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][48]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][49]** \"\" - The field label\n-   `type` **[string][49]** \"TreeSelect\"\n-   `value` **[array][51]** \\[] - The current value of the field\n-   `defaultValue` **[array][51]** \\[] - The defaultValue of the field\n-   `data` **[array][51]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][51]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][49]** false - whether to cache dataUrl fetching response\n-   `path` **[string][49]** \"\" - Field path\n-   `mappingValue` **[string][49]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][49]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][49]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][49]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][48]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][52]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][48]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][48]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][48]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][48]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][48]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][49]** \"\" - The field label\n-   `type` **[string][49]** \"CheckBox\"\n-   `value` **[string][49]** false - The current value of the field\n-   `defaultValue` **[string][49]** false - The defaultValue of the field\n-   `path` **[string][49]** \"\" - Field path\n-   `disabled` **[boolean][48]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][48]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][49]** \"\" - The field label\n-   `type` **[string][49]** \"GroupSelect\"\n-   `value` **[array][51]** \\[] - The current value of the field\n-   `defaultValue` **[array][51]** \\[] - The defaultValue of the field\n-   `options` **[array][51]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][49]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][49]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][49]** \"\" - Field path\n-   `mappingValue` **[string][49]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][49]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][49]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][48]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][52]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][48]** \"false\" - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][48]** \"false\" - Display choices in line, default is display as a list\n-   `disabled` **[boolean][48]** \"false\" - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.values()\n-   `readOnly` **[boolean][48]** \"false\" - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.values()\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][49]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][53]\n-   `onClick` **[function][50]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][51]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][48]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][47]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][48]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][51]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #clipboardstore\n\n[13]: #reset-1\n\n[14]: #form\n\n[15]: #values\n\n[16]: #formfields\n\n[17]: #inputtextfield\n\n[18]: #options\n\n[19]: #inputtextmultiplefield\n\n[20]: #options-1\n\n[21]: #textareafield\n\n[22]: #options-2\n\n[23]: #nestedfield\n\n[24]: #nestedremovebutton\n\n[25]: #nestedmoveupbutton\n\n[26]: #nestedmovedownbutton\n\n[27]: #nestedduplicatebutton\n\n[28]: #options-3\n\n[29]: #addinstance\n\n[30]: #duplicateinstance\n\n[31]: #moveinstance\n\n[32]: #removeinstance\n\n[33]: #selectfield\n\n[34]: #options-4\n\n[35]: #dropdownselectfield\n\n[36]: #options-5\n\n[37]: #treeselectfield\n\n[38]: #options-6\n\n[39]: #checkboxfield\n\n[40]: #options-7\n\n[41]: #groupselectfield\n\n[42]: #options-8\n\n[43]: #singlefield\n\n[44]: #actionicon\n\n[45]: #genericlist\n\n[46]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[47]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[48]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[53]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.3-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-JgywwOa0gkqhjvdo7KHpmNx8B0VjtMyM3peV00iFo97QnjXkCytP/BNrIhG7pssvpm8UfJIfqp5uvB/a+fJDNw==","shasum":"abd0f73a2ca80a0cdce2900fbf2e5e5e8288e275","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.3-unstable.tgz","fileCount":38,"unpackedSize":305523,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBR7WCRA9TVsSAnZWagAACZUP/RYrokEjx4jvysDDtW2X\n2HG79KnUMRKBHwdx/A5KlV6AVwAuuivevjZzlfNlzjDl3KYmKj2RUMt8dVL8\n4zq4xRQYM5N7XxEtyKIcbiQekA6X0YywUEFiQreJtXCYVe+I8UUJD3pm6Fjl\nVJ/yVpjmHzeUt0bNnf1Du5QULzxqLBC1zNioAYY1j9jxS8AUhiKWsxStCIK3\nS5Y6PVCGNgQaCPcIeCMGBdn+te8onJ0oak5mTyNe1xwkDUuZEClXS4t/Im2t\nNtN1R/30njSRM+TOJPTtTxttRXqvLqxNfGcPOpm12GCcYxnDxkMxeuP21eDS\nFRKJ0a6vYj6iGs5hjTGtsKmo6cSTylfdL70O8BPQXtm3cL0OPJV0j1vk664q\na+lqOfNqJgy6UwFY0Kf6NVMeZJehQRQb+BIWVB24gIMZ8+SNLCPIz2pEE6jo\nIKom5Dyrc9ntukev347zju2pPElfCotyna6sGuoyrS6atzJeyRool6Ax4Yq5\nMM1x0fTkzc5jg8xO71z/vLajy0AyFzSFXlwR/4I2CW9Vkn+Ko9lmz4m67+di\nDWEG2XSO9OPEnt6R9laOaaXeHfs3pSMdPKGBY7fkCwcRHdPxi963fuJkEpCx\nx5vp8aukW2Z7GlbksG84cHZ96A/H2sZATE0iUNREhasnaSxtXJNskZc1Vu6F\nowGb\r\n=/yi3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmg5nwi6iP5/D3mm6884BaFMVCxWThV65HpLeoe4lRoAIgCxB3PBtnbh7e2fFuez2o/OzHqv7c4BNDLsUFgMohmao="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.3-unstable_1527062229611_0.9813138807900068"},"_hasShrinkwrap":false},"1.1.3":{"name":"hbp-spark","version":"1.1.3","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"8157a33c120ab77ace47fcf7c30723eb3892bba4","_id":"hbp-spark@1.1.3","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-/vql8KU3QFNzkS4e+SKDkrwR+UhclJCweBu1z4lQDSq4waur/j7DKWAiEbsmSP7EkEoLT95EiJtwasL9H2OmBw==","shasum":"9281a979e74e1343b117de8379c46db1dff7d0fc","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.3.tgz","fileCount":38,"unpackedSize":305514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBR+SCRA9TVsSAnZWagAAR6EP/iPrS85w+dplUG1ziudV\nWXvNaJdRvwa2acuxa0b2NkJNAU0rkkYgoSuNPt2cZznyzhnxB2E8S0Jn7huH\n93/YilZYxjb5Y0SS7OGt8Ck7EjGU9x7NeBCubpG05BS1l7z965rBvMCVHxea\nLcS7Q9RH+XPKJDaaDSsyTv6jVlcIdOErR3WbUoRg1st2M83a8jafXaG1CBRJ\nswEvOFEgYlBm8Fpk0JzVKONpZoZicfFGCgZCDwMWybCJXPeWr4QChWK4jlwn\neSoY+bciyGig7R7IepngmSLgZTCcEaHTkpjU+Lf6x2l2OU85Xsp3x7dGV5v7\nKTgmF2nNG59lyYqv1pjTGszbwIo9EVMcoPjIWPJ9oPO2bSQM5ystmQJ0yoWG\nJsftOOhtkoJP+RhCW5lbVMzZpEN8ow7IRyS1+KFX2ROD17KG5yTRGXCRQejd\nNsU9J19JEYCi+8m0VpxnZfGe1mgw1aOaSm5Nq2OlqFjoZkyqdytnm3ZdJyaa\nj7kDKhijOrM/YuztN9y6yqxsz4gdX8hJvYVfUI9PWwkIK+YYdHXhlFI//BSY\nWvdhk/wVO6eZEAqu/VV865V6m/jv6mP73aLSDcPp/a3fIT/uqhNoPaBfafaC\nCWF0NrpPeivS2MWzs0JDPeMbGM93aQMdmOS6z98xB0Syb+jRTjJdos0Mid4y\nMJHm\r\n=/WUa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPGIZyeleM6HNgeTw2E1qBtjEQpTmEnFsCTufeO3vDVAIgVBBOJLWxB0eyO2iujvXJjhxKqqg+g6zSZ7+lAhVzXRw="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.3_1527062416210_0.8785008354777621"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.4-unstable":{"name":"hbp-spark","version":"1.1.4-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"a8514c5e671f67ff80fd11ff937a532494e0a6b7","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to simplify entry forms management in React applications.\n\n## Installation:\n\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependancies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so :\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below :\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form datas\n\nAt any time (e.g. a submit button click), the `values()` method of the FormStore object return the processed values from the form in a structured object matching the definition (including nested structures if you used the `Nested`field).\n\n## Example Application\n\nTo run the example application included in the package sources, open a console in the package root and run :\n\n```\nnpm install\n```\n\nThen change your current directory to `./example/`and run :\n\n```\nnpm install\nnpm run start\n```\n\n## Documentation\n\nYou can find a more detailed descriptions of the individual components, including information on how to use them below:\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n    -   [ClipboardStore][12]\n        -   [reset][13]\n-   [Form][14]\n    -   [values][15]\n-   [FormFields][16]\n    -   [InputTextField][17]\n        -   [Options][18]\n    -   [InputTextMultipleField][19]\n        -   [Options][20]\n    -   [TextAreaField][21]\n        -   [Options][22]\n    -   [NestedField][23]\n        -   [NestedRemoveButton][24]\n        -   [NestedMoveUpButton][25]\n        -   [NestedMoveDownButton][26]\n        -   [NestedDuplicateButton][27]\n        -   [Options][28]\n        -   [addInstance][29]\n        -   [duplicateInstance][30]\n        -   [moveInstance][31]\n        -   [removeInstance][32]\n    -   [SelectField][33]\n        -   [Options][34]\n    -   [DropdownSelectField][35]\n        -   [Options][36]\n    -   [TreeSelectField][37]\n        -   [Options][38]\n    -   [CheckBoxField][39]\n        -   [Options][40]\n    -   [GroupSelectField][41]\n        -   [Options][42]\n    -   [Slider][43]\n        -   [Options][44]\n-   [SingleField][45]\n-   [ActionIcon][46]\n-   [GenericList][47]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][48]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][49]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][49]** structured object of the form field values\n-   `merge` **[boolean][50]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][51]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][51]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][51]** the field path\n-   `updated` **[object][49]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][51] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][51] | field)** can be either a field path or a field object\n-   `name` **[string][51]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][51]** a name to uniquely identify the rule\n-   `func` **[function][52]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][51]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][49]** a valid axios instance\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][49]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][49]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][51]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][52]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputText\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `inputType` **[string][51]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][51]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][51]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][50]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][53]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][49]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][49]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputTextMultiple\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][50]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputText\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `buttonLabel` **[string][51]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][51]** \"Nested\"\n-   `min` **[number][54]** 1 - min of nested children the field can have\n-   `max` **[number][54]** 1 - max of nested children the field can have\n-   `fields` **[object][49]** {} - The nested fields definitions\n-   `value` **[string][51]** \\[] - The value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `topAddButton` **[string][51]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][51]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"Select\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `options` **[array][53]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][51]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"DropdownSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `options` **[array][53]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `allowCustomValues` **[boolean][50]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][50]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"TreeSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `data` **[array][53]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][53]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][51]** false - whether to cache dataUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][51]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][50]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][50]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"CheckBox\"\n-   `value` **[string][51]** false - The current value of the field\n-   `defaultValue` **[string][51]** false - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"GroupSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `options` **[array][53]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][50]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"Slider\"\n-   `value` **([number][54] \\| [Range][55])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][54] \\| [Range][55])** null - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][54]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][54]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][54]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][51]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][56]\n-   `onClick` **[function][52]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][53]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][50]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][49]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][50]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][53]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #clipboardstore\n\n[13]: #reset-1\n\n[14]: #form\n\n[15]: #values\n\n[16]: #formfields\n\n[17]: #inputtextfield\n\n[18]: #options\n\n[19]: #inputtextmultiplefield\n\n[20]: #options-1\n\n[21]: #textareafield\n\n[22]: #options-2\n\n[23]: #nestedfield\n\n[24]: #nestedremovebutton\n\n[25]: #nestedmoveupbutton\n\n[26]: #nestedmovedownbutton\n\n[27]: #nestedduplicatebutton\n\n[28]: #options-3\n\n[29]: #addinstance\n\n[30]: #duplicateinstance\n\n[31]: #moveinstance\n\n[32]: #removeinstance\n\n[33]: #selectfield\n\n[34]: #options-4\n\n[35]: #dropdownselectfield\n\n[36]: #options-5\n\n[37]: #treeselectfield\n\n[38]: #options-6\n\n[39]: #checkboxfield\n\n[40]: #options-7\n\n[41]: #groupselectfield\n\n[42]: #options-8\n\n[43]: #slider\n\n[44]: #options-9\n\n[45]: #singlefield\n\n[46]: #actionicon\n\n[47]: #genericlist\n\n[48]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[55]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[56]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.4-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-xQpudD8pYyM2kywr+uOfGva5YJEpcmgo9dxql1/6P1DElOORnYRvesLkBWWw7AgJbfVtRXpDLP4X45aBPY+QWg==","shasum":"f3a7ab04ab375932beafed31c97c1146f095f2b5","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.4-unstable.tgz","fileCount":42,"unpackedSize":333438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbCCl1CRA9TVsSAnZWagAASEsP/1bo+U1khusNdYvnrJy6\nQ/4g+Z2gyUkILo2tca7BJfUo+DYrY12JKyxt+zliGk0j/Cxbi5oZq0WWHUm6\nFie4GzBiqxISLBCXYAuksZm036PfXjtvP74uf5SzkhNFjgfae3779/RPRMSL\nmUGexCRQjcghXBRMDB1VMvS86pSUWeAoKIB0GhMrcODesAAVcnMEgiXgIpvw\nt2Eaw6A4DXC9Tef4q+b3EsoPLZ0wSY81UKsqPINHbr43fF5JC24ka8DiHLiE\nEnbLCcf0AA7/JwqtcrXHhxpC7gjsGJzRENIhVfpPCjcFip5PDJHCF00Dwyku\n767qhy6HPaiBl5xClaty4GtoC+NxV78gV1QfnEZVZUNqaKQoIIbbRbY077kC\nVrCbT7kCQknO4uGpfUUpWACPZky8oDt/U6TlIxXGX+xYpz63NzRh1wHpwIiy\n78DMaGh7Bq0G//lXZXk9t3R75DWmFina/+2dvts/QJoP1bxs1Ey1twq6PftB\nDJb75XtrJPl1jAoJysokVrgJVls+Nu1l419ajw7XrPTrWN2RwI7wt/8T+//8\nzVapjT6Za3UzTPI8PcM4ix+m8D8T6XV34ySHp+MT79Td32WwqJWcqBxfVFOm\nomWeHkzmmmW+i92xysHo5v9cikH/0Yc/70c7kLJWmArEoodLmvR+lLLyXXqE\nKNW1\r\n=tA5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDZxl5I72ejXH31aq1LRwPRUDJdZ+c9ZRxusgVhmai2AiEA3v3bGEXp0lVUNZmrgiTLsR/0ft2H6FkrKlS54FsJbzo="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.4-unstable_1527261556668_0.4605757642878914"},"_hasShrinkwrap":false},"1.1.5-unstable":{"name":"hbp-spark","version":"1.1.5-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"3c41f91788766fd311e9268e71f192c5c3f95fbd","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to simplify entry forms management in React applications.\n\n## Installation:\n\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependancies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so :\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below :\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form datas\n\nAt any time (e.g. a submit button click), the `values()` method of the FormStore object return the processed values from the form in a structured object matching the definition (including nested structures if you used the `Nested`field).\n\n## Example Application\n\nTo run the example application included in the package sources, open a console in the package root and run :\n\n```\nnpm install\n```\n\nThen change your current directory to `./example/`and run :\n\n```\nnpm install\nnpm run start\n```\n\n## Documentation\n\nYou can find a more detailed descriptions of the individual components, including information on how to use them below:\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n    -   [ClipboardStore][12]\n        -   [reset][13]\n-   [Form][14]\n    -   [values][15]\n-   [FormFields][16]\n    -   [InputTextField][17]\n        -   [Options][18]\n    -   [InputTextMultipleField][19]\n        -   [Options][20]\n    -   [TextAreaField][21]\n        -   [Options][22]\n    -   [NestedField][23]\n        -   [NestedRemoveButton][24]\n        -   [NestedMoveUpButton][25]\n        -   [NestedMoveDownButton][26]\n        -   [NestedDuplicateButton][27]\n        -   [Options][28]\n        -   [addInstance][29]\n        -   [duplicateInstance][30]\n        -   [moveInstance][31]\n        -   [removeInstance][32]\n    -   [SelectField][33]\n        -   [Options][34]\n    -   [DropdownSelectField][35]\n        -   [Options][36]\n    -   [TreeSelectField][37]\n        -   [Options][38]\n    -   [CheckBoxField][39]\n        -   [Options][40]\n    -   [GroupSelectField][41]\n        -   [Options][42]\n    -   [Slider][43]\n        -   [Options][44]\n-   [SingleField][45]\n-   [ActionIcon][46]\n-   [GenericList][47]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][48]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][49]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][49]** structured object of the form field values\n-   `merge` **[boolean][50]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][51]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][51]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][51]** the field path\n-   `updated` **[object][49]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][51] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][51] | field)** can be either a field path or a field object\n-   `name` **[string][51]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][51]** a name to uniquely identify the rule\n-   `func` **[function][52]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][51]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][49]** a valid axios instance\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][49]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][49]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][51]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][52]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputText\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `inputType` **[string][51]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][51]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][51]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][50]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][53]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][49]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][49]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputTextMultiple\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][50]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputText\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `buttonLabel` **[string][51]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][51]** \"Nested\"\n-   `min` **[number][54]** 1 - min of nested children the field can have\n-   `max` **[number][54]** 1 - max of nested children the field can have\n-   `fields` **[object][49]** {} - The nested fields definitions\n-   `value` **[string][51]** \\[] - The value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `topAddButton` **[string][51]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][51]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"Select\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `options` **[array][53]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][51]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"DropdownSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `options` **[array][53]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `allowCustomValues` **[boolean][50]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][50]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"TreeSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `data` **[array][53]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][53]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][51]** false - whether to cache dataUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][51]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][50]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][50]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"CheckBox\"\n-   `value` **[string][51]** false - The current value of the field\n-   `defaultValue` **[string][51]** false - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"GroupSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `options` **[array][53]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][50]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"Slider\"\n-   `value` **([number][54] \\| [Range][55])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][54] \\| [Range][55])** null - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][54]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][54]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][54]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][51]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][56]\n-   `onClick` **[function][52]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][53]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][50]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][49]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][50]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][53]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #clipboardstore\n\n[13]: #reset-1\n\n[14]: #form\n\n[15]: #values\n\n[16]: #formfields\n\n[17]: #inputtextfield\n\n[18]: #options\n\n[19]: #inputtextmultiplefield\n\n[20]: #options-1\n\n[21]: #textareafield\n\n[22]: #options-2\n\n[23]: #nestedfield\n\n[24]: #nestedremovebutton\n\n[25]: #nestedmoveupbutton\n\n[26]: #nestedmovedownbutton\n\n[27]: #nestedduplicatebutton\n\n[28]: #options-3\n\n[29]: #addinstance\n\n[30]: #duplicateinstance\n\n[31]: #moveinstance\n\n[32]: #removeinstance\n\n[33]: #selectfield\n\n[34]: #options-4\n\n[35]: #dropdownselectfield\n\n[36]: #options-5\n\n[37]: #treeselectfield\n\n[38]: #options-6\n\n[39]: #checkboxfield\n\n[40]: #options-7\n\n[41]: #groupselectfield\n\n[42]: #options-8\n\n[43]: #slider\n\n[44]: #options-9\n\n[45]: #singlefield\n\n[46]: #actionicon\n\n[47]: #genericlist\n\n[48]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[55]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[56]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.5-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-grcVd24LERqH0wPYoLf8oYQO/d5dRIeli6K1TJD/Aryb8c/ET19ejIdw/pEpEatbgd2atvLaoWEUpJq8kr6Ieg==","shasum":"cd97426e8b00da4a6443326072f01c7b5f912a2b","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.5-unstable.tgz","fileCount":42,"unpackedSize":334147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbC7Z9CRA9TVsSAnZWagAAeLAP/j77SGx1saF+f2IwC7Mv\nhfjvBWzr8Z4prf57uPMban0qmaovst3JoYSMEQ1ikwXo2FIMbfsgYoTKU4am\nG/x013tcqpGnL6UkMjOsq7WdmNeqfIBb0f3H/F1diONRoZ/61TaNn3ydqC+T\n9E86dtoAO9UUEkt2ZudaAGgqP4GQ9IyeaZjG4G8+qdfJlzEk2Xx+7V+i5o3F\nLEQV0kkGyil71Aa2lrX9snaQLsgkc8sHCd3NdKBmzGaIWnzQDACiyRVvYNS6\nM/O4HrOhEjnhUSKUMX5Sazbaedn1v16ddW8GmL7ntVBKG8tjvrXSExLaDBDB\nLzMu7qj8fVqF+TABeC89p23VPd7Ant0j6rgEzoIRDoyLf+0xQeSzJbu37gbh\nlAIts/uTeaIHz4VoRbv9wkVTY3EBhMG11UJdgR8Dl8lQJ2C4v5gpMTvBBgtW\nY8RVLGTTulGn512fL1whjY8N1Xwg7dvJ1oTSakIDL7JvwW+XU3D+ASEU4Jom\nRJLNUAUkGPhfCKgOl3uI8o+rCEbudN7x4vTSB3Kh9PJ+muQeuj/WQ3Tx8YEf\nbID0K/61wkNKEFsG7/qnUX5idT46uDqowZIztoPuBkZll2gbs53SsTdbRSwr\njxToL47/bLMcshYHh4Lr4lrC3I/9LnD4QW0WdusVVwI2tAT0HZFonq3R7G4a\n+P+k\r\n=bO/r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICQdpRMmIhAG0PcyxI8OmakUEOoAx0SsA4UcTWJR6SVcAiEAgqNdTzueuOFQw4Nhzri2VL8MEodMfwnuvPlqJRh9aIA="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.5-unstable_1527494269534_0.7506807524183909"},"_hasShrinkwrap":false},"1.1.6-unstable":{"name":"hbp-spark","version":"1.1.6-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"852c2aac7d82f738a619dc4c6285e96f8fccc09a","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to simplify entry forms management in React applications.\n\n## Installation:\n\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependancies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so :\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below :\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form datas\n\nAt any time (e.g. a submit button click), the `values()` method of the FormStore object return the processed values from the form in a structured object matching the definition (including nested structures if you used the `Nested`field).\n\n## Example Application\n\nTo run the example application included in the package sources, open a console in the package root and run :\n\n```\nnpm install\n```\n\nThen change your current directory to `./example/`and run :\n\n```\nnpm install\nnpm run start\n```\n\n## Documentation\n\nYou can find a more detailed descriptions of the individual components, including information on how to use them below:\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n    -   [ClipboardStore][12]\n        -   [reset][13]\n-   [Form][14]\n    -   [values][15]\n-   [FormFields][16]\n    -   [InputTextField][17]\n        -   [Options][18]\n    -   [InputTextMultipleField][19]\n        -   [Options][20]\n    -   [TextAreaField][21]\n        -   [Options][22]\n    -   [NestedField][23]\n        -   [NestedRemoveButton][24]\n        -   [NestedMoveUpButton][25]\n        -   [NestedMoveDownButton][26]\n        -   [NestedDuplicateButton][27]\n        -   [Options][28]\n        -   [addInstance][29]\n        -   [duplicateInstance][30]\n        -   [moveInstance][31]\n        -   [removeInstance][32]\n    -   [SelectField][33]\n        -   [Options][34]\n    -   [DropdownSelectField][35]\n        -   [Options][36]\n    -   [TreeSelectField][37]\n        -   [Options][38]\n    -   [CheckBoxField][39]\n        -   [Options][40]\n    -   [GroupSelectField][41]\n        -   [Options][42]\n    -   [Slider][43]\n        -   [Options][44]\n-   [SingleField][45]\n-   [ActionIcon][46]\n-   [GenericList][47]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][48]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][49]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][49]** structured object of the form field values\n-   `merge` **[boolean][50]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][51]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][51]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][51]** the field path\n-   `updated` **[object][49]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][51] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][51] | field)** can be either a field path or a field object\n-   `name` **[string][51]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][51]** a name to uniquely identify the rule\n-   `func` **[function][52]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][51]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][49]** a valid axios instance\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][49]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][49]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][51]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][52]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputText\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `inputType` **[string][51]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][51]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][51]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][50]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][53]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][49]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][49]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputTextMultiple\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][50]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputText\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `buttonLabel` **[string][51]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][51]** \"Nested\"\n-   `min` **[number][54]** 1 - min of nested children the field can have\n-   `max` **[number][54]** 1 - max of nested children the field can have\n-   `fields` **[object][49]** {} - The nested fields definitions\n-   `value` **[string][51]** \\[] - The value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `topAddButton` **[string][51]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][51]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"Select\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `options` **[array][53]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][51]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"DropdownSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `options` **[array][53]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `allowCustomValues` **[boolean][50]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][50]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"TreeSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `data` **[array][53]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][53]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][51]** false - whether to cache dataUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][51]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][50]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][50]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"CheckBox\"\n-   `value` **[string][51]** false - The current value of the field\n-   `defaultValue` **[string][51]** false - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"GroupSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `options` **[array][53]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][50]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"Slider\"\n-   `value` **([number][54] \\| [Range][55])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][54] \\| [Range][55])** null - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][54]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][54]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][54]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][51]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][56]\n-   `onClick` **[function][52]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][53]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][50]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][49]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][50]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][53]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #clipboardstore\n\n[13]: #reset-1\n\n[14]: #form\n\n[15]: #values\n\n[16]: #formfields\n\n[17]: #inputtextfield\n\n[18]: #options\n\n[19]: #inputtextmultiplefield\n\n[20]: #options-1\n\n[21]: #textareafield\n\n[22]: #options-2\n\n[23]: #nestedfield\n\n[24]: #nestedremovebutton\n\n[25]: #nestedmoveupbutton\n\n[26]: #nestedmovedownbutton\n\n[27]: #nestedduplicatebutton\n\n[28]: #options-3\n\n[29]: #addinstance\n\n[30]: #duplicateinstance\n\n[31]: #moveinstance\n\n[32]: #removeinstance\n\n[33]: #selectfield\n\n[34]: #options-4\n\n[35]: #dropdownselectfield\n\n[36]: #options-5\n\n[37]: #treeselectfield\n\n[38]: #options-6\n\n[39]: #checkboxfield\n\n[40]: #options-7\n\n[41]: #groupselectfield\n\n[42]: #options-8\n\n[43]: #slider\n\n[44]: #options-9\n\n[45]: #singlefield\n\n[46]: #actionicon\n\n[47]: #genericlist\n\n[48]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[55]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[56]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.6-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-lW2hhKq5prcPSpGAH+Y8ic6oYWPuWJmyiUx/5gPxJuSEz41gA5vgTmZccQ2YaXWcQZkBxzYfH18wNvGnizO6vg==","shasum":"f9a843251fb96008d7a184c763ab5357d6a30f38","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.6-unstable.tgz","fileCount":42,"unpackedSize":334169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbC7hUCRA9TVsSAnZWagAAMDUP/iA/y0JF0M4V5k72NhMQ\nxRZ/cO9eBeFQj0msxNU1PeEZ8DE9DK/OkM93EB7l21ShevoMx8JzE/58hpE9\nz3zDJqY/7848cN3r1qOeFy4Ll60ref9eK3m/x2R0pmFP3dBSRq75e5fpcvLC\neOU7Dadh2kK7Ak5Y36Lna5zAjQfiMjHq49XhlPNwH314KCSeb95nXPC08n2U\n3LS6GiUp+OApqQ2njeD9FgHwmsa1j/hedLFjHArqlcFIAec21XHUOxo1LDyp\nUKnK3aWwEbW5Qs6zZo8ISIPkTWirwTSqQBjaZoed/RL+S6jC4CuIzeoQ5WTj\nmFWCvJg+iqA575Redd3qccOtclTFF9D+890G3tYAeKUFlybXrv426v2pYAkY\nkLl7JTstoJ5Vq0R+z6NpSdIjRHaZ9e9PpSUmbMj1ueT3Mj9RxIdJaB5eqamW\n+NrCVwEtJEcmYY3ihhvpbeaU8z0wIRCV2nRwL38RpzNucY+Q2wTQuX68yvm/\ngb3D/zKIF2IZByjSV1H6wUYxlDBNHsfFzduBLOtHP3ES7N3en0madj3HJMiL\nwOx4aLrr2+RAiCxo/CBxZXEDNoNX9drC476+FP2+vtQY+39zFMR5g2A2Ixrp\nfHu/Wpx1gx+Lz8MZLTjcj4YMwEPg40pgO90dikngVMy+xG3aYl9vNF40vi2V\nw01i\r\n=4Wy3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfj9R3lDyE3VbjKR+k5GINnxoFNY1Zag15fKjE0I7dLAIhAIJIlvsE6E8nYCQHavmiF7p+QJghHhObp2V+fLtxe0c9"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.6-unstable_1527494739929_0.9699842756371175"},"_hasShrinkwrap":false},"1.1.7-unstable":{"name":"hbp-spark","version":"1.1.7-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/README.md && cat ./README.prepend.md > ./README.md && cat ./docs/README.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"045e0ed76b83fc5acdab352c039deb9e68096076","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to simplify entry forms management in React applications.\n\n## Installation:\n\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependancies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so :\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below :\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form datas\n\nAt any time (e.g. a submit button click), the `values()` method of the FormStore object return the processed values from the form in a structured object matching the definition (including nested structures if you used the `Nested`field).\n\n## Example Application\n\nTo run the example application included in the package sources, open a console in the package root and run :\n\n```\nnpm install\n```\n\nThen change your current directory to `./example/`and run :\n\n```\nnpm install\nnpm run start\n```\n\n## Documentation\n\nYou can find a more detailed descriptions of the individual components, including information on how to use them below:\n\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n    -   [ClipboardStore][12]\n        -   [reset][13]\n-   [Form][14]\n    -   [values][15]\n-   [FormFields][16]\n    -   [InputTextField][17]\n        -   [Options][18]\n    -   [InputTextMultipleField][19]\n        -   [Options][20]\n    -   [TextAreaField][21]\n        -   [Options][22]\n    -   [NestedField][23]\n        -   [NestedRemoveButton][24]\n        -   [NestedMoveUpButton][25]\n        -   [NestedMoveDownButton][26]\n        -   [NestedDuplicateButton][27]\n        -   [Options][28]\n        -   [addInstance][29]\n        -   [duplicateInstance][30]\n        -   [moveInstance][31]\n        -   [removeInstance][32]\n    -   [SelectField][33]\n        -   [Options][34]\n    -   [DropdownSelectField][35]\n        -   [Options][36]\n    -   [TreeSelectField][37]\n        -   [Options][38]\n    -   [CheckBoxField][39]\n        -   [Options][40]\n    -   [GroupSelectField][41]\n        -   [Options][42]\n    -   [Slider][43]\n        -   [Options][44]\n-   [SingleField][45]\n-   [ActionIcon][46]\n-   [GenericList][47]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][48]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][49]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][49]** structured object of the form field values\n-   `merge` **[boolean][50]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][51]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][51]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][51]** the field path\n-   `updated` **[object][49]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][51] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][51] | field)** can be either a field path or a field object\n-   `name` **[string][51]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][51]** a name to uniquely identify the rule\n-   `func` **[function][52]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][51]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][49]** a valid axios instance\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][49]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][49]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][51]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][52]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputText\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `inputType` **[string][51]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][51]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][51]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][50]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][53]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][49]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][49]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputTextMultiple\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][50]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"InputText\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `buttonLabel` **[string][51]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][51]** \"Nested\"\n-   `min` **[number][54]** 1 - min of nested children the field can have\n-   `max` **[number][54]** 1 - max of nested children the field can have\n-   `fields` **[object][49]** {} - The nested fields definitions\n-   `value` **[string][51]** \\[] - The value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `topAddButton` **[string][51]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][51]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"Select\"\n-   `value` **[string][51]** \"\" - The current value of the field\n-   `defaultValue` **[string][51]** \"\" - The defaultValue of the field\n-   `options` **[array][53]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][51]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][50]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"DropdownSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `options` **[array][53]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `allowCustomValues` **[boolean][50]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][50]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"TreeSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `data` **[array][53]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][53]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][51]** false - whether to cache dataUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][51]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][50]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][50]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"CheckBox\"\n-   `value` **[string][51]** false - The current value of the field\n-   `defaultValue` **[string][51]** false - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"GroupSelect\"\n-   `value` **[array][53]** \\[] - The current value of the field\n-   `defaultValue` **[array][53]** \\[] - The defaultValue of the field\n-   `options` **[array][53]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][51]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][51]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][51]** \"\" - Field path\n-   `mappingValue` **[string][51]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][51]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][51]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][50]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][54]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][50]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][50]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][51]** \"\" - The field label\n-   `type` **[string][51]** \"Slider\"\n-   `value` **([number][54] \\| [Range][55])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][54] \\| [Range][55])** null - The defaultValue of the field\n-   `path` **[string][51]** \"\" - Field path\n-   `disabled` **[boolean][50]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][50]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][50]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][54]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][54]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][54]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][51]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][56]\n-   `onClick` **[function][52]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][53]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][50]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][49]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][50]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][53]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #clipboardstore\n\n[13]: #reset-1\n\n[14]: #form\n\n[15]: #values\n\n[16]: #formfields\n\n[17]: #inputtextfield\n\n[18]: #options\n\n[19]: #inputtextmultiplefield\n\n[20]: #options-1\n\n[21]: #textareafield\n\n[22]: #options-2\n\n[23]: #nestedfield\n\n[24]: #nestedremovebutton\n\n[25]: #nestedmoveupbutton\n\n[26]: #nestedmovedownbutton\n\n[27]: #nestedduplicatebutton\n\n[28]: #options-3\n\n[29]: #addinstance\n\n[30]: #duplicateinstance\n\n[31]: #moveinstance\n\n[32]: #removeinstance\n\n[33]: #selectfield\n\n[34]: #options-4\n\n[35]: #dropdownselectfield\n\n[36]: #options-5\n\n[37]: #treeselectfield\n\n[38]: #options-6\n\n[39]: #checkboxfield\n\n[40]: #options-7\n\n[41]: #groupselectfield\n\n[42]: #options-8\n\n[43]: #slider\n\n[44]: #options-9\n\n[45]: #singlefield\n\n[46]: #actionicon\n\n[47]: #genericlist\n\n[48]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[55]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[56]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.7-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-OsYYimHXXkXLhFBLXfJtXdSbgtiiuFiHXnL5wXMUzSknzbZXhviRVIqZGRPx/5jVmra7hMHhqUqTgU+T5S+udA==","shasum":"9a897cf438b52fca8e3771125fa4c51c6fadeb3e","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.7-unstable.tgz","fileCount":42,"unpackedSize":334822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbC74iCRA9TVsSAnZWagAAArAQAIFuhOuPb6JjW7DJi9N+\nHiloO+l/5nq8O9o7R0CeJHS4aztsSTZHB/EuK3GbLp9Uu0NOINgIv7AN9COf\n/bjl+gkoE9YHf1Rq8nGR140T9oIqvVtX1ybvcn8bbDB5TIwV3Wb8O7uheBc2\n97YB7wkf9aUtOsEdyrQ+EcIjkYVqgBJzM/veLYWTiTfC/lf7de8SFTfRMGmt\nQZQ7Bbe3iXaHve0WEqdOMw+ubcvmPR98OVqziJ3J/yvDA6gu2lRExfh3yrnp\n7X7XMbYVrPsIWfClY2W5Jz5LBSRAACKd6feos1XWfLepVBDJdp2Oo268NSOt\nYtoTkoGDLsx7R/bIhCn01i0q43ScVXRevpMFiBW8r9hbZGvozNP/UoPzluyn\ntFDdh/pnpFvib6TZqW7R6WFvPPPOZ9J/dwpZCx4rNpyTe2NO+pfBAXmAy9At\nhIF25FjC8QmhgLzQqYpBIAii09OL4egC3hls8xDybCvw7sdGHV4tmKNScZHj\nWyn/K0E/mKRqiO1mUiZhKtn6Yfz6tgmcsH0M/tU9+3LTP3fWEVT3xMeKUfE3\nAaURvOgLdpBp9Ke8rrCrC52nIuC8d2TOAnkcREg5MxF2gJlSeUstN/aoNA+Q\n4aVDa46GY5wAysO9a+P/QcMXuA86c79nvkPwCS6W7a303E1J+ojM55q+5hPN\nEezA\r\n=KxtH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpLGwWNlj6R/JW79G1yMsITKcIzSF95g3RWXlAvvTIQAiEAkfW//798H+Bsr30aCH/P9mRHE6zTER2ig7kayYSzOfg="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.7-unstable_1527496226337_0.9321646702151729"},"_hasShrinkwrap":false},"1.1.8-unstable":{"name":"hbp-spark","version":"1.1.8-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"fd3aa314c9d2d17825b24b7225321f817c156291","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `values()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.8-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-weF5AThd14zWkQ8ceRt9hRTx7R4gLmovkzB66X3ZQTEfZyJHynWKm2KvKzK5tIZKqjbQKa0seCo9PpQHK3+nTg==","shasum":"8748cd58505a8febbc0870b0df99ba9d0488e7d1","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.8-unstable.tgz","fileCount":41,"unpackedSize":312072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDVlmCRA9TVsSAnZWagAAlskP/1DzwlrbxmVsERc2ptZa\nJ4704CDMaRs4CtXa/0d5o+ag00IYvDA5pbwM5tXPw1gVRvLG3WC8vhoARhdx\nokfp2k9xgnoFbyKW3R8mLJdM/Efts2NoyWyJiTvN0EhpGZ8DSExJTp2YI8XG\nv7Hh8W+DqATrdRfcp5cfaUsN4+K4xp8ory2ndQIKTQXV642WJdFoKxF7o3EO\nam2jQZcYOYBwhft3HOHxhKMinnA2+iVMXwP+eItXLQRBQ4H71jvgTKU9geYG\nOgEbeJtLeWO6TVy8TohmCRVDkUM19NzafP+Tx8XTZM2vp94x9mcONgvsk54u\nM5cbXr6ge2Y3RE9mtVFlkFrbSZFae3ZLsYf9llG3jT1rSH5gIwjBAszCmsMK\nBQTuuV1AqRqJprnKzGkC+N72aJYozCtSD0iEeoRaj6q+mHD7tVjyy0WjFEG4\nD6t8UjuMYDQfiYapVD4RXW3eyhqcKRMaQ2QDr5QIOz31U2tFN56BxNc/JdDz\n6i+fAXRSlvaLu3nh04nN7CFumqZYsqAm0ltsXzLY3TtFV6dsgKNwii6LEGrK\nXj07ovWH64sg9Z957e3FUy4Dt2OKbykz13sPPrvaOn0LEyi++W2f5bn4QLuS\nqS3g06L5KuZT/yj/jpw0iDDCBTpZNPtXjQD9zDBB/qzmqrakNxTfClFT9AuI\nOpwA\r\n=GG87\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1+tw8MEbYN+Id590xelrdpu/vCqzNTCBYAisjNDfXkQIhAJkVMruutIa5nXijfE91ESk1OthUuExzvhWSy9CMoCai"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.8-unstable_1527601509724_0.9231096458713794"},"_hasShrinkwrap":false},"1.1.9-unstable":{"name":"hbp-spark","version":"1.1.9-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"db75a6a2eee53c74f41ec8aba5491a68d819c8b6","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `values()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.9-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-kKYMLBmjIsN1MLoLrRko7JkPwwRswHQz+mNkkPvs2k0uDpq3c4SiN26OLFn/nrvqFT15/LR+9htMPMFLUhY4qA==","shasum":"e61a9e1fee222608c542ad3b1d37295da2445949","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.9-unstable.tgz","fileCount":41,"unpackedSize":312072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDnQvCRA9TVsSAnZWagAAezgQAJCHGtFPy4Ta+fN0BoVE\nV1l+UPkw3kEXRVWPKkgeJCopnbjAvRbZw7aoiOqsxO5h01hVLQFTKgJc9xXj\n42c48QnGK4n8IiGJrt+TTvpdKq+p5ifw4CCWVOgczxB3DmNZgLFKJwqM3b5u\nkUbtKvWfpVwjqH+epjCw8Zq1w8Q2B89CGNDter1/Hv4aKd7MJMZwOIizGq3f\nXTWbs2Wmb19H6o5Any5jPYSsJH5Y3qeEayfMw1tujBbeUJwOLn5NTQoUe+OB\nAVrQx+RG1w75C5hEK5Dp6RvD33OdTvzQHMxFpD2JQZNf3JsVp9dysPw6N98t\nm4FwRwessGjY9q8P6hHi8ix1Afo/+DsVOtn5mD7odaZZR6kkmx3QR/sd4BiB\nBgWIHhtthlo0wzA4yOEMmimoDNnJdDXqAIV1F5bdJ++FZFCZQ3oteMHNkaTQ\n9ulY55+RDbzvYuqSOWtF9/vlVzdIkGDfjQC0Z0LOSPoR1gZEagcl0abeOZWF\nqXhyc6iqIDJwGgTfx2akxiGHFqJBzLGnod8j8d5g1PvnEb844vwalJzQA1mN\n/T22gOwUBEhHOdzY1A6Uk0vSKV0ESgpY5VUV7LKWz0YI/5s8EjY2dxRwb0yp\nH0ou4ulP1KBdg0tMBgKEQKvjRxanCVfgl66+9xs3CFluCxgGF0CDL0YnYiIL\np1+a\r\n=YTg7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXuuvbwP60XiZ/avVaDwqmppvXCox1FVN8AXQIl5K+3gIhAM2eVqNQmPjc2v8wuNQY1NKKeFDh/AQhrn4MP5DvvP/C"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.9-unstable_1527673902556_0.1631899075452945"},"_hasShrinkwrap":false},"1.1.9":{"name":"hbp-spark","version":"1.1.9","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"axios":"^0.18.0","babel-polyfill":"^6.26.0","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"8acd561c8efa991d3d937dd7aae110bfb98998a7","_id":"hbp-spark@1.1.9","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-MHjg4HxTRPATPlvWHKQ6UHWzqGd3So0KvPXNmEg5UdVdeb0o24kcr3vrtL6kx0hb/ixpyz+dExH3MWhG7SuvbA==","shasum":"c7502b70291ad2a7622267260b4e13df28ae4d30","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.9.tgz","fileCount":41,"unpackedSize":312063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbDnSSCRA9TVsSAnZWagAAW4EQAI+VehLioTzDXZr5hhAz\nHsiZszj21ff53zwu+iOhNRAgteutouu4b/ExYnyjBZAoQkiSNeqGqpe7HYrP\nItzBsV6h3AzAPUyTkj8gGk8w0iISBQvg03/FVNgYXKt7keg6gpJTAHypl9HD\nrTfKkcq0M9/e7lzS4hoepZcXpm0zGY/OyeOIvTKM5XqklXuQjJOQXg1SPtkf\nO8K99M4Rkacp9CgxK4ZckOm0bt7xIJPfyQWgfnZ3TBapVXu5ewl7wlJaKvWY\n9d3yxEW6yvUCfc7luCuRuQLADVVm+mRThqo4Ud3SWQYBl8EbqLgPdC4i2rHf\nWHRU8DPLk2KvpjqHMB4S8ybOoXKGc2jzcXNoNN9NAb+kcOtXDoOI9l1BlMR1\nus1CgXX70sYKdE7kzBKfaeajS5/pmkh6Qfoxy9rO5wwaqw2/YXpXyvucKbQ3\nqmQo+vnItCro/KSh2m3RpRlws2AnT6Axs8PFl4wP3o3swkCLPvqpVDb/65ti\nqi02khS7D893XQETSQoU+h3LJ7ZDmISUJt2NN4bKOZuH6mK+7q1/gVupABsS\nSk/Vh1FLSRCWEie2TP8+Ek7tI5d/W699Nlv7FjE3TzMjH8tt5modXOq8X0WA\nEDXOX4NZhhQexEiKIj2yRn9NIP71GO85ZLFSm3pnnT5HkwbZiycn9y7myCEr\nXi6h\r\n=Ztef\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYO46vDGMhFrFiWoYFQeu5KH/1IHL3yuUvkH2vMGSOVwIgH+c3X8qYCTsI2CH0Q09t56IfjGKVu8nu4hLgWr8cF0c="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.9_1527674000755_0.0963546384542815"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.10-unstable":{"name":"hbp-spark","version":"1.1.10-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"62940569c9c4b78ecc5b95ed0f8a469717c9c0f7","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `values()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.10-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-vCUOMDjBHiZSkZgLkGFp8aENAxxH8Ieuk5TG8prIoyrtM/h9SQS3B0TSFkqa7CjTchYC3bHxxnzuLC4DPmGU2Q==","shasum":"5133db1a53ae6f3c60e18ce2bffa540b54926925","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.10-unstable.tgz","fileCount":41,"unpackedSize":315410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbETGYCRA9TVsSAnZWagAALjkP/03p7EDPErZyP6GsmOmr\n539Q+cQWUetDS5ATdA0RlnlwJKk4V/1UpoNHLLv1Cds6GFZS0Yre9IUeE5N3\nTdyV8VuOIjGczqXi7CrkJ3fJm1/yfAfCXAL+S5i5r5QShhrBdeJtWMOdtkzy\n6iQkTpRId/lMDYvsIrfo3vhzQLmAO0pf68LxigDQYxTQR9bvgtna8xgcLSJL\nxOc3+oMrZQC2LEk7uZtgeJQYBtrvtIiwQ0wSibpK5cn1BjYOCk41z9OgxnkW\nHUwvom20/6hS9mlktUjfYowRFGls8KGQcaXh50KaSqSJqWFh4ZcEMmBLEdin\nfpVUaC2eGNbVxZJnYlTd7hBdTHoO3eEkN23GR4EoO+MWO2MXUgBBpX9ZljDR\nQiSingbl2kLSnCIbzdHuxtmEmcR6XgxQU8LgnV3n5yYK08ZHLwMpKhx6TDuf\n1NlkpVhoCk+zW1U4/c/QRzXN0eDIdUI3wi6++9J7S7CUzze9mDQwmYJ66dYY\nqU/j2K+m8OT6ihTvg+wy+xwRowFd0PzU46480esP6QYK9gM7Mn6HP4Bp/sFt\n9qYNMHnY0/bNFdeUxzN/uiKXLvvbWz86e1e/pP7HHcLxIB/xQtQhcnNMzKYL\nA8Ytj0Uv0nl5pbAnCrRHIWgv+v5zsDgwGNyOa5hC0D3g6OcGDFkWqfqYyrmV\ngcd0\r\n=WBxI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC9L8/7xuYrTuv9cjM+4NxogCeXqtGIwNgELNcwjAMJBAiEAw9WGXbN0JFHlaCEvDUxUb2ylUN/AxGWCjYBd5gNWHGk="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.10-unstable_1527853463499_0.6985075676446051"},"_hasShrinkwrap":false},"1.1.10":{"name":"hbp-spark","version":"1.1.10","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"0b5d8938d159be5efef20a9463901c300e22a97e","_id":"hbp-spark@1.1.10","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-H7QWReLyn63MfvY6r0kbtfSngGYGLs/nuBVUh7TtGnpAOMNr8yaq6MK1jTARXGVM+9QTAtiG07H4B4uitNMKNQ==","shasum":"130570af4b0208c2aac8976f265ddfbfddd34f9e","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.10.tgz","fileCount":41,"unpackedSize":315401,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbETH0CRA9TVsSAnZWagAAYesQAI3nMSTbzh/+6J1LRWUp\n3NG8XYBiAvkGqILdv2d9kavPu0AFfW8/HipDjiXA5jI/T7Eeg8VifhQ+geHK\n/xRf/P5i9cvSQ7/MS/lWxo3ZEfMsmvgz9BVJgCFTLu6cV0CmUfG8jJjlu3GJ\nfecBDuZnSFM9EQbxhO8XbUY1FK1g04cykC2+OwHuaNcg/RO+1d7pcc6VMKW1\nlXLD4DTXObyTHmQYtPfTgYkbh+5lf/Q8wzBFcBJ8dGxJ6l9YPlxCmLqP3mv+\nmgm3fDRWPX6BjjAw8YvJ8/44tldTzkxTOpJbWirkgwPEDMhziynL03ykwx8/\no/7TI6cxU6wJQb/EuQ3YBWmLYIIBucEhwEglMXNi2oT77NAaj7B+eO20QiUz\neImF07R3lFV20HpRkPbXA8UaWU2thC9LKJiSmSl6BFm0rzERnPo/ftDFydp2\n06vG0LTofoTTGnOrac9PyXrUC7rsy5jryLY885on3/hzpP6i/JrmBpQWal00\n4KCLWUe7PfvHSleAlphQRy953jgkHFPoqzQlk25zZHKsBXEOpg0+BEPfrUlV\nNGaX1jZSMu9y2oKratjAgwEJ9wFc/X7OZvsomHcq/Yi5ZmFpPxSHDPnZs1SN\nppxFe3Qsl16b7bDg2hAwU4qXzGNZPza+QOVoWu8GMB/84IcXrL7bfl1kJOaX\nlkWv\r\n=INO1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvJXEBnCvqkVH4D6lF7WmaaUPoVa7QW03HveOOfe4bJAiEAnARg3Ic7pIhczz0MfeOCORvmrxC8N3JsVT3crnSccbo="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.10_1527853555334_0.14497086425170136"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.11-unstable":{"name":"hbp-spark","version":"1.1.11-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"00d7ce357c9ea629f5014fa26d7d357e5d62d55f","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `values()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.11-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-Wj1/1lJA8+dbUEQKZLP3BV+g9kb12SsX2TFuOPj6rT+gewBtcxl+3cD7Iu/BrFvHanUxMqdCcAKEae9VWhIcIw==","shasum":"e4393ebc2f4db646cf797a9c45f62c50a1d8bbe9","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.11-unstable.tgz","fileCount":41,"unpackedSize":315435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFSDSCRA9TVsSAnZWagAAKc4P/RnZgPnYe6eVrYm1HQFE\nVbtBRFPS6pRaNsnXjaTbpKR76ClVWfqQMI3Y3LqTzHZ2IryhOBysWpOfoDsl\nTbBP9rg4JvWxYMk3lMW82Wk8yGtSiKJlL/UGyrvJr7s4pwTjkg3DO+eqbPJz\nEmInFQcSumBetKiStND0Dld24v2vj6sGfSB9Px2cPrOvd134rIzGbdkyD94C\n5nfsd6sjMrWLJKe/ExD7hhBBl9KO7pfgtDzLKSZ8ZZw5Mh4iRwRVCpZcY7yc\nBZlQ2XFAI3iT5fYpcosLVRsStQNKUiwdbX7A+FVtBim9uA7fDfE5RmMMKh0U\nWqjLmfDmz36bkkR3wq/BKj44bEB2qSee/E0GNnuJt8wSaEMIPrMEXfk35KsD\nfnF7rEzI7mpoSBTUTxGTKzsc3Fx8ivBCBzb4110ogoPX6S8NgzToO5MmzxDx\nPLFbsMfhMGSVScv68+PBVyaHQxd/hugSJZspsYIgaWGspXnOu9A3Z+ewMnMh\nLw5R/VyPq8G03py8QswqNw3ZuGK8mPWxJSP/CGKXaZmgPIvQ6H2Ich3lGKvR\nb2Uu/4sQ5MIrxL7G0vwwWx8+sq10X/1guFsCb8fD1UFcVGjIWFFhONn8ZjHR\nbchvxdb+yO+1tiWkmc5YPkfXhL48iSDcWe65f7MvbDTOgVxbw47o2UHEPCl/\nWG/B\r\n=9HkC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDHZO68fDSzPD0z6eiM4YqBwlgKWQ2amR1+NSstGXsJnAiAnbJ+SL0Tz2pGaS0LuJc3AkbQpCBLGTZmXD5ueMyo5Hw=="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.11-unstable_1528111313572_0.8692691971726236"},"_hasShrinkwrap":false},"1.1.12-unstable":{"name":"hbp-spark","version":"1.1.12-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"a0da19c66b844161f9ae1f0798dc90d7f85ff154","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `values()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.12-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-3wfNKDaNKen+kLRIykQIYtDgYEwXS+VoUEwnQxl4yzM6cyBtzvUnCLhaMeRlyC2Rawn4M8pMZBejfD6w74/sOQ==","shasum":"8838d8092eeb2fd3c06133377ab59b90dc937ec0","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.12-unstable.tgz","fileCount":41,"unpackedSize":315771,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFTS6CRA9TVsSAnZWagAAIgUP/0kE/VlYGEjWd8+KtBaC\n26M1g22nHeilZ6QIRWyhTe1Mlw0jQ/S6O+yIPnDSJ7tVEBcNpg6em0+/kg1h\nhedJ/YKLzyL6VMIzNxdgLU4sHDAgSf/pmdbhkiMJVArDt8jUeIZ7ryXFhMfo\nwIM1BfKN5qFPacF0nktudfHkqV6fcdu1x9pKt41JEqqvGr6L5oE6gmY2BWGm\nPGAdBYVan1map+Nu5T0O4CrjRQL5XN8a9KbdW6auCPjW6Breh7iGyYOPxbLS\nQdwmya6x/BMlnTYKLLJ/6HJVzdoYl5fEbIwpNl79QpUacMCZoDsaGpr+dmv6\n0cuocWxdpuWWUIbhwDX6RvDCesBKK6WFfURYymtTNOUlg4QGzSDr6M91A0Y2\nBGHReTmiSG3iarWDO1sCJvIqPTXuKEQq2mh0X/mMT4TGBVPGwJYm20OZO/cW\nvny/PuA3EWzLzG/ch6Znrasc/sd5tVf6hBibIH6qtWYXTwC0dzJCT1ga08A7\ncGuIimT33YF/eBhl0HAWZPIc9cKRZhCf2qjWRjtw8mfvN0jjoKZ8o0fVwmEU\nPv97CshTfanSSJJLLNUWTeLb+XEw1GVM6vPM8UMxb22n4mQNFpaenYKyliy1\nn/Wt0/VUJsuCW+TI1ejv+TQkZJfaEj7d50gFRJzEsH+JwOrV/YM5MVLbB7Qz\nIrND\r\n=Wl05\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCR0QCkTJm+OJkOOSScY1yDzL0/oJP1G5Iw/S2/aeWEAiEAqJ20AKEQ4lpZ4Ccql8MKoW0xYEhnGqtE4GyPTNEdzOA="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.12-unstable_1528116410455_0.47535156216896546"},"_hasShrinkwrap":false},"1.1.12":{"name":"hbp-spark","version":"1.1.12","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"6774e3a432e3546c42ea5095413e3d56d8cf7fa2","_id":"hbp-spark@1.1.12","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-bG3yyCcv86ipuot1OP8ztFoB7vVie6fzauDQbk3Hnjd9LVO2vQ1ga3P1DhoF7hN0AqJ1oBZ0FqXIFc7LfeFw5g==","shasum":"a43dfaefdc81c3f72d4eb0a8977abca75a80f127","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.12.tgz","fileCount":41,"unpackedSize":315762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFVGLCRA9TVsSAnZWagAAsY4P+gN50z1osLm2RNafDK/h\n5MJrUPW2k4jQnrfVYiW3veF4NZ6EIsx8oqtRxQ0XdPu6laAvxhZFG96Y6rwk\nBIVE6RjyjMvUR0ZdFRFWPI0Fnup+kbNCrpQ0PCZgiLvq3qVBteGlA6efr4tf\n4rwoLKRB+aZ6TdqZwSa6lzzjjvxWIbr/8FeXmuqJZwtzxRD1j4B8nZ3MWTtn\nh558shrLJ74dCQXBlLK7+mirmK1llVyyy+/c8/QqPq/Yw6idgJDq3S51DbeQ\nZuDwgNog4LqsI5X5ppCYwL1skwDwLrq8Po3CPyp8Iv4xs2CRTogpfd3R7MXN\nfN7J3p8pYDmjuuH5qlttibyw0csseitA0BiMBa1U+EnmHpHA70X1dYqxKqTC\n79MxtUd1zi3g54oU644Bu/bPFNa7B/dxmNyenHn0a76G0IYdmx6eb8DcF5j5\n9y7Te/4cVtlYgggIU2pXtPN6BgXiRCGxt/2TCttMiFYLoAKNUDPxEUfkeBUW\nIhF04DvCiGaTWCC2ATKYbFlOzt7tic7KaaSZA6u3Sbirmx5la/RjpNbu8TUg\n873B/tCfyuTcghx4X35MC82qT0qMcrRgfQIsuOdYGLAwM0olRVdhOuK3mJZP\nNuQMC2fRlty4FsMr6oOAxHjSchG3mPiiTVZNwpMxvkX0vliff5ErQQicYG+l\nMK35\r\n=XdcJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLxukYaWjaItWmfESvXQPaLn6SUihKSXuO1j+n3Cv7XAiAnI9NMivzLVmXWABOyPy+0iNAL1a0oEAZ2Yr2vSIsAAg=="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.12_1528123784312_0.7592149792680971"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.13-unstable":{"name":"hbp-spark","version":"1.1.13-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"68a50f2a4d86ffb5b4178d32cce3e3220e16c445","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `values()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.13-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-x+69gnzVMthXkoqLZx4ZoofVYrOJMcLedO63T+4xu0yORyDROOl0SsxQHx6IkvxHCZ6qL2Q3h/uaYy3knEtFoA==","shasum":"8b006db56063375810ab6a44fee5d991eb6d3762","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.13-unstable.tgz","fileCount":41,"unpackedSize":315906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbGoYQCRA9TVsSAnZWagAANwIP+gNDn/3rD02NPgJsGRGA\nkwlfJBuJDr76LKJD/csydD9LYiRqvXEUiTrWPelExtL1hhp7w0dIHK9BBkLb\nufWpf+6AX4YnIt+m0DO2TVi+TSrasauBtf7vPgmDkPeFMC9h+8QgMXUvYXUr\nET7nuKuuhdhbKM3hheq2yLCLvfQPS4HZWpnA3qedlZlAFKv6RZwNjQa/euuf\nkdJlE+sBHgnhgsZIYebthaNg8dHCCAB3maNC4I9jyA9yg0gzRyWeLbEO5e/Q\npRfaouHU2vyOsWDghARQRqD6sPaf0QIDY8tkbVmtE1i5UsDZY/kipPj951GP\nbnzZW0gE0+YeLNLdkOAooqlLdGwqBfjFY35XfPWMS7FJlWz7Wl9FJR+9JXmq\no8uq8mgRAnemC9GYoct4sHYaWMVpEe+WYPRvOApTxlUCNf1A1V6YDJ7xPi0g\nHheVMBNR1AmvZgb0mQwS2jqRIzz10Esi8v2LMHCDlUSkEzPBQlzSBbM76bwy\n6ZYnEeh0HT3hJ0kerIZvtPczGlX9FLSy7d7VNdi+5eMSkCw40gGs/fb7KhBv\nJPkkRLn4H+ZOWE42biLsYHg/NzlKlFbKsaerYjjt774l9RZ+pXx47V6cFnm+\nIvG92o8Z8chGjnpob8Vbc084ULLCNmkND7ppYA+pmSnc7SjuLN5AvWFU5nky\n5Mfq\r\n=U4Qe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwtX7RfpzqddkrJ5hZIv6pd79Fhm4zH0ipjda5KfvC+AiEAxxOu+cDRBtQZcADoISIAiFkvhMW2/M38Fzh1QomkfQ4="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.13-unstable_1528464911312_0.8055617767960139"},"_hasShrinkwrap":false},"1.1.14-unstable":{"name":"hbp-spark","version":"1.1.14-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"30b5b140faf4f263763170cf9464c371ed34fa5f","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `values()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.14-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-/h2KWyaNOr8k6CiVqAFzfpOx/9o5wT1W3XAcmNIp616wqTwrBP3YY3OiK0AG1L4xnBxfdLoMMSqE3L28vzYa4g==","shasum":"f69d0fc1f8b509e7554f71937f8d998e45c4de15","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.14-unstable.tgz","fileCount":41,"unpackedSize":316091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHnOoCRA9TVsSAnZWagAAcjAQAIiaBj/KE8nigkotx3O+\n4RiqmM3mdGoKd5K8VEFRFroloBrDHmnSDxUmsEBvGwCF2cy6cVh7Mt98X8BV\nPOAi+HmuOpl8oMHAdOIneW+9TqzlwjGsjH9kFWdDXLkvLGxVkumMa8LsQ16O\n+Sp8DeEK6m2ZfJiGZcfcQP8qbh81M9TeNuyQG35olzEXKK3K2RJUlFdcSJ4H\n/FRS+dGiN1P0yqDTxhCt6RPwlxNcuNGmzZOMHdNPxpz9Ib9QBLkuve3a0pTA\ncRq7EQtr6xNMRnTKSO3P1/q3Y1DwytZy5HGOMa4+xYNxooC3LqoCrgZqaJkX\nN4g/5flPn+0a38o92At1ROSwpOEC1jK3m3dnKGeSScCYM/N/efvvt+RL+lzb\nWi1+9VWPZ+bitzQrBRALZUcqD7rOFWVrHrAh3e6tBNN+6qM0Akr8V2E9J4N0\n53Jq6sf9Rdik1HHAt7j1QqW4ewi135ANpzh5OkQKiR1bL2xfXGR9Y30IKDPD\nAcGyuGEwQr87afBMW1w0WZhONLttxF8fWECWfTncqeODspcfJei9ctlM9Ggm\nj4cCgmIKJihu+qydnXq1E3+Nm0mXSRJXhVcdWqFybo78jKiJevqIw7fwMt51\no+DCHOlLQdI+RuQdSbHJkk9Ac/BINfXFcqbdqIIN71UojmJuGrz4xY0b/2Qv\nGsIR\r\n=4+WM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGcjwsZMximHmDc2f0qYb5p91wW4VIce7Lz+ZVZn+m4CAiEAyhpGl5A0mYpgA3KGS7VECrXTP5dzVN4Mzk2eAX0DY40="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.14-unstable_1528722344010_0.8436897223580924"},"_hasShrinkwrap":false},"1.1.15-unstable":{"name":"hbp-spark","version":"1.1.15-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"a5c1c4fb587b93c1392541c183cc35f8b3c67c3a","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `values()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.15-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-EK56LwOZfsRiu42pPxmjudERYHTU8ZxK38SgF/NbQ/7POi7oL3esz+wucp35Kur6xN2giYGmauzMumxp/s3W+w==","shasum":"286dee2eab6890a87f5623ea1b850da610b85e30","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.15-unstable.tgz","fileCount":41,"unpackedSize":316087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHnf2CRA9TVsSAnZWagAAic8P/2TBGifJl/ZxsloYxzSa\naAeselCEqa6B8oKEVvTbKB1iUFaq8wOin3n1cOrE6X12IW0H3O45dUvO4COj\nF8l8YFqinjEAQQ9txXVoRAnMwxC5rkcXlg/x6MKAoTU9nsACbqhGV4km+Upo\neqFu6fspzROvh2j8Zfm5gJIca4JNn3cEhDjYxKKgcH1DYPipgqPQHlvdIm9a\nmLOfzttx+0F5U94vKfYJqkY1Zz1JerxzaKLhLR4wT2Qkt6SvxpEQACsrtjKA\n41DNPYJfHnYFid6rBdDwVYg8xkTs5hPjJks9HBW5Klx9V/B4aqkhABNWsI2P\nOLMGz3VovkG1w39l1rd8xMcSHGfUfvwvGR0C97Iy6+pTrxmcMNBWzBO26O0S\n/SOHnVMZHoJflfBaW2Dqu/GdAUT7rXntC2XdxlGdoIg63vyHxKgeHyBAIf6e\niCNlSzN0RqSZSa932/da8pxg5lC4XY1QkMNmcsgRoAqkBxly2Cr3PWGwtokR\ngpH1IuKdBtjT0XrhqWtkHjf//dg9Vv5//Gl46llRyMjNgH2NsYqYhj3mnolj\nVCRW+HL2ezqXOJkZIT6vIGFaiacOIwT/BWo783VCVwt+mM4fkVHsVkM6Vg6x\nA+V2KCAslC3eEDwLY2gxGDqCVJG5lWp1MOmsFLRo1+duA1CNhECuuM0aZpPe\nrWjD\r\n=TTUE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSF064WvH4hkP5JaANMjvIk8fI00/e7YdSyvfuxqBvtwIhAN7F0CmCNaWnKkY1B16NXe5XdYtw5L5mvs6E2oSDgKxa"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.15-unstable_1528723446027_0.616284781274653"},"_hasShrinkwrap":false},"1.1.15":{"name":"hbp-spark","version":"1.1.15","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"npx babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"npx documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"npx jest --coverage","lint":"npx eslint .","watch":"npx babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"33a925b75b6b9c6554d49c49b407303e18ebbb38","_id":"hbp-spark@1.1.15","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-caX4UIRHPmwr6rd991b+CEM2ntHU/TVj08a3nceBmIUsEkl6F78InGSIjcitv+HrG8J19nIiWlcpbkzzBEanMA==","shasum":"66059be30bc76c021a70233468716332f1863bba","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.15.tgz","fileCount":41,"unpackedSize":316078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbHoEXCRA9TVsSAnZWagAA974P/17R3U770Cer406/2Rj6\npxO/HBdHlyc+JQR572upJmiMvMUJuL0uhJBZHG2pXlLGeQ6mixY5+m4jDfEq\nu4GG22HKBi5h8nDSpGSL2aPdKAcKiU2decKz4tSniQ+4ARyfA4wg5qQ3XwCy\nGRrAD+ZOF/effBeR/40+TMbFCg32YdQkxnIkYpT5g5i2iu84eOexRUs7zfwH\n4ovnBeb868/0mT/7n4URBBFdv5CgBxSsfCRBe+wMgrJ00zYr7n9XesnteU6Q\nwqgNG/IVWIPVA0RnPeRffzQXoaMCZhWojjFWRfLq2R8utMvdMwU702m6kD+S\nUc0ycLQe3mHd+yVJpFMoSE6WgyriCZsRpmDkByLMS361csIoU2Hq0/BWIiNO\nVIz+HKm2c2x29QeAK9NjAEk3H2NHCzOJ+vrlH8y2XilxHJK45cakGr6E1ZqD\n9hb9o9trkLCPCCXgH1maLS6oX6K7x8Iou2KdvINRPJthNR7wK3TYce4jHEy6\nmaSrt4SVlihputh7/hZoZCkD2y3DEEo4ck8d0bWSW7cdHu2Dbd9WJozeNFOE\n7S7+IzAj7HalpbxRFybaU8UBFPJclWxHNW/ipLao2Gk+9govO3T5f0dr0xes\nW7FpHZ8P10lS3SY8NXkeqUavk4kpA7rSAsRMYuTPTnzKZ0DkYQhHUbgLfAnl\nIFx2\r\n=FTJP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyCMAFbKhoK1NTq3sO60Bv1K9vXkQxO4XRgW95tJewyQIgcmsofDQkJJwGOTl6dQRHfDfnbxkQGSxzrz5OyIOfTgg="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.15_1528725781271_0.8939961458210588"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.16-unstable":{"name":"hbp-spark","version":"1.1.16-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"483bb2e36457fc947a67351e55b9abf6ac0cf770","readme":"![](example/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.values(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `values()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.16-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-dQ++GuWR603Jc2lTUWbKymhQvmpQxriGH92a7QdIJ9zIPM6ZoNykBfDMgNtnkoEiplVCFbLAbQrrQls3ssXIiA==","shasum":"2368414f232857604160080b63e2236b8bca4016","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.16-unstable.tgz","fileCount":42,"unpackedSize":324659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIjoWCRA9TVsSAnZWagAA9ksP/irkbew2W6PPFdFN9y1E\nd0r8mrF3kr+YrgTF+74xzmvtnqeezmQrlso1MHfpHuM/AZCHPXG+RYLmpsEI\ns0TTf6GKn+qHlGDPOskuwl2euDIXDY1UddcbxuMwoiR56VQtz7H9I9cQkOnM\nDVlG6PVQLQTtrHtQCFxiHBVoh5vGRoki0Tiqrp7NSyDUhsrN0g4HGFXb3KCH\nFTyeRNcl95iRT/CfaC42lCDMBbhBcQx9cx61GlxshohFTKav/TNNh8chbRjK\n6/o8f2Pzz0kDBOkowHXHpnM2Y63ObWJ197rdLn6vZg4zoK8JGCosPEU4WS7P\nKTsRxeI7bDSpNR5tXfsGCiu6cDCTy9QJJPdfJO+L/1dP0u/JMasWckOgck17\nI9GIQREySsadWVNoKpaGnr/Y6NZPMbOLwgjiAj8z22qvok/OuOaoDGDaxHsx\niCkfhMbCcNhzqP9SQ6iKstZ7TP2r63nMuhaaupbSsnmDaPPt+BJTXrmLpWbI\nMWszyCF7T3Nmjw+FU2mfbR9gPu4IGe09oAlRc7Y75uVrQVD31kH4nTvjDI0x\nYhxGSJvgGhjFU9YpXZt4OLjkH/V2CXW2LCEqG9xRbJqTOHAFhM6D2vHJcRPs\nmb5OIx2FfvnItw4cRcyngZ47TkUWa3CkmpZK587BQcUt+KtRr+HoMVtuu4uR\nztWo\r\n=8Xq9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJ4uUD4Cn1D/PcZ+mQWWVbBbjV7uXyQjPoFzT+BTAWNgIgB2/ksCveOPtunk08RT42KSQ7n10ODQM9GDU+vqo63Us="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.16-unstable_1528969749570_0.21666656586395772"},"_hasShrinkwrap":false},"1.1.16":{"name":"hbp-spark","version":"1.1.16","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"e9f984b9bb9332aad017a06ffea26e173d93e9ec","_id":"hbp-spark@1.1.16","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-EwSpge2UOTmUiwvxtOx3zztG2YSzXCklHKUUCWOwFFZJbOIK90WlZOxQ49kVnn7UTrgtVctWBHzSRBfJQAheCg==","shasum":"e39ece91b013012895c349df86daf38d6ab80cf6","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.16.tgz","fileCount":42,"unpackedSize":324650,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIjpxCRA9TVsSAnZWagAA31MP/jamf8JX6fpSkDdUt75c\nqDh2AiNr+pIPLnE1guwaUJ2YTS2sfE12U69vUBUtTtbRnK/Ne7I+pyUQLrmq\nExoE23sw1NzCKHBoTMemKKw0rKSbD5uxGAOmRlx7jI99nNLhuBTGTweVcdxQ\noLhO1kzToMLziKM5cSfz3rhch0lLbpCO+mrMrKps4wBhHA9VyCb/mHx3pCS4\ndd78pebQtZRGKtJQJmErAnFQeLx8bLT4WIYd2fB/i5GlYhbMVwsudVa39niY\nydTpaLoRhoK3C6gUZvnQn8fHR2zbNM+mC2x7zfKI9h0S3fqtqCQqMiDxr8NL\nMqwC1NSHdZSSkfnFi2UclyqybtHf1cdidS5Xge5GL3dvFMDoZaiPho8RfWo6\nlIi4lfZjVbzlGqHN7Tecrb6No/I5E8/d6c5T7m0FxpgVBAfLfr38CeqFy5cd\nMz/pu02FVs95iy9fm92CiAbC1sm3PlQy+VND4RZ+hQ37JGrJuNaukLgMjE42\nrWY3MUg5+wpmR6duvRhpvT1gu7TJL0VwSAsqcASV8xKZpaCm0slUuktxzhhg\nIGzBGhX9ZitF/urZFsxVwhjb/RVLeqIoq8dKpk74sJHcA/sMt3tVzj0azOtE\nh2uNYqv0PLmHr1VY4n/nzvLak81a/334vUvAG5oxvzGYgAcYV6eP9NvXPsY6\nZLIN\r\n=rxRH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDsW18ma9Qt3ndOSUyxKEDndJOpj4vPE098WirAuKATMAiBQF7UaGbtat/UTKZofMUJOOIEHnnZFnQ364HPxofJxNw=="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.16_1528969838738_0.6785806306470643"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.17-unstable":{"name":"hbp-spark","version":"1.1.17-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"92632beeffb5ddf317da34186818463e89188fc6","readme":"![](docs/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.getValues(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `getValues()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `autosize` **[boolean][51]** true - If true, the textarea resizes automatically\n-   `rows` **[number][55]** 1 - How many rows are displayed by default. Represents the min value\n-   `maxRows` **[number][55]** null - How many rows are displayed at most before the field does not grow anymore (only possible if autosize is enabled)\n-   `resizable` **[boolean][51]** false - If true, the textarea is horizontally resizable by the user\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `defaultExpanded` **[boolean][51]** \\[] - an array of arrays describing a path of nodes expanded by default (tested on node labels, path parts are considered as RegExp)\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.17-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-M+nS85/kU4uR1oxU2mpx6aOguvui7GKNwQaBJm38hnpGHJfY86k/BsVsv9brM8783bB3k1SwYZqJlHTA/W6J2Q==","shasum":"00b0b8423195ad8bc34d1c7a35955a263cf9bebe","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.17-unstable.tgz","fileCount":42,"unpackedSize":325310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbJ5qGCRA9TVsSAnZWagAAVB4P/i7GRlxKJJHyXm9s/WGc\nTfV5CUBBSdUsT1JMN9A8kWUkLXCoYt5FXM/OGu/1RhgUlAX8x+EBBnNMcNWI\niXCF+FTiM1hO1OSycqfc2NIg1CcfPOnBWsuG9EN1ERfX83bwgqPay1tjEKPf\nkEGt6aXuwLC3iq0oeAcH7nLpHd4nkqG8HB/IuA/i/LELMndqMw2aEheOQm9X\nZ//Z68LTThj0nK5EYKWKyfqG3Ox1KlfVsBIoVGUeohVAXe90+zdeLw+X+0le\nRtMkuFjNIfdBuDkSLwsMbnkVT9NZMZrfvec3oEPAfg0ZEzYPy6X8cZqy9FKC\nyR9gh9bMvL67vbxccVhdo3DiCkhJzUEY7aYAO9F6xfwZO1jOh3y+BhhrQT0E\ntgPetSx4LjICV+v9iiPtEonkAOki8nKkbGVuVlTOADdHW4+fg9Ku4VzjUPCq\noLm4HlHcgUYqyURogPgu1xpCcAG1wtqu+WMHuw8/62F6YcV7k7pEVGRd3Fyw\nfh4jvWwEPvWZak7I96IU+UDz9bsLcNlvOvyKpFGDephHS5jlAeV7idLFYom9\ns7sF7SjheI4p0h62cfmAJEpfG3iSQZIBxh7Gi7ndDNTahhBezDTzR1jIMEGr\nUku5gY5Pxm6YNCBZDujXl6nohquQYRzz1GHGuvbK5navdXVoA3SRGO1UBl0S\npjHy\r\n=+43K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhyAj9WRdnqEdf10a1aiWJgOi+HrIzcbktKjmc8uzx2AiEAsM5w7C+PTNWKac3dome7StgpDcfhagQcBMUnTJj+ERg="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.17-unstable_1529322117500_0.31789394815905525"},"_hasShrinkwrap":false},"1.1.18-unstable":{"name":"hbp-spark","version":"1.1.18-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"80d850a3eff829d8cdae962d2baa4ed1f695dc57","readme":"![](docs/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.getValues(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `getValues()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `autosize` **[boolean][51]** true - If true, the textarea resizes automatically\n-   `rows` **[number][55]** 1 - How many rows are displayed by default. Represents the min value\n-   `maxRows` **[number][55]** null - How many rows are displayed at most before the field does not grow anymore (only possible if autosize is enabled)\n-   `resizable` **[boolean][51]** false - If true, the textarea is horizontally resizable by the user\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the node object field related to the node value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `defaultExpanded` **[boolean][51]** \\[] - an array of arrays describing a path of nodes expanded by default (tested on node labels, path parts are considered as RegExp)\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **[string][52]** \"value\" - the name of the option object field related to the option value\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.18-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-mQCJ82Fd5ck/y85NoKoAZPAHQvNPIlvhHx+JTMCFvT5odwM3bv7fh8zsENxTHLDkFqxfLmWj484lP8B4zjLzqw==","shasum":"b458b08a76cc6958c603155a16388b57ed2d1eda","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.18-unstable.tgz","fileCount":42,"unpackedSize":325310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbKLnJCRA9TVsSAnZWagAAiJ4P/3jhKvOtEKqpub7y1laK\nNzUijqWbLmmHNF/xyNGF0fu8aS3sWVv4GVKcTr3et60oE1Fmuf4zmX244C19\n8H3PXONAXOVjdTffzGu1R+QQR9PDsIVBLl60AVhPqP12immbbatWNr0sv69T\n2DEfVtD00TbEuMi10gZReUCmhWMaiFi0zSzlfQyvLdvmJxChmpi0j+TsaHxP\n6rZZArxsdQuvigU2l/6s1wrRprm89YqQUuK2OVriGgp0f8BDJGcQPvC/a8EE\ngvO8whYTASWI/KRvwMh9+Ok7rhBjOe5mdZcrlMeUoY/tTruh+cyGRa2qexiX\nNWC6KPw4Uelyfm1fXPFsGlJnizjWkbcP28rBRBCgYtXYnejwAUv4stxdHIfo\nqoZyLwRQ7f/nnwHaG+3sI+rDPusfo5JKu2NKLAaHIUyiUM/DbTrA50f/BAol\nvXgKpGQ/ufvZVuaJAEJLRFIT2KyCb9uRFLwRmrZc6o98KYCz2o42EHin4uAB\nAYPUtTnXBFv7PcHcpAd2jdjFQj81iXwwNd6ajgdSWaRA7/OwrvfGx/AzVSC3\niGEtoYjSKW43saDtl33pdQ/JsR/ivcbLwgZc7YCKC/+OYjtMd3aHyIRhsgdf\nsaUKA+67l5i2Fo996tKOY9uAHq3Kci2oAa7SQujQwGLg5fmXUt81VxmE/eOq\ny/ff\r\n=Fmyg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDG8M3gSHwkmd+6+uFHNdPSHblPFHBOGfw8KynzgKTVkAIhAPnjOtzKyaznc7//cmywI1J+xOXnZOJgMz9oWBl/QVna"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.18-unstable_1529395656795_0.7793014525697992"},"_hasShrinkwrap":false},"1.1.18":{"name":"hbp-spark","version":"1.1.18","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"56fa52819628c5d42779a20b1300c7ee542b9fbc","_id":"hbp-spark@1.1.18","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-r6WvzXcFsu7OHAeYRu6TAClSrTHDzaytDcKNYOfqsHSKj3cHdldQs5Iub0g5CIm7uxKxI58rpU5yR9A2EGdW/w==","shasum":"3762d53cf1edf6ecd40541db449b284af14e3e69","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.18.tgz","fileCount":42,"unpackedSize":325301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbKLpUCRA9TVsSAnZWagAAnFgP/j/N6YhcTj9m/K1jvRuD\nub7qB3NbQMoIA5vn3JKFCNwdffvRjhUAS2yJ1VSxuE55GxtO1Qmjl1JNCAeU\nuwCaa0vP41y1k12dr7PaSeJLA/NuYVzwHH2xv/bdDXbxcKOo31AXdto3o3ax\n9c2z0Umjhiu40DP7X6Sm3DV1eUKEm+XsqEMttkxnP7pw43HSRMaFSJX1kYP/\nikRCtBNzril1hlrV/W8BFSSpPeqZPvhzsQM962e8wlEEZGuI+s4KRVIl/k2P\nUmKC3wodY4i2z9qKQqIhb7Fxp20MCVIeiaQSive+MYAPUMjsj0pU3o2l9uvB\nW3FpuEF+Cqd8ynVwM+rHQlgdydSZpBAshx5Uv4nFPL0SYLkt5Mg3qMiKZu4p\n2r/K4sxVyena2rzVOGlC9kW/o+NDu4PJ3egwVntQOyMLww1tZOuKpyiXGVrv\nGoxY73PFja3dvwpixAUWpnH6BAf/6dFZ2oSHyYdhJ31aAPSsrHCaoKK6MJ6Z\n986whZ69T3AFk8ys7eFkSS7vj7PTnXE3I5uyPkUorsLwCx2UiBDKfYhKkEct\niw2KjA3CcZGRLKGrBtBn0NzTuApAtBFH4a39X5T3AI+vaLmr1a8E0tZGBKCH\n1BIjD/DUMhYit+pBwwW/XN6UcU07W0s6BhdJhXNAtUc6tau1jVJ14Luix6fK\nY/5Y\r\n=gB0I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJTyh6thcKo98sZZOgM2LlgUIWwRvSImokwSRd3q2ZswIhALnAPw6WmFLx6mdWDLk2hxqfxZduxGLKonBjUnX9A3/o"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.18_1529395794951_0.8982281886600447"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.19-unstable":{"name":"hbp-spark","version":"1.1.19-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"5f871bb17808e766789e004d044ccb1d3a84654c","readme":"![](docs/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.getValues(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `getValues()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `autosize` **[boolean][51]** true - If true, the textarea resizes automatically\n-   `rows` **[number][55]** 1 - How many rows are displayed by default. Represents the min value\n-   `maxRows` **[number][55]** null - How many rows are displayed at most before the field does not grow anymore (only possible if autosize is enabled)\n-   `resizable` **[boolean][51]** false - If true, the textarea is horizontally resizable by the user\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the node object field(s) related to the node value, used to match passed in values to actual tree nodes\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `defaultExpanded` **[array][54]** \\[] - an array of arrays describing a path of nodes expanded by default (tested on node labels, path parts are considered as RegExp)\n-   `showOnlySearchedNodes` **[boolean][51]** false - Flag that determines if nodes that doesn't match the text search should be hidden\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.19-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-NpRp2LnOHS4Itj6zYtKrrmOWJuPF+vS1J1Rg7lXkk3MLF+DnwtAgtfEkQ1xfQMew4CGeg40mKAfLiXMmx6k/9g==","shasum":"077951c8a0e9640089db06aaa5aeac9b99f134ec","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.19-unstable.tgz","fileCount":42,"unpackedSize":333090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbK3kPCRA9TVsSAnZWagAADn0P/jYEuKQraeB6ptjaZVEW\naPjTZ+V/fNKvQN7B0N2wJ4dWThT3ug9UK6SLrOezZorf2atFfGSxaflV+BuP\nQFsEHIcbSqUiR79DlxyYzgIV7FQvXjDWyIfZ89iAFrL/jbWogaU6x8RdbMBS\nXL6w2ayuObET9+BPybD9jLGQ4qiQa7KddntEMLoe+mm3VXJ3/n09kGURJRMW\nIZeJN8fkhPHl0hr9WQc0J29r4cGChx+e8U7oXlMlegIS9LPuqX0hs1YBgM9p\nNdBu+latDxPGTkUxa0UXZWuMF1wR7PVuKtEXHy4yKm85Eyy1WvToB9AM64y/\nuABeOpM88K095xkkDgHnvX8ltA+Xj4WSG9t9bmEgzZO4d0ijtq6N2iwykGaY\nglZ0gLXp8nYKs/eAANPbR1fopjeNuUJ/f4eMEH5oa27IiWxattgNesRNyQJc\nNsntZ61J69nRQKjI2Fdx65R33kXQa3o66oYx6SvL8UvW6EBIIHXaNqEanYw5\n0mewA+0Ftbt+V4jkx8l+Fvc60/AzbiPow1JPzF5T9xUuZ/q5j/Up6FAc0t4U\nW2dO9YdC1KbfWewjVcnZZml6dkHSGeHBM8TioLRLB4xlIqmVIirQ963T96iB\nfOG7GBxPKHtPmcBb7o+sB0jrf7mWR7xhaphTIfK9ApEVSBbvDAYHLHdKFCRi\npyP8\r\n=T2jm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJkaGPfveRv6I87kFLoj7Hnx2bR73O/kpxJgk03MjX0AIhAP6ixZ6fNDRDmuBwDDo4XQ5OdMAMNzTjFtaP8ca+cKm5"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.19-unstable_1529575694536_0.22165986973309537"},"_hasShrinkwrap":false},"1.1.19":{"name":"hbp-spark","version":"1.1.19","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepare":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"560d473a0d95d2b92714215414f71b12cc9ac723","_id":"hbp-spark@1.1.19","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-2vYkUfgHpLULIR2pudZNc4b5UO7XNAmQaN1LWQoShyYnHYRfu5pVERPRRUvh5hlgHpE0LLxtWfcqa/oaI+JU5Q==","shasum":"a7dd910423d1cc3f5242f0fdfced24952377a8d5","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.19.tgz","fileCount":42,"unpackedSize":333081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbK3l1CRA9TVsSAnZWagAAGs0QAIly2dc6SPwt7gwJ3y9h\nloA8imX5INj7fFZYhbzisvvIR6Q9E8qF9Cb1ISKfjRDX+C2x2HvCMs1DjvLA\niGkm4FKNzkShVQlwO1HSkTBeP+4OWBWOPGBeytCrDaJ736Jjfhb1fpL4oqJ0\nsntjT51dItHZTvIqawSr41Ia/x8G4YyNPlYbf4IJWPu9DfmtVmG7qcVwo1wx\nASiiXQGvalT+9m72fPeJWdvWzWT+OqrOZm0+P435D/SDyY8tUZgZd8PEhJaI\nZf7ZWDqh9HZudYNEEadeBq6N5OWXLw6HOwm6jys7wk6yn5HJyqt0IjKW+Lq9\nWvt/eOmxTXBbe5K1CmXujRGQlVCfVck6PmRIUEo1DlBsvcG3ThxcnCbnb1D2\ndq2h0/G4O2TZ6m9OPWPPAnDrQzNnJ6HYIat+v/Tew0D6wPyQzF7BD6HXxMsH\nQav0YBCXAYdhCWrd5rM7YLUB9qzd7UoPjY903A3Mysmle7OUKUdXajxA7O8O\nujwWGXaZv3mcbP49cCWmHSP+/BgAb1azAMD4eJAjMBf2AbOZg2niHQB83W4o\nmjqvAqDac5UaSWVcTTQlaWERq3sTV/4iIQhxGCwWFCoJfFWiINbAqcmaxH5s\nOZ9wtXor+WXI+JOuix7/yF4ZIrmbuUijNW4cDVALTMBydI/2+tWYVrH8xk/l\nYDKM\r\n=m0US\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgEr2UHCIHJLWMf5PYUCmrRHplQO9sLwP32sT6FmXCZAiB3SWChyQWdIdvHA24aPx8fR+DGMG0SlQyVlsOPfsIPfA=="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.19_1529575795614_0.6536754342252289"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.20-unstable":{"name":"hbp-spark","version":"1.1.20-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"54e6d25e96b87f2725ed39e87a3e3bf226ebc4d4","readme":"![](docs/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.getValues(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `getValues()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `autosize` **[boolean][51]** true - If true, the textarea resizes automatically\n-   `rows` **[number][55]** 1 - How many rows are displayed by default. Represents the min value\n-   `maxRows` **[number][55]** null - How many rows are displayed at most before the field does not grow anymore (only possible if autosize is enabled)\n-   `resizable` **[boolean][51]** false - If true, the textarea is horizontally resizable by the user\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the node object field(s) related to the node value, used to match passed in values to actual tree nodes\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `defaultExpanded` **[array][54]** \\[] - an array of arrays describing a path of nodes expanded by default (tested on node labels, path parts are considered as RegExp)\n-   `showOnlySearchedNodes` **[boolean][51]** false - Flag that determines if nodes that doesn't match the text search should be hidden\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.20-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-KuPI7VqHQ1Sy2YXzjWmS4M4zLP//piiwthIpr9Arut+AvswMz3ROHq9jFp9G0kDVtZnEwe86CF8NUrxwQxrsow==","shasum":"70cf9be49793939a3e5f0640998aff7d231bc94a","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.20-unstable.tgz","fileCount":42,"unpackedSize":344291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOdHsCRA9TVsSAnZWagAArTUQAIoKuUF2KUyrvafgBqVh\n8ZAGsHIfs63rS2pnFp/cuY10PSWvDl6q0/E7HLZSOePWlHXZUiN+EfLMjdpc\no49ZDmlm7Hx+aBUex4Oj8Jrw4FoqE2ysJVn4aOa+KjwlOnRa99oO95hZhJsp\nowcUD7eHldSH47AIeKqj0SgZekehMWKOlmliLoMwjykHi/v/zDZG5S1Hrfjo\nOd0EuE0X5fYnTig31E9pXMSAF07t0jtp6t6bcUoCffScRWJPxFuV3dvbS2ZG\nQrS91X3uq/z3Jr2GJhVyrCRhx2wREW15dFkA1V9g4EdD9a2rP+JDgNBU2tIv\nu7kTJW4pHEOj+mPyW8dy47lITBzNQdqaJyBpsd1zaTmghVfoGJV0Ytgt0pkB\npwEMJycmxikG+fUosvCntwyVks3VH14NtiOANNO2zmiAzAzIHLoLnp+6e1UY\nXY/8orKVkq2nGj/VYLjWd37fnEoe7e0U/X0hFfoassI10l2b6MrpUC2/O/Ar\nYUa1Pj5NHtiQnOGJuTuUtbeVlN0z//r2iOS2c3Dq8+dJPks34ri+zyS2zYfI\nriaKNAMRLXnZd8jLFIqweAptMLcUldUi3hrUCrHI0vjIFBfuP6oxwjUMsYi8\nebJkIUAaonOXk01GGjaH6XW27fgpvC8NAR7ViA8VNAuM25BjwMdWyPTjPLQp\ne6Fo\r\n=P5Oo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDABJ59ep67DI3SiKqSUETu25v4Wewy1HQINUkHhebxBQIgVRnc8ssMSsYkgPPWz8MlCiw3LTqm9Snnl/k53dZ+ajo="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.20-unstable_1530515947859_0.9708402526133588"},"_hasShrinkwrap":false},"1.1.20":{"name":"hbp-spark","version":"1.1.20","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"ISC","gitHead":"fa32fdd3fe1f6e16532538b9ff6fcddcc7efa3cb","_id":"hbp-spark@1.1.20","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-GnPx5p1iIazQTh3XBHjJDwBt00Mv8CaGnwhIOTds6/J/+u7F7yEJ5+IopLn4pmehLJRDsLOStm6FRyI2XuMP4A==","shasum":"491ee1d29489cbf8ab705879cd9f99ebfb721a1c","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.20.tgz","fileCount":42,"unpackedSize":344282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbOdIvCRA9TVsSAnZWagAAf/oP/2RiJJ2xv874ILPxBJB3\ns7R3NBm1NoR8vYbhRkpgFtABWHW8xMTGtVASINFmtaiizMU9nT+eBnTiAUzZ\nzPaT1vnEsScJCewv828E/oL53u+1oZBkyAH1QJiWdL8+eVghwDukS2st4Or4\nWgqsGbWMTsnZjUxywyFTs4as7I6kegFLjd2IhavZTZodEZ0dn9QyqNLxqx7r\nPGbDrIJZDv2zwnNvgxMb2sKyUAUEj7a+EiVHA+tOXNNWqrPQ3XT4p69NEATK\nJm0f7tVO0KtxROJE0qccO806OjPUvY4nZBNvFQ5NKTmNr2a5msb1AB96PuCI\nCMS4ipO2hls3Aq9Yvejh9Q63n9oTi9E9162weRzZoIleKI/wlh64fvZBVZIp\nNggdsEF1xu5Yllna+hnUc3hwWqhZQ9/zM2YwFZf9EPzto3e1+1HOvV1g5jug\nSxjyaHJXw7/ffiu6/0slRlmROZ6Ki6btY9h1Zcde/rfqfpSa92PygSPBT9oj\nJN+mc3Ge2PCNggMhg1GkMGUb9D3LPlAeNyovePwZ3BPXxI8Hvqcb0FtKrKKD\n78q+5VODH9ptd7+EhHjozLw9LNbIhEsR1ZmZkqmkPku7EzSAPXsL0NMMq+YW\n4bPW3NT834Yq7aDTPtYadaaEyVJRLYuIQlJfMyU5lCLoPnVmnSUIWtg0/JFH\noZfj\r\n=8tih\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7eSG1/Ai3j1E73yIvEkMbo/+MlHzXJxerkMphFQXuvAIgMMrrqsgS/vNIf9T9P46lzBOYVFLgPyoxZjhF79JKXZs="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.20_1530516015384_0.8243539812163523"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.21-unstable":{"name":"hbp-spark","version":"1.1.21-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","gitHead":"6b96ff2762e9a57bd02b9310fb4d2756943edbb4","readme":"![](docs/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.getValues(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `getValues()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `autosize` **[boolean][51]** true - If true, the textarea resizes automatically\n-   `rows` **[number][55]** 1 - How many rows are displayed by default. Represents the min value\n-   `maxRows` **[number][55]** null - How many rows are displayed at most before the field does not grow anymore (only possible if autosize is enabled)\n-   `resizable` **[boolean][51]** false - If true, the textarea is horizontally resizable by the user\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the node object field(s) related to the node value, used to match passed in values to actual tree nodes\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `defaultExpanded` **[array][54]** \\[] - an array of arrays describing a path of nodes expanded by default (tested on node labels, path parts are considered as RegExp)\n-   `showOnlySearchedNodes` **[boolean][51]** false - Flag that determines if nodes that doesn't match the text search should be hidden\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.21-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-Y62fijLMwKCKb4V4oa12FjClZdeQTHdY/iSKALCTHlf7TQopfcH3jXcUKVJe4DxZoXPfsVn1iU49GKKOtrllTg==","shasum":"93a37e22e61eed3ee63409e93a2f2324cb66a820","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.21-unstable.tgz","fileCount":44,"unpackedSize":349215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbPNEQCRA9TVsSAnZWagAA1KUP/0uSjDJg5Qj+DGUCC72t\ndYEyhS1Krojp8xP4b2M6EkNDY+E8q56opJUM4a1Pc2wL1dCsc3ZPJGrnrMaP\nl6HqsU1XmH0y0X84xBkZXBCDI7yVmhX2opxEj/zXtOjHokDYs2AtSMm0WBa9\nO4/wbDm8J/VzehPb8dpouEKZCDpFEnjh1WgFctEfIRLlgAK0UJLI/pLw9EBs\n52PxGcx8Srm07MZS0r8M7WjqGIriidw5Z94wMESu0uyPuXXUcciNAAWsDL0r\nD62LyTFq2hTGmECvACh/SsUHgwl4eCYHS3yHPjzRdYdmYqmcAPoVUN5BOsuX\nuOyHrpt/s2ZKYVeNREF5VIxEWGrW9+MYgswZ5KZe4vUSHvdfY5nUs5CeCfKK\ntiqUUIYYYOszEsBpjD+KxsDHjXfxNdDEPYCvmOH4wkx25sYZeIRk+9ym+NIU\nvTIWOx4o8AbtbRbytzUlwWkyMfl8nFPOYxK49h38UZlnJ0iFrdpeiWJuHR30\nOBvn0o/321ysloJMMwy1nB/xda4oKiDu9NPhRQjmrUdpa5/9kxbI93OJCKe8\npSXf6YJug/QwDVxOh76UigBOR+fWirVZqBLFrFOGoEfdWYUntDD7yLAB1cEX\nwWkqwBrazx0wH7XaYC11mjgfmKOvqL80+NcJCk/l+9VWuQfBInWhQ5CU4Y/R\n4oby\r\n=GsXk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDl2WXUAsObazjQEy0FfgViWkY7pi3WgOVFu65Bzh8TngIhALfkDTdSUsU9inYz6wv2ic2Y5QnKu/uPk0hhDWNvb9Ot"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.21-unstable_1530712335934_0.5718030416127164"},"_hasShrinkwrap":false},"1.1.21":{"name":"hbp-spark","version":"1.1.21","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","gitHead":"8672604c68c58ee7efd3e4839d9e6dddb866a973","_id":"hbp-spark@1.1.21","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-acbB0Hfr+8zVvwbJJjHppILCnY8+5uxrghpxd1Z5QJrc08T3iZZ021y08gHzdUrJKg+WDhThy1fbCLOGd/q/Gg==","shasum":"6b5f60b062a39074f945bc2b86f2fa503c717646","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.21.tgz","fileCount":44,"unpackedSize":349206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbPNFfCRA9TVsSAnZWagAAADAP/2sEWPkHU5A3Jwu2aCQY\nzgxbBCpJf+TCwtfSgsOn6uqd68PXo8qayotZOKVTwz6Ot63IMwsI5/axfbzj\nlRdUgaWjFhcObPubozRBo9y6j3ktPQMr0jEHrvHKfBOV4NKwCJhEAhslaO9x\nN9C9RKrXWMF8qNyMeM2CLqYbJRuKaau3AczuKkY59kg5vx/xzfD85IqVfbYa\nn3K6dH1HPLW7HXJdIhfCwKzaWAGB/7jhC+6RptXejc0qzsMT+4DTGTumRqNQ\nP7+QGKX6JUSkuFDLq+tJhAUf3wlyZ0mefZxmCgxFWxNlQ2mOxlN7y96P1s2K\nTRwVLhlXv6eDFa0l/NKhgHXwIN6ZFTaLocQfGByeXvFPamYnwNGTngaiS7DI\n8llCxvTH6CX5tgZUyMfmjP8zoK2qKXkG0QMRDUqbANEDjcqZvvFvnf5N951N\nY3SV+bVYWwaphV0csafrGmG5R0gZQuNFaYybiCYPty2+x08agpPQkswrEOMF\n0dmfiUsWwrTlbsw/DD5nyqbOIZVkrWRXM7jQCh7g2v7zynyyO8p5mdWXMwC7\n5wwPMsjH+pycT5rb6UXbfGTILwHE4VVWCURTV+bfuZ/4amuGXP7JHIGHmb1e\nUnaCoXFSiKs2LiG0LUdDobeQOg7ZgZAxM8ILzYYM7pxc216XrZoOLkjAJzbr\n+AUS\r\n=g+Id\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqrdEBY3VS69ZqsE58+5Jauw1RwSrXf9IN/Op9rk0ygAIhAILrhclAaG5trzIUWRHaOXcu3t17V6XR9b+0ut6+q1lE"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.21_1530712415583_0.4114557721929233"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.22-unstable":{"name":"hbp-spark","version":"1.1.22-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","gitHead":"651de806cb8daab54054a931c94e7f1c9f003541","readme":"![](docs/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.getValues(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `getValues()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `autosize` **[boolean][51]** true - If true, the textarea resizes automatically\n-   `rows` **[number][55]** 1 - How many rows are displayed by default. Represents the min value\n-   `maxRows` **[number][55]** null - How many rows are displayed at most before the field does not grow anymore (only possible if autosize is enabled)\n-   `resizable` **[boolean][51]** false - If true, the textarea is horizontally resizable by the user\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the node object field(s) related to the node value, used to match passed in values to actual tree nodes\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `defaultExpanded` **[array][54]** \\[] - an array of arrays describing a path of nodes expanded by default (tested on node labels, path parts are considered as RegExp)\n-   `showOnlySearchedNodes` **[boolean][51]** false - Flag that determines if nodes that doesn't match the text search should be hidden\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.22-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-M9VlWn43Sh2FXy+TpTAHNwNm3R5dCzon2aZiqIiJjxeUyI8ij8af1kSgUXTdwpEpQvwuDTiEqTrbIgq37HDDRQ==","shasum":"d9b6337bee454ceeb4a7c2bac24002ae3fc3aefa","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.22-unstable.tgz","fileCount":44,"unpackedSize":349242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbPg+lCRA9TVsSAnZWagAAMZ8P/i0mwUZjyEaRBBCL70n9\nV7933Q79HQPA35A4lehFlzhdEePwZhjEFp47BthiJNZu0tIXeMrcwWkLztmA\nu56F6pAGcpBjFwGnj3Hta9RhB4xr5A5bbqPVE85ujacLhNf3qZHhZ/pDboHX\n3VMxC0opnwmrZtVA+dJneCyc8l96GHiNqpbm+GRC2ht7+GKDFNJA/W9xO/Y5\nbGcUmQQrukPx8fqfitFpLNMaxLtZrZFK6/5wsB1J5UYL86tuV3ETlJFGUhdY\nWNQRFRfkHMFkhT6QZOW/bZcsABlKeRKAoItmqqZ7t9wUZHTlOV46usdnrB1S\nO65qhru/5JL0vtK2brt/ufEobCA8iWMoR6dj9jIf10ZaJdADyGXFXxfm8mJv\nsmC1PFgS66R5dD8MS3ZFKzNQBy+EypYeaRNotBwEb2gtBIqrLbJJg0Ey7jKj\nB+GkZtUBb8pTZaMzLZJo0ienvrwp7kpgtjsGvDBn7FDh8qscnPRNg420qffl\njPMZy5EgYcoqlJ+cU2soyIUGDrfVEHSfgNcEKjFNoZhJTHQcwTZbkniDgC1D\nCKB2Ye/WWm/C/d7EkeS5oxYDXF6AWKigrjMnyJsGHZpkNsbtq3tyz3fpO25n\nNb539wAz5v7XIEkWirVglvdK98OksrulkOAo4p+ScB/qAyQ2Xw0Rwtq0mM/l\nZfTd\r\n=4V0C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEA36DD8Pu+gYiIQBcKATA2wEUaRQ03y2Nrm/SiDvh53AiEAmkzn+zWj5hOppRU+4LoT+9eJcdFuRcvKZYOgwNAWXoQ="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.22-unstable_1530793892990_0.05182278731211065"},"_hasShrinkwrap":false},"1.1.22":{"name":"hbp-spark","version":"1.1.22","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","gitHead":"dce2b998402b13fb1a58415a6cdd2f8c5016faea","_id":"hbp-spark@1.1.22","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-feTXlAyhN5a7VkZgc1FrehoM4BXnvy6VEMC0uB3HrStnCq+u58Xz+8pOyQkMHQbAHJb4dQDKPYFE5Hn9AVeAMw==","shasum":"16b73364ea4e0999cdbf8a6d76a01064846010bd","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.22.tgz","fileCount":44,"unpackedSize":349233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbPhAOCRA9TVsSAnZWagAAEgoP/A5kK/S0XXco3w8ydRYI\nNAkAapB23JdjE8dNS7borR9HiLJJ5qPaj5AJ4QW/8EsQYq8rjisj0/6lpbGP\nVj+//7E+HUoP7r4xv6zpasTmsrDo7DtYCccL+l0H6gpLpJ32Eq4buPgZHnEu\nFYmOc2rP0jmgtMyda8S2AR8yVmrYZprHPtMoHQH9Ug7gC65yFVaZqxlBr1KU\noDmjpWmou6Jn8upqn/iecuZk8R9+iuJL587vswU1xK54CDQxYE+OTsKcMW59\nt+JYxzXt3C72/lp0WZiEpiy6bOM514Z5UjXu/EVrq13OUaXVd6a1uPdRFceS\nr+GtosI8aB9zXH9z9cqcxWQCppXfYVFnpLoMLRVkcOA08E4QZzNIL7jdb9fU\ndcaHv6cnR3CUcVlMlcLzL2GZZ6LR+zmwEALLxogcom012D7G4T3wcUSYZt6N\nw25sj8azwnyMWGrB5YwGb4msjVUwqfMQlP7EYCs8tl7W0z5FJ6q6CCYlDZeZ\n2RtOBOcgPSM9m7Up7fnu6czDLD2OXCbajRd3XitMo61rD1M81FAGxUcLEgQC\nMCw9npNYLtXmMeMNHinrtaT69Y9/zN9kA93xkkvl2v7DjW9HnokZv1vrwFct\n5e5Rnj8Sth7pH7mnFD/V/jF9JcbBj3VlrDMS1eT4oms3R75FX1JfDNZwnFsk\nTfYl\r\n=IAVh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJC3+BNfC/4pEXutfllQtow67f+bq6DXrL58zgFZHzMAIgZ8qIPvNvrvfve0A1OoJDPe/Xwb4tR1kvPdYPnbUKZcw="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.22_1530793998375_0.5720800981508343"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.23-unstable":{"name":"hbp-spark","version":"1.1.23-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","gitHead":"9ac315cb38f10b24c5ffd6bae22c6661416a96dc","readme":"![](docs/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.getValues(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `getValues()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `autosize` **[boolean][51]** true - If true, the textarea resizes automatically\n-   `rows` **[number][55]** 1 - How many rows are displayed by default. Represents the min value\n-   `maxRows` **[number][55]** null - How many rows are displayed at most before the field does not grow anymore (only possible if autosize is enabled)\n-   `resizable` **[boolean][51]** false - If true, the textarea is horizontally resizable by the user\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the node object field(s) related to the node value, used to match passed in values to actual tree nodes\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `defaultExpanded` **[array][54]** \\[] - an array of arrays describing a path of nodes expanded by default (tested on node labels, path parts are considered as RegExp)\n-   `showOnlySearchedNodes` **[boolean][51]** false - Flag that determines if nodes that doesn't match the text search should be hidden\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.23-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-i+L7epC8P143NOx/IQz4oOTJGhH0duf0miJ3G7pDVwzF6U0yzY5VZ1ood2tQ03OCTkNv2T+S4tdabHOQsHKyWg==","shasum":"4a0640774d884bc43090ba6e602dab61c54811c3","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.23-unstable.tgz","fileCount":44,"unpackedSize":351113,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbQ1w7CRA9TVsSAnZWagAAI5kP/083Zub8/vQwkfH1up4A\n8aM95+DcEvFI+McqOaufMwgvTI9p6y2hkdLa7KQDe5aKbOH8xr1nQx13s3h2\nkOE7wMb3Ey6VJeEeB16dANIThS9Txl2zDVPhI3oLUdnHp4vrlwVXfjoEcaeK\nj6JNiEPL/AIf6S5+LCO0RKd9d7LLfFNnqSddN59w0iKYTcJXF6zY0z3IJh8F\nFLVdifyiCHJQZPWHkNGt1jeYiiTnILwbXu7UAPjzVBjtFMigmLswk4uKEXqa\nLkMYC9hLU1CdBfgggVnIDzfnWnncrPWgJZO7Z4+sDHI65/WA5YTMAar/2EFs\nQgRW7/c7k+/Txpuhwo/b6hOEG1movUXMCzBkf/GAwlaLPwr6anVg4X7J7ieB\nsaz0gkvknt9z7jTtwoFTWU0VssQMZb++DiSVssZYZttE0QTjNI9W38wpXNXK\nhi7a3uthcTKoHaF9RSVeW/jzVecf8GafS87HQB967JHrVZxa8qu4y3DogKxy\nevERugz8LeE61+o9JRPu81eTdATObdQIlOTtpGMPge2xWpAzOzdnD7AOJbxq\ncAoaMpy0nYvRkatb3QUH8gKRk3Yce+nA15V/GAfWBmc2aqBvR2LPYcuEETvK\nvz3YS1bSYXB/2dEbZHaCCCmn+t57zfjVrL+IddyCKVmgRz5/L4yZFEMtTMNy\nBH2P\r\n=1VQT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH5pUsmDFDCXb1wVwTxiWGW1rKnFoVqM3q/yL4fIBdq1AiEAwQtA17Ml9Ycvco3A+bbvoyvf6g52CM3404u9Frj/7nU="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.23-unstable_1531141179575_0.08269904518211413"},"_hasShrinkwrap":false},"1.1.23":{"name":"hbp-spark","version":"1.1.23","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","gitHead":"a59955397053c06dfb7b44a95b7d4191aea09788","_id":"hbp-spark@1.1.23","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-3P7vZkXiul2ZYyBLNBWJH1vdTMSFgpTMd7cMXOTODyG8rqFwb8sJVZP3iHulVXjxDo/JxqCrUNfEwzhz9MV9rg==","shasum":"e9331b7421ecceba5214d8537693f7d10b1d9751","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.23.tgz","fileCount":44,"unpackedSize":351104,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbQ1ySCRA9TVsSAnZWagAAfCoP/0rAhC7SHD9CsIJKZanL\nqc6sdUPcswtShD7WaZfMQcxdSghv4hSHA6zNsXKKcUHFYiAFlmCbB5MRcJB0\nvqLI1ii8cI+iljRn988lsP+dH1c0+sD9Ol2/OE0Xw9vY2ol2Xj6Ii9MJ4kLo\nrbeMZ8a/TP4SemnG0KtNKDRfA6lYSrsWIR3Zl99Ra1JzKkzcaNZITFEsB07D\nKCl7h1urapM1m5pT0MJTQ96g3hNuvjv81RR4pvft5LOdP0ebQvOYfwCA/0vH\nlbcyW0/0WO24tnpFyaCMrxjDgyqmqpBkrpHPS7ZAZTMdoT7kzDa7PBrsXalq\nTV5PO5FE/J+rEKdMDQbSCUNhNhlc740vzVnDnVnV2LuagL7sX2RGIKQ9Mlc5\n7ghydf8NOlg0dvQ2jVzZsR89UsDS2cPrPudJfauan6fiSa2TM81s2p6hdPIJ\nfhCbeXslOZGHukuC7sbo7AVwa+c9CqKLhSCHi/D8E7cwtMWQ3V2wmrWEh8lb\nXhc91B9cjJd27UYBJcc02kokVdeRg59AUh/ozL1n16tX//DlZBvcr8YGrztC\n5OYwhIkP47PNu+I+R5KYux5tfGQ88hUKsd2BHFH4zjdrmmCc7dN1YMnEhu5x\n+qfTsk+htyRhkUfliRHcg8wmxxLd2P4WvBzw4CXG5oACAfsweJcPumbzerrM\nOPlH\r\n=su5U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxjmI1MwsS0f7H3q2CGY3Gciu2F3UU5mT8RBeKLN17/wIgNscgDF4YZgowiLlgTLGc26f3CzLoE/5aLSidMIv/9nA="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.23_1531141266872_0.8553302702873482"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.24-unstable":{"name":"hbp-spark","version":"1.1.24-unstable","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","gitHead":"05d35f3f7d6b1fa31beee3575e85e1a109f67bdb","readme":"![](docs/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.getValues(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `getValues()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `autosize` **[boolean][51]** true - If true, the textarea resizes automatically\n-   `rows` **[number][55]** 1 - How many rows are displayed by default. Represents the min value\n-   `maxRows` **[number][55]** null - How many rows are displayed at most before the field does not grow anymore (only possible if autosize is enabled)\n-   `resizable` **[boolean][51]** false - If true, the textarea is horizontally resizable by the user\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the node object field(s) related to the node value, used to match passed in values to actual tree nodes\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `defaultExpanded` **[array][54]** \\[] - an array of arrays describing a path of nodes expanded by default (tested on node labels, path parts are considered as RegExp)\n-   `showOnlySearchedNodes` **[boolean][51]** false - Flag that determines if nodes that doesn't match the text search should be hidden\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md","_id":"hbp-spark@1.1.24-unstable","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-cHBjmC6ChJqQKu/axftWd/oRdBc2F2O3B0uuGn5ZwOcWfhS7mU3FJtHb3v1oYmHh59zW+tT26a671H4J3xCvQw==","shasum":"9c9942993e4fc7a90b63be964db580d4ba9cd6a1","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.24-unstable.tgz","fileCount":44,"unpackedSize":353805,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbR03GCRA9TVsSAnZWagAAss8P/0Ws65KTc1x3QeS9rt4A\nFTGsGJz7zAJrN0Qc7iYTXVaLVKFFVi11fVT5vr1y3ugzVlOnoJuWlpnfIhAg\nk76OJnD+5gtol8EY+wGI3NE3gqmyk9McRSbr0QwM9tmZljqaXiUCgaM00rUf\nT1SUc3oAHkpO6gQhOCTzvNa+9HtfrkB+r0Ht9PjgYioIOgxLYNzCzpqrUtfJ\numQE31Dr9RD3XQd4HsZooUPDY8+e7BEP6pjO64E6T5D0dDxY0pG87kGJVgId\nbn8goIBzMqFq9iPYSvJvcLhKQxKhpA56Lqf6D/bSWM0P8kKX3EibD5ctuFLh\nON5dE6VgRPSbgnzjjwlh4YPNDKcNFw81e2yrc4HcRWala7QhMN2ur8EyyFTL\nvKTcIg7V3RmQPbYJjAoL/gflmw6G45bNnTQA1P1TkBoqzuTjZRoArjz0r491\neNjsd17arXm0PMYuriLi5JuVRbBbzgR4y2v/LmFMMU71LSsELYRPxDe1z10C\nVuntlrHbNKws5mXiRuTyuOWP/Jx7y6IJx42+GNwG9t/Zh6Db/wEP1RClNEUA\nZRb5RMr8dM3R6LDdA3+3w1V+7kFUHERwfIaL68Ed5Iw7IsnMf9ERU7jf3omQ\nj8RZBI36S/KEEOz/Sp5MhssB+TJAl4tR0zD4INpD0uWpgxHWyNLHOaziWP5W\nFjkH\r\n=doxk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEYOe43ujAofG56oRUrGJ46mKyEDTf0GPn1Etul7dngaAiEAlLNpSjrpclSJ0YlDhqBBW8NW9b0PeoJ3iGlI3qH0i6k="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.24-unstable_1531399622098_0.7825230293809577"},"_hasShrinkwrap":false},"1.1.24":{"name":"hbp-spark","version":"1.1.24","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","gitHead":"8e985a4fd926811110d45580df60d4ab456ed0d3","_id":"hbp-spark@1.1.24","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-JVgeJTMLBa6pMT0T+Xbz6lRFAkS4nkygJ2MPTHpTqXoepg+o6xj+Wbjiy7iH7U0Btn8pRZKKjT2ncloB+Piz1Q==","shasum":"ec5d8b34705937be3eef2fdef4e48d07255396e8","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.24.tgz","fileCount":44,"unpackedSize":353796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbR05tCRA9TVsSAnZWagAATFwP/jSaC8vYRh9BaTnafQcS\nJvzZ/5HQSaNHI1Ro24K7ef5Jpa4nkUphzaAcnNa0L3ptFmuVyKQOxUBIvS1I\nUR2h35Cjj0bi5gYFKKpow8+yf2SE47HWufIeGYiPPcyu/F6QmwdvxThgFgxO\nmHAbDmoO7ghkScx40jjecQlBTBWmGQYj60hRo+wprtGt5gNtKzgMnfxRkdHS\n9fQDSJmiQd6TlSEf5GxRwMp8lltMJW54EC7cP239tx/51919O541X0QeEvc2\nerH9suPqd2dtbtUrYxH1QrgRRE8POIQk1TCP4ff8+q4e7R6xorzCPpSvgL8b\nNtBXHyT+/mJJrKGRq/AGOczCwTzFKvGPgzqqUo6+3VaUkt10VTVy7QfBGiPo\nLvgl7p8aJDH/Luv+z5/MQ53A9sBAQ+X22hTNRbV93Los+xRNaDqBCQAnJAa9\nCQHUCmHQyNGeFptt7kMxI8D1WBfY6/xZMKTeATKqmuzSnWbfi6pmePS+633y\n4tCdw5mXlrLou8cNB9w1/NvTyGq9R00RXn2XwOqXyH1B+345KzQ8A/no2JkI\ntsYhg4sy6+IcKX/0k/vS4W0pZTyUraqz0vxxlPk0eRL2AfgjSrrlQ7YjO1SA\ny+7O0QDYbqD+ZzqLtH1Ktxf9ftXB2xkQejSePM5SJcKHqAlSc4aqwzHv1W+x\n4XDy\r\n=8GeX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8eZ/nYt05clK0EkYTtZhvdvWmsdkXCu27mhnIL5ZBMgIhAKIzLZl7IumjGmPxKmzTn0r+d16xKAhUanGfAwSlMJJc"}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.24_1531399789211_0.22103811035264465"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.25":{"name":"hbp-spark","version":"1.1.25","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","gitHead":"40bc4e277c86f3af20164077a8bc5c7db358027c","_id":"hbp-spark@1.1.25","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-h6cczTbK+X40d7394l+80U4kqw2w82Tn81V6brrcgWfTWAaJcbYXH9H2Xs9bilT0lGUs1AQa2AKZ+DFuU7FJow==","shasum":"f41d5acbe959f28e27ab1cb14f64687397b77cb2","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.25.tgz","fileCount":44,"unpackedSize":353737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbSL5eCRA9TVsSAnZWagAAFHcP/2dYspVoO2QAfzTMRpcq\nHt9IiAu0R5es1SR1OUZyZL/4Hzduz2cu8mkDOixWhDCdc46mz2H4gNPMovZ8\nD3lOmznUzVSpNXqyyJ8nMJHaN9xISVif7aCRRFU+MXUsCxjixS54/Gl7e9iK\n4ZCtrqcXQr3hD6/b7AB80oWcnq11ZgqlwAmFw93ePMr6yzSNkwWRa2sX6xgx\nVrlx8T4L4e+HH5zqAOI7xpxE9RsC+M5LO1vsJbgB/Gt9+URernlMEjWts/rg\nIyNFV1QdOOQSiMH3oAwe67pziw9hcUCC9V/6XWE3gKYu3haRIc5HRTWtWZdg\nfxWpDmKynfvy/8K9qA/qidVUI0I/q+dZBgciQAEQ0AQqgiNWeNXUcVu67fhB\nVB1Sj9gauy8l5+T1tNkUvODGcfePvIpgsZS0tbozh1Z2mUIfy85gtt0sBgzc\no9mdYjgtA6AHkB2/+BbkqGJygsn+AlhOXBPYEzyUsa5gI/SoVcSABKmASGSN\n5GGkhKte47409DzBKWUOAmDAF0tmGszik6OohWVXGsXIhbGGEI9L8tUpzlhW\nLRNJeZHQrK755HHsDs5+G+JCQZuexbLV0yI6kOEVGm+0HI2ZOfYpL134UsfT\nxtUhHqlfsIkQiAwWzfvIe43AgDZ0rsnQ47jRiCFDW6ndnNFN7Cjz7CZYMxGF\nAn5J\r\n=C/2T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGka7QuyJIr9V2SkS+YWQNmG1OKswCoRfvCTO3wn9xHAiBtoFryaOky+AbcSGgZDJsOrH8SmII8botoYnUWlS+PWw=="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.25_1531493982681_0.04929406116524038"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.26":{"name":"hbp-spark","version":"1.1.26","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","gitHead":"b16a183d96ec719785b26428f599f46138df6bb5","_id":"hbp-spark@1.1.26","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-5qxrsTaeW8D17hKCmDPLaOgNNdqga2Itt1vpNP9z3Gy0dfyhl8OqNntqrMXckgp8Blo1sWAYHo3bG52Z38qXBA==","shasum":"1200b3afd89b12ffc45e96da0e0458f4f626850b","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.26.tgz","fileCount":44,"unpackedSize":357505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTKVJCRA9TVsSAnZWagAAhxsP/3tw8qdgDNSOKwqW6nZO\n6oksz4znhZ894d+wjHHZjmN1B+x/oJYQVIXcIfunhrryL1z86twrSd1EH8n8\noMs31qqZ+f+bYJ0CaywnnPvVwh4zsE8SNYUc2vZB8wvQm1zWPgxdb0aiP1tN\nuC0yZzpoX4Cg+8AWqJJO42LS0VjAUTbiRqYSVnqx58OYLEaWwXPumaNIV91R\nSz+oOSUMw2ZuG3uJT0Lw+fkqGpAGg9yjH5aPuySxzsHo5N7VPhnVxGXIOQs7\nzF49vrUORflzgaKqFfWDD0pNLvGPEftTtqqVzjyFExc8FCBAygfIO0IoTER8\nQrJvnFPe2aDlFoH+xPaFV/zafVwpgrqJswD+yiUppKL2BybwYsLtLufGxNX9\n0sQfzpxs1/KKa9yONOy+/qgcUbNrjLrNQq15GBLJACKXgt3dewH9152trkJp\nNow33AOF7cWz8JAwZ3Ca5davcBwtHdt/rN/TedMz/5Wyo9hKAr4/t4Rhksye\nDVYPf7jFmFBARpMRnjcMtVG5g1NHLGyHUpDSEhefFUw0jwCJnUnupbOS0QKI\nlgwY+aOzMLsku0N6k3OIVfMZk16u5avJ1Vpsb06eG/Xc3a4kV9Wi03fD6t94\nZwNSW4IdCzyC+KUOqDNuvw90PPmJKvs0nmervzOtcXT4cVdYFB7ZYJrxCLrJ\nHAmJ\r\n=uIU7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHS2ZUvLWLPXu6ysNwEQ++qeFi13sdO25CMgWO42/3QgAiEAhJYogcDRQ5d29HxyphsmWSrwzdg9+5w81ShXgjdM1RE="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.26_1531749705594_0.3927366203230247"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."},"1.1.27":{"name":"hbp-spark","version":"1.1.27","description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","main":"./lib/index.js","devDependencies":{"axios-mock-adapter":"^1.15.0","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^8.2.2","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-imports":"^1.5.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-register":"^6.26.0","documentation":"^6.2.0","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-plugin-react":"^7.7.0","jest":"^22.4.3","mobx":"^4.1.1","mobx-react":"^5.0.0","react":"^16.2.0","react-bootstrap":"^0.32.1","react-dom":"^16.2.0"},"peerDependencies":{"mobx":">=4.0","mobx-react":">=5.0","react":">=15.4.0","react-bootstrap":">=0.32","react-dom":">=15.4.0"},"dependencies":{"autosize":"^4.0.2","axios":"^0.18.0","babel-polyfill":"^6.26.0","line-height":"^0.3.1","lodash":"^4.17.5","react-input-range":"^1.3.0","react-jss":"^8.4.0","validatorjs":"^3.14.2"},"scripts":{"build":"babel src --out-dir lib --ignore=src/**/*.test.js","build-docs":"documentation build ./src/index.js -f md -o ./docs/API.md && cat ./README.prepend.md > ./README.md && cat ./docs/API.md >> ./README.md","test":"jest --coverage","lint":"eslint .","watch":"babel --watch src --out-dir lib --ignore=src/**/*.test.js","prepublishOnly":"npm run build"},"keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","gitHead":"a97223f07ff8429776d60468ced851b54bf0deaa","_id":"hbp-spark@1.1.27","_npmVersion":"5.6.0","_nodeVersion":"8.9.4","_npmUser":{"name":"bbeaumatin","email":"benoit.beaumatin@epfl.ch"},"dist":{"integrity":"sha512-KxGcf+YvDG/VepLcaCw0sV/wXvjDlv/m1mhpLGpxbLPgVljRDhzu2JQyGmBkJTE2ctMdNuH4t2JlbaD+D0WJrQ==","shasum":"32450fff894ff0d6e4b7558b4355eb176d83a71d","tarball":"https://registry.npmjs.org/hbp-spark/-/hbp-spark-1.1.27.tgz","fileCount":44,"unpackedSize":360923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbVZfCCRA9TVsSAnZWagAAVNIQAITdoE1U5kjCcTNH7iMW\nC4JGW+BPky/KBHXah1p/OgO20Dh6BwmQgu78HG2vOGJJyYO0BjePTEV3stDu\nPgwbCcsIPkfUg6WxfWcWJrg2GIm8TbCUc9uP6yC4TCo63G6Liy4SDvE70wds\nr76Xi51KoCJ4bWH2Mp+QqM3yPSnl8bXipmESnF0+paIn32BI3zd1An7sOB+L\nnc9Iiyuduts5jjbyFC+Vm9RaQbEaqtndyHTOEznwUKSd+dADIzCY4cFQuNJk\n/dFl/q3ZJjtKnW9c92qB+eRBMvNFJUia01R7Q3aHKTOdPIaNFLUFC5e/+mWs\nxek9tbkUxUwESnD11hx8Q/Z0YBGzI5+OMbykB89jm1aGVql+pIbTGD0FEb10\nGTSn3sLkeGM/rSg9d3GY9i3GUCZhVRUCxVBmQfCiVsF+6oO7zAhYMgNQeSHl\nE7ac9UQMauN6a5E5qyhq4WsnFDhgxsCBWwJi6mjagu803q2B9OlpHrWy5Gix\naJ06EIZizwliCmAK69qJ0tXaSDhh0gvTFGzqiUlH2GMZUarYXm3MomODHAPF\nq+GC07NuErfX3WXLFU7Umudi3Gyu3lyXHRsOueQI/rGw8wo9dPqw1pFd+kib\nwnT+hJkRZU6mu8uW1O1P8+900tq1y05M+GX6YtPtIpn2fztA2PLq0WMd6RnX\n6pyw\r\n=Q9Kh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFKgmzvlLaUsYWnSzPa6b/WfNSc3HZqO0taXU4kyAOP7AiAbNSSO2Y5UC3DVfcLbi8gcoLSh8GeGlsp++83QNT4T4Q=="}]},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hbp-spark_1.1.27_1532336066252_0.7502292657471574"},"_hasShrinkwrap":false,"deprecated":"hbp-spark has been renamed hbp-quickfire to avoid confusion with existing commercial products which this package doesn't have any relationship with. This package will not be maintained anymore. We recommend to switch to the new one https://www.npmjs.com/package/hbp-quickfire."}},"time":{"created":"2018-04-19T14:19:51.901Z","1.0.0":"2018-04-19T14:19:52.015Z","modified":"2022-05-04T18:59:16.056Z","1.0.1":"2018-04-19T15:26:40.158Z","1.0.2":"2018-04-19T15:45:57.482Z","1.0.6":"2018-04-19T18:08:51.298Z","1.0.7":"2018-04-19T18:16:55.523Z","1.0.8":"2018-04-23T14:35:52.825Z","1.0.9":"2018-04-24T07:28:00.126Z","1.0.10-unstable":"2018-04-24T08:17:17.895Z","1.0.10":"2018-04-24T09:14:33.610Z","1.0.12-unstable":"2018-04-24T11:29:37.060Z","1.0.13-unstable":"2018-04-24T11:45:30.219Z","1.0.11":"2018-04-24T12:50:23.032Z","1.0.12":"2018-04-25T06:51:17.761Z","1.0.13":"2018-04-25T13:07:39.049Z","1.0.14-unstable":"2018-04-26T09:56:16.423Z","1.0.15-unstable":"2018-04-26T10:09:22.681Z","1.0.16-unstable":"2018-04-26T12:16:33.361Z","1.0.17-unstable":"2018-04-26T13:42:41.224Z","1.0.18-unstable":"2018-04-26T13:52:01.305Z","1.0.14":"2018-04-27T07:14:09.559Z","1.0.19-unstable":"2018-05-02T07:06:30.912Z","1.0.19":"2018-05-02T07:07:27.667Z","1.0.20-unstable":"2018-05-02T14:02:13.274Z","1.0.21-unstable":"2018-05-03T08:41:09.343Z","1.0.21":"2018-05-03T08:41:45.215Z","1.0.22":"2018-05-04T13:13:24.306Z","1.0.23-unstable":"2018-05-07T06:14:56.856Z","1.1.0-unstable":"2018-05-14T11:37:00.823Z","1.1.0":"2018-05-14T11:49:58.112Z","1.1.1":"2018-05-15T07:24:45.705Z","1.1.1-unstable":"2018-05-15T07:25:31.282Z","1.1.2":"2018-05-15T10:01:32.242Z","1.1.2-unstable":"2018-05-15T10:02:11.890Z","1.1.3-unstable":"2018-05-23T07:57:09.773Z","1.1.3":"2018-05-23T08:00:16.423Z","1.1.4-unstable":"2018-05-25T15:19:16.851Z","1.1.5-unstable":"2018-05-28T07:57:49.591Z","1.1.6-unstable":"2018-05-28T08:05:40.019Z","1.1.7-unstable":"2018-05-28T08:30:26.420Z","1.1.8-unstable":"2018-05-29T13:45:09.789Z","1.1.9-unstable":"2018-05-30T09:51:42.772Z","1.1.9":"2018-05-30T09:53:21.069Z","1.1.10-unstable":"2018-06-01T11:44:23.832Z","1.1.10":"2018-06-01T11:45:55.586Z","1.1.11-unstable":"2018-06-04T11:21:53.637Z","1.1.12-unstable":"2018-06-04T12:46:50.528Z","1.1.12":"2018-06-04T14:49:44.600Z","1.1.13-unstable":"2018-06-08T13:35:11.396Z","1.1.14-unstable":"2018-06-11T13:05:44.147Z","1.1.15-unstable":"2018-06-11T13:24:06.102Z","1.1.15":"2018-06-11T14:03:01.380Z","1.1.16-unstable":"2018-06-14T09:49:09.671Z","1.1.16":"2018-06-14T09:50:38.799Z","1.1.17-unstable":"2018-06-18T11:41:57.613Z","1.1.18-unstable":"2018-06-19T08:07:36.986Z","1.1.18":"2018-06-19T08:09:55.068Z","1.1.19-unstable":"2018-06-21T10:08:14.732Z","1.1.19":"2018-06-21T10:09:55.860Z","1.1.20-unstable":"2018-07-02T07:19:08.016Z","1.1.20":"2018-07-02T07:20:15.462Z","1.1.21-unstable":"2018-07-04T13:52:16.021Z","1.1.21":"2018-07-04T13:53:35.781Z","1.1.22-unstable":"2018-07-05T12:31:33.501Z","1.1.22":"2018-07-05T12:33:18.482Z","1.1.23-unstable":"2018-07-09T12:59:39.631Z","1.1.23":"2018-07-09T13:01:06.973Z","1.1.24-unstable":"2018-07-12T12:47:02.296Z","1.1.24":"2018-07-12T12:49:49.289Z","1.1.25":"2018-07-13T14:59:42.756Z","1.1.26":"2018-07-16T14:01:45.673Z","1.1.27":"2018-07-23T08:54:26.327Z"},"maintainers":[{"email":"benoit.beaumatin@epfl.ch","name":"bbeaumatin"},{"email":"florian.deuerlein@gmail.com","name":"florist_gump"},{"email":"simon-bell@xl-direct.com","name":"sdb317"}],"description":"A library of useful user-interface components built with React on top of React Bootstrap and MobX","keywords":["HBP"],"author":{"name":"Human Brain Project"},"license":"MIT","readme":"![](docs/assets/favicon.png)\n\n# HBP-Spark [![npm version](https://badge.fury.io/js/hbp-spark.svg)](https://badge.fury.io/js/hbp-spark)\n\nHBP-Spark is a React components library built on top of MobX and React-Bootstrap.\n\nIts goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code. The main focus of the framework is to provide a simple but powerful entry forms management for React applications.\n\n## Installation:\n\n```\nnpm i -s hbp-spark\n```\n\n## Peer dependencies\n\nIn order to use hbp-spark in an application, the following peer dependencies need to be installed:\n\n- mobx >=4.0\n- mobx-react >=5.0\n- react >=15.4.0\n- react-dom\" >=15.4.0\n- react-bootstrap >=0.32\n\n## Getting started\n\nHBP-Spark form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:\n\n```JavaScript\n{\n\tfields:{\n\t\t\tusername: {\n      \t\ttype: \"InputText\",\n      \t\tlabel: \"Your username\"\n    \t},\n    \tage: {\n\t      type: \"InputText\",\n    \t  label: \"Your age\",\n\t      inputType: \"number\"\n    \t},\n\t    preferedColor: {\n    \t  type: \"InputText\",\n\t      label: \"Your prefered color\",\n    \t  inputType: \"color\",\n\t      value: \"#FF0000\"\n    \t}\n\t}\n}\n```\n\nOnce this object matching your form data structure this object is provided to a `FormStore` instance provided by this library, you can use this store object and provide it to the `<Form/>` component. HBP-Spark lets you decide how you want to layout your form, or you can use one of the provided automatic layout (feature coming soon...). Check the example below:\n\n```JSX\nimport React from \"react\";\n\nimport { observer } from \"mobx-react\";\nimport { Row, Grid, Col } from \"react-bootstrap\";\nimport { Form, FormStore, Field } from \"hbp-spark\";\n\nlet peopleFormStructure = {...}; //See example definition above\n\n@observer\nexport default class PeopleForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.formStore = new FormStore(peopleFormStructure);\n  }\n\n  render() {\n    return (\n      <Form store={this.formStore}>\n        <Grid>\n          <h2>People Form</h2>\n          <Row>\n            <Col xs={4}>\n              <Field name=\"username\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"preferedColor\" />\n            </Col>\n            <Col xs={4}>\n              <Field name=\"age\" />\n            </Col>\n          </Row>\n\n          <h2>Result</h2>\n          <Row>\n            <Col xs={12}>\n              <pre>{JSON.stringify(this.formStore.getValues(), null, 4)}</pre>\n            </Col>\n          </Row>\n        </Grid>\n      </Form>\n    );\n  }\n}\n\n```\n\n[See this example live](https://codesandbox.io/s/5yv58z58rx)\n\n### Getting the form data\n\nAt any time (e.g. when submitting the form), the `getValues()` method of the FormStore object returns the processed field values in a structured object matching the definition.\n\n## Documentation\n\nTo get a more detailed documentation with plenty of examples open a console in the package root and run:\n\n```\nnpm install\n```\n\nThen change your current directory to `./docs/` and run :\n\n```\nnpm install\nnpm run start\n```\n\n### API Documentation\n\nYou can also find the API documentation below:\n<!-- Generated by documentation.js. Update this documentation by updating the source code. -->\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [injectValues][4]\n        -   [reset][5]\n        -   [update][6]\n        -   [parentPath][7]\n        -   [genSiblingPath][8]\n        -   [validate][9]\n        -   [registerCustomValidationFunction][10]\n        -   [registerAxiosInstance][11]\n        -   [toggleReadMode][12]\n    -   [ClipboardStore][13]\n        -   [reset][14]\n-   [Form][15]\n    -   [values][16]\n-   [FormFields][17]\n    -   [InputTextField][18]\n        -   [Options][19]\n    -   [InputTextMultipleField][20]\n        -   [Options][21]\n    -   [TextAreaField][22]\n        -   [Options][23]\n    -   [NestedField][24]\n        -   [NestedRemoveButton][25]\n        -   [NestedMoveUpButton][26]\n        -   [NestedMoveDownButton][27]\n        -   [NestedDuplicateButton][28]\n        -   [Options][29]\n        -   [addInstance][30]\n        -   [duplicateInstance][31]\n        -   [moveInstance][32]\n        -   [removeInstance][33]\n    -   [SelectField][34]\n        -   [Options][35]\n    -   [DropdownSelectField][36]\n        -   [Options][37]\n    -   [TreeSelectField][38]\n        -   [Options][39]\n    -   [CheckBoxField][40]\n        -   [Options][41]\n    -   [GroupSelectField][42]\n        -   [Options][43]\n    -   [Slider][44]\n        -   [Options][45]\n-   [SingleField][46]\n-   [ActionIcon][47]\n-   [GenericList][48]\n\n## Stores\n\nDefine stores namespace.\n\n### FormStore\n\nMobx store to manage the Form React Component\n\n**Parameters**\n\n-   `structure` **[json][49]** the underlying form definition\n\n#### getValues\n\nGet the form field values\n\n**Parameters**\n\n-   `fields`  \n-   `applyMapping`   (optional, default `true`)\n\nReturns **[object][50]** a structured object of the form field values\n\n#### injectValues\n\nInject values into form fields, must be input the same format as `values`method output\n\n**Parameters**\n\n-   `values` **[object][50]** structured object of the form field values\n-   `merge` **[boolean][51]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][52]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][52]** optional, base path to reset from\n    Resets the form to their default values from the base path or completely if no path is provided\n\n#### update\n\nupdates the underlying field definition\n\n**Parameters**\n\n-   `path` **[string][52]** the field path\n-   `updated` **[object][50]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][52] | field)** can be either a field path or a field object\n-   `name` **[string][52]** name of the sibling\n\n#### validate\n\nvalidates all form fields at once\n\n#### registerCustomValidationFunction\n\nregisters a custom validation functions that can be used in all fields\n\n**Parameters**\n\n-   `name` **[string][52]** a name to uniquely identify the rule\n-   `func` **[function][53]** The definition of the validation function. The function parameters are the field value and attribute name. Can be a sync or async function. Expected return value either boolean or promise, indication if validation was successful.\n-   `errorMessage` **[string][52]** The error message in case the validation fails\n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][50]** a valid axios instance\n\n#### toggleReadMode\n\ntoggles or force readMode to display form values as pure text instead of input fields\n\n**Parameters**\n\n-   `status` **[boolean][51]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled\n\n### ClipboardStore\n\nA Store handling a virtual clipboard of text selected inside the current browser window.\nImporting this module will always return the same instance of that store\n\n#### reset\n\nClear the value stored in the virtual clipboard\n\n## Form\n\nForm component that wraps the underlying Fields\n\n**Properties**\n\n-   `store` **[object][50]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][50]** a structured object of the form field values\n\n## FormFields\n\nField is a generic react component that supports all kinds of different input types\n\n**Properties**\n\n-   `name` **[string][52]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][53]** Event handler triggered when changes occur to the underlying field value\n\n### InputTextField\n\nA simple text input\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `inputType` **[string][52]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `placeholder` **[string][52]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][52]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][54]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][50]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][50]** {onBlur: true, onChange: false} - Validation options to define when validation is executed\n\n### InputTextMultipleField\n\nAllows the input of multiple values\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputTextMultiple\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][51]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TextAreaField\n\nTextarea input field.\nField options are the same as for the InputTextField\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"InputText\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `autosize` **[boolean][51]** true - If true, the textarea resizes automatically\n-   `rows` **[number][55]** 1 - How many rows are displayed by default. Represents the min value\n-   `maxRows` **[number][55]** null - How many rows are displayed at most before the field does not grow anymore (only possible if autosize is enabled)\n-   `resizable` **[boolean][51]** false - If true, the textarea is horizontally resizable by the user\n\n### NestedField\n\nAllows the implementation of a nested field structure\n\n#### NestedRemoveButton\n\nAction button to remove a nested instance,\nhas to be called by the app with &lt;Field.Remove/> component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveUp/> component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with &lt;Field.MoveDown/> component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with &lt;Field.Duplicate/> component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `buttonLabel` **[string][52]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][52]** \"Nested\"\n-   `min` **[number][55]** 1 - min of nested children the field can have\n-   `max` **[number][55]** 1 - max of nested children the field can have\n-   `fields` **[object][50]** {} - The nested fields definitions\n-   `value` **[string][52]** \\[] - The value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `topAddButton` **[string][52]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][52]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n#### addInstance\n\nadd a new instance to a nested field\n\n#### duplicateInstance\n\nduplicates a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to duplicate index\n\n#### moveInstance\n\nmove a nested instance at a given index to a new given index\n\n**Parameters**\n\n-   `index` **integer** the instance to move\n-   `newIndex` **integer** the index that instance will have\n\n#### removeInstance\n\nremoves a nested instance at a given index\n\n**Parameters**\n\n-   `index` **integer** the instance to remove index\n\n### SelectField\n\nA simple select input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Select\"\n-   `value` **[string][52]** \"\" - The current value of the field\n-   `defaultValue` **[string][52]** \"\" - The defaultValue of the field\n-   `options` **[array][54]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][52]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][51]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### DropdownSelectField\n\nForm component allowing to select multiple values from a drop-down list with\nan option to allow custom values entered by the user.\nThe handling of the a custom value is delegated to the application level\nthrough the call of the \"onAddCustomValue\" callback passed in paramter\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"DropdownSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `allowCustomValues` **[boolean][51]** false - if the field should try to accept user inputed values\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[boolean][51]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### TreeSelectField\n\nForm component allowing to select multiple values from a tree structure\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"TreeSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `data` **[array][54]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][54]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][52]** false - whether to cache dataUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the node object field(s) related to the node value, used to match passed in values to actual tree nodes\n-   `mappingLabel` **[string][52]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][52]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][51]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][51]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `defaultExpanded` **[array][54]** \\[] - an array of arrays describing a path of nodes expanded by default (tested on node labels, path parts are considered as RegExp)\n-   `showOnlySearchedNodes` **[boolean][51]** false - Flag that determines if nodes that doesn't match the text search should be hidden\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"CheckBox\"\n-   `value` **[string][52]** false - The current value of the field\n-   `defaultValue` **[string][52]** false - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### GroupSelectField\n\nForm component allowing to select on/multiple values from a group of checkboxes/radioboxes\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"GroupSelect\"\n-   `value` **[array][54]** \\[] - The current value of the field\n-   `defaultValue` **[array][54]** \\[] - The defaultValue of the field\n-   `options` **[array][54]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][52]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][52]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][52]** \"\" - Field path\n-   `mappingValue` **([string][52] \\| [array][54])** \"value\" - The name(s) of the option object field(s) related to the option value, used to match passed in values to actual options\n-   `mappingLabel` **[string][52]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **[string][52]** null - the property of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][51]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][55]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][51]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][51]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][52]** \"\" - The field label\n-   `type` **[string][52]** \"Slider\"\n-   `value` **([number][55] \\| [Range][56])** null - The current value. If only a number is provided, a single slider will get rendered. If a range object {min:x, max:y} is provided, two sliders will get rendered.\n-   `defaultValue` **([number][55] \\| [Range][56])** null - The defaultValue of the field\n-   `path` **[string][52]** \"\" - Field path\n-   `disabled` **[boolean][51]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][51]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][51]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][55]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][55]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][55]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n## SingleField\n\nSingleField is a generic react component that supports all kinds of different input types without a form component\n\n## ActionIcon\n\nActionIcon component\n\n**Properties**\n\n-   `icon` **[string][52]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][57]\n-   `onClick` **[function][53]** optional - callback for when action is clicked\n\n## GenericList\n\nGeneric List component that renders a list of items using Bootstrap Panels\n\n**Properties**\n\n-   `items` **[array][54]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][51]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][50]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) => item\n-   `itemBody` **[boolean][51]** optional - react component to render the body for individual items. Gets passed the item to be rendered as a prop. Only necessary if you want a body to be displayed\n-   `actions` **[array][54]** required - an array of actions. An actions can be any react components that get rendered in the top right corner of the panel. For callback, implement the onClick which gets called with the selected item.\n\n[1]: #stores\n\n[2]: #formstore\n\n[3]: #getvalues\n\n[4]: #injectvalues\n\n[5]: #reset\n\n[6]: #update\n\n[7]: #parentpath\n\n[8]: #gensiblingpath\n\n[9]: #validate\n\n[10]: #registercustomvalidationfunction\n\n[11]: #registeraxiosinstance\n\n[12]: #togglereadmode\n\n[13]: #clipboardstore\n\n[14]: #reset-1\n\n[15]: #form\n\n[16]: #values\n\n[17]: #formfields\n\n[18]: #inputtextfield\n\n[19]: #options\n\n[20]: #inputtextmultiplefield\n\n[21]: #options-1\n\n[22]: #textareafield\n\n[23]: #options-2\n\n[24]: #nestedfield\n\n[25]: #nestedremovebutton\n\n[26]: #nestedmoveupbutton\n\n[27]: #nestedmovedownbutton\n\n[28]: #nestedduplicatebutton\n\n[29]: #options-3\n\n[30]: #addinstance\n\n[31]: #duplicateinstance\n\n[32]: #moveinstance\n\n[33]: #removeinstance\n\n[34]: #selectfield\n\n[35]: #options-4\n\n[36]: #dropdownselectfield\n\n[37]: #options-5\n\n[38]: #treeselectfield\n\n[39]: #options-6\n\n[40]: #checkboxfield\n\n[41]: #options-7\n\n[42]: #groupselectfield\n\n[43]: #options-8\n\n[44]: #slider\n\n[45]: #options-9\n\n[46]: #singlefield\n\n[47]: #actionicon\n\n[48]: #genericlist\n\n[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[52]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[53]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[54]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[56]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[57]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","readmeFilename":"README.md"}