@wix/design-system/dist/types/VariableInput/index.d.ts

@wix/design-system

import * as React from 'react';
import { StatusIndicatorState } from '../StatusIndicator';
import { TagProps } from '../Tag';

export interface VariableInputProps {
  /** Specifies a CSS class name to be appended to the component's root element.
   * @internal
   */
  className?: string;
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook?: string;
  /** Specifies whether input should be disabled or not */
  disabled?: boolean;
  /** Specifies whether input is read only */
  readOnly?: boolean;
  /** Defines an initial value to display
   * @default ''
   */
  initialValue?: string;
  /** Specifies whether component allow multiple lines or not. If false, text won't wrap and horizontal scroll will appear inside of a component.
   * @default true
   */
  multiline?: boolean;
  /** Defines a callback function that is called each time value is changed:
   * `onChange(value: String): void` */
  onChange?: (value: string) => void;
  /** Defines a callback function that is called on value submit, in other words after `insertVariable()` and `setValue()` and `insertText()`
   * `onSubmit(value: String): void` */
  onSubmit?: (value: string) => void;
  /** Defines a callback function that is called on focus out:
   * `onBlur(value: String): void` */
  onBlur?: (value: string) => void;
  /** Defines a callback function that is called on focus in:
   * `onFocus(value: String): void` */
  onFocus?: (value: string) => void;
  /** Specify the status of a field */
  status?: StatusIndicatorState;
  /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
  statusMessage?: React.ReactNode;
  /** Sets a placeholder message to display */
  placeholder?: string;
  /** Set the height of a component to fit the given number of rows
   * @default 1
   */
  rows?: number;
  /** Controls the size of the input and variable tags */
  size?: VariableInputSize;
  /** Defines the variable keys that component will parse and convert to <Tag/> components on blur and while using `insertVariable`.
   * For each key `variableParser` will be called and should return a proper text for that key or false in case the key is invalid.
   * `variableParser(key: String): String|boolean` */
  variableParser?: (value: string) => string | boolean;
  /** A function callback that is being called on each keyboard enter and expects a return of object with properties meant for Tag component.
   * It is designed to dynamically determine the styling or properties applied to variable tags within the input field.` */
  variableTagPropsParser?: (value: string) => Partial<TagProps>;
  /** Specifies whether spellcheck is enabled
   * @default false
   */
  spellCheck?: boolean;
  /** Defines a template for variable recognition. Typed text strings with matching prefix and suffix symbols will be converted to <Tag/> components. */
  variableTemplate?: {
    /** @default '{{' */
    prefix: string;
    /** @default '}}' */
    suffix: string;
  };
}

export default class VariableInput extends React.PureComponent<VariableInputProps> {
  setValue(key: string): void;
  insertVariable(key: string): void;
  insertText(text: string): void;
  focus(params?: { variableKey?: string }): void;
}

export type VariableInputSize = 'tiny' | 'small' | 'medium' | 'large';

export declare const SIZE: { [key in VariableInputSize]: VariableInputSize };