Skip to content

Guide to Loris React components

Jump to bottom
Alex Ilea edited this page May 4, 2017 · 10 revisions

Under construction

Note: this guide assumes a basic understanding of React concepts and lifecycle.
For React documentation click here.

You can find a set of reusable components under jsx/ directory of your Loris installation. The list is continuously expanding, so watch out for updates.

Table of Contents

  1. StaticDataTable.js
  2. DynamicDataTable.js
  3. Form.js
  4. FilterForm.js 🆕
  5. Tabs.js 🆕
  6. Panel.js 🆕
  7. Breadcrumbs.js
  8. PaginationLinks.js
  9. Markdown.js
  10. MultiSelectDropdown.js (Currently only used by DQT, ask Jordan for details)

StaticDataTable

Static Data Table displays a set of data that is receives via props.
Optional props are in [] brackets.

Props Type Description
Headers array Headers of the given table
Data array Data to be shown in the table
[RowNumLabel] string Header of the first column of every table (Default: 'No.')
[getFormattedCell] function Signature: function formatColumn(column, cell, rowData, rowHeaders){}
Return: JSX element for a table cell
[freezeColumn] string Name of the column that stays in place when table is scrolled horizontally
[RowNameMap] ??? ???
[Filter] object Object used to filter displayed data

Common usage

<StaticDataTable
    Headers={['ID', 'First Name', 'Last Name']}
    Data=[[1, 'Ted', 'Mosby'], [2, 'Barney', 'Stinson'], [3, 'Robin', 'Scherbatsky']]
    getFormattedCell={formatColumn}
    freezeColumn="ID"
/>

Note: formatColumn() is usually declared in a separate file, typically named columnFormatter.js

DynamicDataTable

DynamicDataTable is a wrapper around StaticDataTable

Instead of raw Data and Headers, it expects a URL pointing to JSON data which it retrieves and passes down to StaticDataTable. All other properties are the same as in StaticDataTable as they are passed down to it.

<DynamicDataTable
  DataURL="https://loris.ca/media/?format=json",
  getFormattedCell={formatColumn},
  freezeColumn="File Name"
/>

Form

Form.js contains a collection of components commonly used to built interactive forms.

FormElement

FormElement is a React wrapper around HTML <form> element, adding dynamic functionality, such as:

Props Type Description
name string Form name
[id] string Form unique id
[method] string GET or POST
[class] string CSS class applied on <form> element
[columns] number Number of columns in the form. Determines the layout of children elements.
[formElements] object React elements rendered inside the <form>
[onSubmit] function Callback function triggered on form submission
[onUserInput] function Callback function triggered on input change in one of the form elements

SelectElement

SelectElement is a react wrapper around HTML <select>, adding dynamic functionality, such as:

Props Type Description
name string Element name. Must be consistent with values used on the backend.
options object Options displayed in the <select> dropdown
[label] string User friendly text describing <select> purpose. Default: ""
[value] string or array Selected value(s). Default: undefined
[id] string Element unique id. Default: ""
[class] string CSS class applied on <form> element. Default: ""
[multiple] bool When set to true the element replicates native HTML5 behaviour allowing user to select multiple elements in the dropdown. Default: false
[disabled] bool When set to true HTML5 disabled is applied to the element. Default: false
[required] bool When set to true HTML5 required is applied to the element. Additionally, a red 'asterisk' is displayed along the label. Default: false
[emptyOption] bool By default adds an empty option to every <select> dropdown. Default: true
[hasError] bool When set to true adds displays errorMessage and applies error styles to the element. Default: false
[errorMessage] string The error message, displayed only if hasError is set to true. Default: "The field is required!"
[onUserInput] function Callback function triggered on input change

TextboxElement

TextboxElement is a react wrapper around HTML <input type="text">, adding dynamic functionality, such as: ..., ...

Props Type Description
name string Element name. Must be consistent with values used on the backend.
[label] string User friendly text describing <input typ="text" /> purpose. Default: ""
[value] string Selected value(s). Default: undefined
[id] string Element unique id. Default: ""
[disabled] bool When set to true HTML5 disabled is applied to the element. Default: false
[required] bool When set to true HTML5 required is applied to the element. Additionally, a red 'asterisk' is displayed along the label. Default: false
[onUserInput] function Callback function triggered on input change

TextareaElement

TextareaElement element is a react wrapper around HTML <textarea>, adding dynamic functionality, such as: ..., ...

Props Type Description
name string Element name. Must be consistent with values used on the backend.
[label] string User friendly text describing <textarea> purpose. Default: ""
[value] string Selected value(s). Default: undefined
[id] string Element unique id. Default: ""
[disabled] bool When set to true HTML5 disabled is applied to the element. Default: false
[required] bool When set to true HTML5 required is applied to the element. Additionally, a red 'asterisk' is displayed along the label. Default: false
[onUserInput] function Callback function triggered on input change

DateElement

DateElement is a react wrapper around HTML <input type="date">, adding dynamic functionality, such as: ..., ...

Props Type Description
name string Element name. Must be consistent with values used on the backend.
[label] string User friendly text describing purpose of the element. Default: ""
[value] string Selected value(s). Default: undefined
[id] string Element unique id. Default: ""
[disabled] bool When set to true HTML5 disabled is applied to the element. Default: false
[required] bool When set to true HTML5 required is applied to the element. Additionally, a red 'asterisk' is displayed along the label. Default: false
[onUserInput] function Callback function triggered on input change

NumericElement

NumericElement is a react wrapper around HTML <input type="number">, adding dynamic functionality, such as: ..., ...

Props Type Description
name string Element name. Must be consistent with values used on the backend.
min number
max number
[label] string User friendly text describing purpose of the element. Default: ""
[value] string Selected value(s). Default: undefined
[id] string Element unique id. Default: ""
[disabled] bool When set to true HTML5 disabled is applied to the element. Default: false
[required] bool When set to true HTML5 required is applied to the element. Additionally, a red 'asterisk' is displayed along the label. Default: false
[onUserInput] function Callback function triggered on input change

FileElement

FileElement renders custom HTML used to upload files

Props Type Description
name string Element name. Must be consistent with values used on the backend.
[label] string User friendly text describing purpose of the element. Default: ""
[value] string Selected value(s). Default: undefined
[id] string Element unique id. Default: ""
[disabled] bool When set to true HTML5 disabled is applied to the element. Default: false
[required] bool When set to true HTML5 required is applied to the element. Additionally, a red 'asterisk' is displayed along the label. Default: false
[hasError] bool When set to true adds displays errorMessage and applies error styles to the element. Default: false
[errorMessage] string The error message, displayed only if hasError is set to true. Default: "The field is required!"
[onUserInput] function Callback function triggered on input change

StaticElement

StaticElement is a react wrapper around HTML <label>...

Props Type Description
[label] string User friendly text describing purpose of the element. Default: ""
[text] string or object Selected value(s). Default: undefined

ButtonElement

ButtonElement is a react wrapper around HTML <button>, adding dynamic functionality, such as: ..., ...

Props Type Description
[label] string User friendly text describing purpose of the element. Default: ""
[type] string HTML <button/> type. Default: submit
[onUserInput] function Callback function triggered on input change

LorisElement

Loris element is a generic component that receives a type and renders an appropriate component from the list above.

FilterForm

Wrapper around Form wrapper

Tabs

Wrapper around bootstrap tabs

Panel

Wrapper around bootstrap panel

Breadcrumbs

Wrapper around bootstrap breadcrumbs used for Loris navigation

PaginationLinks

Component used by StaticDataTable to add pagination to table results

Markdown

Used to render markdown text

MultiSelectDropdown

Used by DQT for ...some reason

Home | About | Community | Setup | Technical

Clone this wiki locally