@uxf/datepicker 10.0.0 → 10.8.0

package/contexts/date-picker-context.js

@@ -30,4 +30,5 @@ exports.DatePickerContext = (0, react_1.createContext)({
     onDateSelect: () => undefined,
     onResetDates: () => undefined,
     preventScroll: undefined,
+    unavailableDates: [],
 });

package/contexts/date-range-picker-context.js

@@ -32,4 +32,5 @@ exports.DateRangePickerContext = (0, react_1.createContext)({
     onDateHover: () => undefined,
     onDateSelect: () => undefined,
     onResetDates: () => undefined,
+    unavailableDates: [],
 });

package/hooks/use-date-picker.d.ts

@@ -28,5 +28,6 @@ export interface UseDatePickerReturnType extends UseDatePickerNavigationReturnTy
     onDateSelect: (date: Date) => void;
     onResetDates: () => void;
     preventScroll?: boolean;
+    unavailableDates: Date[];
 }
 export declare function useDatePicker({ firstDayOfWeek, initialVisibleMonth, isDateBlocked: isDateBlockedProps, maxBookingDate, minBookingDate, numberOfMonths, onDateChange, preventScroll, selectedDate, unavailableDates, }: UseDatePickerProps): UseDatePickerReturnType;

package/hooks/use-date-picker.js

@@ -110,6 +110,7 @@ function useDatePicker({ firstDayOfWeek = 0, initialVisibleMonth, isDateBlocked:
         onDateSelect,
         onResetDates: onReset,
         preventScroll,
+        unavailableDates,
     };
 }
 exports.useDatePicker = useDatePicker;

package/hooks/use-date-range-picker.d.ts

@@ -43,5 +43,6 @@ export interface UseDateRangePickerReturnType extends UseDatePickerNavigationRet
     onDateSelect: (date: Date) => void;
     onResetDates: () => void;
     preventScroll?: boolean;
+    unavailableDates: Date[];
 }
 export declare function useDateRangePicker({ changeActiveMonthOnSelect, endDate, exactMinBookingDays, firstDayOfWeek, focusedInput, initialVisibleMonth, isDateBlocked: isDateBlockedProps, maxBookingDate, minBookingDate, minBookingDays, numberOfMonths, onDatesChange, startDate, unavailableDates, }: UseDateRangePickerProps): UseDateRangePickerReturnType;

package/hooks/use-date-range-picker.js

@@ -220,6 +220,7 @@ function useDateRangePicker({ changeActiveMonthOnSelect = false, endDate, exactM
         onDateHover,
         onDateSelect,
         onResetDates,
+        unavailableDates,
     };
 }
 exports.useDateRangePicker = useDateRangePicker;

package/hooks/use-day.d.ts

@@ -12,8 +12,11 @@ export interface UseDayProps {
     onDateHover: (date: Date) => void;
     onDateSelect: (date: Date) => void;
     preventScroll?: boolean;
+    unavailableDates: Date[];
 }
 export interface UseDayReturnType {
+    isFirstDisabled: boolean;
+    isLastDisabled: boolean;
     disabledDate: boolean;
     isHovered: boolean;
     isSelected: boolean;
@@ -25,4 +28,4 @@ export interface UseDayReturnType {
     onMouseEnter: () => void;
     tabIndex: number;
 }
-export declare function useDay({ date, dayRef, focusedDate, isDateBlocked, isDateFocused, isDateHovered, isDateInsideRange, isDateSelected, onDateFocus, onDateHover, onDateSelect, preventScroll, }: UseDayProps): UseDayReturnType;
+export declare function useDay({ date, dayRef, focusedDate, isDateBlocked, isDateFocused, isDateHovered, isDateInsideRange, isDateSelected, onDateFocus, onDateHover, onDateSelect, preventScroll, unavailableDates, }: UseDayProps): UseDayReturnType;

package/hooks/use-day.js

@@ -1,9 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDay = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = require("react");
 const dayjs_en_1 = require("../utils/dayjs-en");
-function useDay({ date, dayRef, focusedDate, isDateBlocked, isDateFocused, isDateHovered, isDateInsideRange, isDateSelected, onDateFocus, onDateHover, onDateSelect, preventScroll, }) {
+const get_date_invervals_1 = require("../utils/get-date-invervals");
+function useDay({ date, dayRef, focusedDate, isDateBlocked, isDateFocused, isDateHovered, isDateInsideRange, isDateSelected, onDateFocus, onDateHover, onDateSelect, preventScroll, unavailableDates, }) {
     const onClick = (0, react_1.useCallback)(() => onDateSelect(date), [date, onDateSelect]);
     const onMouseEnter = (0, react_1.useCallback)(() => onDateHover(date), [date, onDateHover]);
     const disabled = isDateBlocked(date) && !isDateHovered(date);
@@ -34,8 +39,18 @@ function useDay({ date, dayRef, focusedDate, isDateBlocked, isDateFocused, isDat
             }
         }
     }, [date, onDateFocus]);
+    const sortedUnavailableDates = unavailableDates.slice().sort((a, b) => a.getTime() - b.getTime());
+    const dateIntervals = (0, get_date_invervals_1.getDateIntervals)(sortedUnavailableDates);
+    const _isFirstUnavailableDate = () => {
+        return dateIntervals.some((interval) => (0, dayjs_1.default)(interval.start).isSame(date, "day"));
+    };
+    const _isLastUnavailableDate = () => {
+        return dateIntervals.some((interval) => (0, dayjs_1.default)(interval.end).isSame(date, "day"));
+    };
     return {
         disabledDate: disabled,
+        isFirstDisabled: _isFirstUnavailableDate(),
+        isLastDisabled: _isLastUnavailableDate(),
         isHovered: isDateHovered(date),
         isSelected: isDateSelected(date),
         isInsideRange: isDateInsideRange ? isDateInsideRange(date) : false,

package/hooks/use-day.test.js

@@ -24,9 +24,36 @@ test("useDay", () => {
         isDateInsideRange: () => false,
         onDateHover: () => undefined,
         onDateSelect: () => undefined,
+        unavailableDates: [],
     }));
     expect(result.current.tabIndex).toBe(0);
     expect(result.current.disabledDate).toBe(false);
+    expect(result.current.isFirstDisabled).toBe(false);
+    expect(result.current.isLastDisabled).toBe(false);
+    expect(result.current.isHovered).toBe(false);
+    expect(result.current.isToday).toBe(false);
+    expect(result.current.isSelected).toBe(false);
+    expect(result.current.isInsideRange).toBe(false);
+    expect(result.current.isWithinHoverRange).toBe(false);
+});
+test("useDay with unavailableDates", () => {
+    const { result } = (0, react_hooks_1.renderHook)(() => (0, use_day_1.useDay)({
+        date: new Date("2021-09-05"),
+        isDateBlocked: () => true,
+        focusedDate: null,
+        onDateFocus: () => undefined,
+        isDateFocused: () => false,
+        isDateHovered: () => false,
+        isDateSelected: () => false,
+        isDateInsideRange: () => false,
+        onDateHover: () => undefined,
+        onDateSelect: () => undefined,
+        unavailableDates: [new Date("2021-09-05")],
+    }));
+    expect(result.current.tabIndex).toBe(0);
+    expect(result.current.disabledDate).toBe(true);
+    expect(result.current.isFirstDisabled).toBe(true);
+    expect(result.current.isLastDisabled).toBe(true);
     expect(result.current.isHovered).toBe(false);
     expect(result.current.isToday).toBe(false);
     expect(result.current.isSelected).toBe(false);
@@ -51,6 +78,7 @@ test("actions", () => {
         onDateHover: (date) => (hoveredDate = date),
         onDateSelect: (date) => (selectedDate = date),
         dayRef: ref.current,
+        unavailableDates: [new Date("2021-09-05")],
     }));
     // hover
     expect(result.current.isHovered).toBe(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/datepicker",
-  "version": "10.0.0",
+  "version": "10.8.0",
   "description": "A set of React hooks to create an awesome datepicker.",
   "main": "index.js",
   "scripts": {

package/utils/get-date-intervals.test.d.ts

@@ -0,0 +1 @@
+export {};

package/utils/get-date-intervals.test.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const dayjs_1 = __importDefault(require("dayjs"));
+const get_date_invervals_1 = require("./get-date-invervals");
+describe("getDateIntervals", () => {
+    it("should return empty array for empty input", () => {
+        expect((0, get_date_invervals_1.getDateIntervals)([])).toStrictEqual([]);
+    });
+    it("should return single date as an interval", () => {
+        const date = (0, dayjs_1.default)("2023-10-12").toDate();
+        expect((0, get_date_invervals_1.getDateIntervals)([date])).toStrictEqual([{ start: date, end: date }]);
+    });
+    it("should group contiguous dates into intervals", () => {
+        const dates = [
+            (0, dayjs_1.default)("2023-10-12").toDate(),
+            (0, dayjs_1.default)("2023-10-13").toDate(),
+            (0, dayjs_1.default)("2023-10-14").toDate(),
+            (0, dayjs_1.default)("2023-10-16").toDate(),
+            (0, dayjs_1.default)("2023-10-17").toDate(),
+        ];
+        const expected = [
+            { start: dates[0], end: dates[2] },
+            { start: dates[3], end: dates[4] },
+        ];
+        expect((0, get_date_invervals_1.getDateIntervals)(dates)).toStrictEqual(expected);
+    });
+    it("should handle non-contiguous dates", () => {
+        const dates = [(0, dayjs_1.default)("2023-10-12").toDate(), (0, dayjs_1.default)("2023-10-14").toDate(), (0, dayjs_1.default)("2023-10-16").toDate()];
+        const expected = [
+            { start: dates[0], end: dates[0] },
+            { start: dates[1], end: dates[1] },
+            { start: dates[2], end: dates[2] },
+        ];
+        expect((0, get_date_invervals_1.getDateIntervals)(dates)).toStrictEqual(expected);
+    });
+});

package/utils/get-date-invervals.d.ts

@@ -0,0 +1,3 @@
+type ReturnType = Record<"start" | "end", Date>[];
+export declare function getDateIntervals(dates: Date[]): ReturnType;
+export {};

package/utils/get-date-invervals.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDateIntervals = void 0;
+const dayjs_1 = __importDefault(require("dayjs"));
+function getDateIntervals(dates) {
+    const intervals = [];
+    let currentStart = dates[0];
+    let currentEnd = dates[0];
+    for (let i = 1; i < dates.length; i++) {
+        const currentDate = dates[i];
+        const nextDate = (0, dayjs_1.default)(currentEnd).add(1, "day").toDate();
+        // If the current date matches the expected next date, it's contiguous
+        if ((0, dayjs_1.default)(currentDate).isSame(nextDate, "day")) {
+            currentEnd = currentDate;
+        }
+        else {
+            intervals.push({ start: currentStart, end: currentEnd });
+            currentStart = currentDate;
+            currentEnd = currentDate;
+        }
+    }
+    if (dates[0]) {
+        // Push the last interval
+        intervals.push({ start: currentStart, end: currentEnd });
+    }
+    return intervals;
+}
+exports.getDateIntervals = getDateIntervals;