@commercetools-uikit/date-time-field/dist/declarations/src/date-time-field.d.ts

A controlled date time input component for single date, with validation states and a label.

import { Component, type FocusEventHandler, type ReactNode, type MouseEvent, type KeyboardEvent, type ReactElement } from 'react';
import { type TIconProps } from '@commercetools-uikit/field-label';
type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
type TFieldWarnings = Record<string, boolean>;
type TFieldErrors = Record<string, boolean>;
type TCustomFormErrors<Values> = {
    [K in keyof Values]?: TFieldErrors;
};
type TCustomEvent = {
    target: {
        id?: string;
        name?: string;
        value?: string;
    };
};
export type TDateTimeFieldProps = {
    /**
     * Used as HTML id property. An id is auto-generated when it is not specified.
     */
    id?: string;
    /**
     * Horizontal size limit of the input fields.
     */
    horizontalConstraint?: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
    /**
     * A map of errors. Error messages for known errors are rendered automatically.
     * <br />
     * Unknown errors will be forwarded to `renderError`
     */
    errors?: TFieldErrors;
    /**
     * Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
     */
    renderError?: TErrorRenderer;
    /**
     * A map of warnings. Warning messages for known warnings are rendered automatically.
     * <br/>
     * Unknown warnings will be forwarded to renderWarning.
     */
    warnings?: TFieldWarnings;
    /**
     * Called with custom warnings, as renderWarning(key, warning). This function can return a message which will be wrapped in a WarningMessage.
     * <br />
     * It can also return null to show no warning.
     */
    renderWarning?: (key: string, warning?: boolean) => ReactNode;
    /**
     * Indicates if the value is required. Shows an the "required asterisk" if so.
     */
    isRequired?: boolean;
    /**
     * Indicates whether the field was touched. Errors will only be shown when the field was touched.
     */
    touched?: boolean;
    /**
     * Used as HTML name of the input component.
     */
    name?: string;
    /**
     * Value of the input
     */
    value: string;
    /**
     * Called with an event holding the new value.
     * <br/>
     * Required when input is not read only. Parent should pass it back as `value`-
     */
    onChange?: (event: TCustomEvent) => void;
    /**
     * Called when input is blurred
     */
    onBlur?: (event: TCustomEvent) => void;
    /**
     * Called when input is focused
     */
    onFocus?: FocusEventHandler;
    /**
     * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
     */
    isDisabled?: boolean;
    /**
     * Indicates that the field is displaying read-only content
     */
    isReadOnly?: boolean;
    /**
     * Placeholder text for the input
     */
    placeholder?: string;
    /**
     * Use this property to reduce the paddings of the component for a ui compact variant
     */
    isCondensed?: boolean;
    /**
     * Specifies the time zone in which the calendar and selected values are shown. It also influences how entered dates and times are parsed.
     * <br />
     * See the `DateTimeInput` docs for more information.
     */
    timeZone: string;
    /**
     * Title of the label
     */
    title: ReactNode;
    /**
     * Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
     */
    hint?: ReactNode;
    /**
     * Provides a description for the title.
     */
    description?: ReactNode;
    /**
     * Function called when info button is pressed.
     * <br />
     * Info button will only be visible when this prop is passed.
     */
    onInfoButtonClick?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
    /**
     * Icon to be displayed beside the hint text.
     * <br />
     * Will only get rendered when `hint` is passed as well.
     */
    hintIcon?: ReactElement<TIconProps>;
    /**
     * Badge to be displayed beside the label.
     * <br />
     * Might be used to display additional information about the content of the field (E.g verified email)
     */
    badge?: ReactNode;
    /**
     * The time that will be used by default when a user selects a calendar day.
     * It must follow the “HH:mm” pattern (eg: 04:30, 13:25, 23:59)
     */
    defaultDaySelectionTime?: string;
};
type TDateTimeFieldState = Pick<TDateTimeFieldProps, 'id'>;
declare class DateTimeField extends Component<TDateTimeFieldProps, TDateTimeFieldState> {
    static displayName: string;
    static defaultProps: Pick<TDateTimeFieldProps, 'horizontalConstraint'>;
    state: {
        id: string | undefined;
    };
    static getDerivedStateFromProps: (props: TDateTimeFieldProps, state: TDateTimeFieldState) => {
        id: string;
    };
    /**
     * Use this function to convert the Formik `errors` object type to
     * our custom field errors type.
     * This is primarly useful when using TypeScript.
     */
    static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
    render(): import("@emotion/react/jsx-runtime").JSX.Element;
}
export default DateTimeField;