react-day-picker 8.0.3 → 8.0.4

package/src/contexts/Modifiers/utils/getActiveModifiers.ts

@@ -0,0 +1,33 @@
+import isSameMonth from 'date-fns/isSameMonth';
+
+import { ActiveModifiers, Modifiers } from 'types/Modifiers';
+
+import { isMatch } from './isMatch';
+
+/** Return the active modifiers for the given day. */
+export function getActiveModifiers(
+  day: Date,
+  /** The modifiers to match for the given date. */
+  modifiers: Modifiers,
+  /** The month where the day is displayed, to add the "outside" modifiers.  */
+  displayMonth?: Date
+): ActiveModifiers {
+  const matchedModifiers = Object.keys(modifiers).reduce(
+    (result: string[], key: string): string[] => {
+      const modifier = modifiers[key];
+      if (isMatch(day, modifier)) {
+        result.push(key);
+      }
+      return result;
+    },
+    []
+  );
+  const activeModifiers: ActiveModifiers = {};
+  matchedModifiers.forEach((modifier) => (activeModifiers[modifier] = true));
+
+  if (displayMonth && !isSameMonth(day, displayMonth)) {
+    activeModifiers.outside = true;
+  }
+
+  return activeModifiers;
+}

package/src/contexts/Modifiers/utils/getCustomModifiers.test.ts

@@ -0,0 +1,14 @@
+import { DayModifiers } from 'index';
+
+import { getCustomModifiers } from './getCustomModifiers';
+
+describe('when some modifiers are not an array', () => {
+  const date = new Date();
+  const dayModifiers: DayModifiers = {
+    foo: date
+  };
+  const result = getCustomModifiers(dayModifiers);
+  test('should return as array', () => {
+    expect(result.foo).toEqual([date]);
+  });
+});

package/src/contexts/Modifiers/utils/getCustomModifiers.ts

@@ -0,0 +1,14 @@
+import { CustomModifiers, DayModifiers } from 'types/Modifiers';
+
+import { matcherToArray } from './matcherToArray';
+
+/** Create CustomModifiers from dayModifiers */
+export function getCustomModifiers(
+  dayModifiers: DayModifiers
+): CustomModifiers {
+  const customModifiers: CustomModifiers = {};
+  Object.entries(dayModifiers).forEach(([modifier, matcher]) => {
+    customModifiers[modifier] = matcherToArray(matcher);
+  });
+  return customModifiers;
+}

package/src/contexts/Modifiers/utils/getInternalModifiers.test.ts

@@ -0,0 +1,146 @@
+import { addDays } from 'date-fns';
+
+import { DayPickerContextValue } from 'contexts/DayPicker';
+import { getDefaultContextValue } from 'contexts/DayPicker/defaultContextValue';
+import { SelectRangeContextValue } from 'contexts/SelectRange';
+import { InternalModifier, InternalModifiers } from 'types/Modifiers';
+
+import { getInternalModifiers } from './getInternalModifiers';
+
+const defaultDayPickerContext: DayPickerContextValue = getDefaultContextValue();
+const defaultSelectMultipleContext = {
+  selected: undefined,
+  modifiers: { disabled: [] }
+};
+const defaultSelectRangeContext = {
+  selected: undefined,
+  modifiers: {
+    disabled: [],
+    range_start: [],
+    range_end: [],
+    range_middle: []
+  }
+};
+
+const { Selected, Disabled, Hidden, Today, RangeEnd, RangeMiddle, RangeStart } =
+  InternalModifier;
+
+const internalModifiers = [Selected, Disabled, Hidden, Today];
+test.each(internalModifiers)(
+  'should transform to array the modifiers from the "%s" prop',
+  (propName) => {
+    const value = new Date();
+    const modifiers = getInternalModifiers(
+      { ...defaultDayPickerContext, [propName]: value },
+      defaultSelectMultipleContext,
+      defaultSelectRangeContext
+    );
+    expect(modifiers[propName]).toStrictEqual([value]);
+  }
+);
+
+describe('when navigation is limited by "fromDate"', () => {
+  const fromDate = new Date();
+  const dayPickerContext: DayPickerContextValue = {
+    ...defaultDayPickerContext,
+    fromDate
+  };
+  test('should add a "before" matcher to the "disabled" modifiers', () => {
+    const modifiers = getInternalModifiers(
+      dayPickerContext,
+      defaultSelectMultipleContext,
+      defaultSelectRangeContext
+    );
+    expect(modifiers.disabled).toStrictEqual([{ before: fromDate }]);
+  });
+});
+
+describe('when navigation is limited by "toDate"', () => {
+  const toDate = new Date();
+  const dayPickerContext: DayPickerContextValue = {
+    ...defaultDayPickerContext,
+    toDate
+  };
+  test('should add an "after" matcher to the "disabled" modifiers', () => {
+    const modifiers = getInternalModifiers(
+      dayPickerContext,
+      defaultSelectMultipleContext,
+      defaultSelectRangeContext
+    );
+    expect(modifiers.disabled).toStrictEqual([{ after: toDate }]);
+  });
+});
+
+describe('when in multiple select mode', () => {
+  const disabledDate = new Date();
+  const dayPickerContext: DayPickerContextValue = {
+    ...defaultDayPickerContext,
+    mode: 'multiple'
+  };
+  const selectMultipleContext = {
+    ...defaultSelectMultipleContext,
+    modifiers: {
+      [Disabled]: [disabledDate]
+    }
+  };
+  test('should add the disabled modifier from the select multiple context', () => {
+    const modifiers = getInternalModifiers(
+      dayPickerContext,
+      selectMultipleContext,
+      defaultSelectRangeContext
+    );
+    expect(modifiers.disabled).toStrictEqual([disabledDate]);
+  });
+});
+
+describe('when in range select mode', () => {
+  const disabled = [new Date()];
+  const rangeStart = new Date();
+  const rangeMiddle = [addDays(rangeStart, 1), addDays(rangeStart, 2)];
+  const rangeEnd = [addDays(rangeStart, 3)];
+  const dayPickerContext: DayPickerContextValue = {
+    ...defaultDayPickerContext,
+    mode: 'range'
+  };
+  const selectRangeContext: SelectRangeContextValue = {
+    ...defaultSelectRangeContext,
+    modifiers: {
+      [Disabled]: [disabled],
+      [RangeStart]: [rangeStart],
+      [RangeEnd]: rangeEnd,
+      [RangeMiddle]: rangeMiddle
+    }
+  };
+  let internalModifiers: InternalModifiers;
+  beforeEach(() => {
+    internalModifiers = getInternalModifiers(
+      dayPickerContext,
+      defaultSelectMultipleContext,
+      selectRangeContext
+    );
+  });
+
+  test('should add the Disabled modifier from the SelectRange context', () => {
+    expect(internalModifiers[Disabled]).toStrictEqual(
+      selectRangeContext.modifiers[Disabled]
+    );
+  });
+
+  test('should add the RangeStart modifier from the SelectRange context', () => {
+    expect(internalModifiers[RangeStart]).toStrictEqual(
+      selectRangeContext.modifiers[RangeStart]
+    );
+  });
+
+  test('should add the RangeEnd modifier from the SelectRange context', () => {
+    expect(internalModifiers[RangeEnd]).toStrictEqual(
+      selectRangeContext.modifiers[RangeEnd]
+    );
+  });
+
+  test('should add the RangeMiddle modifier from the SelectRange context', () => {
+    expect(internalModifiers[RangeMiddle]).toStrictEqual(
+      selectRangeContext.modifiers[RangeMiddle]
+    );
+  });
+});

package/src/contexts/Modifiers/utils/getInternalModifiers.ts

@@ -0,0 +1,58 @@
+import { DayPickerContextValue } from 'contexts/DayPicker';
+import { SelectMultipleContextValue } from 'contexts/SelectMultiple';
+import { SelectRangeContextValue } from 'contexts/SelectRange';
+import { isDayPickerMultiple } from 'types/DayPickerMultiple';
+import { isDayPickerRange } from 'types/DayPickerRange';
+import { InternalModifier, InternalModifiers } from 'types/Modifiers';
+
+import { matcherToArray } from './matcherToArray';
+
+const {
+  Selected,
+  Disabled,
+  Hidden,
+  Today,
+  RangeEnd,
+  RangeMiddle,
+  RangeStart,
+  Outside
+} = InternalModifier;
+
+/** Return the [[InternalModifiers]] from the DayPicker and select contexts. */
+export function getInternalModifiers(
+  dayPicker: DayPickerContextValue,
+  selectMultiple: SelectMultipleContextValue,
+  selectRange: SelectRangeContextValue
+) {
+  const internalModifiers: InternalModifiers = {
+    [Selected]: matcherToArray(dayPicker.selected),
+    [Disabled]: matcherToArray(dayPicker.disabled),
+    [Hidden]: matcherToArray(dayPicker.hidden),
+    [Today]: [dayPicker.today],
+    [RangeEnd]: [],
+    [RangeMiddle]: [],
+    [RangeStart]: [],
+    [Outside]: []
+  };
+
+  if (dayPicker.fromDate) {
+    internalModifiers[Disabled].push({ before: dayPicker.fromDate });
+  }
+  if (dayPicker.toDate) {
+    internalModifiers[Disabled].push({ after: dayPicker.toDate });
+  }
+
+  if (isDayPickerMultiple(dayPicker)) {
+    internalModifiers[Disabled] = internalModifiers[Disabled].concat(
+      selectMultiple.modifiers[Disabled]
+    );
+  } else if (isDayPickerRange(dayPicker)) {
+    internalModifiers[Disabled] = internalModifiers[Disabled].concat(
+      selectRange.modifiers[Disabled]
+    );
+    internalModifiers[RangeStart] = selectRange.modifiers[RangeStart];
+    internalModifiers[RangeMiddle] = selectRange.modifiers[RangeMiddle];
+    internalModifiers[RangeEnd] = selectRange.modifiers[RangeEnd];
+  }
+  return internalModifiers;
+}

package/src/contexts/Modifiers/utils/isDateInRange.test.ts

@@ -0,0 +1,28 @@
+import { DateRange } from 'index';
+
+import { isDateInRange } from './isDateInRange';
+
+const date = new Date();
+
+describe('when range is missing the "from" date', () => {
+  const range: DateRange = { from: undefined };
+  const result = isDateInRange(date, range);
+  test('should return false', () => {
+    expect(result).toBe(false);
+  });
+});
+
+describe('when range is missing the "to" date', () => {
+  const to = undefined;
+  describe('when the from date is the same as date', () => {
+    const range: DateRange = { from: date, to };
+    const result = isDateInRange(date, range);
+    test('should return true', () => {
+      expect(result).toBe(true);
+    });
+  });
+  const result = isDateInRange(date, { from: undefined });
+  test('should return false', () => {
+    expect(result).toBe(false);
+  });
+});

package/src/contexts/Modifiers/utils/isDateInRange.ts

@@ -0,0 +1,27 @@
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import isSameDay from 'date-fns/isSameDay';
+
+import { DateRange } from 'types/Matchers';
+
+/** Return `true` whether `date` is inside `range`. */
+export function isDateInRange(date: Date, range: DateRange): boolean {
+  let { from, to } = range;
+  if (!from) {
+    return false;
+  }
+  if (!to && isSameDay(from, date)) {
+    return true;
+  }
+  if (!to) {
+    return false;
+  }
+  const isToBeforeFrom = differenceInCalendarDays(to, from) < 0;
+  if (to && isToBeforeFrom) {
+    [from, to] = [to, from];
+  }
+
+  return (
+    differenceInCalendarDays(date, from) >= 0 &&
+    differenceInCalendarDays(to, date) >= 0
+  );
+}

package/src/contexts/Modifiers/utils/isMatch.test.ts

@@ -0,0 +1,92 @@
+import { addDays } from 'date-fns';
+
+import {
+  DateAfter,
+  DateBefore,
+  DateInterval,
+  DateRange,
+  DayOfWeek
+} from 'types/Matchers';
+
+import { isMatch } from './isMatch';
+
+const testDay = new Date();
+
+describe('when the matcher is a boolean', () => {
+  const matcher = true;
+  const result = isMatch(testDay, [matcher]);
+  test('should return the boolean', () => {
+    expect(result).toBe(matcher);
+  });
+});
+describe('when matching the same day', () => {
+  const matcher = testDay;
+  const result = isMatch(testDay, [matcher]);
+  test('should return true', () => {
+    expect(result).toBe(true);
+  });
+});
+
+describe('when matching an array of dates including the day', () => {
+  const matcher = [addDays(testDay, -1), testDay, addDays(testDay, 1)];
+  const result = isMatch(testDay, [matcher]);
+  test('should return true', () => {
+    expect(result).toBe(true);
+  });
+});
+
+describe('when matching date range', () => {
+  const matcher: DateRange = {
+    from: testDay,
+    to: addDays(testDay, 1)
+  };
+  const result = isMatch(testDay, [matcher]);
+  test('should return true', () => {
+    expect(result).toBe(true);
+  });
+});
+
+describe('when matching the day of week', () => {
+  const matcher: DayOfWeek = {
+    dayOfWeek: [testDay.getDay()]
+  };
+  const result = isMatch(testDay, [matcher]);
+  test('should return true', () => {
+    expect(result).toBe(true);
+  });
+});
+
+describe('when matching date interval', () => {
+  const matcher: DateInterval = {
+    after: addDays(testDay, -1),
+    before: addDays(testDay, 1)
+  };
+  const result = isMatch(testDay, [matcher]);
+  test('should return true', () => {
+    expect(result).toBe(true);
+  });
+});
+
+describe('when matching the date after', () => {
+  const matcher: DateAfter = { after: addDays(testDay, -1) };
+  const result = isMatch(testDay, [matcher]);
+  test('should return true', () => {
+    expect(result).toBe(true);
+  });
+});
+
+describe('when matching the date before', () => {
+  const matcher: DateBefore = { before: addDays(testDay, +1) };
+  const result = isMatch(testDay, [matcher]);
+  test('should return true', () => {
+    expect(result).toBe(true);
+  });
+});
+
+describe('when the matcher is a function', () => {
+  const matcher = () => true;
+  const result = isMatch(testDay, [matcher]);
+  test('should return the result of the function', () => {
+    expect(result).toBe(true);
+  });
+});

package/src/contexts/Modifiers/utils/isMatch.ts

@@ -0,0 +1,76 @@
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
+import isDate from 'date-fns/isDate';
+import isSameDay from 'date-fns/isSameDay';
+
+import {
+  isDateAfterType,
+  isDateBeforeType,
+  isDateInterval,
+  isDateRange,
+  isDayOfWeekType,
+  Matcher
+} from 'types/Matchers';
+
+import { isDateInRange } from './isDateInRange';
+
+/** Returns true if `value` is a Date type. */
+function isDateType(value: unknown): value is Date {
+  return isDate(value);
+}
+
+/** Returns true if `value` is an array of valid dates. */
+function isArrayOfDates(value: unknown): value is Date[] {
+  return Array.isArray(value) && value.every(isDate);
+}
+
+/**
+ * Returns whether a day matches against at least one of the given Matchers.
+ *
+ * ```
+ * const day = new Date(2022, 5, 19);
+ * const matcher1: DateRange = {
+ *    from: new Date(2021, 12, 21),
+ *    to: new Date(2021, 12, 30)
+ * }
+ * const matcher2: DateRange = {
+ *    from: new Date(2022, 5, 1),
+ *    to: new Date(2022, 5, 23)
+ * }
+ *
+ * const isMatch(day, [matcher1, matcher2]); // true, since day is in the matcher1 range.
+ * ```
+ * */
+export function isMatch(day: Date, matchers: Matcher[]): boolean {
+  return matchers.some((matcher: Matcher) => {
+    if (typeof matcher === 'boolean') {
+      return matcher;
+    }
+    if (isDateType(matcher)) {
+      return isSameDay(day, matcher);
+    }
+    if (isArrayOfDates(matcher)) {
+      return matcher.includes(day);
+    }
+    if (isDateRange(matcher)) {
+      return isDateInRange(day, matcher);
+    }
+    if (isDayOfWeekType(matcher)) {
+      return matcher.dayOfWeek.includes(day.getDay());
+    }
+    if (isDateInterval(matcher)) {
+      const isBefore = differenceInCalendarDays(matcher.before, day) > 0;
+      const isAfter = differenceInCalendarDays(day, matcher.after) > 0;
+      return isBefore && isAfter;
+    }
+    if (isDateAfterType(matcher)) {
+      return differenceInCalendarDays(day, matcher.after) > 0;
+    }
+    if (isDateBeforeType(matcher)) {
+      return differenceInCalendarDays(matcher.before, day) > 0;
+    }
+    if (typeof matcher === 'function') {
+      return matcher(day);
+    }
+    return false;
+  });
+}

package/src/contexts/Modifiers/utils/matcherToArray.test.ts

@@ -0,0 +1,22 @@
+import { matcherToArray } from 'contexts/Modifiers/utils/matcherToArray';
+import { Matcher } from 'types/Matchers';
+
+const matcher: Matcher = jest.fn();
+
+describe('when a Matcher is passed in', () => {
+  test('should return an array with the Matcher', () => {
+    expect(matcherToArray(matcher)).toStrictEqual([matcher]);
+  });
+});
+
+describe('when an array of Matchers is passed in', () => {
+  test('should return the array', () => {
+    expect(matcherToArray([matcher])).toStrictEqual([matcher]);
+  });
+});
+
+describe('when undefined is passed in', () => {
+  test('should return an empty array', () => {
+    expect(matcherToArray(undefined)).toStrictEqual([]);
+  });
+});

package/src/contexts/Modifiers/utils/matcherToArray.ts

@@ -0,0 +1,14 @@
+import { Matcher } from 'types/Matchers';
+
+/** Normalize to array a matcher input. */
+export function matcherToArray(
+  matcher: Matcher | Matcher[] | undefined
+): Matcher[] {
+  if (Array.isArray(matcher)) {
+    return matcher;
+  } else if (matcher !== undefined) {
+    return [matcher];
+  } else {
+    return [];
+  }
+}

package/src/contexts/Navigation/NavigationContext.tsx

@@ -0,0 +1,84 @@
+import React, { createContext, ReactNode } from 'react';
+
+import addMonths from 'date-fns/addMonths';
+import isBefore from 'date-fns/isBefore';
+import isSameMonth from 'date-fns/isSameMonth';
+
+import { useDayPicker } from '../DayPicker';
+import { useNavigationState } from './useNavigationState';
+import { getDisplayMonths } from './utils/getDisplayMonths';
+import { getNextMonth } from './utils/getNextMonth';
+import { getPreviousMonth } from './utils/getPreviousMonth';
+
+/** Represents the value of the [[NavigationContext]]. */
+export interface NavigationContextValue {
+  /** The month to display in the calendar. Note that when `numberOfMonths > 1` represent the first month in the displayed months. */
+  currentMonth: Date;
+  /** The months rendered by DayPicker. DayPicker can render one than one month via `numberOfMonths`. */
+  displayMonths: Date[];
+  /** Navigate to the specified month. */
+  goToMonth: (month: Date) => void;
+  /** Navigate to the specified date. */
+  goToDate: (date: Date, refDate?: Date) => void;
+  /** The next month to display. `undefined` if no months left */
+  nextMonth?: Date;
+  /** The previous month to display. `undefined` if no months left */
+  previousMonth?: Date;
+  /** Return true if the day is currently included in the months displayed in the calendar. */
+  isDateDisplayed: (day: Date) => boolean;
+}
+
+/**
+ * The Navigation context shares details about the months being navigated in DayPicker.
+ *
+ * Access this context from the [[useNavigation]] hook.
+ */
+export const NavigationContext = createContext<
+  NavigationContextValue | undefined
+>(undefined);
+
+/** Provides the values for the [[NavigationContext]]. */
+export function NavigationProvider(props: {
+  children?: ReactNode;
+}): JSX.Element {
+  const dayPicker = useDayPicker();
+  const [currentMonth, goToMonth] = useNavigationState();
+
+  const displayMonths = getDisplayMonths(currentMonth, dayPicker);
+  const nextMonth = getNextMonth(currentMonth, dayPicker);
+  const previousMonth = getPreviousMonth(currentMonth, dayPicker);
+
+  const isDateDisplayed = (date: Date) => {
+    return displayMonths.some((displayMonth) =>
+      isSameMonth(date, displayMonth)
+    );
+  };
+
+  const goToDate = (date: Date, refDate?: Date) => {
+    if (isDateDisplayed(date)) {
+      return;
+    }
+
+    if (refDate && isBefore(date, refDate)) {
+      goToMonth(addMonths(date, 1 + dayPicker.numberOfMonths * -1));
+    } else {
+      goToMonth(date);
+    }
+  };
+
+  const value: NavigationContextValue = {
+    currentMonth,
+    displayMonths,
+    goToMonth,
+    goToDate,
+    previousMonth,
+    nextMonth,
+    isDateDisplayed
+  };
+
+  return (
+    <NavigationContext.Provider value={value}>
+      {props.children}
+    </NavigationContext.Provider>
+  );
+}

package/src/contexts/Navigation/index.ts

@@ -0,0 +1,2 @@
+export * from './NavigationContext';
+export * from './useNavigation';