react-day-picker 8.0.3 → 8.0.6

package/src/contexts/Navigation/useNavigation.test.ts

@@ -0,0 +1,126 @@
+import { RenderResult } from '@testing-library/react-hooks';
+import { addMonths, startOfMonth, subMonths } from 'date-fns';
+
+import { customRenderHook } from 'test/render/customRenderHook';
+import { freezeBeforeAll } from 'test/utils';
+
+import { DayPickerBase } from 'types/DayPickerBase';
+
+import { NavigationContextValue } from './NavigationContext';
+import { useNavigation } from './useNavigation';
+
+const today = new Date(2021, 11, 8);
+const todaysMonth = startOfMonth(today);
+freezeBeforeAll(today);
+
+let result: RenderResult<NavigationContextValue>;
+
+function setup(dayPickerProps?: DayPickerBase) {
+  const view = customRenderHook(() => useNavigation(), dayPickerProps);
+  result = view.result;
+  return result;
+}
+
+describe('when rendered', () => {
+  beforeEach(() => {
+    setup();
+  });
+  test('the current month should be the today`s month', () => {
+    expect(result.current.currentMonth).toEqual(todaysMonth);
+  });
+  test('the display months should be the today`s month', () => {
+    expect(result.current.displayMonths).toEqual([todaysMonth]);
+  });
+  test('the previous month should be the month before today`s month', () => {
+    expect(result.current.previousMonth).toEqual(subMonths(todaysMonth, 1));
+  });
+  test('the next month should be the month after today`s month', () => {
+    expect(result.current.nextMonth).toEqual(addMonths(todaysMonth, 1));
+  });
+  describe('when goToMonth is called', () => {
+    const newMonth = addMonths(todaysMonth, 10);
+    beforeEach(() => {
+      result.current.goToMonth(newMonth);
+    });
+    test('should go to the specified month', () => {
+      expect(result.current.currentMonth).toEqual(newMonth);
+    });
+    test('the display months should be the today`s month', () => {
+      expect(result.current.displayMonths).toEqual([newMonth]);
+    });
+    test('the previous month should be the month before today`s month', () => {
+      expect(result.current.previousMonth).toEqual(subMonths(newMonth, 1));
+    });
+    test('the next month should be the month after today`s month', () => {
+      expect(result.current.nextMonth).toEqual(addMonths(newMonth, 1));
+    });
+  });
+  describe('when goToDate is called with a date from another month', () => {
+    const newDate = addMonths(today, 10);
+    beforeEach(() => {
+      result.current.goToDate(newDate);
+    });
+    test('should go to the specified month', () => {
+      expect(result.current.currentMonth).toEqual(startOfMonth(newDate));
+    });
+  });
+  describe('when isDateDisplayed is called', () => {
+    describe('with a date in the calendar', () => {
+      test('should return true', () => {
+        expect(result.current.isDateDisplayed(today)).toBe(true);
+      });
+    });
+    describe('with a date not in the calendar', () => {
+      test('should return false', () => {
+        expect(result.current.isDateDisplayed(addMonths(today, 1))).toBe(false);
+      });
+    });
+  });
+});
+
+const numberOfMonths = 2;
+describe('when the number of months is ${numberOfMonths}', () => {
+  beforeEach(() => {
+    setup({ numberOfMonths: 2 });
+  });
+  test('the current month should be the today`s month', () => {
+    expect(result.current.currentMonth).toEqual(todaysMonth);
+  });
+  test('the display months should be the today`s and next month', () => {
+    expect(result.current.displayMonths).toEqual([
+      todaysMonth,
+      addMonths(todaysMonth, 1)
+    ]);
+  });
+  test('the previous month should be the month before today`s month', () => {
+    expect(result.current.previousMonth).toEqual(subMonths(todaysMonth, 1));
+  });
+  test('the next month should be the month after today`s month', () => {
+    expect(result.current.nextMonth).toEqual(addMonths(todaysMonth, 1));
+  });
+});
+
+describe(`when the number of months is ${numberOfMonths} and the navigation is paged`, () => {
+  beforeEach(() => {
+    setup({ numberOfMonths, pagedNavigation: true });
+  });
+  test('the current month should be the today`s month', () => {
+    expect(result.current.currentMonth).toEqual(todaysMonth);
+  });
+  test('the display months should be the today`s and next month', () => {
+    expect(result.current.displayMonths).toEqual([
+      todaysMonth,
+      addMonths(todaysMonth, 1)
+    ]);
+  });
+  test(`the previous month should be the ${numberOfMonths} months before today's month`, () => {
+    expect(result.current.previousMonth).toEqual(
+      subMonths(todaysMonth, numberOfMonths)
+    );
+  });
+  test(`the next month should be ${numberOfMonths} months after today's month`, () => {
+    expect(result.current.nextMonth).toEqual(
+      addMonths(todaysMonth, numberOfMonths)
+    );
+  });
+});

package/src/contexts/Navigation/useNavigation.ts

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

package/src/contexts/Navigation/useNavigationState.test.ts

@@ -0,0 +1,36 @@
+import { addMonths, startOfMonth } from 'date-fns';
+
+import { customRenderHook } from 'test/render/customRenderHook';
+import { freezeBeforeAll } from 'test/utils';
+
+import { DayPickerBase } from 'types/DayPickerBase';
+
+import { useNavigationState } from './useNavigationState';
+
+const today = new Date(2021, 11, 8);
+freezeBeforeAll(today);
+
+function setup(dayPickerProps?: DayPickerBase) {
+  const { result } = customRenderHook(
+    () => useNavigationState(),
+    dayPickerProps
+  );
+  return result;
+}
+
+describe('when goToMonth is called', () => {
+  test('should set the month in state', () => {
+    const result = setup();
+    const month = addMonths(today, 2);
+    result.current[1](month);
+    expect(result.current[0]).toEqual(startOfMonth(month));
+  });
+  describe('when navigation is disabled', () => {
+    test('should not set the month in state', () => {
+      const result = setup({ disableNavigation: true });
+      const month = addMonths(today, 2);
+      result.current[1](month);
+      expect(result.current[0]).toEqual(startOfMonth(today));
+    });
+  });
+});

package/src/contexts/Navigation/useNavigationState.ts

@@ -0,0 +1,25 @@
+import startOfMonth from 'date-fns/startOfMonth';
+
+import { useDayPicker } from 'contexts/DayPicker';
+import { useControlledValue } from 'hooks/useControlledValue';
+
+import { getInitialMonth } from './utils/getInitialMonth';
+
+/** Controls the navigation state. */
+export function useNavigationState(): [
+  /** The month DayPicker is navigating at */
+  month: Date,
+  /** Go to the specified month. */
+  goToMonth: (month: Date) => void
+] {
+  const context = useDayPicker();
+  const initialMonth = getInitialMonth(context);
+  const [month, setMonth] = useControlledValue(initialMonth, context.month);
+
+  const goToMonth = (date: Date) => {
+    if (context.disableNavigation) return;
+    setMonth(startOfMonth(date));
+  };
+
+  return [month, goToMonth];
+}

package/src/contexts/Navigation/utils/getDisplayMonths.ts

@@ -0,0 +1,31 @@
+import addMonths from 'date-fns/addMonths';
+import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
+import startOfMonth from 'date-fns/startOfMonth';
+
+/**
+ * Return the months to display in the component according to the number of
+ * months and the from/to date.
+ */
+export function getDisplayMonths(
+  month: Date,
+  {
+    reverseMonths,
+    numberOfMonths
+  }: {
+    reverseMonths?: boolean;
+    numberOfMonths: number;
+  }
+): Date[] {
+  const start = startOfMonth(month);
+  const end = startOfMonth(addMonths(start, numberOfMonths));
+  const monthsDiff = differenceInCalendarMonths(end, start);
+  let months = [];
+
+  for (let i = 0; i < monthsDiff; i++) {
+    const nextMonth = addMonths(start, i);
+    months.push(nextMonth);
+  }
+
+  if (reverseMonths) months = months.reverse();
+  return months;
+}

package/src/contexts/Navigation/utils/getInitialMonth.test.ts

@@ -0,0 +1,56 @@
+import { addMonths, isSameMonth } from 'date-fns';
+
+import { getInitialMonth } from './getInitialMonth';
+
+describe('when no toDate is given', () => {
+  describe('when month is in context', () => {
+    const month = new Date(2010, 11, 12);
+    it('return that month', () => {
+      const initialMonth = getInitialMonth({ month });
+      expect(isSameMonth(initialMonth, month)).toBe(true);
+    });
+  });
+  describe('when defaultMonth is in context', () => {
+    const defaultMonth = new Date(2010, 11, 12);
+    it('return that month', () => {
+      const initialMonth = getInitialMonth({ defaultMonth });
+      expect(isSameMonth(initialMonth, defaultMonth)).toBe(true);
+    });
+  });
+  describe('when no month or defaultMonth are in context', () => {
+    const today = new Date(2010, 11, 12);
+    it('return the today month', () => {
+      const initialMonth = getInitialMonth({ today });
+      expect(isSameMonth(initialMonth, today)).toBe(true);
+    });
+  });
+});
+describe('when toDate is given', () => {
+  describe('when toDate is before the default initial date', () => {
+    const month = new Date(2010, 11, 12);
+    const toDate = addMonths(month, -2);
+    describe('when the number of month is 1', () => {
+      const numberOfMonths = 1;
+      it('return the toDate', () => {
+        const initialMonth = getInitialMonth({
+          month,
+          toDate,
+          numberOfMonths
+        });
+        expect(isSameMonth(initialMonth, toDate)).toBe(true);
+      });
+    });
+    describe('when the number of month is 3', () => {
+      const numberOfMonths = 3;
+      it('return the toDate plus the number of months', () => {
+        const initialMonth = getInitialMonth({
+          month,
+          toDate,
+          numberOfMonths
+        });
+        const expectedMonth = addMonths(toDate, -1 * (numberOfMonths - 1));
+        expect(isSameMonth(initialMonth, expectedMonth)).toBe(true);
+      });
+    });
+  });
+});

package/src/contexts/Navigation/utils/getInitialMonth.ts

@@ -0,0 +1,24 @@
+import addMonths from 'date-fns/addMonths';
+import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
+import startOfMonth from 'date-fns/startOfMonth';
+
+import { DayPickerContextValue } from 'contexts/DayPicker';
+
+/** Return the initial month according to the given options. */
+export function getInitialMonth(context: Partial<DayPickerContextValue>): Date {
+  const { month, defaultMonth, today } = context;
+  let initialMonth = month || defaultMonth || today || new Date();
+
+  const { toDate, fromDate, numberOfMonths = 1 } = context;
+
+  // Fix the initialMonth if is after the to-date
+  if (toDate && differenceInCalendarMonths(toDate, initialMonth) < 0) {
+    const offset = -1 * (numberOfMonths - 1);
+    initialMonth = addMonths(toDate, offset);
+  }
+  // Fix the initialMonth if is before the from-date
+  if (fromDate && differenceInCalendarMonths(initialMonth, fromDate) < 0) {
+    initialMonth = fromDate;
+  }
+  return startOfMonth(initialMonth);
+}

package/src/contexts/Navigation/utils/getNextMonth.test.ts

@@ -0,0 +1,75 @@
+import { addMonths, isSameMonth } from 'date-fns';
+
+import { getNextMonth } from './getNextMonth';
+
+const startingMonth = new Date(2020, 4, 31);
+
+describe('when number of months is 1', () => {
+  describe('when the navigation is disabled', () => {
+    const disableNavigation = true;
+    it('the next month is undefined', () => {
+      const result = getNextMonth(startingMonth, { disableNavigation });
+      expect(result).toBe(undefined);
+    });
+  });
+  describe('when in the navigable range', () => {
+    const toDate = addMonths(startingMonth, 3);
+    it('the next month is not undefined', () => {
+      const result = getNextMonth(startingMonth, { toDate });
+      const expectedNextMonth = addMonths(startingMonth, 1);
+      expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
+    });
+  });
+  describe('when not in the navigable range', () => {
+    const toDate = startingMonth;
+    it('the next month is undefined', () => {
+      const result = getNextMonth(startingMonth, { toDate });
+      expect(result).toBe(undefined);
+    });
+  });
+});
+describe('when displaying 3 months', () => {
+  const numberOfMonths = 3;
+  describe('when the navigation is paged', () => {
+    const pagedNavigation = true;
+    it('the next month is 3 months ahead', () => {
+      const result = getNextMonth(startingMonth, {
+        numberOfMonths,
+        pagedNavigation
+      });
+      const expectedNextMonth = addMonths(startingMonth, 3);
+      expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
+    });
+    describe('when the to-date is ahead less than 3 months', () => {
+      it('the next month is undefined', () => {
+        const result = getNextMonth(startingMonth, {
+          numberOfMonths,
+          pagedNavigation,
+          toDate: addMonths(startingMonth, 1)
+        });
+        expect(result).toBe(undefined);
+      });
+    });
+  });
+  describe('when the navigation is not paged', () => {
+    const pagedNavigation = false;
+    it('the next month is 1 months ahead', () => {
+      const result = getNextMonth(startingMonth, {
+        numberOfMonths,
+        pagedNavigation
+      });
+      const expectedNextMonth = addMonths(startingMonth, 1);
+      expect(result && isSameMonth(result, expectedNextMonth)).toBeTruthy();
+    });
+    describe('when the to-date is ahead less than 3 months', () => {
+      it('the next month is undefined', () => {
+        const result = getNextMonth(startingMonth, {
+          numberOfMonths,
+          pagedNavigation,
+          toDate: addMonths(startingMonth, 2)
+        });
+        expect(result).toBe(undefined);
+      });
+    });
+  });
+});

package/src/contexts/Navigation/utils/getNextMonth.ts

@@ -0,0 +1,45 @@
+import addMonths from 'date-fns/addMonths';
+import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
+import startOfMonth from 'date-fns/startOfMonth';
+
+/**
+ * Returns the next month the user can navigate to according to the given
+ * options.
+ *
+ * Please note that the next month is not always the next calendar month:
+ *
+ * - if after the `toDate` range, is undefined;
+ * - if the navigation is paged, is the number of months displayed ahead.
+ *
+ */
+export function getNextMonth(
+  startingMonth: Date,
+  options: {
+    numberOfMonths?: number;
+    fromDate?: Date;
+    toDate?: Date;
+    pagedNavigation?: boolean;
+    today?: Date;
+    disableNavigation?: boolean;
+  }
+): Date | undefined {
+  if (options.disableNavigation) {
+    return undefined;
+  }
+  const { toDate, pagedNavigation, numberOfMonths = 1 } = options;
+  const offset = pagedNavigation ? numberOfMonths : 1;
+  const month = startOfMonth(startingMonth);
+
+  if (!toDate) {
+    return addMonths(month, offset);
+  }
+
+  const monthsDiff = differenceInCalendarMonths(toDate, startingMonth);
+
+  if (monthsDiff < numberOfMonths) {
+    return undefined;
+  }
+
+  // Jump forward as the number of months when paged navigation
+  return addMonths(month, offset);
+}

package/src/contexts/Navigation/utils/getPreviousMonth.test.ts

@@ -0,0 +1,55 @@
+import { addMonths, isSameMonth } from 'date-fns';
+
+import { getPreviousMonth } from './getPreviousMonth';
+
+const startingMonth = new Date(2020, 4, 31);
+
+describe('when number of months is 1', () => {
+  describe('when the navigation is disabled', () => {
+    const disableNavigation = true;
+    it('the previous month is undefined', () => {
+      const result = getPreviousMonth(startingMonth, { disableNavigation });
+      expect(result).toBe(undefined);
+    });
+  });
+  describe('when in the navigable range', () => {
+    const fromDate = addMonths(startingMonth, -3);
+    it('the previous month is not undefined', () => {
+      const result = getPreviousMonth(startingMonth, { fromDate });
+      const expectedPrevMonth = addMonths(startingMonth, -1);
+      expect(result && isSameMonth(result, expectedPrevMonth)).toBeTruthy();
+    });
+  });
+  describe('when not in the navigable range', () => {
+    const fromDate = startingMonth;
+    it('the previous month is undefined', () => {
+      const result = getPreviousMonth(startingMonth, { fromDate });
+      expect(result).toBe(undefined);
+    });
+  });
+});
+describe('when displaying 3 months', () => {
+  const numberOfMonths = 3;
+  describe('when the navigation is paged', () => {
+    const pagedNavigation = true;
+    it('the previous month is 3 months back', () => {
+      const result = getPreviousMonth(startingMonth, {
+        numberOfMonths,
+        pagedNavigation
+      });
+      const expectedPrevMonth = addMonths(startingMonth, -numberOfMonths);
+      expect(result && isSameMonth(result, expectedPrevMonth)).toBeTruthy();
+    });
+  });
+  describe('when the navigation is not paged', () => {
+    const pagedNavigation = false;
+    it('the previous month is 1 months back', () => {
+      const result = getPreviousMonth(startingMonth, {
+        numberOfMonths,
+        pagedNavigation
+      });
+      const expectedPrevMonth = addMonths(startingMonth, -1);
+      expect(result && isSameMonth(result, expectedPrevMonth)).toBeTruthy();
+    });
+  });
+});

package/src/contexts/Navigation/utils/getPreviousMonth.ts

@@ -0,0 +1,44 @@
+import addMonths from 'date-fns/addMonths';
+import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
+import startOfMonth from 'date-fns/startOfMonth';
+
+/**
+ * Returns the next previous the user can navigate to, according to the given
+ * options.
+ *
+ * Please note that the previous month is not always the previous calendar
+ * month:
+ *
+ * - if before the `fromDate` date, is `undefined`;
+ * - if the navigation is paged, is the number of months displayed before.
+ *
+ */
+export function getPreviousMonth(
+  startingMonth: Date,
+  options: {
+    numberOfMonths?: number;
+    fromDate?: Date;
+    toDate?: Date;
+    pagedNavigation?: boolean;
+    today?: Date;
+    disableNavigation?: boolean;
+  }
+): Date | undefined {
+  if (options.disableNavigation) {
+    return undefined;
+  }
+  const { fromDate, pagedNavigation, numberOfMonths = 1 } = options;
+  const offset = pagedNavigation ? numberOfMonths : 1;
+  const month = startOfMonth(startingMonth);
+  if (!fromDate) {
+    return addMonths(month, -offset);
+  }
+  const monthsDiff = differenceInCalendarMonths(month, fromDate);
+
+  if (monthsDiff <= 0) {
+    return undefined;
+  }
+
+  // Jump back as the number of months when paged navigation
+  return addMonths(month, -offset);
+}

package/src/contexts/RootProvider.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { ModifiersProvider } from 'contexts/Modifiers/ModifiersContext';
+import { DayPickerBase } from 'types/DayPickerBase';
+
+import { DayPickerProvider } from './DayPicker';
+import { FocusProvider } from './Focus';
+import { NavigationProvider } from './Navigation';
+import { SelectMultipleProvider } from './SelectMultiple';
+import { SelectRangeProvider } from './SelectRange';
+import { SelectSingleProvider } from './SelectSingle';
+
+/** The props of [[RootProvider]]. */
+export type RootContext = DayPickerBase & {
+  children: React.ReactNode;
+};
+
+/** Provide the value for all the context providers. */
+export function RootProvider(props: RootContext): JSX.Element {
+  const { children, ...initialProps } = props;
+
+  return (
+    <DayPickerProvider initialProps={initialProps}>
+      <NavigationProvider>
+        <SelectSingleProvider initialProps={initialProps}>
+          <SelectMultipleProvider initialProps={initialProps}>
+            <SelectRangeProvider initialProps={initialProps}>
+              <ModifiersProvider>
+                <FocusProvider>{children}</FocusProvider>
+              </ModifiersProvider>
+            </SelectRangeProvider>
+          </SelectMultipleProvider>
+        </SelectSingleProvider>
+      </NavigationProvider>
+    </DayPickerProvider>
+  );
+}