hbp-react-ui

### Table of Contents - [NameValue][1] - [NameValueArray][2] - [add][3] - [addNameValue][4] - [addFromJSON][5] - [addFromDefinitionsJSON][6] - [remove][7] - [getNames][8] - [getValues][9] - [findByValue][10] - [Path][11] - [Store][12] - [DatePicker][13] - [DropTarget][14] - [DynamicList][15] - [HorizontalInputText][16] - [InputText][17] - [Select][18] - [StaticText][19] - [Tree][20] - [TreeModal][21] ## NameValue NameValue describes a name/value pair, in JSON format e.g. {"name": "foo", "value": "bar"}. **Parameters** - `name` **[string][22]** A name representing the value - `value` **[string][22]** A value - `key` **[number][23]** The position of the object within an array Returns **[object][24]** The name/value instance ## NameValueArray NameValueArray extends Javascript's built-in 'Array' to add specific funtionality for handling arrays of 'NameValue' objects. **Parameters** - `array` **[object][24]** Either a built-in array or a list of NameValue objects Returns **[array][25]** The array of NameValue objects ### add Create and add a single object to the array **Parameters** - `name` **[string][22]** An array of name/value objects in JSON format - `value` **[string][22]** An array of name/value objects in JSON format - `key` **[string][22]** An array of name/value objects in JSON format - `children` **[object][24]** An array of children ### addNameValue Add a single object to the array **Parameters** - `item` **[object][24]** A name/value object ### addFromJSON Append the data to the array **Parameters** - `list` **[array][25]** An array of name/value objects in JSON format ### addFromDefinitionsJSON Append the alphanumeric/label/numeric-format data to the array **Parameters** - `list` **[array][25]** An array of objects from the Definition table ### remove Remove the target object from the array **Parameters** - `target` **[object][24]** A name/value object to be removed ### getNames Return all names Returns **[array][25]** The names ### getValues Return all values Returns **[array][25]** The values ### findByValue Find a name/value object by its unique value **Parameters** - `value` **[string][22]** The value to filter on Returns **[object][24]** The name/value object, if found, otherwise undefined ## Path Path breaks down the supplied path into the underlying elements. **Parameters** - `path` **[string][22]** The path to an element in a JSON structure e.g. '/Category/Item' Returns **[object][24]** An object that can be queried for individual elements ## Store Store is an abstract class that asynchronously queries an endpoint. To use this functionality, derive a class that provides a 'URL' property. **Properties** - `URL` **[string][22]** The GET endpoint to retrieve the data ## DatePicker DatePicker is a UI component that displays a calendar and allows a date to be selected **Properties** - `onChange` **[function][26]** The event-handler for a change in value - `path` **[string][22]** The path to specify when reporting the value - `item` **[object][24]** A NameValue object specifying the initial date value - `style` **[object][24]** Styling overrides - `description` **[string][22]** The tooltip to display ## DropTarget DropTarget is derived from DynamicList and allows the list to be populated by drag&drop. **Properties** - `onChange` **[function][26]** The event-handler for a change in value - `path` **[string][22]** The path to specify when reporting the value - `item` **[object][24]** A NameValue object specifying the initial date value - `style` **[object][24]** Styling overrides - `description` **[string][22]** The tooltip to display ## DynamicList DynamicList allows selected text to be added to a list as individual buttons. These buttons can be added manually and also deleted. **Properties** - `onChange` **[function][26]** The event-handler for a change in value - `path` **[string][22]** The path to specify when reporting the value - `items` **[array][25]** A NameValueArray of the initial values - `onAddItem` **[function][26]** The callback to handle adding a new item - `style` **[object][24]** Styling overrides - `description` **[string][22]** The tooltip to display ## HorizontalInputText HorizontalInputText is derived from InputText and displays a title to the left of the input. **Properties** - `onChange` **[function][26]** The event-handler for a change in value - `path` **[string][22]** The path to specify when reporting the value - `title` **[string][22]** The title - `item` **[object][24]** A NameValue object specifying the initial value - `style` **[object][24]** Styling overrides - `description` **[string][22]** The tooltip to display ## InputText InputText allows simple text input. **Properties** - `onChange` **[function][26]** The event-handler for a change in value - `path` **[string][22]** The path to specify when reporting the value - `item` **[object][24]** A NameValue object specifying the initial value - `style` **[object][24]** Styling overrides - `description` **[string][22]** The tooltip to display ## Select Select allows a value from a dropdown list to be selected. **Properties** - `onChange` **[function][26]** The event-handler for a change in the selected value - `path` **[string][22]** The path to specify when reporting the value - `options` **[array][25]** A NameValueArray of the options to choose from - `item` **[object][24]** A NameValue object specifying the initial value - `style` **[object][24]** Styling overrides - `description` **[string][22]** The tooltip to display ## StaticText StaticText displays a simple static text value **Properties** - `path` **[string][22]** The path to specify when reporting the value - `item` **[object][24]** A NameValue object specifying the initial value - `style` **[object][24]** Styling overrides - `description` **[string][22]** The tooltip to display ## Tree Tree displays an expandable/collapsible hierarchical tree and allows nodes to be selected. **Properties** - `onChange` **[function][26]** The event-handler for each selection - `path` **[string][22]** The path to specify when reporting the value - `data` **[object][24]** A JSON object representing the hierarchy to be displayed, with each node in the form {name, value, children: \[]} - `style` **[object][24]** Styling overrides - `description` **[string][22]** The tooltip to display ## TreeModal TreeModal displays a Tree object in a modal and adds selections to a DynamicList. **Properties** - `onChange` **[function][26]** The event-handler for each selection - `path` **[string][22]** The path to specify when reporting the value - `store` **[object][24]** The data provider (an object that suports a 'queryData()' method and a 'data' property) - `items` **[array][25]** A NameValueArray of the initial values - `style` **[object][24]** Styling overrides - `description` **[string][22]** The tooltip to display [1]: #namevalue [2]: #namevaluearray [3]: #add [4]: #addnamevalue [5]: #addfromjson [6]: #addfromdefinitionsjson [7]: #remove [8]: #getnames [9]: #getvalues [10]: #findbyvalue [11]: #path [12]: #store [13]: #datepicker [14]: #droptarget [15]: #dynamiclist [16]: #horizontalinputtext [17]: #inputtext [18]: #select [19]: #statictext [20]: #tree [21]: #treemodal [22]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String [23]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number [24]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [25]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array [26]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function