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: [...] }

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">