@dnanpm/styleguide
Version:
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
83 lines (82 loc) • 2.08 kB
TypeScript
import React from 'react';
interface Props {
/**
* Unique ID for the input element
*/
id: string;
/**
* On value change callback
*/
onChange: (val: number) => void;
/**
* Name of the input element
*/
name?: string;
/**
* Default value of input element
*
* @default 1
*/
value?: number;
/**
* Allows to set step value for increase or decrease
*
* @default 1
*/
step?: number;
/**
* Allows to set minimum value
*
* @default 1
*/
min?: number;
/**
* Allows to set maximum value
*/
max?: number;
/**
* Allows to disable the component functionality
*
* @default false
*/
disabled?: boolean;
/**
* Allows to update input element's value directly
*
* @default true
*/
readonly?: boolean;
/**
* Allows the `onChange` function to be called even after `min` property value is reached.
* When defined and `min` property value is reached, the `Minus` icon changes to `Trash` icon
*/
removable?: boolean;
/**
* Allows to pass testid string for testing purposes
*/
'data-testid'?: string;
/**
* Allows to pass a custom className
*/
className?: string;
/**
* Accessible label for the increase button
*/
increaseButtonAriaLabel?: string;
/**
* Accessible label for the decrease button
*/
decreaseButtonAriaLabel?: string;
/**
* Accessible label for the remove button (when removable is true and min is reached)
*/
removeButtonAriaLabel?: string;
/**
* Accessible label for the input field
*/
inputAriaLabel?: string;
}
/** @visibleName Amount Selector */
declare const AmountSelector: ({ onChange, value, step, min, max, disabled, readonly, "data-testid": dataTestId, increaseButtonAriaLabel, decreaseButtonAriaLabel, removeButtonAriaLabel, inputAriaLabel, ...props }: Props) => React.JSX.Element;
/** @component */
export default AmountSelector;