Huiskamp UI - React Module
This NPM module contains the UI elements for Huiskamp Client Applications.
The UI is built on top of React Material UI.
Components
Form Components
- Checkbox
- Radio
- Select
- Switch
- Text field
All form components have a common API:
Props:
- label
- name
- value
- onChange (name, value, oldValue) => void
Additional props:
- Radio
- itemValue, radio will be selected if value === itemValue
- Select
- items, array with item objects
{ value: 1, label: 'One' }, { label: 'Group', items: [...] }
- items, array with item objects
Record Table Components
Props:
- columns - [Column]
- id - string
- label - string
- format - [(intermediate, row) => intermediate|FormattedValue]
- Passes result of each functions call into the next
- Initial intermediate is the row
- FormattedValue is one of:
- String or number
- JSX
- {raw: JSX, cellProps}
- {type: 'Button'[, label][, icon][, color], onClick}
- sortable - bool
- blankDown - (row1, row2) => bool - if true, blanks down this column of row2
- data - [Row] - rows are objects (keyed by id column)
- message - string - when not empty, displayed instead of data
- ordering - [OrderSpec] -
- id - string - the column id
- asc - bool - true if ascending, false otherwise
- onOrderChange - ([OrderSpec]) => void - the new order
Notes
- For now add the following to your public/index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">