Skip to content

Latest commit

 

History

History
362 lines (233 loc) · 6.87 KB

amount-control.md

File metadata and controls

362 lines (233 loc) · 6.87 KB
Raw

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.