feat(unavailable-dates): add unavaiable dates feature

chore: add unavailableDates to useDate tests

fix: fix comments

chore: build

chore: clean up

Author: Rares Crisan

package-lock.json

@@ -2789,13 +2789,14 @@ function useDay(e) {
     d = e.onDateFocus,
     c = e.onDateHover,
     l = e.dayRef,
-    f = react.useCallback(
+    f = e.unavailableDates,
+    g = react.useCallback(
       function() {
         return u(t)
       },
       [t, u],
     ),
-    g = react.useCallback(
+    h = react.useCallback(
       function() {
         return c(t)
       },
@@ -2807,13 +2808,22 @@ function useDay(e) {
     },
     [l, t, a],
   )
-  var h = s(t) && !o(t)
+  var m =
+    (s(t) && !o(t)) ||
+    (function(e, t) {
+      return (
+        void 0 === e && (e = []),
+        e.some(function(e) {
+          return isSameDay(t, e)
+        })
+      )
+    })(f, t)
   return {
     tabIndex: null === r || a(t) ? 0 : -1,
     isSelected: n(t),
     isSelectedStartOrEnd: i(t),
     isWithinHoverRange: o(t),
-    disabledDate: h,
+    disabledDate: m,
     onKeyDown: function(e) {
       'ArrowRight' === e.key
         ? d(addDays(t, 1))
@@ -2823,8 +2833,8 @@ function useDay(e) {
         ? d(addDays(t, -7))
         : 'ArrowDown' === e.key && d(addDays(t, 7))
     },
-    onClick: h ? function() {} : f,
-    onMouseEnter: g,
+    onClick: m ? function() {} : g,
+    onMouseEnter: h,
   }
 }
 ;(exports.END_DATE = END_DATE),

packages/hooks/lib/index.cjs.js

@@ -2712,13 +2712,14 @@ function le(t) {
     l = t.onDateFocus,
     f = t.onDateHover,
     h = t.dayRef,
-    g = n(
+    g = t.unavailableDates,
+    w = n(
       function() {
         return d(e)
       },
       [e, d],
     ),
-    w = n(
+    m = n(
       function() {
         return f(e)
       },
@@ -2730,13 +2731,22 @@ function le(t) {
     },
     [h, e, o],
   )
-  var m = c(e) && !s(e)
+  var y =
+    (c(e) && !s(e)) ||
+    (function(t, e) {
+      return (
+        void 0 === t && (t = []),
+        t.some(function(t) {
+          return _t(e, t)
+        })
+      )
+    })(g, e)
   return {
     tabIndex: null === a || o(e) ? 0 : -1,
     isSelected: i(e),
     isSelectedStartOrEnd: u(e),
     isWithinHoverRange: s(e),
-    disabledDate: m,
+    disabledDate: y,
     onKeyDown: function(t) {
       'ArrowRight' === t.key
         ? l(Nt(e, 1))
@@ -2746,8 +2756,8 @@ function le(t) {
         ? l(Nt(e, -7))
         : 'ArrowDown' === t.key && l(Nt(e, 7))
     },
-    onClick: m ? function() {} : g,
-    onMouseEnter: w,
+    onClick: y ? function() {} : w,
+    onMouseEnter: m,
   }
 }
 export {

packages/hooks/lib/index.esm.js

@@ -11,6 +11,7 @@ interface UseDayProps {
   onDateSelect(date: Date): void
   onDateHover(date: Date): void
   dayRef: React.RefObject<HTMLButtonElement>
+  unavailableDates?: Date[]
 }
 declare function useDay({
   date,
@@ -24,6 +25,7 @@ declare function useDay({
   onDateFocus,
   onDateHover,
   dayRef,
+  unavailableDates,
 }: UseDayProps): {
   tabIndex: number
   isSelected: boolean

packages/hooks/lib/useDay/useDay.d.ts

@@ -1,5 +1,5 @@
 {
-  "name": "@datepicker-react/hooks",
+  "name": "@staydomio/datepicker-react-hooks",
   "version": "2.2.0",
   "description": "React hooks for datepicker.",
   "keywords": [
@@ -22,7 +22,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tresko/react-datepicker.git"
+    "url": "git+https://github.com/staydomio/react-datepicker.git"
   },
   "scripts": {
     "build": "../../node_modules/.bin/rollup -c rollup.config.js",

packages/hooks/package.json

@@ -24,6 +24,7 @@ test('should execute onClick callback', () => {
       isDateBlocked: jest.fn(),
       onDateFocus: jest.fn(),
       onDateHover: jest.fn(),
+      unavailableDates: [],
     }),
   )
 
@@ -50,6 +51,35 @@ test('should not execute onClick callback, because day is disabled', () => {
       isDateBlocked: () => true,
       onDateFocus: jest.fn(),
       onDateHover: jest.fn(),
+      unavailableDates: [],
+    }),
+  )
+
+  act(() => {
+    result.current.onClick()
+  })
+
+  expect(result.current.disabledDate).toBe(true)
+  expect(onDateSelect).not.toBeCalled()
+})
+
+test('should not allow date to be selected when supplied as unavailable', () => {
+  const onDateSelect = jest.fn()
+  const {result} = renderHook(() =>
+    useDay({
+      date,
+      // @ts-ignore
+      dayRef,
+      onDateSelect,
+      focusedDate: null,
+      isDateSelected: jest.fn(),
+      isDateFocused: jest.fn(),
+      isFirstOrLastSelectedDate: jest.fn(),
+      isDateHovered: jest.fn(),
+      isDateBlocked: () => true,
+      onDateFocus: jest.fn(),
+      onDateHover: jest.fn(),
+      unavailableDates: [new Date()],
     }),
   )
 
@@ -76,6 +106,7 @@ test('should be active', () => {
       isDateBlocked: jest.fn(),
       onDateFocus: jest.fn(),
       onDateHover: jest.fn(),
+      unavailableDates: [],
     }),
   )
 
@@ -97,6 +128,7 @@ test('should be active first or last day', () => {
       isDateBlocked: jest.fn(),
       onDateFocus: jest.fn(),
       onDateHover: jest.fn(),
+      unavailableDates: [],
     }),
   )
 
@@ -118,6 +150,7 @@ test('should be within range', () => {
       isDateBlocked: jest.fn(),
       onDateFocus: jest.fn(),
       onDateHover: jest.fn(),
+      unavailableDates: [],
     }),
   )
 
@@ -139,6 +172,7 @@ test('tabIndex should be 0', () => {
       isDateBlocked: jest.fn(),
       onDateFocus: jest.fn(),
       onDateHover: jest.fn(),
+      unavailableDates: [],
     }),
   )
 
@@ -160,6 +194,7 @@ test('should be unfocused', () => {
       isDateBlocked: jest.fn(),
       onDateFocus: jest.fn(),
       onDateHover: jest.fn(),
+      unavailableDates: [],
     }),
   )
 
@@ -181,6 +216,7 @@ test('should be focused', () => {
       isDateBlocked: jest.fn(),
       onDateFocus: jest.fn(),
       onDateHover: jest.fn(),
+      unavailableDates: [],
     }),
   )
 

packages/hooks/src/useDay/useDay.test.ts

@@ -1,5 +1,6 @@
 import React, {useCallback, useEffect} from 'react'
 import addDays from 'date-fns/addDays'
+import {isSameDay} from 'date-fns'
 
 interface UseDayProps {
   date: Date
@@ -13,6 +14,7 @@ interface UseDayProps {
   onDateSelect(date: Date): void
   onDateHover(date: Date): void
   dayRef: React.RefObject<HTMLButtonElement>
+  unavailableDates?: Date[]
 }
 
 function useDay({
@@ -27,16 +29,23 @@ function useDay({
   onDateFocus,
   onDateHover,
   dayRef,
+  unavailableDates,
 }: UseDayProps) {
   const onClick = useCallback(() => onDateSelect(date), [date, onDateSelect])
   const onMouseEnter = useCallback(() => onDateHover(date), [date, onDateHover])
+
+  const isInUnavailableDates = (unavailableDates: Date[] = [], date: Date) => {
+    return unavailableDates.some(_date => isSameDay(date, _date))
+  }
+
   useEffect(() => {
     if (dayRef && dayRef.current && isDateFocused(date)) {
       dayRef.current.focus()
     }
   }, [dayRef, date, isDateFocused])
 
-  const disabled = isDateBlocked(date) && !isDateHovered(date)
+  const disabled =
+    (isDateBlocked(date) && !isDateHovered(date)) || isInUnavailableDates(unavailableDates, date)
 
   return {
     tabIndex: focusedDate === null || isDateFocused(date) ? 0 : -1,