@oslokommune/punkt-react/src/components/calendar/types.ts

React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo

import type { IDateConstraints, TDateRangeMap } from 'shared-types/calendar'

export const DEFAULT_STRINGS: Required<IPktCalendarStrings> = {
  month: 'Måned',
  year: 'År',
  days: ['Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag', 'Søndag'],
  daysShort: ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'],
  months: [
    'Januar',
    'Februar',
    'Mars',
    'April',
    'Mai',
    'Juni',
    'Juli',
    'August',
    'September',
    'Oktober',
    'November',
    'Desember',
  ],
  week: 'Uke',
  prevMonth: 'Forrige måned',
  nextMonth: 'Neste måned',
}

export interface IPktCalendarStrings {
  month?: string
  year?: string
  days?: string[]
  daysShort?: string[]
  months?: string[]
  week?: string
  prevMonth?: string
  nextMonth?: string
}

export interface PktCalendarHandle {
  handleDateSelect: (selectedDate: Date | null) => void
  addToSelected: (selectedDate: Date) => void
  removeFromSelected: (selectedDate: Date) => void
  toggleSelected: (selectedDate: Date) => void
  focusOnCurrentDate: () => void
  close: () => void
}

export interface IPktCalendar {
  // Selection
  selected?: string[]
  multiple?: boolean
  maxMultiple?: number
  range?: boolean

  // Constraints
  earliest?: string | null
  latest?: string | null
  excludedates?: Date[] | string[]
  excludeweekdays?: string[]

  // Display
  weeknumbers?: boolean
  withcontrols?: boolean
  currentmonth?: Date | string | null
  today?: string

  // Localization
  strings?: IPktCalendarStrings

  // Callbacks
  onDateSelected?: (selected: string[]) => void
  onClose?: () => void

  // React standard
  id?: string
  className?: string
}

export type TDayViewData = {
  currentDate: Date
  currentDateISO: string
  isToday: boolean
  isSelected: boolean
  isDisabled: boolean
  ariaLabel: string
  tabindex: string
}

export interface ICalendarState {
  componentId: string
  strings: Required<IPktCalendarStrings>

  // Navigation
  year: number
  month: number

  // Selection
  activeSelected: string[]
  _selected: Date[]
  inRange: TDateRangeMap
  rangeHovered: Date | null
  focusedDate: string | null

  // Today override
  todayDate: Date

  // Props passthrough
  range: boolean
  multiple: boolean
  weeknumbers: boolean
  withcontrols: boolean
  earliest: string | null
  latest: string | null
  excludedates: Date[]
  excludeweekdays: string[]
  className?: string

  // Constraints
  dateConstraints: IDateConstraints

  // Refs
  calendarRef: React.RefObject<HTMLDivElement | null>
  selectableDatesRef: React.MutableRefObject<{ currentDateISO: string; isDisabled: boolean; tabindex: string }[]>
  tabIndexSetRef: React.MutableRefObject<number>

  // Navigation callbacks
  prevMonth: () => void
  nextMonth: () => void
  changeMonth: (newYear: number, newMonth: number) => void

  // Selection callbacks
  handleDateSelect: (selectedDate: Date | null) => void
  addToSelected: (selectedDate: Date) => void
  removeFromSelected: (selectedDate: Date) => void
  toggleSelectedDate: (selectedDate: Date) => void
  handleRangeHover: (date: Date) => void

  // Validation callbacks
  isExcluded: (date: Date) => boolean
  isDayDisabled: (date: Date, isSelected: boolean) => boolean

  // Focus/keyboard callbacks
  focusOnCurrentDate: () => void
  handleKeydown: (e: React.KeyboardEvent) => void
  handleFocusOut: (e: React.FocusEvent) => void
  close: () => void
  setFocusedDate: (date: string | null) => void
}

export interface ICalendarNavProps {
  componentId: string
  strings: Required<IPktCalendarStrings>
  year: number
  month: number
  earliest: string | null
  latest: string | null
  withcontrols: boolean
  prevMonth: () => void
  nextMonth: () => void
  changeMonth: (newYear: number, newMonth: number) => void
}