@mantine/dates
Version:
Calendars, date and time pickers based on Mantine components
53 lines (52 loc) • 2.92 kB
TypeScript
import { BoxProps, ElementProps, Factory, MantineComponentStaticProperties, StylesApiProps } from '@mantine/core';
import { CalendarLevel, DatePickerType, DateStringValue, PickerBaseProps } from '../../types';
import { CalendarBaseProps } from '../Calendar';
import { DecadeLevelBaseSettings } from '../DecadeLevel';
import { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';
import { YearLevelBaseSettings } from '../YearLevel';
import { YearLevelGroupStylesNames } from '../YearLevelGroup';
export interface MonthPickerPreset<Type extends DatePickerType> {
value: Type extends 'range' ? [DateStringValue | null, DateStringValue | null] : Type extends 'multiple' ? DateStringValue[] : DateStringValue | null;
label: React.ReactNode;
}
export type MonthPickerCssVariables = {
monthPickerRoot: '--preset-font-size';
};
export type MonthPickerStylesNames = DecadeLevelGroupStylesNames | YearLevelGroupStylesNames | 'presetsList' | 'presetButton' | 'monthPickerRoot';
type MonthPickerLevel = Exclude<CalendarLevel, 'month'>;
export interface MonthPickerBaseProps<Type extends DatePickerType = 'default'> extends PickerBaseProps<Type>, DecadeLevelBaseSettings, YearLevelBaseSettings, Omit<CalendarBaseProps, 'onNextMonth' | 'onPreviousMonth' | 'hasNextLevel'> {
/** Max level that user can go up to @default 'decade' */
maxLevel?: CalendarLevel;
/** Initial displayed level (uncontrolled) */
defaultLevel?: CalendarLevel;
/** Current displayed level (controlled) */
level?: CalendarLevel;
/** Called when level changes */
onLevelChange?: (level: MonthPickerLevel) => void;
/** Predefined values to pick from */
presets?: MonthPickerPreset<Type>[];
/** If defined, called with preset value, suppresses `onChange` call */
__onPresetSelect?: (preset: DateStringValue | null | [DateStringValue | null, DateStringValue | null]) => void;
}
export interface MonthPickerProps<Type extends DatePickerType = 'default'> extends BoxProps, MonthPickerBaseProps<Type>, StylesApiProps<MonthPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
/** Called when month is selected */
onMonthSelect?: (date: DateStringValue) => void;
}
export type MonthPickerFactory = Factory<{
props: MonthPickerProps;
ref: HTMLDivElement;
stylesNames: MonthPickerStylesNames;
vars: MonthPickerCssVariables;
}>;
type MonthPickerComponent = (<Type extends DatePickerType = 'default'>(props: MonthPickerProps<Type> & {
ref?: React.Ref<HTMLDivElement>;
}) => React.JSX.Element) & {
displayName?: string;
} & MantineComponentStaticProperties<MonthPickerFactory>;
export declare const MonthPicker: MonthPickerComponent;
export declare namespace MonthPicker {
type Props<Type extends DatePickerType = 'default'> = MonthPickerProps<Type>;
type StylesNames = MonthPickerStylesNames;
type Factory = MonthPickerFactory;
}
export {};