carbon-react
Version:
A library of reusable React components for easily building user interfaces.
97 lines (96 loc) • 3.85 kB
TypeScript
import React from "react";
import { MarginProps } from "styled-system";
import { TagProps } from "../../__internal__/utils/helpers/tags";
import { ValidationProps } from "../../__internal__/validations";
export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["yyyy", "mm", "dd"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
export interface NumeralDateValue {
dd?: string;
mm?: string;
yyyy?: string;
}
export interface NumeralDateEvent {
target: {
name?: string;
id: string;
value: NumeralDateValue;
};
}
export interface DateInputIds {
day?: string;
month?: string;
year?: string;
}
export interface NumeralDateProps extends ValidationProps, MarginProps, TagProps {
/** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
adaptiveLabelBreakpoint?: number;
/** If true, the component will be disabled */
disabled?: boolean;
/** If true, the component will be read-only */
readOnly?: boolean;
dateFormat?: ValidDateFormat;
/** Value */
value: NumeralDateValue;
/** When true, enables the internal errors to be displayed */
enableInternalError?: boolean;
/** When true, enables the internal warnings to be displayed */
enableInternalWarning?: boolean;
/** [Legacy] Help content to be displayed under an input */
fieldHelp?: React.ReactNode;
/** `id` for events */
id?: string;
/** `name` for events */
name?: string;
/** Label */
label?: string;
/** Label alignment */
labelAlign?: "left" | "right";
/** Field labels alignment */
fieldLabelsAlign?: "left" | "right";
/**
* Text applied to label help tooltip, will be rendered as
* hint text when `validationRedesignOptIn` is true.
*/
labelHelp?: React.ReactNode;
/** [Legacy] When true, label is placed in line with an input */
labelInline?: boolean;
/** [Legacy] Label width */
labelWidth?: number;
/** [Legacy] Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
labelSpacing?: 1 | 2;
/** Blur event handler */
onBlur?: (ev: NumeralDateEvent) => void;
/** Change event handler */
onChange: (ev: NumeralDateEvent) => void;
/** Flag to configure component as mandatory */
required?: boolean;
/** Size of an input */
size?: "small" | "medium" | "large";
/** [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";
/** [Legacy] Aria label for rendered help component */
helpAriaLabel?: string;
/**
* A React ref to pass to the input corresponding to the day
*/
dayRef?: React.ForwardedRef<HTMLInputElement>;
/**
* A React ref to pass to the input corresponding to the month
*/
monthRef?: React.ForwardedRef<HTMLInputElement>;
/**
* A React ref to pass to the input corresponding to the year
*/
yearRef?: React.ForwardedRef<HTMLInputElement>;
/** Render the ValidationMessage above the NumeralDate inputs when validationRedesignOptIn flag is set */
validationMessagePositionTop?: boolean;
/** Allow consumers to set IDs for each of the field inputs */
inputIds?: DateInputIds;
}
export type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
export type NumeralDateHandle = {
focus: () => void;
} | null;
export declare const NumeralDate: React.ForwardRefExoticComponent<NumeralDateProps & React.RefAttributes<NumeralDateHandle>>;
export default NumeralDate;