UNPKG

@mantine/dates

Version:

Calendars, date and time pickers based on Mantine components

53 lines (52 loc) 2.92 kB
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 {};