react-day-picker 8.0.2 → 8.0.5

package/src/contexts/SelectMultiple/SelectMultipleContext.tsx

@@ -0,0 +1,135 @@
+import React, { createContext, ReactNode } from 'react';
+
+import isSameDay from 'date-fns/isSameDay';
+
+import { DayPickerBase } from 'types/DayPickerBase';
+import {
+  DayPickerMultipleProps,
+  isDayPickerMultiple
+} from 'types/DayPickerMultiple';
+import { DayClickEventHandler } from 'types/EventHandlers';
+import { InternalModifier, Modifiers } from 'types/Modifiers';
+
+/** Represent the modifiers that are changed by the multiple selection. */
+export type SelectMultipleModifiers = Pick<
+  Modifiers,
+  InternalModifier.Disabled
+>;
+
+/** Represents the value of a [[SelectMultipleContext]]. */
+export interface SelectMultipleContextValue {
+  /** The days that have been selected. */
+  selected: Date[] | undefined;
+  /** The modifiers for the corresponding selection. */
+  modifiers: SelectMultipleModifiers;
+  /** Event handler to attach to the day button to enable the multiple select. */
+  onDayClick?: DayClickEventHandler;
+}
+
+/**
+ * The SelectMultiple context shares details about the selected days when in
+ * multiple selection mode.
+ *
+ * Access this context from the [[useSelectMultiple]] hook.
+ */
+export const SelectMultipleContext = createContext<
+  SelectMultipleContextValue | undefined
+>(undefined);
+
+export type SelectMultipleProviderProps = {
+  initialProps: DayPickerBase;
+  children: ReactNode;
+};
+
+/** Provides the values for the [[SelectMultipleContext]]. */
+export function SelectMultipleProvider(
+  props: SelectMultipleProviderProps
+): JSX.Element {
+  if (!isDayPickerMultiple(props.initialProps)) {
+    const emptyContextValue: SelectMultipleContextValue = {
+      selected: undefined,
+      modifiers: {
+        disabled: []
+      }
+    };
+    return (
+      <SelectMultipleContext.Provider value={emptyContextValue}>
+        {props.children}
+      </SelectMultipleContext.Provider>
+    );
+  }
+  return (
+    <SelectMultipleProviderInternal
+      initialProps={props.initialProps}
+      children={props.children}
+    />
+  );
+}
+
+type SelectMultipleProviderInternalProps = {
+  initialProps: DayPickerMultipleProps;
+  children: ReactNode;
+};
+
+export function SelectMultipleProviderInternal({
+  initialProps,
+  children
+}: SelectMultipleProviderInternalProps): JSX.Element {
+  const { selected, min, max } = initialProps;
+
+  const onDayClick: DayClickEventHandler = (day, activeModifiers, e) => {
+    initialProps.onDayClick?.(day, activeModifiers, e);
+
+    const isMinSelected = Boolean(
+      activeModifiers.selected && min && selected?.length === min
+    );
+    if (isMinSelected) {
+      return;
+    }
+
+    const isMaxSelected = Boolean(
+      !activeModifiers.selected && max && selected?.length === max
+    );
+    if (isMaxSelected) {
+      return;
+    }
+
+    const selectedDays = selected ? [...selected] : [];
+
+    if (activeModifiers.selected) {
+      const index = selectedDays.findIndex((selectedDay) =>
+        isSameDay(day, selectedDay)
+      );
+      selectedDays.splice(index, 1);
+    } else {
+      selectedDays.push(day);
+    }
+    initialProps.onSelect?.(selectedDays, day, activeModifiers, e);
+  };
+
+  const modifiers: SelectMultipleModifiers = {
+    disabled: []
+  };
+
+  if (selected) {
+    modifiers.disabled.push((day: Date) => {
+      const isMaxSelected = max && selected.length > max - 1;
+      const isSelected = selected.some((selectedDay) =>
+        isSameDay(selectedDay, day)
+      );
+      return Boolean(isMaxSelected && !isSelected);
+    });
+  }
+
+  const contextValue = {
+    selected,
+    onDayClick,
+    modifiers
+  };
+
+  return (
+    <SelectMultipleContext.Provider value={contextValue}>
+      {children}
+    </SelectMultipleContext.Provider>
+  );
+}

package/src/contexts/SelectMultiple/index.ts

@@ -0,0 +1,2 @@
+export * from './SelectMultipleContext';
+export * from './useSelectMultiple';

package/src/contexts/SelectMultiple/useSelectMultiple.test.ts

@@ -0,0 +1,191 @@
+import { RenderResult } from '@testing-library/react-hooks';
+import { addDays, addMonths } from 'date-fns';
+
+import { customRenderHook } from 'test/render/customRenderHook';
+import { freezeBeforeAll } from 'test/utils';
+
+import { isMatch } from 'contexts/Modifiers/utils/isMatch';
+import { DayPickerMultipleProps } from 'types/DayPickerMultiple';
+import { ActiveModifiers } from 'types/Modifiers';
+
+import { SelectMultipleContextValue } from './SelectMultipleContext';
+import { useSelectMultiple } from './useSelectMultiple';
+
+const today = new Date(2021, 11, 8);
+freezeBeforeAll(today);
+
+let result: RenderResult<SelectMultipleContextValue>;
+
+function setup(dayPickerProps?: DayPickerMultipleProps) {
+  const view = customRenderHook(useSelectMultiple, dayPickerProps);
+  result = view.result;
+}
+
+describe('when is not a multiple select DayPicker', () => {
+  beforeAll(() => {
+    setup();
+  });
+  test('the selected day should be undefined', () => {
+    expect(result.current.selected).toBeUndefined();
+  });
+  test('the disabled modifiers should be empty', () => {
+    expect(result.current.selected).toBeUndefined();
+  });
+});
+
+const initialProps: DayPickerMultipleProps = {
+  mode: 'multiple',
+  onDayClick: jest.fn(),
+  onSelect: jest.fn()
+};
+
+const selectedDay1 = today;
+const selectedDay2 = addDays(today, 1);
+const selectedDay3 = addDays(today, 4);
+
+describe('when days are selected', () => {
+  const selected = [selectedDay1, selectedDay2, selectedDay3];
+  const dayPickerProps: DayPickerMultipleProps = {
+    ...initialProps,
+    selected
+  };
+
+  beforeAll(() => {
+    setup(dayPickerProps);
+  });
+  test('it should return the days as selected', () => {
+    expect(result.current.selected).toStrictEqual(selected);
+  });
+  describe('when `onDayClick` is called with a not selected day', () => {
+    const clickedDay = addDays(selectedDay1, -1);
+    const activeModifiers = {};
+    const event = {} as React.MouseEvent;
+    beforeAll(() => {
+      result.current.onDayClick?.(clickedDay, activeModifiers, event);
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+
+    test('should call the `onDayClick` from the DayPicker props', () => {
+      expect(dayPickerProps.onDayClick).toHaveBeenCalledWith(
+        clickedDay,
+        activeModifiers,
+        event
+      );
+    });
+    test('should call `onSelect` with the clicked day selected', () => {
+      expect(dayPickerProps.onSelect).toHaveBeenCalledWith(
+        [...selected, clickedDay],
+        clickedDay,
+        activeModifiers,
+        event
+      );
+    });
+  });
+  describe('when `onDayClick` is called with a selected day', () => {
+    const clickedDay = selectedDay1;
+    const activeModifiers: ActiveModifiers = { selected: true };
+    beforeAll(() => {
+      result.current.onDayClick?.(clickedDay, activeModifiers, event);
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+    const event = {} as React.MouseEvent;
+    test('should call the `onDayClick` from the DayPicker props', () => {
+      expect(dayPickerProps.onDayClick).toHaveBeenCalledWith(
+        clickedDay,
+        activeModifiers,
+        event
+      );
+    });
+    test('should call `onSelect` without the clicked day selected', () => {
+      const expectedSelected = selected.filter((day) => day !== clickedDay);
+      expect(dayPickerProps.onSelect).toHaveBeenCalledWith(
+        expectedSelected,
+        clickedDay,
+        activeModifiers,
+        event
+      );
+    });
+  });
+});
+
+describe('when the maximum number of days are selected', () => {
+  const selected = [selectedDay1, selectedDay2, selectedDay3];
+  const dayPickerProps: DayPickerMultipleProps = {
+    ...initialProps,
+    selected,
+    max: selected.length
+  };
+  beforeAll(() => {
+    setup(dayPickerProps);
+  });
+
+  test('the selected days should not be disabled', () => {
+    const { disabled } = result.current.modifiers;
+    expect(isMatch(selectedDay1, disabled)).toBe(false);
+    expect(isMatch(selectedDay2, disabled)).toBe(false);
+    expect(isMatch(selectedDay3, disabled)).toBe(false);
+  });
+  test('the other days should be disabled', () => {
+    const { disabled } = result.current.modifiers;
+    expect(isMatch(addMonths(selectedDay1, 1), disabled)).toBe(true);
+    expect(isMatch(addMonths(selectedDay2, 1), disabled)).toBe(true);
+  });
+  describe('when `onDayClick` is called', () => {
+    const clickedDay = addMonths(selectedDay1, 1);
+    const activeModifiers: ActiveModifiers = {};
+    beforeAll(() => {
+      result.current.onDayClick?.(clickedDay, activeModifiers, event);
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+    const event = {} as React.MouseEvent;
+    test('should call the `onDayClick` from the DayPicker props', () => {
+      expect(dayPickerProps.onDayClick).toHaveBeenCalledWith(
+        clickedDay,
+        activeModifiers,
+        event
+      );
+    });
+    test('should not call `onSelect`', () => {
+      expect(dayPickerProps.onSelect).not.toHaveBeenCalled();
+    });
+  });
+});
+
+describe('when the minimum number of days are selected', () => {
+  const selected = [selectedDay1, selectedDay2, selectedDay3];
+  const dayPickerProps: DayPickerMultipleProps = {
+    ...initialProps,
+    selected,
+    min: selected.length
+  };
+  beforeAll(() => {
+    setup(dayPickerProps);
+  });
+  describe('when `onDayClick` is called with one of the selected days', () => {
+    const clickedDay = selected[0];
+    const activeModifiers: ActiveModifiers = { selected: true };
+    beforeAll(() => {
+      result.current.onDayClick?.(clickedDay, activeModifiers, event);
+    });
+    afterAll(() => {
+      jest.resetAllMocks();
+    });
+    const event = {} as React.MouseEvent;
+    test('should call the `onDayClick` from the DayPicker props', () => {
+      expect(dayPickerProps.onDayClick).toHaveBeenCalledWith(
+        clickedDay,
+        activeModifiers,
+        event
+      );
+    });
+    test('should not call `onSelect`', () => {
+      expect(dayPickerProps.onSelect).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/contexts/SelectMultiple/useSelectMultiple.ts

@@ -0,0 +1,17 @@
+import { useContext } from 'react';
+
+import {
+  SelectMultipleContext,
+  SelectMultipleContextValue
+} from './SelectMultipleContext';
+
+/** Hook to access the [[SelectMultipleContext]]. */
+export function useSelectMultiple(): SelectMultipleContextValue {
+  const context = useContext(SelectMultipleContext);
+  if (!context) {
+    throw new Error(
+      'useSelectMultiple must be used within a SelectMultipleProvider'
+    );
+  }
+  return context;
+}

package/src/contexts/SelectRange/SelectRangeContext.tsx

@@ -0,0 +1,158 @@
+import React, { createContext, ReactNode } from 'react';
+
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+
+import { DayPickerBase } from 'types/DayPickerBase';
+import { DayPickerRangeProps, isDayPickerRange } from 'types/DayPickerRange';
+import { DayClickEventHandler } from 'types/EventHandlers';
+import { DateRange } from 'types/Matchers';
+import { InternalModifier, Modifiers } from 'types/Modifiers';
+
+import { addToRange } from './utils/addToRange';
+
+/** Represent the modifiers that are changed by the range selection. */
+export type SelectRangeModifiers = Pick<
+  Modifiers,
+  | InternalModifier.Disabled
+  | InternalModifier.RangeEnd
+  | InternalModifier.RangeMiddle
+  | InternalModifier.RangeStart
+>;
+
+/** Represents the value of a [[SelectRangeContext]]. */
+export interface SelectRangeContextValue {
+  /** The range of days that has been selected. */
+  selected: DateRange | undefined;
+  /** The modifiers for the corresponding selection. */
+  modifiers: SelectRangeModifiers;
+  /** Event handler to attach to the day button to enable the range select. */
+  onDayClick?: DayClickEventHandler;
+}
+
+/**
+ * The SelectRange context shares details about the selected days when in
+ * range selection mode.
+ *
+ * Access this context from the [[useSelectRange]] hook.
+ */
+export const SelectRangeContext = createContext<
+  SelectRangeContextValue | undefined
+>(undefined);
+
+type SelectRangeProviderProps = {
+  initialProps: DayPickerBase;
+  children: ReactNode;
+};
+
+/** Provides the values for the [[SelectRangeProvider]]. */
+export function SelectRangeProvider(
+  props: SelectRangeProviderProps
+): JSX.Element {
+  if (!isDayPickerRange(props.initialProps)) {
+    const emptyContextValue: SelectRangeContextValue = {
+      selected: undefined,
+      modifiers: {
+        range_start: [],
+        range_end: [],
+        range_middle: [],
+        disabled: []
+      }
+    };
+    return (
+      <SelectRangeContext.Provider value={emptyContextValue}>
+        {props.children}
+      </SelectRangeContext.Provider>
+    );
+  }
+  return (
+    <SelectRangeProviderInternal
+      initialProps={props.initialProps}
+      children={props.children}
+    />
+  );
+}
+
+type SelectRangeProviderInternalProps = {
+  initialProps: DayPickerRangeProps;
+  children: ReactNode;
+};
+
+export function SelectRangeProviderInternal({
+  initialProps,
+  children
+}: SelectRangeProviderInternalProps): JSX.Element {
+  const { selected } = initialProps;
+  const { from: selectedFrom, to: selectedTo } = selected || {};
+  const min = initialProps.min;
+  const max = initialProps.max;
+
+  const onDayClick: DayClickEventHandler = (day, activeModifiers, e) => {
+    initialProps.onDayClick?.(day, activeModifiers, e);
+    const range = addToRange(day, selected);
+    if (
+      (min || max) &&
+      selected &&
+      range?.to &&
+      range.from &&
+      range.from !== range.to
+    ) {
+      const diff = Math.abs(differenceInCalendarDays(range?.to, range?.from));
+      if ((min && diff < min) || (max && diff >= max)) {
+        return;
+      }
+    }
+    initialProps.onSelect?.(range, day, activeModifiers, e);
+  };
+
+  const modifiers: SelectRangeModifiers = {
+    range_start: [],
+    range_end: [],
+    range_middle: [],
+    disabled: []
+  };
+
+  if (selectedFrom) {
+    modifiers.range_start = [selectedFrom];
+    if (!selectedTo) {
+      modifiers.range_end = [selectedFrom];
+    } else {
+      modifiers.range_end = [selectedTo];
+      modifiers.range_middle = [
+        {
+          after: selectedFrom,
+          before: selectedTo
+        }
+      ];
+    }
+  }
+
+  if (min && selectedFrom && selectedTo) {
+    modifiers.disabled.push((date: Date) => {
+      return (
+        (isBefore(date, selectedFrom) &&
+          differenceInCalendarDays(selectedFrom, date) < min) ||
+        (isAfter(date, selectedTo) &&
+          differenceInCalendarDays(date, selectedFrom) < min)
+      );
+    });
+  }
+
+  if (max && selectedFrom && selectedTo) {
+    modifiers.disabled.push((date: Date) => {
+      return (
+        (isBefore(date, selectedFrom) &&
+          differenceInCalendarDays(selectedTo, date) >= max) ||
+        (isAfter(date, selectedTo) &&
+          differenceInCalendarDays(date, selectedFrom) >= max)
+      );
+    });
+  }
+
+  return (
+    <SelectRangeContext.Provider value={{ selected, onDayClick, modifiers }}>
+      {children}
+    </SelectRangeContext.Provider>
+  );
+}

package/src/contexts/SelectRange/index.ts

@@ -0,0 +1,2 @@
+export * from './SelectRangeContext';
+export * from './useSelectRange';