@fluentui/react/src/components/Calendar/CalendarYear/CalendarYear.types.ts

Reusable React components for building web experiences.

import * as React from 'react';
import { AnimationDirection } from '../Calendar.types';
import type { IBaseProps, IRefObject, IStyleFunctionOrObject } from '@fluentui/utilities';
import type { ICalendarNavigationIcons } from '../Calendar.types';
import type { ITheme } from '@fluentui/style-utilities';
import type { ICalendarPickerStyleProps, ICalendarPickerStyles } from '../CalendarPicker/CalendarPicker.types';

/**
 * {@docCategory Calendar}
 */
export interface ICalendarYear {
  focus(): void;
}

/**
 * {@docCategory Calendar}
 */
export interface ICalendarYearRange {
  fromYear: number;
  toYear: number;
}

/**
 * {@docCategory Calendar}
 */
export interface ICalendarYearRangeToString {
  (range: ICalendarYearRange): string;
}

/**
 * {@docCategory Calendar}
 */
export interface ICalendarYearStrings {
  rangeAriaLabel?: string | ICalendarYearRangeToString;
  prevRangeAriaLabel?: string | ICalendarYearRangeToString;
  nextRangeAriaLabel?: string | ICalendarYearRangeToString;
  headerAriaLabelFormatString?: string;
}

/**
 * {@docCategory Calendar}
 */
export interface ICalendarYearProps extends IBaseProps<ICalendarYear> {
  /**
   * Optional callback to access the ICalendarYear interface. Use this instead of ref for accessing
   * the public methods and properties of the component.
   */
  componentRef?: IRefObject<ICalendarYear>;

  /**
   * Customized styles for the calendar month component
   */
  styles?: IStyleFunctionOrObject<ICalendarYearStyleProps, ICalendarYearStyles>;

  /**
   * Theme (provided through customization).
   */
  theme?: ITheme;

  /**
   * Localized strings to use in the Calendar
   */
  strings?: ICalendarYearStrings;

  /**
   * The currently selected year
   */
  selectedYear?: number;

  /**
   * The currently navigated year
   */
  navigatedYear?: number;

  /**
   * Callback action when a year is selected
   * @param year - The year the user selected
   */
  onSelectYear?: (year: number) => void;

  /**
   * Custom navigation icons.
   */
  navigationIcons?: ICalendarNavigationIcons;

  /**
   * Callback action when the header is selected
   */
  onHeaderSelect?: (focus: boolean) => void;

  /**
   * If set the Calendar will not allow navigation to or selection of a year earlier than this value.
   */
  minYear?: number;

  /**
   * If set the Calendar will not allow navigation to or selection of a year later than this value.
   */
  maxYear?: number;

  /**
   * Whether the year picker should highlight the current year
   * @defaultvalue false
   */
  highlightCurrentYear?: boolean;

  /**
   * Whether the year picker should highlight the selected year
   * @defaultvalue false
   */
  highlightSelectedYear?: boolean;

  /**
   * Accept custom classNames
   */
  className?: string;

  /**
   * Custom renderer for the title
   */
  onRenderTitle?: (props: ICalendarYearHeaderProps) => React.ReactNode;

  /**
   * Custom renderer for the year
   */
  onRenderYear?: (year: number) => React.ReactNode;

  /**
   * The cardinal directions for animation to occur during transitions, either horizontal or veritcal
   */
  animationDirection?: AnimationDirection;
}

export interface ICalendarYearStyleProps extends ICalendarPickerStyleProps {}

export interface ICalendarYearStyles extends ICalendarPickerStyles {}

export interface ICalendarYearHeaderProps extends ICalendarYearProps, ICalendarYearRange {
  /**
   * Callback action when the 'previous' navigation button is selected
   */
  onSelectPrev?: () => void;

  /**
   * Callback action when the 'next' navigation button is selected
   */
  onSelectNext?: () => void;

  /**
   * Whether title entering animation should be forwards or backwards
   */
  animateBackwards?: boolean;
}