State prop-getters

A prop-getters pattern grants access to essential props and logic for components. It provides the flexibility to pass additional configurations. In @rehookify/datepicker, prop-getters like onClick are composed to receive parameters such as event and date when invoked, typically in the format onClick(event, date).

Each prop-getter accommodates a configuration object, enhancing the properties and functionalities of the associated component. This configuration allows for customization and additional control over the prop-getter's behavior and output.

export interface DPPropsGetterConfig extends Record<string, unknown> {
  onClick?(evt?: MouseEvent<HTMLElement>, date?: Date): void;
  disabled?: boolean;
}

export interface DPPropsGetterConfig extends Record<string, unknown> {
  onClick?(evt?: MouseEvent<HTMLElement>, date?: Date): void;
  disabled?: boolean;
}

All prop-getters function similarly: they take a data entity and a configuration as arguments and return an object comprising specific properties designed to cater to the component's needs:

export interface DPPropGetter extends Record<string, unknown> {
  role: 'button';
  tabIndex: number;
  disabled?: boolean;
  'aria-disabled'?: boolean;
  'aria-selected'?: boolean;
  onClick?(evt: MouseEvent<HTMLElement>): void;
}

export interface DPPropGetter extends Record<string, unknown> {
  role: 'button';
  tabIndex: number;
  disabled?: boolean;
  'aria-disabled'?: boolean;
  'aria-selected'?: boolean;
  onClick?(evt: MouseEvent<HTMLElement>): void;
}

dayButton

The dayButton produces properties for calendar days and sets the selectedDates state when a user clicks on a day.

type DayButton = (
  day: DPDay,
  config?: DPPropsGetterConfig
) => DPPropGetter;

type DayButton = (
  day: DPDay,
  config?: DPPropsGetterConfig
) => DPPropGetter;

You could get the day from the calendars state data.

⚠️ NOTE: onMouseMove additionaly appears only if dates mode is range, it is not composable you can enable this mode in the dates configuration.

monthButton

The monthButton prop-getter generates properties associated with calendar months and facilitates the month-changing functionality when a user clicks on a specific month.

type MonthButton = (
  month: DPMonth,
  config?: DPPropsGetterConfig
) => DPPropGetter;

type MonthButton = (
  month: DPMonth,
  config?: DPPropsGetterConfig
) => DPPropGetter;

You could get the month from the months state data.

yearButton

The yearButton prop-getter generates properties related to calendar years and facilitates the modification of the offsetDate's year when a user clicks on a particular year.

type YearButton = (
  year: DPYear,
  config?: DPPropsGetterConfig
) => DPPropGetter;

type YearButton = (
  year: DPYear,
  config?: DPPropsGetterConfig
) => DPPropGetter;

You can get year from the years state data.

nextYearsButton and previousYearsButton

The nextYearsButton and previousYearsButton prop-getters allow for the movement of year pagination, advancing one step forward or backward, respectively, within the datepicker interface.

⚠️ NOTE: The onClick callback function doesn't get date as a second parameter.

timeButton

The timeButton produces properties for time button and changes corresponding selectedDate and focusDate.

type TimeButton = (
  time: DPTime,
  config?: DPPropsGetterConfig,
) => DPPropGetter;

type TimeButton = (
  time: DPTime,
  config?: DPPropsGetterConfig,
) => DPPropGetter;

You could ge the time from the time state data.

⚠️ NOTE: onClick - callback function doesn't get date as a second parameter.

setOffset

The setOffset moves offset to passed date if it is after than minDate and before maxDate.

The setOffset prop-getter facilitates the movement of the offset to the specified date. When using the setOffset, the provided date must fall within the constraints set by the minDate and maxDate boundaries specified within the dates configuration.

type SetOffset = (
  date: Date,
  config?: DPPropsGetterConfig
) => DPPropGetter;

type SetOffset = (
  date: Date,
  config?: DPPropsGetterConfig
) => DPPropGetter;

The date param should be a valid EcmaScript Date.

addOffset and subtractOffset

Both addOffset and subtractOffset prop-getters enable moving the offsetDate forward or backward by a specified number of days, months, and years. The first parameter, offsetValue, adheres to the following structure:

interface DPOffsetValue {
  days?: number;
  months?: number;
  years?: number;
}

interface DPOffsetValue {
  days?: number;
  months?: number;
  years?: number;
}

This structure includes optional values for the number of days, months, and years by which the offsetDate should be adjusted.

Both addOffset and subtractOffset prop-getters share identical signatures, enabling consistent usage.

type AddOffset = (
  offsetValue: DPOffsetValue,
  config?: DPPropsGetterConfig,
) => DPPropGetter;
 
type SubtractOffset = (
  offsetValue: DPOffsetValue,
  config?: DPPropsGetterConfig,
) => DPPropGetter;

type AddOffset = (
  offsetValue: DPOffsetValue,
  config?: DPPropsGetterConfig,
) => DPPropGetter;
 
type SubtractOffset = (
  offsetValue: DPOffsetValue,
  config?: DPPropsGetterConfig,
) => DPPropGetter;

⚠️ NOTE: For both the subtractOffset and addOffset prop-getters, positive values should be provided in the OffsetValue object. For instance, { days: 1, months: 1, years: 1 }.