carbon-react
Version:
A library of reusable React components for easily building user interfaces.
104 lines (103 loc) • 4.54 kB
TypeScript
import React from "react";
import { MarginProps } from "styled-system";
import { DateInputProps } from "../date";
import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
import { StyledDateRangeProps } from "./date-range.style";
interface DateInputValue {
formattedValue: string;
rawValue: string | null;
}
export interface DateRangeChangeEvent {
target: {
name?: string;
id?: string;
value: [DateInputValue, DateInputValue];
};
}
export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagProps {
/** Props for the child end Date component */
endDateProps?: Omit<Partial<DateInputProps>, "required">;
/** Optional label for endDate field */
endLabel?: string;
/**
* Indicate that error has occurred on end date.
* Pass string to display icon, tooltip and red border.
* Pass true boolean to only display red border.
*/
endError?: boolean | string;
/**
* [Legacy] Indicate additional information for end date.
* Pass string to display icon, tooltip and blue border.
* Pass true boolean to only display blue border.
*/
endInfo?: boolean | string;
/**
* Indicate that warning has occurred on end date.
* Pass string to display icon, tooltip and orange border.
* Pass true boolean to only display orange border.
*/
endWarning?: boolean | string;
/**
* A React ref to pass to the second of the two Date Input fields
*/
endRef?: React.ForwardedRef<HTMLInputElement>;
/** An optional string prop to provide an id to the component */
id?: string;
/** An optional string prop to provide a name to the component */
name?: string;
/** Specify a callback triggered on change */
onChange: (ev: DateRangeChangeEvent) => void;
/** Specify a callback triggered on blur */
onBlur?: (ev: DateRangeChangeEvent) => void;
/** Props for the child start Date component */
startDateProps?: Omit<Partial<DateInputProps>, "required">;
/** Optional label for startDate field */
startLabel?: string;
/**
* Indicate that error has occurred on start date.
* Pass string to display icon, tooltip and red border.
* Pass true boolean to only display red border.
*/
startError?: boolean | string;
/**
* Indicate that warning has occurred on start date.
* Pass string to display icon, tooltip and orange border.
* Pass true boolean to only display orange border.
*/
startWarning?: boolean | string;
/**
* [Legacy] Indicate additional information for start date.
* Pass string to display icon, tooltip and blue border.
* Pass true boolean to only display blue border.
*/
startInfo?: boolean | string;
/**
* A React ref to pass to the first of the two Date Input fields
*/
startRef?: React.ForwardedRef<HTMLInputElement>;
/** An array containing the value of startDate and endDate */
value: string[];
/** [Legacy] When true, validation icons will be placed on labels instead of being placed on the inputs */
validationOnLabel?: boolean;
/** [Legacy] Overrides the default tooltip position */
tooltipPosition?: "top" | "bottom" | "left" | "right";
/** Flag to configure component as mandatory. */
required?: boolean;
/** Date format string to be applied to the date inputs */
dateFormatOverride?: string;
/** Prop to specify the aria-label attribute of the start date picker */
datePickerStartAriaLabel?: string;
/** Prop to specify the aria-labelledby attribute of the start date picker */
datePickerStartAriaLabelledBy?: string;
/** Prop to specify the aria-label attribute of the end date picker */
datePickerEndAriaLabel?: string;
/** Prop to specify the aria-labelledby attribute of the end date picker */
datePickerEndAriaLabelledBy?: string;
/** Render the ValidationMessage above the Date inputs when validationRedesignOptIn flag is set */
validationMessagePositionTop?: boolean;
}
export declare const DateRange: {
({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, dateFormatOverride: dateFormatOverrideProp, datePickerStartAriaLabel, datePickerStartAriaLabelledBy, datePickerEndAriaLabel, datePickerEndAriaLabelledBy, validationMessagePositionTop, ...rest }: DateRangeProps): React.JSX.Element;
displayName: string;
};
export default DateRange;