@kleeen/components-react v1.0.1-rc.4

Components

Button component

Description

KUI framework buttons are native <button> elements enhanced with Kleeen Design styling.

API reference for React

import { KuiButton } from '@kleeen/components-react';

Properties

Example

  <KuiButton kuiText="Save!" kuiName="button"/>

Checkbox component

Description

KUI framework checkbox are native <checkbox> elements enhanced with Kleeen Design styling.

API reference for React

import { KuiCheckbox } from '@kleeen/components-react';

Properties

Example

  <KuiCheckbox kuiText="Check me out!" />

Icon component

Description

KUI framework icon display.

API reference for React

import { KuiIcon } from '@kleeen/components-react';

Properties

Example

  <KuiIcon kuiIcon="arrow"/>

Input component

Description

KUI framework input is a native <input> element, enhanced with Kleeen Design styling.

API reference for React

import { KuiInput } from '@kleeen/components-react';

Properties

Example

  <KuiInput kuiPlaceholder="Name" kuiName="name"  />

Radio Button component

Description

KUI framework radio buttons simulating native radio button behavior.

API reference for React

import { KuiRadioButton } from '@kleeen/components-react';

Properties

Example

  <div className="radio-group">
    <KuiRadioButton kuiText="Option 1" kuiName="option" kuiValue={options.option1}/>
    <KuiRadioButton kuiText="Option 2" kuiName="option" kuiValue={options.option2}/>
    <KuiRadioButton kuiText="Option 3" kuiName="option" kuiValue={options.option3}/>
  </div>

Size Picker component

Description

KUI custom size picker with variable amount of options.

API reference for React

import { KuiSizePicker } from '@kleeen/components-react';

Properties

Example

 <KuiSizePicker kuiName="currentSize" kuiSelected={this.state.currentSize} />

Input Box component

Description

KUI framework input box is composed by <KuiInput> and <KuiButton> elements.

API reference for React

import { KuiInputBox } from '@kleeen/components-react';

Properties

Example

 <KuiInputBox kuiText="Send" kuiPlaceholder="Input box" kuiName={'inpt-box'}/>

Hover Intent component

Description

KUI framework hover intent is a HOC which adds mouse over listener to any component.

API reference for React

import { kuiHoverIntent } from '@kleeen/components-react';

Properties

Example

const NewInput = kuiHoverIntent(KuiInput);
return <NewInput kuiName="name" kuiValue={this.state.name} kuiPlaceholder="Test intent hover" hznHoverIntent={someFunction} delay={1000} />;

Modal component

Description

KUI framework modal is a popup window.

API reference for React

import { KuiModal } from '@kleeen/components-react';

Properties

Example

<KuiModal kuiTitle="Title Modal" kuiShowModal={this.state.showModal}>
  Content!
</KuiModal>

Menu component

Description

KUI framework menu element, enhanced with Josh's Design styling.

API reference for React

import { KuiMenu } from '@kleeen/components-react';

Properties

Example

const menuData = [{
  label: 'First action', action: this.sendRequest
}, {
  label: 'Some action', action: this.sendRequest
}, {
  label: 'Last action', action: this.sendRequest
}];
<KuiMenu kuiTitle="Settings" kuiIcon="arrow" kuiOptions={menuData} kuiOffset />

Theming

KuiMenu

KuiTable

KuiButton

KuiCheckbox

checkbox-primary

checkbox-secondary

KuiInput

input-primary

input-secondary

KuiModal

KuiRadioButton

KuiSizePicker

Table component

Description

KUI framework menu element, enhanced with Josh's Design styling.

API reference for React

import { KuiTable } from '@kleeen/components-react';

Properties

Example

import React, { useState } from "react";

const rows = [{
  col1: 'Value 1',
  col2: 'Value 2'
}, {
  col1: 'Value 11',
  col2: 'Value 22'
}];
const columns = [{
  id: 'col1',
  label: 'Col 1',
  order: 0
}, {
  id: 'col2',
  label: 'Col 2',
  order: 1
}]:
const [numberOfItemsSelected, setSelectedItems] = useState(0);
const [columnsState, setColumns] = useState(columns);

<KUITable
  onApiReady={(tableApi) => api = tableApi}
  columns={columnsState}
  rows={rows}
  quickFilterConfig={{ actions: [{ label: 'Sort ASC', action: (columnId) => { api.sortRow(columnId, 'asc') } }]}}
  onSelectedRowsChange={(oldSelectedItems, newSelectedItems) => setSelectedItems(newSelectedItems.length)}
  onColumnsChange={(oldColumns, newColumns) => setColumns(newColumns)}
  cells={{
    col1: (value, row) => <h1>{value}</h1>,
    col2: (value) => <span>{value}</span>,
  }}
/>

Actions

CLEAR_ROW_FILTER

Resets the rows to the initial state.

Value: clearRowFilter

Params: columnId

Example

const columnId = 0;
api.clearRowFilter(columnId);

SET_COLUMN_FILTER

Filters the columns according to the text typed.

Value: setColumnFilter

Params: columnId, typedText

Example

const columnId = 0;
const typedText = 'text';
api.setColumnFilter(
  columnId,
  typedText && typedText.toLowerCase()
);

SORT_ROW

Sorts rows in ascending or descending order.

Value: sortRow

Params: columnId, order

Example

const id = 0;
const order = 'asc' || 'desc';
api.sortRow(id, order);

RESIZE_COLUMN

Changes the columun width.

Value: resizeColumn

Params: columnId, newWidth

Example

const columnId = 0;
const newWidth = 230;
api.resizeColumn(columnId, newWidth);

ROW_TOGGLE

Selects/unselects a row.

Value: rowToggle

Params: rowId

Example

const rowId = 0;
api.rowToggle(rowId);

CLEAR_ALL

Unselects all the selected rows.

Value: clearAll

Params: none

Example

api.clearAll();

CLEAR_COLUMNS_SORT

Resets the columns sorting.

Value: clearColumnsSort

Params: none

Example

api.clearColumnsSort();

CREATE_TABLE

Creates a new table.

Value: createTable

Params: table

Example

const table = {};
api.createTable(table);

DELETE_TABLE

Deletes a table.

Value: deleteTable

Params: none

Example

api.deleteTable();

HIDE_SELECTED_ROWS

Hides the selected rows.

Value: hideSelectedRows

Params: none

Example

api.hideSelectedRows();

ORDER_COLUMNS

Sets the columns ordering.

Value: orderColumns

Params: columns

Example

const columns = [{
  id: 'col1',
  label: 'Col 1',
  order: 0
}, {
  id: 'col2',
  label: 'Col 2',
  order: 1
}]
api.orderColumns(columns);

SELECT_ALL

Selects all the rows.

Value: selectAll

Params: none

Example

api.selectAll();

SHOW_ONLY_SELECTED_ROWS

Shows only the selected rows.

Value: showOnlySelectedRows

Params: none

Example

api.showOnlySelectedRows();

SORT_COLUMN

Sorts a comlumn according to the sort param.

Value: sortColumn

Params: columnId, sort

Example

const columnId = 0;
const sort = 'asc' || 'desc';
api.sortColumn(columnId, sort);

TOGGLE_COLUMN_DISPLAY

Shows/hides a column.

Value: toggleColumnDisplay

Params: columnId

Example

const columnId = 0;
api.toggleColumnDisplay(columnId);

TOGGLE_ROW

Shows/hides the row.

Value: toggleRow

Params: row

Example

const row = {
  col1: 'Value 1',
  col2: 'Value 2'
};
api.toggleRow(row);

UPDATE_TABLE

Updates the table.

Value: updateTable

Params: table

Example

const table = {};
api.updateTable(table);

RESET_ROWS_VISIBILITY

Resets the rows visibility to the initial state.

Value: resetRowsVisibility

Params: none

Example

api.resetRowsVisibility();

Select component

Description

KUI framework Select

API reference for React

import { KuiSelect } from '@kleeen/components-react';

Properties

Example

selectOptions = [{
   label: 'Option 1',
   icon: 'arrow'
 },
 {
   label: 'Option 2',
   icon: 'arrow'
 },
 {
   label: 'Option 3',
   icon: 'arrow'
 }, {
   label: 'Option 4',
 }];

 <KuiSelect kuiSelected={this.state.optionSelect}
           kuiOptions={this.selectOptions}
           kuiSelect={(option) => this.setState({optionSelect: option}/>

Card component

Description

KUI framework card to display content.

API reference for React

import { KuiCard } from '@kleeen/components-react';

Properties

Example

<KuiCard kuiTitle="Card Example">
  Card Content!
</KuiCard>

Label component

Description

KUI framework labels are native <label> elements enhanced with Josh's Design styling.

API reference for React

import { KuiLabel } from '@kleeen/components-react';

Properties

Example

  <KuiLabel kuiText="some text"></KuiLabel>