github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/ui/Input.tsx (about)

     1  import React, { Ref, ChangeEvent } from 'react';
     2  import { DebounceInput } from 'react-debounce-input';
     3  import styles from './Input.module.scss';
     4  
     5  interface InputProps {
     6    testId?: string;
     7    className?: string;
     8    type: 'search' | 'text' | 'password' | 'email' | 'number';
     9    name: string;
    10    placeholder?: string;
    11    minLength?: number;
    12    debounceTimeout?: number;
    13    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
    14    value: string | number;
    15    htmlId?: string;
    16  }
    17  
    18  /**
    19   * @deprecated use TextField instead
    20   */
    21  const Input = React.forwardRef(
    22    (
    23      {
    24        testId,
    25        className,
    26        type,
    27        name,
    28        placeholder,
    29        minLength = 0,
    30        debounceTimeout = 100,
    31        onChange,
    32        value,
    33        htmlId,
    34      }: InputProps,
    35      ref?: Ref<HTMLInputElement>
    36    ) => {
    37      return (
    38        <DebounceInput
    39          inputRef={ref}
    40          data-testid={testId}
    41          className={`${styles.input} ${className || ''}`}
    42          type={type}
    43          name={name}
    44          placeholder={placeholder}
    45          minLength={minLength}
    46          debounceTimeout={debounceTimeout}
    47          onChange={onChange}
    48          value={value}
    49          id={htmlId}
    50        />
    51      );
    52    }
    53  );
    54  
    55  export default Input;