vitess.io/vitess@v0.16.2/web/vtadmin/src/components/TextInput.tsx (about)

     1  import * as React from 'react';
     2  import cx from 'classnames';
     3  
     4  import { Icon, Icons } from './Icon';
     5  
     6  import style from './TextInput.module.scss';
     7  
     8  type NativeInputProps = Omit<
     9      React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
    10      // Omit the props that we explicitly want to overwrite
    11      'size'
    12  >;
    13  interface Props extends NativeInputProps {
    14      // className is applied to the <input>, not the parent container.
    15      className?: string;
    16      iconLeft?: Icons;
    17      iconRight?: Icons;
    18      size?: 'large';
    19  }
    20  
    21  export const TextInput = ({ className, iconLeft, iconRight, size, ...props }: Props) => {
    22      const inputClass = cx(style.input, className, {
    23          [style.large]: size === 'large',
    24          [style.withIconLeft]: !!iconLeft,
    25          [style.withIconRight]: !!iconRight,
    26      });
    27  
    28      // Order of elements matters: the <input> comes before the icons so that
    29      // we can use CSS adjacency selectors like `input:focus ~ .icon`.
    30      return (
    31          <div className={style.inputContainer}>
    32              <input {...props} className={inputClass} type="text" />
    33              {iconLeft && <Icon className={style.iconLeft} icon={iconLeft} />}
    34              {iconRight && <Icon className={style.iconRight} icon={iconRight} />}
    35          </div>
    36      );
    37  };