Skip to content

Latest commit

 

History

History
231 lines (150 loc) · 5.04 KB

select-button.md

File metadata and controls

231 lines (150 loc) · 5.04 KB

SelectButton

Source

A choose button that opens a selection dialog when clicked.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { SelectButton } from 'chayns-components';

// ...

<SelectButton {...} />

Props

The SelectButton-component takes the following props:

Name Type Default Required
onSelect function
title string ''
description string ''
disabled boolean false
label string 'Select'
list Array<object> ✓
listKey string 'name'
listValue string 'value'
selectedFlag string 'isSelected'
multiSelect boolean false
quickFind boolean false
selectAllButton string
className string
style { [key: string]: number | string }
showSelection boolean | number true
showListSelection boolean true
stopPropagation boolean false

onSelect

onSelect?: function

A callback that is invoked when the selection has changed.

title

title?: string

A string that will be shown as a title in the selection dialog.

description

description?: string

A string that will be shown as a description in the selection dialog.

disabled

disabled?: boolean

Disables any user interaction and renders the button in a disabled style.

label

label?: string

The content of the button.

list

list: Array<object>;

An array of items to select from. Items are provided in an object shape.

listKey

listKey?: string

The property name of the list item objects that will uniquely identify each one.

listValue

listValue?: string

The property name of the list item objects that will be shown as its name in the selection dialog.

selectedFlag

selectedFlag?: string

The property name of the list item objects that mark an item as selected.

multiSelect

multiSelect?: boolean

Wether multiple options can be selected.

quickFind

quickFind?: boolean

Wether a search field should be shown in the selection dialog.

selectAllButton

selectAllButton?: string

Adds a checkbox with the given text of this property which allows you to enable and disable all elements of the select list at the same time. Based on the list items isSelected state the checkbox is enabled or disabled. If all elements of the list are selected, the checkbox will be checked.

className

className?: string

A classname string that will be applied to the button.

style

style?: { [key: string]: number | string }

A React style object that will be applied ot the button

showSelection

showSelection?: boolean | number

Wether the current selection should be shown in the button. Use a number to specify the maximum amount of items selected.

showListSelection

showListSelection?: boolean

Wether the current selection should be shown in the dialog list.

stopPropagation

stopPropagation?: boolean

Wether to stop propagation of click events to parent elements.