| 1 | import * as React from 'react';
|
| 2 | import type { IComboBox, IComboBoxProps } from '../../ComboBox';
|
| 3 | /**
|
| 4 | * Range of start and end hours to be shown in the TimePicker.
|
| 5 | */
|
| 6 | export interface ITimeRange {
|
| 7 | /** Start hour (inclusive) for the time range, 0-23 */
|
| 8 | start: number;
|
| 9 | /** End hour (exclusive) for the time range, 0-23 */
|
| 10 | end: number;
|
| 11 | }
|
| 12 | /**
|
| 13 | * Localized strings to use in the TimePicker
|
| 14 | */
|
| 15 | export interface ITimePickerStrings {
|
| 16 | /** Error message to render below the field if input parsing fails. */
|
| 17 | invalidInputErrorMessage: string;
|
| 18 | }
|
| 19 | export interface ITimePickerProps extends Omit<IComboBoxProps, 'options' | 'selectedKey' | 'defaultSelectedKey' | 'multiSelect' | 'text' | 'defaultValue' | 'onChange'> {
|
| 20 | /**
|
| 21 | * Label of the component
|
| 22 | */
|
| 23 | label?: string;
|
| 24 | /**
|
| 25 | * Time increments, in minutes, of the options in the dropdown
|
| 26 | */
|
| 27 | increments?: number;
|
| 28 | /**
|
| 29 | * If true, show seconds in the dropdown options and consider seconds for
|
| 30 | * default validation purposes.
|
| 31 | */
|
| 32 | showSeconds?: boolean;
|
| 33 | /**
|
| 34 | * If true, use 12-hour time format. Otherwise, use 24-hour format.
|
| 35 | */
|
| 36 | useHour12?: boolean;
|
| 37 | /**
|
| 38 | * If true, the TimePicker allows freeform user input, rather than restricting
|
| 39 | * to the default increments.
|
| 40 | *
|
| 41 | * The input will still be restricted to valid time values.
|
| 42 | */
|
| 43 | allowFreeform?: boolean;
|
| 44 | /**
|
| 45 | * Custom time range to for time options
|
| 46 | */
|
| 47 | timeRange?: ITimeRange;
|
| 48 | /**
|
| 49 | * Localized strings to use in the TimePicker
|
| 50 | */
|
| 51 | strings?: ITimePickerStrings;
|
| 52 | /**
|
| 53 | * Default value of the TimePicker, if any
|
| 54 | */
|
| 55 | defaultValue?: Date;
|
| 56 | /**
|
| 57 | * Callback issued when the time is changed
|
| 58 | */
|
| 59 | onChange?: (event: React.FormEvent<IComboBox>, time: Date) => void;
|
| 60 | /**
|
| 61 | * Callback to localize the date strings displayed for dropdown options
|
| 62 | */
|
| 63 | onFormatDate?: (date: Date) => string;
|
| 64 | /**
|
| 65 | * Callback to use custom user-input validation
|
| 66 | */
|
| 67 | onValidateUserInput?: (userInput: string) => string;
|
| 68 | }
|