@wix/design-system/dist/types/CalendarPanel/index.d.ts

@wix/design-system

import * as React from 'react';
import { Locale } from 'date-fns';
import { SupportedWixLocales } from '@wix/design-systems-locale-utils';

export interface CalendarPanelProps {
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook?: string;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /** Defines a callback function  which is called whenever the user selects a day or a date range in the calendar */
  onChange: (selectedDays: SelectedDaysType) => void;
  /** Defines a callback function which is called whenever user press `escape` or click outside of the element */
  onClose?: (e: React.SyntheticEvent) => void;
  /** Specifies whether past dates should be selectable or not */
  excludePastDates?: boolean;
  /** Specifies dates that are selectable. Only the dates that match defined criteria will be available for a user to select. */
  filterDate?: (date: Date) => boolean;
  /** Defines a selected date or date range */
  value?: SelectedDaysType;
  /** Defines a number of months to display inside of a panel
   * @default 2
   */
  numOfMonths?: number;
  /** Specifies if user can select a single day or a date range */
  selectionMode?: SelectionModeType;
  /** Specifies whether to display a year selection dropdown inside of a calendar */
  showYearDropdown?: boolean;
  /** Specifies whether to display a month selection dropdown inside of a calendar */
  showMonthDropdown?: boolean;
  /** Specifies whether calendar should close on a day selection */
  shouldCloseOnSelect?: boolean;
  /** Specifies date picker instance locale */
  locale?: SupportedWixLocales | Locale;
  /** Defines an array of predefined calendar presets that are displayed as select items on the left side of a panel */
  presets?:
    | PresetType[]
    | { selectedDays?: SelectedDaysType; id?: string | number };
  /** Renders a panel footer. Pass `<CalendarPanelFooter/>` in all common cases. `({selectedDays, submitDisabled}) => void` - `selectedDays` is the same as the CalendarPanel's `value` prop. `submitDisabled` is true when the current selectedDays is not valida for submission. */
  footer?: (selectedDays: SelectedDaysType, submitDisabled: boolean) => void;
}

type PresetType = OptionType | { value: '-' };

type OptionType = {
  id: string | number;
  /** Defines a selected date or date range */
  value: React.ReactNode | Function;
  disabled?: boolean;
  overrideStyle?: boolean;
  selectedDays: SelectedDaysType;
};

export { LanguageType } from '../Calendar';

export type SelectedDaysType = string | Date | DateRangeType;

export type DateRangeType = { from?: string | Date; to?: string | Date };

type SelectionModeType = 'day' | 'range';

export default class CalendarPanel extends React.Component<CalendarPanelProps> {
  getSelectedPresetId: () => string | number;
  onSelectPreset: () => void;
  isSubmitDisabled: () => boolean;
}