apphouse/dist/components/input/input.interface.ts

Component library for React that uses observable state management and theme-able components.

import { InputHTMLAttributes, ReactNode } from 'react';
import { ApphouseComponent } from '../component.interfaces';
import { InputComponentStyles } from './input.styles.interface';
import { Modify } from '../../types/type.utils';
import { InputStyles } from '../../styles/defaults/themes.interface';

type HtmlInputProps = Modify<
  InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
  { onChange: (value: string) => void; children?: React.ReactNode }
>;

/**
 * Interface for props to be passed to the input component
 */
export interface InputProps
  extends ApphouseComponent<InputComponentStyles>,
    Partial<HtmlInputProps> {
  /**
   * Label for the input.
   */
  label?: string;
  /**
   * unique id for the input
   */
  id: string;
  /**
   * if true, the input will be a textarea
   */
  multiline?: boolean;
  /**
   * Styles to be applied to the input element
   * @default 'default'
   */
  variant?: keyof InputStyles;
  /**
   * A description for the input field, if set it will be displayed below the input
   * label
   * @optional
   */
  description?: ReactNode;
  /**
   * If true, the input will resize the width according to the content
   * @default false
   */
  resizableWidth?: boolean;
  /**
   * If true, the input will resize the height according to the content
   * @default false
   */
  resizableHeight?: boolean;
  /**
   * If true, the input will be switched to password type
   * @default false
   */
  password?: boolean;
  /**
   * If true, it will fill the width of the parent container
   * @default false
   */
  fullWidth?: boolean;
  /**
   * If provided, it will be displayed below the input as an error message.
   */
  error?: string;
}