API
AlertField

AlertField

ℹ️

The following type definitons are updated on a best effort basis and may not be always up to date. Checkout the type definition (opens in a new tab) for more accurate information.

type CommonInput = {
  /**
   * The label to display for the input.
   */
  label: string;
  /**
   * The helper text to display for the input.
   */
  helperText: string;
  /**
   * The placeholder text to display for the input.
   */
  placeholder: string;
  /**
   * The default value of the input.
   */
  defaultValue: string;
  /**
   * Whether or not the input is required.
   */
  required: boolean;
  /**
   * The icon to display for the input.
   */
  icon: string;
  /**
   * The validator function to use for the input. It should return true if the input is valid, and false otherwise.
   * @param value The value of the input.
   * @param allValues All input values in the alert.
   */
  validator: (value: string, allValues: string[]) => boolean;
  /**
   * The error text to display if the input is invalid.
   */
  errorText: string;
  /**
   * Whether or not the input is disabled.
   */
  disabled?: boolean;
};
 
type TextInput = CommonInput & {
  /**
   * The type of the input.
   */
  type: "text" | "number" | "password";
  /**
   * Whether or not the input should support multiline text.
   */
  multiline: boolean;
};
 
type CheckboxInput = CommonInput & {
  type: "checkbox";
};
 
type ButtonInput = CommonInput & {
  type: "button";
  /**
   * The action to perform when the button is clicked.
   *
   * if the action returns `string`, the alert will NOT be dismissed and the string will be displayed as an error.
   *
   * Return an empty string to keep the alert open without displaying an error.
   *
   * @param values All input values in the alert.
   */
  action: (values: string[]) => string | void | Promise<string | void>;
};
 
type SearchSelectInput = CommonInput & {
  type: "search-select";
  /**
   * key-value pairs of options to display in the select.
   */
  data: { key: string; value: string; label?: string }[];
  /**
   * Number of options to display in the (virtualized) list.
   */
  visibleOptions: number;
};
 
type SelectInput = Omit<SearchSelectInput, "type"> & {
  type: "select";
};
 
type RadioInput = Omit<SearchSelectInput, "type"> & {
  type: "radio";
};
 
type SearchRadioInput = Omit<SearchSelectInput, "type"> & {
  type: "search-radio";
};
 
type CustomInput = CommonInput & {
  type: "custom";
  /**
   * The render function to use for the input.
   * @param value The current value of the input.
   * @param setValue The function to use to set the value of the input.
   * @param allValues All input values in the alert.
   * @param tempValue The temporary internal value of the input.
   * @param setTempValue The function to use to set the temporary internal value of the input.
   */
  render: (
    value: string,
    setValue: (newVal: string) => void,
    allValues: string[],
    tempValue: string,
    setTempValue: (newVal: string) => void
  ) => JSX.Element;
};
 
type AlertField =
  | TextInput
  | CheckboxInput
  | ButtonInput
  | SearchSelectInput
  | SelectInput
  | RadioInput
  | SearchRadioInput
  | CustomInput;