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

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React from 'react';
     3  import cx from 'classnames';
     4  import ValidationError from '../ValidationError';
     5  import styles from './index.module.scss';
     6  
     7  interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
     8    /** whether to show a light/dark background */
     9    variant?: 'dark' | 'light';
    10    className?: string;
    11    label: string;
    12    errorMessage?: React.ComponentProps<typeof ValidationError>['message'];
    13  }
    14  
    15  function TextField(
    16    props: TextFieldProps,
    17    ref: React.ForwardedRef<HTMLInputElement>
    18  ) {
    19    const {
    20      className,
    21      label,
    22      errorMessage,
    23      variant = 'dark',
    24      ...inputProps
    25    } = props;
    26  
    27    return (
    28      <div className={cx(className, styles.wrapper)}>
    29        <label>
    30          {label}
    31          <input
    32            ref={ref}
    33            className={cx(
    34              styles.input,
    35              className,
    36              variant === 'light' && styles.light
    37            )}
    38            {...inputProps}
    39          />
    40        </label>
    41        <ValidationError message={errorMessage} />
    42      </div>
    43    );
    44  }
    45  
    46  export default React.forwardRef(TextField);