UI Elements

Classes

ResourceTheme

the resource theme checks elements props and validates them against their theme, and will make some overrides based off props porvided from ui-builder

ScrollSync

Sends events between multiple components to allow them to scroll in unison.

• To use, create a ScrollSync in the constructor of your component.
• In componentDidMount(), call this.scrollSync.start(),
• In componentWillUnmount(), call this.scrollSync.stop()
• Call this.scrollSync.onScroll( event ) when your local component scrolls.
• The onRemoteScroll function given in the ScrollSync's constructor should immediately set the scroll position of your component as desired.

AbstractFilterController

FilterController

AbstractSortController

SortController

Breadcrumbs

React class that renders a button

Button

React class that renders a button

Checkbox

Checkbox - React class that renders a checkbox

Combobox

React class that renders a dropdown element and allows for the selection of one item

Content

has a header, content and footer.

DataBlock

renders a column or row seperated title and data format

DateTimePicker

React class that renders a date time picker

DateTimeRangePicker

React class that renders a date range picker

Dialog

React class that renders a popup with a message or a question

Message

React class to render a dialog message

Question

React class to render a Dialog question

Dropdown

React class that renders a dropdown element and allows for the selection of one item

Flex

React class that renders a div with display flex

Header

React class that renders a Hx html tag

Label

React class that renders a label element

Item

The Item represents a clickable and/or selectable element in the List. An Item that supplies an item prop is selectable and clickable. An Item that supplies an eventData prop without an item prop will be clickable but not selectable.

Dynamic

This takes an items array and a factory and produces item elements for the list. The Factory.create() will be called with an item and props ( onClick, onEvent, selected ) and should return a List.Item (if the item should be selectable/clickable) or other React component

List

React class that renders a List element

SingleSelector

The SingleSelector will manage a state variable in you're controlling components state. This will allow at most one item to be selected. Meta-click will unselect a selected item.

MultiSelector

The MultiSelector will manage a state variable in you're controlling components state. This will allow multiple items to be selected. Meta-click will unselect a selected item.

Login

React login widget with several input and methods

MultiSelect

React class that renders a multiselect widget

NumericInput

React class that renders an Input that only accepts numbers

Pane

React class that renders a pane

Item

react class that renders an anchor tag with an onClick

Popup

React class to render a popup

RadioButton

Creates a Radio button element in react

ResetPassword

React class that renders a widget to reset a user's password

Slider

React class that renders a Slider

SplitPane

React class that renders a SplitPane

Table

React class that renders a table

Tab

react class to render a tab for the tab pane

TabPane

React class for a component with as many tabs as desired. manages which tab is displayed

Text

React class to render a block of text

TextArea

React class to render a block of text

TextInput

This TextInput field will allow you to install a function to prohibit keys, validate the input, and to fire changes only on a carriage return or blur.

ToggleButton

React class that renders a button with an on and an off state

Functions

create()

classes(component, type, variant, ...rest) ⇒ string

Returns the classnames needed for the component's type and variant.

subclasses(component, type, ...rest) ⇒ string

Returns the classnames needed for the component's sub element. The variant is not needed here because it will be in the css rule as a parent.

props(component, variant) ⇒ object

Returns any default props for the supplied Component and Variant. If the third argument is an object, it will be overlaid on top of the component's default props and the component's variant props.

If the second argument is an object, it is considered to be the React component's actual props object, and the variant is looked up from it. This means from render, you can invoke: const { markClass } = theme.props( 'Checkbox', this.props )

renderLayout(theme, layout, children)

Renders the layouts

ensureHierarchy(theme, results, parents, options, name)

Makes sure that the parent layouts have been created and are in the layout children arrays or the top level results array

createSublayouts(elem)

Creates React elements from the sublayout object

Typedefs

FormData

ResourceTheme

the resource theme checks elements props and validates them against their theme, and will make some overrides based off props porvided from ui-builder

Kind: global class

• ResourceTheme
  • .classes(componentType, type, variant, ...rest) ⇒ string
  • .subclasses(component, type, ...rest) ⇒ string
  • .props(component, variant) ⇒ object
  • .variantClassNames(componentType, classes, variant)

resourceTheme.classes(componentType, type, variant, ...rest) ⇒ string

Returns the classnames needed for the component's type and variant.

Kind: instance method of ResourceTheme
Returns: string - the classname

Param	Type	Description
componentType	string	the name of the component type. eg "Button"
type	string	the part of the component to get. eg "button"
variant	string	the variant name to requsest. eg "small"
...rest	strings	other strings to add to the classname

resourceTheme.subclasses(component, type, ...rest) ⇒ string

Returns the classnames needed for the component's sub element. The variant is not needed here because it will be in the css rule as a parent.

Kind: instance method of ResourceTheme
Returns: string - the classname

Param	Type	Description
component	string	the name of the component type. eg "Button"
type	string	the sub-component of the component to get. eg "button"
...rest	strings	other strings to add to the classname

resourceTheme.props(component, variant) ⇒ object

Returns any default props for the supplied Component and Variant. If the third argument is an object, it will be overlaid on top of the component's default props and the component's variant props.

If the second argument is an object, it is considered to be the React component's actual props object, and the variant is looked up from it. This means from render, you can invoke: const { markClass } = theme.props( 'Checkbox', this.props )

Kind: instance method of ResourceTheme
Returns: object - an object containing the default props. This will be a merger of the default variant's props and the specified variants props. This will always return an object

Param	Type	Description
component	string	the name of the component type. eg "Button"
variant	string \	object	the variant name to requsest. eg "small"

resourceTheme.variantClassNames(componentType, classes, variant)

Turns the variant's hierarchy into a hashified set of classnames.

Kind: instance method of ResourceTheme

Param	Type	Description
componentType	object	the component type
classes	object	the jss classname lookup
variant	string	the component variant

ScrollSync

Sends events between multiple components to allow them to scroll in unison.

• To use, create a ScrollSync in the constructor of your component.
• In componentDidMount(), call this.scrollSync.start(),
• In componentWillUnmount(), call this.scrollSync.stop()
• Call this.scrollSync.onScroll( event ) when your local component scrolls.
• The onRemoteScroll function given in the ScrollSync's constructor should immediately set the scroll position of your component as desired.

Kind: global class

• ScrollSync
  • new ScrollSync(options)
  • .onReceivedRemoteScroll
  • .onScroll
  • .start()
  • .stop()

new ScrollSync(options)

Create a ScrollSync

Param	Type	Description
options	object	the options object
options.name	string	the name of the synchronization. Defaults to 'main'
options.onRemoteScroll	function	this function should set the scroll position of your component

scrollSync.onReceivedRemoteScroll

Private function that listens to events. This will call the onRemoteScroll if the sync is not locked

Kind: instance property of ScrollSync

scrollSync.onScroll

Call this when your local scroll region updates

Kind: instance property of ScrollSync

scrollSync.start()

Call this in componentDidMount()

Kind: instance method of ScrollSync

scrollSync.stop()

Call this in componentWillUnmount()

Kind: instance method of ScrollSync

AbstractFilterController

Kind: global class

new AbstractFilterController()

Generic filtering class

FilterController

Kind: global class

• FilterController
  • new FilterController(component, stateKey, options)
  • .key(column) ⇒ string
  • .isColumnFiltered(column) ⇒ boolean
  • .filter(data, columns)
  • .applyFilters(data, columns, filterModel)
  • .getFilterValue(column)
  • .add(column, value)

new FilterController(component, stateKey, options)

Filtering class which can filter multiple columns and stores its filtering state on the state of a provided React component

Param	Type	Description
component	React.Component	Parent component where filtering state changes will be managed
stateKey	string	The key within the parent component's state where filtering state will be stored.
options	Object	idKey - The key within the column object to find the column's id idFunc - A function that returns a column's id

filterController.key(column) ⇒ string

Returns a unique id key for the given column

Kind: instance method of FilterController
Returns: string - - The id key for the column

Param	Type	Description
column	Object	The column object for which to return a key

filterController.isColumnFiltered(column) ⇒ boolean

Kind: instance method of FilterController
Returns: boolean - - Whether or not the column is filtered

Param	Type
column	Object

filterController.filter(data, columns)

Filters the tabular data. By default uses String.includes

Kind: instance method of FilterController

Param	Type	Description
data	Array	The table data
columns	Array	The table columns

filterController.applyFilters(data, columns, filterModel)

Kind: instance method of FilterController

Param	Type	Description
data	Array	The table data
columns	Array	The table columns
filterModel	Object	The stored filter model in the form of an object with column id keys and filter values

filterController.getFilterValue(column)

Returns the current filter value for the column

Kind: instance method of FilterController

Param	Type	Description
column	Object	The column for which to get the filter value.

filterController.add(column, value)

Updates the filter model state

Kind: instance method of FilterController

Param	Type	Description
column	Object	The column to filter
value	string \	number	The value to filter on

AbstractSortController

Kind: global class

new AbstractSortController()

Generic sorting class

SortController

Kind: global class

• SortController
  • new SortController(component, stateKey, options)
  • .key(column) ⇒ string
  • .isColumnSorted(column) ⇒ boolean
  • .sort(data, columns, [sortOverride])
  • .getSortDirection(column) ⇒ string
  • .set(column, [direciton])

new SortController(component, stateKey, options)

Sorting class which sorts one column at a time and stores its sort state on the state of a provided React component.

Param	Type	Description
component	React.Component	Parent component where sorting state changes will be managed
stateKey	string	The key within the parent component's state where sorting state will be stored.
options	Object	idKey - The key within the column object to find the column's id idFunc - A function that returns a column's id

sortController.key(column) ⇒ string

• Returns a unique id key for the given column

Kind: instance method of SortController
Returns: string - - The id key for the column

Param	Type	Description
column	Object	The column object for which to return a key

sortController.isColumnSorted(column) ⇒ boolean

Kind: instance method of SortController
Returns: boolean - - Whether or not the column is sorted

Param	Type	Description
column	Object	The column object

sortController.sort(data, columns, [sortOverride])

Sorts the tabular data based on established sort model using

Kind: instance method of SortController

Param	Type	Description
data	Array	The table data
columns	Array	The table columns
[sortOverride]	function	An override function to be used for sorting. Method signature is itemA, itemB, accessor

sortController.getSortDirection(column) ⇒ string

Returns the direction that a given column is sorted based on sort state

Kind: instance method of SortController
Returns: string - - one of 'asc', 'desc' or null

Param	Type	Description
column	Object	The column for which to get sort direction

sortController.set(column, [direciton])

Sets a column's sort direction in state, starting with ascending.

Kind: instance method of SortController

Param	Type	Description
column	Object	The column to sort by
[direciton]	string	asc or desc. Optional and the default is ascending OR the opposite of the current direction

Breadcrumbs

React class that renders a button

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
onClick	function	function to be called when the button is clicked
eventData	any	will be passed through as the data key to the onClick function
internal	node	component children, will be handled by react
font	string	string corresponding to the icon to be rendered

breadcrumbs.onClick

(Internal) onClick of the element just adds the eventData prop to the event, and then calls the onClick prop

Kind: instance property of Breadcrumbs

Button

React class that renders a button

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
onClick	function	function to be called when the button is clicked
eventData	any	will be passed through as the data key to the onClick function
internal	node	component children, will be handled by react
font	string	string corresponding to the icon to be rendered

button.onClick

(Internal) onClick of the element just adds the eventData prop to the event, and then calls the onClick prop

Kind: instance property of Button

Checkbox

Checkbox - React class that renders a checkbox

Kind: global class
Properties

Name	Type	Description
value	boolean	the value that the checkbox will display
disabled	boolean	whether the checkbox will be disabled
variant	string	Theme variant name to be added to the component
className	string	css class to be applied to this component
eventData	any	will be passed through as the data key to the onClick function
onChange	function	function to be called when the button is clicked

checkbox.onClick

(Internal) onClick of the element, adds the eventData prop to the event, adds a value to the event, and then calls the onChange prop

Kind: instance property of Checkbox

Combobox

React class that renders a dropdown element and allows for the selection of one item

Kind: global class
See: https://jquense.github.io/react-widgets/api/Combobox/
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
eventData	any	will be passed through as the data key to the onClick function
children	node	internal component children, will be handled by react
sendValueField	boolean
onChange	function	function to be called when the button is clicked
valueField	string	key corresponding to the value field in the data
textField	string	key corresponding to the text field in the data
value	any	value to be assigned to the input
data	array	array of objects with a value and a text, the keys of which should correspond to valueField and textField
selectIcon	string	string corresponding to a font class for the icon desired

combobox.onSelect

(Internal) calls the onChange prop with an object with value and data

Kind: instance property of Combobox

Content

has a header, content and footer.

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
horizontal	boolean
inline	boolean
relative	boolean
vFill	boolean

DataBlock

renders a column or row seperated title and data format

Kind: global class
Properties

Name	Type	Description
vertical	boolean	determines if the block has a vertical layout or horizontal layout
fields	array	the fields to be rendered or read from the item and rendered each element is an object
item	object	the data item that is to be rendered by the data block
title	string \	node	text or element to be the block
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component

DateTimePicker

React class that renders a date time picker

Kind: global class
See: https://jquense.github.io/react-widgets/api/DateTimePicker/
Properties

Name	Type	Description
timezone	string
variant	string	Theme variant name to be added to the component
className	string	css class to be applied to this component
eventData	any	will be passed through as the data key to the onClick function
onChange	function	function to be called when the button is clicked
sendValueField	bool	the field from the value object to be passed to the onChange field

dateTimePicker.onSelect

(Internal) event that gets fired whenever the user makes a selection on the widget

Kind: instance property of DateTimePicker

DateTimeRangePicker

React class that renders a date range picker

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
onClick	function	function to be called when the button is clicked
eventData	any	will be passed through as the data key to the onClick function
internal	node	component children, will be handled by react
font	string	string corresponding to the icon to be rendered

Dialog

React class that renders a popup with a message or a question

Kind: global class
Properties

Name	Type	Description
variant	string	Theme variant name to be added to the component
show	boolean	if true, the popup will be displayed on the page
title	string	the title of the popup
onClose	function	function to be executed when the popup gets closed
closeOnEscape	boolean	if true, popup will close when the esc key is hit
closeOnDocumentClick	boolean	if true popup will close when the document is clicked
onSubmit	function	function to be ran when the question answer is submitted
formProps	object	if there is an onSubmit function provided, a form will wrap the children, and this data will be passed into the form
children	node	React children of the element

Message

React class to render a dialog message

Kind: global class
Properties

Name	Type	Description
variant	string	Theme variant name to be added to the component
okayVariant	string	Theme variant name to be applied to the dialog okay button
title	string	the title of the popup
okay	string	the text that will be on the okay button
show	boolean	if true, the popup will be displayed on the page
onClose	function	function to be executed when the popup gets closed
message	string	text or react element to be displayed to the user
children	node	React children of the element

Question

React class to render a Dialog question

Kind: global class
Properties

Name	Type	Description
variant	string	Theme variant name to be added to the component
okayVariant	string	Theme variant name to be applied to the dialog okay button
cancelVariant	string	Theme variant name to be applied to the dialog cancel button
title	string	the title of the popup
okay	string	the text that will be on the okay button
cancel	string	the text that will be on the cancel button
eventData	any	will be passed through as the data key to the onClick function
show	boolean	if true, the popup will be displayed on the page
onOkay	function	function to be run on hitting okay
onCancel	function	function to be executed when the cancel button on the popup is clicked
message	string	text or react element to be displayed to the user
children	node	React children of the element

Dropdown

React class that renders a dropdown element and allows for the selection of one item

Kind: global class
See: https://jquense.github.io/react-widgets/api/DropdownList/
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
eventData	any	will be passed through as the data key to the onClick function
children	node	internal component children, will be handled by react
sendValueField	boolean
onChange	function	function to be called when the button is clicked
valueField	string	key corresponding to the value field in the data
textField	string	key corresponding to the text field in the data
value	any	value to be assigned to the input
data	array	array of objects with a value and a text, the keys of which should correspond to valueField and textField
selectIcon	string	string corresponding to a font class for the icon desired

dropdown.onSelect

(Internal) calls the onChange prop with an object with value and data

Kind: instance property of Dropdown

Flex

React class that renders a div with display flex

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
direction	string	flex-direction css property
wrap	string	flex-wrap css property
inline	boolean	if true will change the display property to be inline-flex
vFill	boolean	if true, minHeight is set to 100%
align	string	align-items css property
alignSelf	string	align-self css property
alignContent	string	align-content css property
justify	string	justify-content css property
style	object	css styles object
children	node	react children

Header

React class that renders a Hx html tag

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
level	number	html header level

Label

React class that renders a label element

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component

Item

The Item represents a clickable and/or selectable element in the List. An Item that supplies an item prop is selectable and clickable. An Item that supplies an eventData prop without an item prop will be clickable but not selectable.

Kind: global class

item.onClick

onClick - (Internal) onClick of the element

Kind: instance property of Item

Dynamic

This takes an items array and a factory and produces item elements for the list. The Factory.create() will be called with an item and props ( onClick, onEvent, selected ) and should return a List.Item (if the item should be selectable/clickable) or other React component

Kind: global class

List

React class that renders a List element

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
[selector]	object	either null (no selection), SingleSelector, MultiSelector, or a custom selector
selector.onSelect	function	called with an object containing { value : , data : <item's eventData>, listData : <List's eventData>, sourceEvent }. This function should control the state of the selection.
selector.isSelected	function	returns true if the given item is selected

SingleSelector

The SingleSelector will manage a state variable in you're controlling components state. This will allow at most one item to be selected. Meta-click will unselect a selected item.

Kind: global class
Properties

Name	Type	Description
component	Component	the component whose state is managed
stateKey	string	the name of the selection group in the state
options	object
options.onSelect	function	called with the item to select or null if remove is occurring. If this function returns false, the selection is cancelled. This will be invoked prior to calling component.setState()
[options.idFunc]	function	a function used to return item's id. The id will be stored in the selection group.
[options.idKey]	string	the key of the item's id. The id will be stored in the selection group. This is unused if idFunc is supplied
options.useMeta	object	if false, the use of meta to remove items will be disabled

MultiSelector

The MultiSelector will manage a state variable in you're controlling components state. This will allow multiple items to be selected. Meta-click will unselect a selected item.

Kind: global class
Properties

Name	Type	Description
component	Component	the component whose state is managed
stateKey	string	the name of the selection group in the state
options	object
options.onSelect	function	called with three arguemnts: the array of the new selections ids, the item being added or removed, and true or false indicating if the event is an add or remove. If this function returns false, the selection is cancelled. This will be invoked prior to calling component.setState()
[options.idFunc]	function	a function used to return item's id. The id will be stored in the selection group.
[options.idKey]	string	the key of the item's id. The id will be stored in the selection group. This is unused if idFunc is supplied

Login

React login widget with several input and methods

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
headerClassName	string	css class to be applied to the header component
userClassName	string	css class to be applied to the username input
passwordClassName	string	css class to be applied to the password input
loginClassName	string	css class to be applied to the login button
resetClassName	string	css class to be applied to the reset password button
warningClassName	string	css class to be applied to the warning/error text
forgotClassName	string	css class to be applied to the forgot password button
backClassName	string	css class to be applied to the back button
paneVariant	string	Theme variant name to be applied to the pane element
headerVariant	string	Theme variant name to be applied to the header
usernameVariant	string	Theme variant name to be applied to the username input
passwordVariant	string	Theme variant name to be applied to the password input
warningVariant	string	Theme variant name to be applied to the warning text
forgotVariant	string	Theme variant name to be applied to the forgot button
backVariant	string	Theme variant name to be applied to the back button
userText	string	text to be displayed above the username input
userHint	string	text to be the username input placeholder
emailText	string	text to be displayed above the email input
emailHint	string	text to be the email input placeholder
passwordText	string	text to be display above the password input
passwordHint	string	text to be the password input placeholder
loginText	string	text to be on the login button
resetText	string	text to be on the reset button
forgotText	string	text to be on the forgot password button
backText	string	text to be on the back button
errorText	string	text to be displayed in red
onLogin	function	function to be run when the user clicks on the login button
onLogout	function	function to ensure the user is logged out when they switch between login mode, or reset mode
onResetPassword	function	function to be ran when the user submits a password reset
logo	any	displayed at the top of the ui-element, usually an img elemet or react element with an image
loginInstruction	any	text or react element to be displayed at the top of the login pane
resetInstruction	any	text or react element to be displayed at the top of the reset password pane

• Login
  • .onInput
  • .onSubmit
  • .toggleMode

login.onInput

(Internal) onChange method of the inputs, maintians state and where focus is

Kind: instance property of Login

login.onSubmit

(Internal) onClick method of the buttons keeps track of which mode the widget is in and performs the appropriate funcionality

Kind: instance property of Login

login.toggleMode

(Internal) maintains the correct mode the widget is in

Kind: instance property of Login

MultiSelect

React class that renders a multiselect widget

Kind: global class
See: https://jquense.github.io/react-widgets/api/Multiselect/
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
eventData	any	data to be included with events
onChange	function	function to be executed with the widget's onChange
onCreate	function	function to be executed with the widget's onCreate
children	node	internal component children, will be handled by react
selectIcon	string	font icon string of the icon to be used for dropdown arrow

• MultiSelect
  • .onSelect
  • .onCreate

multiSelect.onSelect

(Internal) onChange of the element, add event data to the payload and calls onChange

Kind: instance property of MultiSelect

multiSelect.onCreate

(Internal) onCreate of the element, adds eventData to the onCreate call

Kind: instance property of MultiSelect

NumericInput

React class that renders an Input that only accepts numbers

Kind: global class
See: TextInput Class derived from
Properties

Name	Type	Description
onChange	function	function to be called with the widgets onChange
changeOnBlur	boolean
changeOnReturn	boolean
hint	string	hint text for the widget
min	number	minimum value that the input can be
max	number	maximum value that the input can be
maxLength	number
size	number
focus	boolean
float	boolean	determines if the value can be a float or not

• NumericInput
  • .onChange
  • .acceptKey
  • .validator

numericInput.onChange

(Internal) onChange of the element, calls the onChange prop

Kind: instance property of NumericInput

numericInput.acceptKey

(Internal) - determines which key presses to accept this method filters out all non-numbers

Kind: instance property of NumericInput

numericInput.validator

(Internal) validation function that well not let invalid values be submitted

Kind: instance property of NumericInput

Pane

React class that renders a pane

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
inline	boolean	adds inline properties to the pane
variant	string	Theme variant name to be added to the component

Item

react class that renders an anchor tag with an onClick

Kind: global class
Properties

Name	Type	Description
close	boolean	if true will call the onClose function
onClick	function	called when the element is clicked with event data and value
eventData	any	passed into the onClick function when it is triggered
value	any	passed into the onClick function
onClose	function	called when the element is clicked and close is true
className	string	className of the element
children	node	React children of the element

item.onClick

onClick - (Internal) onClick of the element

Kind: instance property of Item

Popup

React class to render a popup

Kind: global class
See: https://github.com/danreeves/react-tether
Properties

Name	Type	Description
title	string \	node	to be rendered at the top of the popup
trigger	function	by default, a ToggleButton is used to render the button to surface the popup. If this function is supplied, its result will be used instead. The function is given and object containing { ref, onToggle, setOpened, isOpened }. The Ref needs to be assigned to the top most DOM element
style	object	css style object to be applied to the ToggleButton
id	string	unique id of the ToggleButton
variant	string	Theme variant name to be added to the popup component
toggleVariant	string	Theme variant name to be added to the ToggleButton component
onChange	function	called when the element is clicked with event data and value
eventData	any	passed into the onClick function when it is triggered
value	any	passed into the onClick function
children	node	React children of the element
render	function	if this is supplied, the function will be invoked with a close callback and the return value will be placed into the popup.

• Popup
  • .onToggle
  • .setOpened
  • .onDocumentClick
  • .addEvents()
  • .removeEvents()

popup.onToggle

(Internal) flips the isOpened property of the state

Kind: instance property of Popup

popup.setOpened

(internal) sets the isOpened property of the state

Kind: instance property of Popup

popup.onDocumentClick

(Internal) closes the popup

Kind: instance property of Popup

popup.addEvents()

(internal) adds a click event to the page

Kind: instance method of Popup

popup.removeEvents()

(internal) removes a click event to the page

Kind: instance method of Popup

RadioButton

Creates a Radio button element in react

Kind: global class
Properties

Name	Type	Description
className	string	a class to be assigned to the element
variant	string	a global class to be assigned to the element
iconOn	string	the icon displayed when the radio value === on
iconOff	string	the icon displayed when radio value !== on
on	any	value is compared to this to determine if the radio is selected
onChange	function	callback called when element is clicked
eventData	any	data fed to the onChange function
value	any	a value used to determine if button is in an on state
id	string	to be used by the element
disabled	boolean	determines if the element is disabled or not
on	any	@default [true] if equal to value, button is in and on state, defaults to true

radioButton.onClick

(Internal) the onChange of the element, calls the onChange prop

Kind: instance property of RadioButton

ResetPassword

React class that renders a widget to reset a user's password

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Them variant name to be added to the component
logo	any	text or react element to be rendered at the top of the widget
resetInstruction	any	text or react element to be rendered below the logo
headerVariant	string	variant to be applied to the element header
headerClassName	string	css class to be applied to the element header
headerText	string	text to be rendered in the header
passwordClassName	string	css class to be applied to the password inputs
passwordVariant	string	Theme variant to be applied to the password inputs
passwordHint	string	text to be the password input hint
confirmPasswordHint	string	text to be the confirm password hint
resetClassName	string	css class to be applied to the button
resetVariant	string	Theme variant to be applied to the button
resetText	string	text for the button
errorVariant	string	Theme variant to be applied to the error text
errorClassName	string	css class to be applied to the error text
errorText	string	text to be displayed as the error
onSubmit	function	function to be called when the form is submitted

• ResetPassword
  • .onInput
  • .onSubmit

resetPassword.onInput

(Internal) onChange method of the inputs, maintians state and where focus is

Kind: instance property of ResetPassword

resetPassword.onSubmit

(Internal) onClick method of the buttons keeps track of which mode the widget is in and performs the appropriate funcionality

Kind: instance property of ResetPassword

Slider

React class that renders a Slider

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
onChange	function	function to be called when the button is clicked
eventData	any	will be passed through as the data key to the onClick function
min	number \	string	the minimum value of the slider range
max	number \	string	the maximum value of the slider range
value	number \	string	the current value of the slider

slider.onChange

(Internal) onClick of the element just adds the eventData prop to the event, and then calls the onClick prop

Kind: instance property of Slider

SplitPane

React class that renders a SplitPane

Kind: global class
See: https://github.com/tomkp/react-split-pane is the base widget this uses
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
split	'vertical' \	'horizontal'
minSize	number	sets the minimum size of the primary pane
maxSize	number	sets the maximum size of the primary pane
defaultSize	number	sets the default size of the primary pane
onChange	function	function to be called with the onChange method
autoSaveKey	function	key which saves the last value to local storage
eventData	any	will be passed through as the data key to the onClick function

splitPane.onChange

(Internal) gets called by the widget's onChange. sets the last pane size to local storage and calls the onChange prop with eventData

Kind: instance property of SplitPane

Table

React class that renders a table

Kind: global class
See: https://github.com/tannerlinsley/react-table
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
tableRef	any	react reference
data	array	the data to be displayed on the table
columns	array	array of objects the defines the column header and which portion of the data to display

Tab

react class to render a tab for the tab pane

Kind: global class
Properties

Name	Type	Description
tabId	string	id of the tab
tabName	string	name that will be displayed on the tab button
className	string	css class to be applied to this component

TabPane

React class for a component with as many tabs as desired. manages which tab is displayed

Kind: global class
Properties

Name	Type	Description
activeTab	string	id of the tab that should be active when the component is created
variant	string	Theme variant name to be added to the component
className	string	css class to be applied to this component
activeId	string	id of the tab that will be active
defaultId	string	id of the tab that will be active if there isn't an activeId specified
eventData	any	will be passed through as the data key to the onClick function
onTabClicked	function	function to be executed when a Tab gets clicked

tabPane.onTabClicked

(Internal) sets the activeTab, then calls onTabClicked with an object with a value property and data property the value property is the tabId of the tab clicked, and the data is the eventData prop

Kind: instance property of TabPane

Text

React class to render a block of text

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component

TextArea

React class to render a block of text

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component

TextInput

This TextInput field will allow you to install a function to prohibit keys, validate the input, and to fire changes only on a carriage return or blur.

Kind: global class
Properties

Name	Type
onChange	function
onfocus	function
validator	function
acceptKey	function
changeOnReturn	boolean
changeOnBlur	boolean
alwaysFireOnReturn	boolean
placeCaretAtEnd	boolean
focus	boolean
disabled	boolean
hint	string
placeholder	string
value	string
maxLength	number
size	number

ToggleButton

React class that renders a button with an on and an off state

Kind: global class
Properties

Name	Type	Description
className	string	css class to be applied to this component
variant	string	Theme variant name to be added to the component
onChange	function	function to be called when the button is clicked
eventData	any	will be passed through as the data key to the onClick function
value	boolean	tells the button if it is an on or off state
on	node	react element to be displayed if value is true
off	node	react element to be displayed if value is false
iconOn	string	string of font to be displayed if value is true
iconOff	string	string of font to be displayed if value is false
children	node	internal component children, will be handled by react

toggleButton.onClick

(Internal) onClick of the element just adds the eventData prop to the event, and then calls the onClick prop

Kind: instance property of ToggleButton

create()

Kind: global function

• create()
  • ~getData()
  • ~setDefaultData()
  • ~getDefaultData()
  • ~applyErrorState(data, name, err, isSubmit)
  • ~dataToForm()
  • ~isValid()
  • ~dataProps() ⇒ object
  • ~hasChanges()
  • ~getFromData(type, name)
  • ~message()

create~getData()

Returns the current form data, either from the component state or from the currentData return {FormData}

Kind: inner method of create

create~setDefaultData()

Sets the current (external) data. This is the default state and the revert state

Kind: inner method of create

create~getDefaultData()

Gets the current (external) data

Kind: inner method of create

create~applyErrorState(data, name, err, isSubmit)

Applys the error condition to the data

Kind: inner method of create

Param	Type	Description
data	*	the data to modify
name	*	the name of the item to change
err	*	if false, this indicates and error. If a string it indicates and error with a message
isSubmit	*	if true, this is for submit validators

create~dataToForm()

Converts the value object into a { values : { }, errors : { }, msgs : { } }

Kind: inner method of create

create~isValid()

Returns true if there are no immediate errors. Normally this is used to enable the submit button. This only checks the states of the immediate validators, not the submit validators

Kind: inner method of create

create~dataProps() ⇒ object

Kind: inner method of create
Returns: object - an object that contains data-error : true if the named component is in an error state.

create~hasChanges()

Returns true if the the users has made changes to the values

Kind: inner method of create

create~getFromData(type, name)

Returns the value for the named form elements field.

Kind: inner method of create

Param	Type	Description
type	string	one of 'errors', 'msgs', 'values'
name	string	the name of the attribute

create~message()

Returns the message for the named field. If the name is not supplied or is null, the overall error message will be returned

Kind: inner method of create

classes(component, type, variant, ...rest) ⇒ string

Returns the classnames needed for the component's type and variant.

Kind: global function
Returns: string - the classname

Param	Type	Description
component	string	the name of the component type. eg "Button"
type	string	the part of the component to get. eg "button"
variant	string	the variant name to requsest. eg "small"
...rest	strings	other strings to add to the classname

subclasses(component, type, ...rest) ⇒ string

Returns the classnames needed for the component's sub element. The variant is not needed here because it will be in the css rule as a parent.

Kind: global function
Returns: string - the classname

Param	Type	Description
component	string	the name of the component type. eg "Button"
type	string	the sub-component of the component to get. eg "button"
...rest	strings	other strings to add to the classname

props(component, variant) ⇒ object

Returns any default props for the supplied Component and Variant. If the third argument is an object, it will be overlaid on top of the component's default props and the component's variant props.

If the second argument is an object, it is considered to be the React component's actual props object, and the variant is looked up from it. This means from render, you can invoke: const { markClass } = theme.props( 'Checkbox', this.props )

Kind: global function
Returns: object - an object containing the default props. This will be a merger of the default variant's props and the specified variants props. This will always return an object

Param	Type	Description
component	string	the name of the component type. eg "Button"
variant	string \	object	the variant name to requsest. eg "small"

renderLayout(theme, layout, children)

Renders the layouts

Kind: global function

Param	Type	Description
theme	Theme
layout	string	the layout name
children	array	the react children to place

ensureHierarchy(theme, results, parents, options, name)

Makes sure that the parent layouts have been created and are in the layout children arrays or the top level results array

Kind: global function

Param	Type	Description
theme	Theme	the theme, used to get the layout's classname
results	Array	the top level results array
parents	Object	the top level parent layout lookup object
options	Object	the options for the particular layout
name	string	the name of the element we need to place.

createSublayouts(elem)

Creates React elements from the sublayout object

Kind: global function

Param	Type	Description
elem	Object	the sublayout object created in ensureHistory

FormData

Kind: global typedef
Properties

Name	Type	Description
values	object	object containing current values
errors	object	object containing error states for each value
msgs	object	object containing error messages for each value
hasChanges	boolean	true if the user has modified the values
hasError	boolean	true if the there is an error