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

@wix/design-system

import * as React from 'react';
import { InputProps } from '../Input';
import { PopoverCommonProps } from '../common';
import { SupportedWixLocales } from '@wix/design-systems-locale-utils';

export type TimeInputProps = {
  /** 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 component is disabled */
  disabled?: InputProps['disabled'];
  /** Control the border style of input */
  border?: InputProps['border'];
  /** Defines a callback function which is called on every time value changes */
  onChange?({ date }: { date: Date | null }): void;
  /** Defines a callback function which is called on cases when invalid time is typed or confirmed with an action.
   * - return {{ validationType: 'formatError' | 'outOfBoundsError', value: string }}
   * - `validationType` - type 'formatError'is set when value is in the wrong time format
   *                    - type 'outOfBoundsError' is set when `excludePastTimes` or `filterTime` is used and value does not match the filters
   * - `value` - is set to current input value
   */
  onInvalid?(): void;
  /** Sets a placeholder message to display */
  placeholder?: InputProps['placeholder'];
  /** Pass a component you want to show as the prefix of the input, e.g., text, icon */
  prefix?: InputProps['prefix'];
  /** Specifies whether input is read only */
  readOnly?: InputProps['readOnly'];
  /** Controls the size of the input */
  size?: InputProps['size'];
  /** Specify the status of a field */
  status?: InputProps['status'];
  /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
  statusMessage?: InputProps['statusMessage'];
  /** Enables internal validation and defines a message to display when user types invalid time value */
  invalidMessage?: string;
  /** Specifies the interval between time values shown in dropdown
   * @default 15
   */
  step?: number;
  /** Pass a component you want to show as the suffix of the input, e.g., text, icon */
  suffix?: InputProps['suffix'];
  /** Sets locale and formats time according to it */
  locale?: SupportedWixLocales;
  /** Specifies what time formatting style to use when calling `format()` */
  timeStyle?: 'long' | 'short';
  /** Specifies the current value of the input */
  value?: Date | null;
  /** Controls the width of the component. `auto` will resize the input to match width of its contents, while `100%` will take up the full parent container width. */
  width?: React.CSSProperties['width'];
  /** Allows to pass all common popover props. */
  popoverProps?: PopoverCommonProps;
  /** Defines a standard input `onFocus` callback */
  onFocus?: InputProps['onFocus'];
  /** Defines a standard input `onBlur` callback */
  onBlur?: InputProps['onBlur'];
  /** Specifies whether input is auto selected on focus */
  autoSelect?: InputProps['autoSelect'];
  /** Specify whether past time slots should be shown or not */
  excludePastTimes?: boolean;
  /**
   * Specify selectable time slots:
   *  * `param` {Date} `value` - a time to check
   *  * `return` {boolean} - true if `value` should be shown in time slots dropdown, false otherwise
   */
  filterTime?: (time: Date) => boolean;
  disableKeyboardType?: boolean;
  /**
   * Disables the auto-suggest UX (closest-time pre-fill, suggestion autofill,
   * mid-typing format validation). The dropdown still works as a picker.
   * Use when integrating an external input mask. Format errors surface on blur.
   */
  disableAutoComplete?: boolean;
  /** Specifies whether status suffix is hidden. */
  hideStatusSuffix?: boolean;
  /**
   * Ref to the underlying `<input>` DOM element. Accepts callback and object refs.
   * Use for input masking libraries. Memoize callback refs to avoid reattaching.
   */
  inputRef?: React.Ref<HTMLInputElement>;
  /**
   * Render a custom component in place of the default `<input>`.
   * Must be a `React.forwardRef` component that forwards the ref to a real `<input>`.
   */
  customInput?: InputProps['customInput'];
};

export type TimeInputImperativeActions = {
  focus(): void;
  blur(): void;
  clear(): void;
};

declare const TimeInput: React.ForwardRefExoticComponent<
  TimeInputProps & React.RefAttributes<TimeInputImperativeActions>
>;

export default TimeInput;