https://github.com/humanbrainproject/hbp-quickfire
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.
https://github.com/humanbrainproject/hbp-quickfire
bootstrap components form mobx reactjs
Last synced: 11 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/humanbrainproject/hbp-quickfire
- Owner: HumanBrainProject
- License: mit
- Created: 2018-07-23T11:29:29.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T15:41:30.000Z (over 3 years ago)
- Last Synced: 2025-04-13T18:08:57.759Z (12 months ago)
- Topics: bootstrap, components, form, mobx, reactjs
- Language: JavaScript
- Homepage: https://hbp-quickfire.apps.hbp.eu/
- Size: 2.42 MB
- Stars: 3
- Watchers: 8
- Forks: 1
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HBP-QuickFire [](https://badge.fury.io/js/hbp-quickfire)
HBP-QuickFire is a React components library built on top of MobX and React-Bootstrap.
Its 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.
A documentation application is available here : [https://hbp-quickfire.apps.hbp.eu/](https://hbp-quickfire.apps.hbp.eu/)
The source code is available here : [https://github.com/HumanBrainProject/hbp-quickfire](https://github.com/HumanBrainProject/hbp-quickfire)
## Installation:
```
npm i -s hbp-quickfire
```
## Peer dependencies
In order to use hbp-quickfire in an application, the following peer dependencies need to be installed:
- mobx >=4.0
- mobx-react >=5.0
- react >=15.4.0
- react-dom" >=15.4.0
- react-bootstrap >=0.32
## Getting started
HBP-QuickFire form mechanism is based on a declarative configuration of the form structure as a Javascript (or JSON) Object, like so:
```JavaScript
{
fields:{
username: {
type: "InputText",
label: "Your username"
},
age: {
type: "InputText",
label: "Your age",
inputType: "number"
},
preferedColor: {
type: "InputText",
label: "Your prefered color",
inputType: "color",
value: "#FF0000"
}
}
}
```
Once 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 `` 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:
```JSX
import React from "react";
import { observer } from "mobx-react";
import { Row, Grid, Col } from "react-bootstrap";
import { Form, FormStore, Field } from "hbp-quickfire";
let peopleFormStructure = {...}; //See example definition above
@observer
export default class PeopleForm extends React.Component {
constructor(props) {
super(props);
this.formStore = new FormStore(peopleFormStructure);
}
render() {
return (
People Form
Result
{JSON.stringify(this.formStore.getValues(), null, 4)}
);
}
}
```
[See this example live](https://codesandbox.io/s/5yv58z58rx)
### Getting the form data
At 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.
## Documentation
To get a more detailed documentation with plenty of examples open a console in the package root and run:
```
npm install
```
Then change your current directory to `./docs/` and run :
```
npm install
npm run start
```
### API Documentation
You can also find the API documentation below:
### Table of Contents
- [Stores][1]
- [FormStore][2]
- [getValues][3]
- [values][4]
- [values][5]
- [injectValues][6]
- [reset][7]
- [update][8]
- [parentPath][9]
- [genSiblingPath][10]
- [prefetchOptions][11]
- [validate][12]
- [registerCustomValidationFunction][13]
- [registerAxiosInstance][14]
- [toggleReadMode][15]
- [ClipboardStore][16]
- [reset][17]
- [Form][18]
- [values][19]
- [FormFields][20]
- [InputTextField][21]
- [Options][22]
- [InputTextMultipleField][23]
- [Options][24]
- [TextAreaField][25]
- [Options][26]
- [NestedField][27]
- [NestedRemoveButton][28]
- [NestedMoveUpButton][29]
- [NestedMoveDownButton][30]
- [NestedDuplicateButton][31]
- [Options][32]
- [addInstance][33]
- [duplicateInstance][34]
- [moveInstance][35]
- [removeInstance][36]
- [SelectField][37]
- [Options][38]
- [DropdownSelectField][39]
- [Options][40]
- [TreeSelectField][41]
- [Options][42]
- [CheckBoxField][43]
- [Options][44]
- [GroupSelectField][45]
- [Options][46]
- [DataSheetField][47]
- [HeaderOptions][48]
- [Slider][49]
- [Options][50]
- [FieldLabel][51]
- [SingleField][52]
- [ActionIcon][53]
- [GenericList][54]
## Stores
Define stores namespace.
### FormStore
Mobx store to manage the Form React Component
**Parameters**
- `structure` **[json][55]** the underlying form definition
#### getValues
Get the form field values
**Parameters**
- `fields`
- `applyMapping` (optional, default `true`)
Returns **[object][56]** a structured object of the form field values
#### values
Syntaxic shortcut accessor that calls getValues
#### values
Syntaxic shortcut accessor that calls injectValues
**Parameters**
- `values` **[object][56]** structured object of the form field values
#### injectValues
Inject values into form fields, must be input the same format as `values`method output
**Parameters**
- `values` **[object][56]** structured object of the form field values
- `merge` **[boolean][57]** whether or not to reset the whole form or merge with the passed in values (optional, default `false`)
- `fields`
- `path` **[string][58]** base path for change
#### reset
**Parameters**
- `fields`
- `basePath` **[string][58]** optional, base path to reset from
Resets the form to their default values from the base path or completely if no path is provided
#### update
updates the underlying field definition
**Parameters**
- `path` **[string][58]** the field path
- `updated` **[object][56]** the updated field definition
#### parentPath
returns the parent path for a field
**Parameters**
- `field` **([string][58] | field)** can be either be a field path or a field object
#### genSiblingPath
**Parameters**
- `field` **([string][58] | field)** can be either a field path or a field object
- `name` **[string][58]** name of the sibling
#### prefetchOptions
**Parameters**
- `optionsUrls` **[array][59]** an array of URLs to fetch and put in cache
- `axiosInstance`
#### validate
validates all form fields at once
#### registerCustomValidationFunction
registers a custom validation functions that can be used in all fields
**Parameters**
- `name` **[string][58]** a name to uniquely identify the rule
- `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.
- `errorMessage` **[string][58]** The error message in case the validation fails
- `formStore`
#### registerAxiosInstance
registers a custom axios instance - useful for APIs requiring tokens
**Parameters**
- `axiosInstance` **[object][56]** a valid axios instance
#### toggleReadMode
toggles or force readMode to display form values as pure text instead of input fields
**Parameters**
- `status` **[boolean][57]** optional, a boolean indicating what the readMode state should be. If none is passed then the state is toggled
### ClipboardStore
A Store handling a virtual clipboard of text selected inside the current browser window.
Importing this module will always return the same instance of that store
#### reset
Clear the value stored in the virtual clipboard
## Form
Form component that wraps the underlying Fields
**Properties**
- `store` **[object][56]** required - An instance of the FormStore class
### values
Get the form field values
Returns **[object][56]** a structured object of the form field values
## FormFields
Field is a generic react component that supports all kinds of different input types
**Properties**
- `name` **[string][58]** required - Name of the field as defined in the definition object passed to the FormStore
- `onChange` **[function][60]** Event handler triggered when changes occur to the underlying field value
### InputTextField
A simple text input
#### Options
**Parameters**
- `label` **[string][58]** "" - The field label
- `labelTooltip` **[string][58]** "" - The field label tooltip message
- `labelTooltipPlacement` **[string][58]** "top" - The field label tooltip message position
- `type` **[string][58]** "InputText"
- `value` **[string][58]** "" - The current value of the field
- `defaultValue` **[string][58]** "" - The defaultValue of the field
- `inputType` **[string][58]** "text" - The input type of the field (e.g. text, password, email)
- `autoComplete` **[boolean][57]** false - Sets the autocomplete attribute of the input element
- `placeholder` **[string][58]** "" - A placeholder that is displayed when the field is empty
- `path` **[string][58]** "" - Field path
- `useVirtualClipboard` **[boolean][57]** false - Flag if virtual clipboard feature is enabled for this field
- `emptyToNull` **[boolean][57]** true - Flag that determines if empty values are transformed to null in the value function of the formStore
- `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()
- `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()
- `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input
- `validationRules` **[array][59]** \[] - A list of validation rules
- `customErrorMessages` **[object][56]** {} - Definition for custom error messages in the form: {rule: errorMessage}
- `validationOptions` **[object][56]** {onBlur: true, onChange: false} - Validation options to define when validation is executed
### InputTextMultipleField
Allows the input of multiple values
#### Options
**Parameters**
- `label` **[string][58]** "" - The field label
- `type` **[string][58]** "InputTextMultiple"
- `value` **[array][59]** \[] - The current value of the field
- `defaultValue` **[array][59]** \[] - The defaultValue of the field
- `path` **[string][58]** "" - Field path
- `max` **[number][61]** Infinity - Maximum values that the field can have
- `useVirtualClipboard` **[boolean][57]** false - Flag if virtual clipboard feature is enabled for this field
- `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore
- `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()
- `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()
- `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()
- `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input
### TextAreaField
Textarea input field.
Field options are the same as for the InputTextField
#### Options
**Parameters**
- `label` **[string][58]** "" - The field label
- `labelTooltip` **[string][58]** "" - The field label tooltip message
- `labelTooltipPlacement` **[string][58]** "top" - The field label tooltip message position
- `type` **[string][58]** "InputText"
- `value` **[string][58]** "" - The current value of the field
- `defaultValue` **[string][58]** "" - The defaultValue of the field
- `path` **[string][58]** "" - Field path
- `emptyToNull` **[boolean][57]** true - Flag that determines if empty values are transformed to null in the value function of the formStore
- `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()
- `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()
- `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input
- `autosize` **[boolean][57]** true - If true, the textarea resizes automatically
- `rows` **[number][61]** 1 - How many rows are displayed by default. Represents the min value
- `maxRows` **[number][61]** null - How many rows are displayed at most before the field does not grow anymore (only possible if autosize is enabled)
- `resizable` **[boolean][57]** false - If true, the textarea is horizontally resizable by the user
### NestedField
Allows the implementation of a nested field structure
#### NestedRemoveButton
Action button to remove a nested instance,
has to be called by the app with <Field.Remove/> component
#### NestedMoveUpButton
Action button to move up a nested instance in the list,
has to be called by the app with <Field.MoveUp/> component
#### NestedMoveDownButton
Action button to move down a nested instance in the list,
has to be called by the app with <Field.MoveDown/> component
#### NestedDuplicateButton
Action button to duplicate a nested instance in the list,
has to be called by the app with <Field.Duplicate/> component
#### Options
**Parameters**
- `label` **[string][58]** "" - The field label
- `labelTooltip` **[string][58]** "" - The field label tooltip message
- `labelTooltipPlacement` **[string][58]** "top" - The field label tooltip message position
- `buttonLabel` **[string][58]** "Add an item" - The label used for adding an item to the repeatable fields
- `type` **[string][58]** "Nested"
- `min` **[number][61]** 1 - min of nested children the field can have
- `max` **[number][61]** 1 - max of nested children the field can have
- `fields` **[object][56]** {} - The nested fields definitions
- `value` **[string][58]** \[] - The value of the field
- `defaultValue` **[array][59]** \[] - The defaultValue of the field
- `path` **[string][58]** "" - Field path
- `topAddButton` **[string][58]** true - Whether or not to display the Add button before the fields
- `bottomAddButton` **[string][58]** true - Whether or not to display the Add button after the fields
- `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore
- `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()
- `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()
- `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input
#### addInstance
add a new instance to a nested field
#### duplicateInstance
duplicates a nested instance at a given index
**Parameters**
- `index` **integer** the instance to duplicate index
#### moveInstance
move a nested instance at a given index to a new given index
**Parameters**
- `index` **integer** the instance to move
- `newIndex` **integer** the index that instance will have
#### removeInstance
removes a nested instance at a given index
**Parameters**
- `index` **integer** the instance to remove index
### SelectField
A simple select input field
#### Options
**Parameters**
- `label` **[string][58]** "" - The field label
- `labelTooltip` **[string][58]** "" - The field label tooltip message
- `labelTooltipPlacement` **[string][58]** "top" - The field label tooltip message position
- `type` **[string][58]** "Select"
- `value` **[string][58]** "" - The current value of the field
- `defaultValue` **[string][58]** "" - The defaultValue of the field
- `options` **[array][59]** \[] - an array of strings or objects with value and label defined by the mapping
- `optionsUrl` **[string][58]** null - url to fetch the select options from
- `cacheOptionsUrl` **[string][58]** false - whether to cache optionsUrl fetching response
- `path` **[string][58]** "" - Field path
- `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
- `mappingLabel` **[string][58]** "label" - the name of the option object field related to the option label
- `defaultLabel` **[string][58]** "null" - The label to be displayed as a default value when set
- `emptyToNull` **[boolean][57]** true - Flag that determines if empty values are transformed to null in the value function of the formStore
- `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()
- `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()
- `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input
### DropdownSelectField
Form component allowing to select multiple values from a drop-down list with
an option to allow custom values entered by the user.
The handling of the a custom value is delegated to the application level
through the call of the "onAddCustomValue" callback passed in paramter
#### Options
**Parameters**
- `label` **[string][58]** "" - The field label
- `labelTooltip` **[string][58]** "" - The field label tooltip message
- `labelTooltipPlacement` **[string][58]** "top" - The field label tooltip message position
- `type` **[string][58]** "DropdownSelect"
- `value` **[array][59]** \[] - The current value of the field
- `defaultValue` **[array][59]** \[] - The defaultValue of the field
- `options` **[array][59]** \[] - The options of the dropdown, must be an array of objects
- `optionsUrl` **[string][58]** null - url to fetch the select options from
- `cacheOptionsUrl` **[string][58]** false - whether to cache optionsUrl fetching response
- `path` **[string][58]** "" - Field path
- `allowCustomValues` **[boolean][57]** false - if the field should try to accept user inputed values
- `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.
- `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
- `mappingLabel` **[string][58]** "label" - the name of the option object field related to the option label
- `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
- `returnSingle` **[boolean][57]** boolean - wether or not to return the first value or an array of values
- `max` **[number][61]** Infinity - Maximum values that the field can have
- `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore
- `listPosition` **[string][58]** "bottom" - Can be "top" or "bottom", whether to display the dropdown list above or below the field
- `closeDropdownAfterInteraction` **[boolean][57]** false - Whether the dropdown should close after adding, removing a value or stay open
- `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()
- `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()
- `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input
### TreeSelectField
Form component allowing to select multiple values from a tree structure
#### Options
**Parameters**
- `label` **[string][58]** "" - The field label
- `labelTooltip` **[string][58]** "" - The field label tooltip message
- `labelTooltipPlacement` **[string][58]** "top" - The field label tooltip message position
- `type` **[string][58]** "TreeSelect"
- `value` **[array][59]** \[] - The current value of the field
- `defaultValue` **[array][59]** \[] - The defaultValue of the field
- `data` **[array][59]** {} - The tree structure to select from, must be an object with eventually an array of children
- `dataUrl` **[array][59]** null - url to fetch the tree structure from
- `cacheDataUrl` **[string][58]** false - whether to cache dataUrl fetching response
- `path` **[string][58]** "" - Field path
- `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
- `mappingLabel` **[string][58]** "label" - the name of the node object field related to the node label
- `mappingChildren` **[string][58]** "children" - the name of the node object field related to the node children
- `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
- `returnSingle` **[boolean][57]** boolean - wether or not to return the first value or an array of values
- `max` **[number][61]** Infinity - Maximum values that the field can have
- `selectOnlyLeaf` **[boolean][57]** false - If enabled, only leaves can be selected and not the intermediary nodes
- `expandToSelectedNodes` **[boolean][57]** false - If enabled, tree selection modal will recursively expand to all the already selected values
- `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)
- `showOnlySearchedNodes` **[boolean][57]** false - Flag that determines if nodes that doesn't match the text search should be hidden
- `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore
- `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()
- `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()
- `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input
- `groupByNodes` **[array][59]** \[] - If provided, will display selected values grouped by the provided node matches
- `groupByLevel` **integer** null - If provided, will display selected values grouped by level
- `otherGroupLabel` **[string][58]** "Other values" - Label used for the group that contains values that doesn't fit into a group
### CheckBoxField
A simple checkbox
#### Options
**Parameters**
- `label` **[string][58]** "" - The field label
- `labelTooltip` **[string][58]** "" - The field label tooltip message
- `labelTooltipPlacement` **[string][58]** "top" - The field label tooltip message position
- `type` **[string][58]** "CheckBox"
- `value` **[string][58]** false - The current value of the field
- `defaultValue` **[string][58]** false - The defaultValue of the field
- `path` **[string][58]** "" - Field path
- `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()
- `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()
- `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input
### GroupSelectField
Form component allowing to select on/multiple values from a group of checkboxes/radioboxes
#### Options
**Parameters**
- `label` **[string][58]** "" - The field label
- `labelTooltip` **[string][58]** "" - The field label tooltip message
- `labelTooltipPlacement` **[string][58]** "top" - The field label tooltip message position
- `type` **[string][58]** "GroupSelect"
- `value` **[array][59]** \[] - The current value of the field
- `defaultValue` **[array][59]** \[] - The defaultValue of the field
- `options` **[array][59]** \[] - The options of the dropdown, must be an array of objects
- `optionsUrl` **[string][58]** null - url to fetch the select options from
- `cacheOptionsUrl` **[string][58]** false - whether to cache optionsUrl fetching response
- `path` **[string][58]** "" - Field path
- `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
- `mappingLabel` **[string][58]** "label" - the name of the option object field related to the option label
- `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
- `returnSingle` **[boolean][57]** boolean - wether or not to return the first value or an array of values
- `max` **[number][61]** Infinity - Maximum values that the field can have
- `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore
- `displayInline` **[boolean][57]** false - Display choices in line, default is display as a list
- `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()
- `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()
- `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input
### DataSheetField
Form component allowing to edit a spreadsheet-like data
It uses the react-datasheet npm package to display to field
#### HeaderOptions
**Parameters**
- `label` **[string][58]** "" - The field label
- `labelTooltip` **[string][58]** "" - The field label tooltip message
- `labelTooltipPlacement` **[string][58]** "top" - The field label tooltip message position
- `type` **[string][58]** "DataSheet"
- `value` **[array][59]** \[] - The current value of the field
- `defaultValue` **[array][59]** \[] - The defaultValue of the field
- `headers` **[array][59]** \[] - The headers of the datasheet, must be an array of objects dscribing at least a "label" and a "key" property
- `path` **[string][58]** "" - Field path
- `min` **[number][61]** 0 - Minimum rows that the field can have
- `max` **[number][61]** Infinity - Maximum rows that the field can have
- `rowControlRemove` **[boolean][57]** true - Flag option for specifying if a row delete button should be displayed
- `rowControlMove` **[boolean][57]** true - Flag option for specifying if row move buttons should be displayed
- `rowControlDuplicate` **[boolean][57]** true - Flag option for specifying if a row duplicate button should be displayed
- `rowControlAdd` **[boolean][57]** true - Flag option for specifying if row add buttons should be displayed
- `clipContent` **[boolean][57]** false - Whether cells content should wrap or clip the text content
- `emptyToNull` **[boolean][57]** false - Flag that determines if empty values are transformed to null in the value function of the formStore
- `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()
- `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()
- `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input
- `key` **[string][58]** "" - The column key that will be used in the values row for input and output
- `label` **[string][58]** "" - The column label
- `show` **[boolean][57]** undefined - If false, the column will not be displayed at all
- `readOnly` **[boolean][57]** undefined - If true, the column will be displayed as read only cells
- `defaultValue` **[string][58]** "" - The default value the column will take when creating a new row
- `duplicatedValue` **[string][58]** "" - The default value the column will take when duplicating an existing row
- `width` **[string][58]** undefined - The column width (e.g. "50px" or "25%")
### Slider
Slider input field
#### Options
**Parameters**
- `label` **[string][58]** "" - The field label
- `labelTooltip` **[string][58]** "" - The field label tooltip message
- `labelTooltipPlacement` **[string][58]** "top" - The field label tooltip message position
- `type` **[string][58]** "Slider"
- `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.
- `defaultValue` **([number][61] \| [Range][62])** null - The defaultValue of the field
- `path` **[string][58]** "" - Field path
- `disabled` **[boolean][57]** false - Is the field disabled or not, a disabled field won't be editable or processed by FormStore.getValues()
- `readOnly` **[boolean][57]** false - Is the field readOnly or not, a readOnly field won't be editable but will be processed by FormStore.getValues()
- `readMode` **[boolean][57]** false - If true, displays the field as label and value without the actual form input
- `min` **[number][61]** null (required) - minimum value. You cannot drag your slider under this value.
- `max` **[number][61]** null (required) - maximum value. You cannot drag your slider beyond this value.
- `step` **[number][61]** 1 - The default increment/decrement is 1. You can change that by setting a different number to this property.
### FieldLabel
Label for all fields
## SingleField
SingleField is a generic react component that supports all kinds of different input types without a form component
## ActionIcon
ActionIcon component
**Properties**
- `icon` **[string][58]** required - glyphicon to display [https://getbootstrap.com/docs/3.3/components/#glyphicons][63]
- `onClick` **[function][60]** optional - callback for when action is clicked
## GenericList
Generic List component that renders a list of items using Bootstrap Panels
**Properties**
- `items` **[array][59]** required - an array of items to be displayed in the list. Can be an array of primitives or objects
- `expanded` **[boolean][57]** optional - if the panel is expanded by default
- `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 }) => item
- `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
- `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.
[1]: #stores
[2]: #formstore
[3]: #getvalues
[4]: #values
[5]: #values-1
[6]: #injectvalues
[7]: #reset
[8]: #update
[9]: #parentpath
[10]: #gensiblingpath
[11]: #prefetchoptions
[12]: #validate
[13]: #registercustomvalidationfunction
[14]: #registeraxiosinstance
[15]: #togglereadmode
[16]: #clipboardstore
[17]: #reset-1
[18]: #form
[19]: #values-2
[20]: #formfields
[21]: #inputtextfield
[22]: #options
[23]: #inputtextmultiplefield
[24]: #options-1
[25]: #textareafield
[26]: #options-2
[27]: #nestedfield
[28]: #nestedremovebutton
[29]: #nestedmoveupbutton
[30]: #nestedmovedownbutton
[31]: #nestedduplicatebutton
[32]: #options-3
[33]: #addinstance
[34]: #duplicateinstance
[35]: #moveinstance
[36]: #removeinstance
[37]: #selectfield
[38]: #options-4
[39]: #dropdownselectfield
[40]: #options-5
[41]: #treeselectfield
[42]: #options-6
[43]: #checkboxfield
[44]: #options-7
[45]: #groupselectfield
[46]: #options-8
[47]: #datasheetfield
[48]: #headeroptions
[49]: #slider
[50]: #options-9
[51]: #fieldlabel
[52]: #singlefield
[53]: #actionicon
[54]: #genericlist
[55]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON
[56]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[57]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[58]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[59]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[61]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[62]: https://developer.mozilla.org/docs/Web/HTML/Element/Input
[63]: https://getbootstrap.com/docs/3.3/components/#glyphicons