{"id":24562573,"url":"https://github.com/humanbrainproject/hbp-quickfire","last_synced_at":"2025-04-19T17:42:48.690Z","repository":{"id":33794053,"uuid":"142005104","full_name":"HumanBrainProject/hbp-quickfire","owner":"HumanBrainProject","description":"HBP QuickFire's goal is to provide a set of useful react components that let you build a consistent user interface with very little boilerplate code.","archived":false,"fork":false,"pushed_at":"2022-12-08T15:41:30.000Z","size":2538,"stargazers_count":3,"open_issues_count":24,"forks_count":1,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-13T18:08:57.759Z","etag":null,"topics":["bootstrap","components","form","mobx","reactjs"],"latest_commit_sha":null,"homepage":"https://hbp-quickfire.apps.hbp.eu/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HumanBrainProject.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-23T11:29:29.000Z","updated_at":"2022-02-06T14:46:59.000Z","dependencies_parsed_at":"2023-01-15T02:36:17.445Z","dependency_job_id":null,"html_url":"https://github.com/HumanBrainProject/hbp-quickfire","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanBrainProject%2Fhbp-quickfire","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanBrainProject%2Fhbp-quickfire/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanBrainProject%2Fhbp-quickfire/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HumanBrainProject%2Fhbp-quickfire/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HumanBrainProject","download_url":"https://codeload.github.com/HumanBrainProject/hbp-quickfire/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249751606,"owners_count":21320338,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","components","form","mobx","reactjs"],"created_at":"2025-01-23T09:16:24.385Z","updated_at":"2025-04-19T17:42:48.670Z","avatar_url":"https://github.com/HumanBrainProject.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](docs/assets/favicon.png)\n\n# HBP-QuickFire [![npm version](https://badge.fury.io/js/hbp-quickfire.svg)](https://badge.fury.io/js/hbp-quickfire)\n\nHBP-QuickFire 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\nA documentation application is available here : [https://hbp-quickfire.apps.hbp.eu/](https://hbp-quickfire.apps.hbp.eu/)\n\nThe source code is available here : [https://github.com/HumanBrainProject/hbp-quickfire](https://github.com/HumanBrainProject/hbp-quickfire)\n\n## Installation:\n\n```\nnpm i -s hbp-quickfire\n```\n\n## Peer dependencies\n\nIn order to use hbp-quickfire in an application, the following peer dependencies need to be installed:\n\n- mobx \u003e=4.0\n- mobx-react \u003e=5.0\n- react \u003e=15.4.0\n- react-dom\" \u003e=15.4.0\n- react-bootstrap \u003e=0.32\n\n## Getting started\n\nHBP-QuickFire 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  fields:{\n    username: {\n      type: \"InputText\",\n      label: \"Your username\"\n    },\n    age: {\n      type: \"InputText\",\n      label: \"Your age\",\n      inputType: \"number\"\n    },\n    preferedColor: {\n      type: \"InputText\",\n      label: \"Your prefered color\",\n      inputType: \"color\",\n      value: \"#FF0000\"\n    }\n  }\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 `\u003cForm/\u003e` component. HBP-QuickFire 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-quickfire\";\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      \u003cForm store={this.formStore}\u003e\n        \u003cGrid\u003e\n          \u003ch2\u003ePeople Form\u003c/h2\u003e\n          \u003cRow\u003e\n            \u003cCol xs={4}\u003e\n              \u003cField name=\"username\" /\u003e\n            \u003c/Col\u003e\n            \u003cCol xs={4}\u003e\n              \u003cField name=\"preferedColor\" /\u003e\n            \u003c/Col\u003e\n            \u003cCol xs={4}\u003e\n              \u003cField name=\"age\" /\u003e\n            \u003c/Col\u003e\n          \u003c/Row\u003e\n\n          \u003ch2\u003eResult\u003c/h2\u003e\n          \u003cRow\u003e\n            \u003cCol xs={12}\u003e\n              \u003cpre\u003e{JSON.stringify(this.formStore.getValues(), null, 4)}\u003c/pre\u003e\n            \u003c/Col\u003e\n          \u003c/Row\u003e\n        \u003c/Grid\u003e\n      \u003c/Form\u003e\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\u003c!-- Generated by documentation.js. Update this documentation by updating the source code. --\u003e\n\n### Table of Contents\n\n-   [Stores][1]\n    -   [FormStore][2]\n        -   [getValues][3]\n        -   [values][4]\n        -   [values][5]\n        -   [injectValues][6]\n        -   [reset][7]\n        -   [update][8]\n        -   [parentPath][9]\n        -   [genSiblingPath][10]\n        -   [prefetchOptions][11]\n        -   [validate][12]\n        -   [registerCustomValidationFunction][13]\n        -   [registerAxiosInstance][14]\n        -   [toggleReadMode][15]\n    -   [ClipboardStore][16]\n        -   [reset][17]\n-   [Form][18]\n    -   [values][19]\n-   [FormFields][20]\n    -   [InputTextField][21]\n        -   [Options][22]\n    -   [InputTextMultipleField][23]\n        -   [Options][24]\n    -   [TextAreaField][25]\n        -   [Options][26]\n    -   [NestedField][27]\n        -   [NestedRemoveButton][28]\n        -   [NestedMoveUpButton][29]\n        -   [NestedMoveDownButton][30]\n        -   [NestedDuplicateButton][31]\n        -   [Options][32]\n        -   [addInstance][33]\n        -   [duplicateInstance][34]\n        -   [moveInstance][35]\n        -   [removeInstance][36]\n    -   [SelectField][37]\n        -   [Options][38]\n    -   [DropdownSelectField][39]\n        -   [Options][40]\n    -   [TreeSelectField][41]\n        -   [Options][42]\n    -   [CheckBoxField][43]\n        -   [Options][44]\n    -   [GroupSelectField][45]\n        -   [Options][46]\n    -   [DataSheetField][47]\n        -   [HeaderOptions][48]\n    -   [Slider][49]\n        -   [Options][50]\n    -   [FieldLabel][51]\n-   [SingleField][52]\n-   [ActionIcon][53]\n-   [GenericList][54]\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][55]** 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][56]** a structured object of the form field values\n\n#### values\n\nSyntaxic shortcut accessor that calls getValues\n\n#### values\n\nSyntaxic shortcut accessor that calls injectValues\n\n**Parameters**\n\n-   `values` **[object][56]** 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][56]** structured object of the form field values\n-   `merge` **[boolean][57]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)\n-   `fields`  \n-   `path` **[string][58]** base path for change\n\n#### reset\n\n**Parameters**\n\n-   `fields`  \n-   `basePath` **[string][58]** 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][58]** the field path\n-   `updated` **[object][56]** the updated field definition\n\n#### parentPath\n\nreturns the parent path for a field\n\n**Parameters**\n\n-   `field` **([string][58] | field)** can be either be a field path or a field object\n\n#### genSiblingPath\n\n**Parameters**\n\n-   `field` **([string][58] | field)** can be either a field path or a field object\n-   `name` **[string][58]** name of the sibling\n\n#### prefetchOptions\n\n**Parameters**\n\n-   `optionsUrls` **[array][59]** an array of URLs to fetch and put in cache\n-   `axiosInstance`  \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][58]** a name to uniquely identify the rule\n-   `func` **[function][60]** 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][58]** The error message in case the validation fails\n-   `formStore`  \n\n#### registerAxiosInstance\n\nregisters a custom axios instance - useful for APIs requiring tokens\n\n**Parameters**\n\n-   `axiosInstance` **[object][56]** 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][57]** 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][56]** required - An instance of the FormStore class\n\n### values\n\nGet the form field values\n\nReturns **[object][56]** 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][58]** required - Name of the field as defined in the definition object passed to the FormStore\n-   `onChange` **[function][60]** 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][58]** \"\" - The field label\n-   `labelTooltip` **[string][58]** \"\" - The field label tooltip message\n-   `labelTooltipPlacement` **[string][58]** \"top\" - The field label tooltip message position\n-   `type` **[string][58]** \"InputText\"\n-   `value` **[string][58]** \"\" - The current value of the field\n-   `defaultValue` **[string][58]** \"\" - The defaultValue of the field\n-   `inputType` **[string][58]** \"text\" - The input type of the field (e.g. text, password, email)\n-   `autoComplete` **[boolean][57]** false - Sets the autocomplete attribute of the input element\n-   `placeholder` **[string][58]** \"\" - A placeholder that is displayed when the field is empty\n-   `path` **[string][58]** \"\" - Field path\n-   `useVirtualClipboard` **[boolean][57]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][57]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input\n-   `validationRules` **[array][59]** \\[] - A list of validation rules\n-   `customErrorMessages` **[object][56]** {} - Definition for custom error messages in the form: {rule: errorMessage}\n-   `validationOptions` **[object][56]** {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][58]** \"\" - The field label\n-   `type` **[string][58]** \"InputTextMultiple\"\n-   `value` **[array][59]** \\[] - The current value of the field\n-   `defaultValue` **[array][59]** \\[] - The defaultValue of the field\n-   `path` **[string][58]** \"\" - Field path\n-   `max` **[number][61]** Infinity - Maximum values that the field can have\n-   `useVirtualClipboard` **[boolean][57]** false - Flag if virtual clipboard feature is enabled for this field\n-   `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readAndDeleteOnly` **[boolean][57]** false - Is the field readAndDeleteOnly or not, a readAndDeleteOnly field will allow deletes but won't be writable for new values, but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][57]** 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][58]** \"\" - The field label\n-   `labelTooltip` **[string][58]** \"\" - The field label tooltip message\n-   `labelTooltipPlacement` **[string][58]** \"top\" - The field label tooltip message position\n-   `type` **[string][58]** \"InputText\"\n-   `value` **[string][58]** \"\" - The current value of the field\n-   `defaultValue` **[string][58]** \"\" - The defaultValue of the field\n-   `path` **[string][58]** \"\" - Field path\n-   `emptyToNull` **[boolean][57]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input\n-   `autosize` **[boolean][57]** true - If true, the textarea resizes automatically\n-   `rows` **[number][61]** 1 - How many rows are displayed by default. Represents the min value\n-   `maxRows` **[number][61]** null - How many rows are displayed at most before the field does not grow anymore (only possible if autosize is enabled)\n-   `resizable` **[boolean][57]** 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 \u0026lt;Field.Remove/\u003e component\n\n#### NestedMoveUpButton\n\nAction button to move up a nested instance in the list,\nhas to be called by the app with \u0026lt;Field.MoveUp/\u003e component\n\n#### NestedMoveDownButton\n\nAction button to move down a nested instance in the list,\nhas to be called by the app with \u0026lt;Field.MoveDown/\u003e component\n\n#### NestedDuplicateButton\n\nAction button to duplicate a nested instance in the list,\nhas to be called by the app with \u0026lt;Field.Duplicate/\u003e component\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][58]** \"\" - The field label\n-   `labelTooltip` **[string][58]** \"\" - The field label tooltip message\n-   `labelTooltipPlacement` **[string][58]** \"top\" - The field label tooltip message position\n-   `buttonLabel` **[string][58]** \"Add an item\" - The label used for adding an item to the repeatable fields\n-   `type` **[string][58]** \"Nested\"\n-   `min` **[number][61]** 1 - min of nested children the field can have\n-   `max` **[number][61]** 1 - max of nested children the field can have\n-   `fields` **[object][56]** {} - The nested fields definitions\n-   `value` **[string][58]** \\[] - The value of the field\n-   `defaultValue` **[array][59]** \\[] - The defaultValue of the field\n-   `path` **[string][58]** \"\" - Field path\n-   `topAddButton` **[string][58]** true - Whether or not to display the Add button before the fields\n-   `bottomAddButton` **[string][58]** true - Whether or not to display the Add button after the fields\n-   `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][57]** 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][58]** \"\" - The field label\n-   `labelTooltip` **[string][58]** \"\" - The field label tooltip message\n-   `labelTooltipPlacement` **[string][58]** \"top\" - The field label tooltip message position\n-   `type` **[string][58]** \"Select\"\n-   `value` **[string][58]** \"\" - The current value of the field\n-   `defaultValue` **[string][58]** \"\" - The defaultValue of the field\n-   `options` **[array][59]** \\[] - an array of strings or objects with value and label defined by the mapping\n-   `optionsUrl` **[string][58]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][58]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][58]** \"\" - Field path\n-   `mappingValue` **([string][58] \\| [array][59])** \"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][58]** \"label\" - the name of the option object field related to the option label\n-   `defaultLabel` **[string][58]** \"null\" - The label to be displayed as a default value when set\n-   `emptyToNull` **[boolean][57]** true - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][57]** 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][58]** \"\" - The field label\n-   `labelTooltip` **[string][58]** \"\" - The field label tooltip message\n-   `labelTooltipPlacement` **[string][58]** \"top\" - The field label tooltip message position\n-   `type` **[string][58]** \"DropdownSelect\"\n-   `value` **[array][59]** \\[] - The current value of the field\n-   `defaultValue` **[array][59]** \\[] - The defaultValue of the field\n-   `options` **[array][59]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][58]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][58]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][58]** \"\" - Field path\n-   `allowCustomValues` **[boolean][57]** false - if the field should try to accept user inputed values\n-   `customValueLabel` **[string][58]** \"Add a value:\" - Label that gets displayed when entering a new custom value. allowCustomValues need to be true for this to show up.\n-   `mappingValue` **([string][58] \\| [array][59])** \"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][58]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **([string][58] \\| [array][59])** null - the property/properties of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][57]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][61]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `listPosition` **[string][58]** \"bottom\" - Can be \"top\" or \"bottom\", whether to display the dropdown list above or below the field\n-   `closeDropdownAfterInteraction` **[boolean][57]** false - Whether the dropdown should close after adding, removing a value or stay open\n-   `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][57]** 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][58]** \"\" - The field label\n-   `labelTooltip` **[string][58]** \"\" - The field label tooltip message\n-   `labelTooltipPlacement` **[string][58]** \"top\" - The field label tooltip message position\n-   `type` **[string][58]** \"TreeSelect\"\n-   `value` **[array][59]** \\[] - The current value of the field\n-   `defaultValue` **[array][59]** \\[] - The defaultValue of the field\n-   `data` **[array][59]** {} - The tree structure to select from, must be an object with eventually an array of children\n-   `dataUrl` **[array][59]** null - url to fetch the tree structure from\n-   `cacheDataUrl` **[string][58]** false - whether to cache dataUrl fetching response\n-   `path` **[string][58]** \"\" - Field path\n-   `mappingValue` **([string][58] \\| [array][59])** \"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][58]** \"label\" - the name of the node object field related to the node label\n-   `mappingChildren` **[string][58]** \"children\" - the name of the node object field related to the node children\n-   `mappingReturn` **([string][58] \\| [array][59])** null - the property/properties of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][57]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][61]** Infinity - Maximum values that the field can have\n-   `selectOnlyLeaf` **[boolean][57]** false - If enabled, only leaves can be selected and not the intermediary nodes\n-   `expandToSelectedNodes` **[boolean][57]** false - If enabled, tree selection modal will recursively expand to all the already selected values\n-   `defaultExpanded` **[array][59]** \\[] - 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][57]** false - Flag that determines if nodes that doesn't match the text search should be hidden\n-   `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input\n-   `groupByNodes` **[array][59]** \\[] - If provided, will display selected values grouped by the provided node matches\n-   `groupByLevel` **integer** null - If provided, will display selected values grouped by level\n-   `otherGroupLabel` **[string][58]** \"Other values\" - Label used for the group that contains values that doesn't fit into a group\n\n### CheckBoxField\n\nA simple checkbox\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][58]** \"\" - The field label\n-   `labelTooltip` **[string][58]** \"\" - The field label tooltip message\n-   `labelTooltipPlacement` **[string][58]** \"top\" - The field label tooltip message position\n-   `type` **[string][58]** \"CheckBox\"\n-   `value` **[string][58]** false - The current value of the field\n-   `defaultValue` **[string][58]** false - The defaultValue of the field\n-   `path` **[string][58]** \"\" - Field path\n-   `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][57]** 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][58]** \"\" - The field label\n-   `labelTooltip` **[string][58]** \"\" - The field label tooltip message\n-   `labelTooltipPlacement` **[string][58]** \"top\" - The field label tooltip message position\n-   `type` **[string][58]** \"GroupSelect\"\n-   `value` **[array][59]** \\[] - The current value of the field\n-   `defaultValue` **[array][59]** \\[] - The defaultValue of the field\n-   `options` **[array][59]** \\[] - The options of the dropdown, must be an array of objects\n-   `optionsUrl` **[string][58]** null - url to fetch the select options from\n-   `cacheOptionsUrl` **[string][58]** false - whether to cache optionsUrl fetching response\n-   `path` **[string][58]** \"\" - Field path\n-   `mappingValue` **([string][58] \\| [array][59])** \"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][58]** \"label\" - the name of the option object field related to the option label\n-   `mappingReturn` **([string][58] \\| [array][59])** null - the property/properties of the option object used to return the value(s) - null will return the whole object\n-   `returnSingle` **[boolean][57]** boolean - wether or not to return the first value or an array of values\n-   `max` **[number][61]** Infinity - Maximum values that the field can have\n-   `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `displayInline` **[boolean][57]** false - Display choices in line, default is display as a list\n-   `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input\n\n### DataSheetField\n\nForm component allowing to edit a spreadsheet-like data\nIt uses the react-datasheet npm package to display to field\n\n#### HeaderOptions\n\n**Parameters**\n\n-   `label` **[string][58]** \"\" - The field label\n-   `labelTooltip` **[string][58]** \"\" - The field label tooltip message\n-   `labelTooltipPlacement` **[string][58]** \"top\" - The field label tooltip message position\n-   `type` **[string][58]** \"DataSheet\"\n-   `value` **[array][59]** \\[] - The current value of the field\n-   `defaultValue` **[array][59]** \\[] - The defaultValue of the field\n-   `headers` **[array][59]** \\[] - The headers of the datasheet, must be an array of objects dscribing at least a \"label\" and a \"key\" property\n-   `path` **[string][58]** \"\" - Field path\n-   `min` **[number][61]** 0 - Minimum rows that the field can have\n-   `max` **[number][61]** Infinity - Maximum rows that the field can have\n-   `rowControlRemove` **[boolean][57]** true - Flag option for specifying if a row delete button should be displayed\n-   `rowControlMove` **[boolean][57]** true - Flag option for specifying if row move buttons should be displayed\n-   `rowControlDuplicate` **[boolean][57]** true - Flag option for specifying if a row duplicate button should be displayed\n-   `rowControlAdd` **[boolean][57]** true - Flag option for specifying if row add buttons should be displayed\n-   `clipContent` **[boolean][57]** false - Whether cells content should wrap or clip the text content\n-   `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore\n-   `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input\n-   `key` **[string][58]** \"\" - The column key that will be used in the values row for input and output\n-   `label` **[string][58]** \"\" - The column label\n-   `show` **[boolean][57]** undefined - If false, the column will not be displayed at all\n-   `readOnly` **[boolean][57]** undefined - If true, the column will be displayed as read only cells\n-   `defaultValue` **[string][58]** \"\" - The default value the column will take when creating a new row\n-   `duplicatedValue` **[string][58]** \"\" - The default value the column will take when duplicating an existing row\n-   `width` **[string][58]** undefined - The column width (e.g. \"50px\" or \"25%\")\n\n### Slider\n\nSlider input field\n\n#### Options\n\n**Parameters**\n\n-   `label` **[string][58]** \"\" - The field label\n-   `labelTooltip` **[string][58]** \"\" - The field label tooltip message\n-   `labelTooltipPlacement` **[string][58]** \"top\" - The field label tooltip message position\n-   `type` **[string][58]** \"Slider\"\n-   `value` **([number][61] \\| [Range][62])** 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][61] \\| [Range][62])** null - The defaultValue of the field\n-   `path` **[string][58]** \"\" - Field path\n-   `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()\n-   `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()\n-   `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input\n-   `min` **[number][61]** null (required) - minimum value. You cannot drag your slider under this value.\n-   `max` **[number][61]** null (required) - maximum value. You cannot drag your slider beyond this value.\n-   `step` **[number][61]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.\n\n### FieldLabel\n\nLabel for all fields\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][58]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][63]\n-   `onClick` **[function][60]** 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][59]** required - an array of items to be displayed in the list. Can be an array of primitives or objects\n-   `expanded` **[boolean][57]** optional - if the panel is expanded by default\n-   `itemTitle` **[object][56]** optional - react component to render the title for individual items. Gets passed the item to be rendered as a prop. Default value: ({ item }) =\u003e item\n-   `itemBody` **[boolean][57]** 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][59]** 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]: #values\n\n[5]: #values-1\n\n[6]: #injectvalues\n\n[7]: #reset\n\n[8]: #update\n\n[9]: #parentpath\n\n[10]: #gensiblingpath\n\n[11]: #prefetchoptions\n\n[12]: #validate\n\n[13]: #registercustomvalidationfunction\n\n[14]: #registeraxiosinstance\n\n[15]: #togglereadmode\n\n[16]: #clipboardstore\n\n[17]: #reset-1\n\n[18]: #form\n\n[19]: #values-2\n\n[20]: #formfields\n\n[21]: #inputtextfield\n\n[22]: #options\n\n[23]: #inputtextmultiplefield\n\n[24]: #options-1\n\n[25]: #textareafield\n\n[26]: #options-2\n\n[27]: #nestedfield\n\n[28]: #nestedremovebutton\n\n[29]: #nestedmoveupbutton\n\n[30]: #nestedmovedownbutton\n\n[31]: #nestedduplicatebutton\n\n[32]: #options-3\n\n[33]: #addinstance\n\n[34]: #duplicateinstance\n\n[35]: #moveinstance\n\n[36]: #removeinstance\n\n[37]: #selectfield\n\n[38]: #options-4\n\n[39]: #dropdownselectfield\n\n[40]: #options-5\n\n[41]: #treeselectfield\n\n[42]: #options-6\n\n[43]: #checkboxfield\n\n[44]: #options-7\n\n[45]: #groupselectfield\n\n[46]: #options-8\n\n[47]: #datasheetfield\n\n[48]: #headeroptions\n\n[49]: #slider\n\n[50]: #options-9\n\n[51]: #fieldlabel\n\n[52]: #singlefield\n\n[53]: #actionicon\n\n[54]: #genericlist\n\n[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON\n\n[56]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object\n\n[57]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean\n\n[58]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String\n\n[59]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array\n\n[60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function\n\n[61]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number\n\n[62]: https://developer.mozilla.org/docs/Web/HTML/Element/Input\n\n[63]: https://getbootstrap.com/docs/3.3/components/#glyphicons\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanbrainproject%2Fhbp-quickfire","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhumanbrainproject%2Fhbp-quickfire","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanbrainproject%2Fhbp-quickfire/lists"}