amount-control.md

AmountControl

Source

The AmountControl is a three-segment control used to increase or decrease an incremental value.

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 { AmountControl } from 'chayns-components';

// ...

<AmountControl {...} />

Props

The AmountControl-component takes the following props:

Name	Type	Default	Required
buttonText	string
amount	number	0
onChange	function
onInput	function
onAdd	function
onRemove	function
disabled	boolean	false
disableInput	boolean
disableAdd	boolean	false
disableRemove	boolean	false
className	string	''
autoInput	boolean	false
buttonFormatHandler	function
showInput	boolean	false
showAddButton	boolean
icon	string | object
plusIcon	string | object	'fa fa-plus'
minusIcon	string | object	'fa fa-minus'
removeIcon	string | object
removeColor	string
addColor	string
iconColor	string
equalize	string
focusOnClick	boolean	true
contentWidth	number
min	number
max	number
stopPropagation	boolean	false
hasAlwaysControls	boolean	false

buttonText

buttonText?: string

This text will be shown in the button when the amount-prop is 0.

---

amount

amount?: number

This component works as a controlled input and this prop defines its current state.

---

onChange

onChange?: function

This callback will be called when the amount is changed by the user.

---

onInput

onInput?: function

Alias for onChange.

---

onAdd

onAdd?: function

Called when the user clicks the increment-button.

---

onRemove

onRemove?: function

Called when the user clicks the decrement-button.

---

disabled

disabled?: boolean

Disables any interaction and switches to a disabled style.

---

disableInput

disableInput?: boolean

Disables the input field and forces the user to use the buttons to control the value.

---

disableAdd

disableAdd?: boolean

Disables the increment-button and disables the ability to increment the value.

---

disableRemove

disableRemove?: boolean

Disables the decrement-button and disables the ability to decrement the value.

---

className

className?: string

A classname that is applied to the wrapper of the component.

---

autoInput

autoInput?: boolean

Shows an input field once the amount is greater than 10.

---

buttonFormatHandler

buttonFormatHandler?: function

A function that returns the content of the button.

---

showInput

showInput?: boolean

Whether to show the input.

---

showAddButton

showAddButton?: boolean

Whether the add button should be shown/rendered.

---

icon

icon?: string | object

Displays an icon on the left side of the button if the amount is 0. Supply a FontAwesome-string like "fa fa-plane".

---

plusIcon

plusIcon?: string | object

The icon shown on the increment-button.

---

minusIcon

minusIcon?: string | object

The icon shown on the decrement-button.

---

removeIcon

removeIcon?: string | object

The icon the reset the amount to 0.

---

removeColor

removeColor?: string

The color of the remove icon.

---

addColor

addColor?: string

The color of the icon in the increment-button.

---

iconColor

iconColor?: string

The color of the icon to the left of the button.

---

equalize

equalize?: string

Multiple AmountControl with the same equalize-prop will sync their width.

---

focusOnClick

focusOnClick?: boolean

Enables the input autofocus.

---

contentWidth

contentWidth?: number

The width of the AmountControl content.

---

min

min?: number

The minimum value of the AmountControl (the input field is not validated).

---

max

max?: number

The maximum value of the AmountControl (the input field is not validated).

---

stopPropagation

stopPropagation?: boolean

Stop propagation of click events to parent components.

---

hasAlwaysControls

hasAlwaysControls?: boolean

Always show the increment and decrement buttons.