@dnanpm/styleguide
Version:
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
100 lines (99 loc) • 2.88 kB
TypeScript
import type { ChangeEvent, FocusEvent, KeyboardEvent } from 'react';
import React from 'react';
type InputStatus = 'none' | 'success' | 'error' | 'comment';
interface Props {
/**
* Unique ID for the input element
*/
id: string;
/**
* Name of the input element
*/
name: string;
/**
* Default value of input element
*/
value?: string | number;
/**
* Text to be passed down to `LabelText` component. Acts as the input element label
*/
label?: string;
/**
* Text of placeholder for the input value
*/
placeholder?: string;
/**
* Integer attribute indicating the sequence of keyboard navigation
*/
tabIndex?: number;
/**
* On input change callback
*/
onChange?: (val: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
/**
* On input blur callback
*/
onBlur?: (val: string, e: FocusEvent<HTMLTextAreaElement>) => void;
/**
* On input focus callback
*/
onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void;
/**
* On input key press callback
*/
onKeyPress?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
/**
* On input key down callback
*/
onKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
/**
* Allows to disable the component functionality
*
* @default false
*/
disabled?: boolean;
/**
* Allows to set input as mandatory
*
* @default false
*/
required?: boolean;
/**
* Text of the comment message when input is in comment state
*/
commentMessage?: string;
/**
* Allows to change the amount of rows for textarea element
*
* @default 3
*/
height?: number;
/**
* Depending on the passed status, the styling changes and additional elements are shown
*
* @param {InputStatus} none Default styling
* @param {InputStatus} success Displays `success` icon with `theme.color.notification.success` color in the input element
* @param {InputStatus} error Displays `error` icon with `theme.color.notification.error` color in the input element and error message underneath the input
* @param {InputStatus} comment Displays comment message underneath the input
*/
status?: InputStatus;
/**
* Text of the error message when textarea is in error state
*/
errorMessage?: string;
/**
* Allows to pass a custom className
*/
className?: string;
/**
* Allows to pass testid string for testing purposes
*/
'data-testid'?: string;
/**
* Accessible label text when no visible label is used
*/
ariaLabel?: string;
}
declare const Textarea: ({ height, "data-testid": dataTestId, ariaLabel, ...props }: Props) => React.JSX.Element;
/** @component */
export default Textarea;