Line data    Source code

       1              : import * as React from 'react';
       2              : import * as styles from './text_input.module.css';
       3              : 
       4              : import { classNames } from '../../utils/classnames.js';
       5              : 
       6            1 : export enum TextInputValidationStatus {
       7            1 :     Success = 1,
       8            1 :     Warning = 2,
       9            1 :     Error = 3,
      10            1 : }
      11              : 
      12              : interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'autoComplete'> {
      13              :     className?: string;
      14              :     leadingVisual?: React.ElementType;
      15              :     trailingVisual?: React.ElementType;
      16              :     trailingAction?: React.ReactElement<React.HTMLProps<HTMLButtonElement>>;
      17              :     block?: boolean;
      18              :     validationStatus?: TextInputValidationStatus;
      19              :     autoComplete?: boolean | string;
      20              : }
      21              : 
      22            1 : export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>((props, ref): React.ReactElement => {
      23            1 :     const {
      24            1 :         autoComplete,
      25            1 :         block,
      26            1 :         className,
      27            1 :         disabled,
      28            1 :         leadingVisual: LeadingVisual,
      29            1 :         trailingAction,
      30            1 :         trailingVisual: TrailingVisual,
      31            1 :         validationStatus,
      32            1 :         ...inputProps
      33            1 :     } = props;
      34            1 :     return (
      35            1 :         <span className={classNames(styles.root, className, {
      36            1 :             [styles.root_disabled]: disabled,
      37            1 :             [styles.root_block]: block,
      38            1 :             [styles.root_validation_success]: validationStatus == TextInputValidationStatus.Success,
      39            1 :             [styles.root_validation_warning]: validationStatus == TextInputValidationStatus.Warning,
      40            1 :             [styles.root_validation_error]: validationStatus == TextInputValidationStatus.Error,
      41            1 :         })}>
      42            1 :             {LeadingVisual && (
      43            1 :                 <span className={styles.leading_visual_container}>
      44            1 :                     <LeadingVisual />
      45            1 :                 </span>
      46              :             )}
      47            1 :             <input
      48            1 :                 {...inputProps}
      49            1 :                 ref={ref}
      50            1 :                 className={styles.input_container}
      51            1 :                 disabled={disabled}
      52            1 :                 autoComplete={typeof autoComplete === 'string' ? autoComplete : autoComplete ? 'on' : 'off'}
      53            1 :                 autoCorrect="off"
      54            1 :                 autoCapitalize="off"
      55            1 :             />
      56            1 :             {TrailingVisual && (
      57            1 :                 <span className={styles.trailing_visual_container}>
      58            1 :                     <TrailingVisual />
      59            1 :                 </span>
      60              :             )}
      61            1 :             {trailingAction && (
      62            1 :                 <span className={styles.trailing_action_container}>
      63            1 :                     {trailingAction}
      64            1 :                 </span>
      65              :             )}
      66            1 :         </span>
      67              :     );
      68            1 : });