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

     1  import * as React from 'react';
     2  import cx from 'classnames';
     3  
     4  import style from './TextInput.module.scss';
     5  
     6  type NativeInputProps = Omit<
     7      React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
     8      // Omit the props that we explicitly want to overwrite
     9      'size'
    10  >;
    11  interface Props extends NativeInputProps {
    12      // className is applied to the <input>, not the parent container.
    13      className?: string;
    14      size?: string;
    15  }
    16  
    17  export const NumberInput = ({ className, size, ...props }: Props) => {
    18      const inputClass = cx(style.input, className, {
    19          [style.large]: size === 'large',
    20      });
    21      // Order of elements matters: the <input> comes before the icons so that
    22      // we can use CSS adjacency selectors like `input:focus ~ .icon`.
    23      return (
    24          <div className={`${className} ${style.inputContainer}`}>
    25              <input type="number" className={`form-control bg-clip-padding ${inputClass} !pr-0`} {...props} />
    26          </div>
    27      );
    28  };