Merge pull request #139 from breeffy/issue-138

Allow to disable unselection of last selected date
breeffy · Nov 25, 2021 · 4713c44 · 4713c44
2 parents ec47003 + 5bf0bc0
commit 4713c44
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 18 deletions.
diff --git a/packages/calendars/src/Calendar.tsx b/packages/calendars/src/Calendar.tsx
@@ -98,6 +98,13 @@ export type CalendarProps = {
    */
   selectionMode?: CalendarSelectionMode;
 
+  /**
+   * If calendar has only one (last) selected date,
+   * can we unselect it by tapping on this date?
+   * @defaultValue `true`
+   */
+  allowDeselectLastSelectedDate?: boolean;
+
   /**
    * How much months can be scrolled over.
    * @defaultValue `multipleMonths`
@@ -115,6 +122,7 @@ export type CalendarProps = {
    * If provided, will be highlighted in active color.
    */
   activeCalendarDay?: CalendarDate;
+
   /**
    * Theme object to customize calendar appearance
    */
@@ -153,6 +161,7 @@ export const Calendar = forwardRef<CalendarMethods, CalendarProps>(
       scrollMode = 'oneMonth',
       scrollModeDeceleration = 'normal',
       activeCalendarDay: _activeCalendarDay,
+      allowDeselectLastSelectedDate = true,
       theme = CalendarThemeLight,
       performanceProps,
       style: _containerStyle,
@@ -265,21 +274,28 @@ export const Calendar = forwardRef<CalendarMethods, CalendarProps>(
       ]
     );
 
-    const [selectedDates, selectDate, deselectDate] = useSelectedDates(
-      selectionMode,
-      initialSelectedDates
-    );
+    const [selectedDates, isLastSelectedDate, selectDate, deselectDate] =
+      useSelectedDates(selectionMode, initialSelectedDates);
 
     const onCalendarDayStateChange = useCallback(
       (day: CalendarDate, calendarKind: CalendarDayKind) => {
         if (calendarKind === CalendarDayKind.SELECTED) {
           selectDate(day);
+          onDayStateChange?.(day, calendarKind);
         } else if (calendarKind === CalendarDayKind.DEFAULT) {
-          deselectDate(day);
+          deselectDate(day, allowDeselectLastSelectedDate);
+          if (allowDeselectLastSelectedDate || !isLastSelectedDate) {
+            onDayStateChange?.(day, calendarKind);
+          }
         }
-        onDayStateChange?.(day, calendarKind);
       },
-      [selectDate, deselectDate, onDayStateChange]
+      [
+        allowDeselectLastSelectedDate,
+        isLastSelectedDate,
+        selectDate,
+        deselectDate,
+        onDayStateChange
+      ]
     );
 
     useImperativeHandle(
@@ -308,6 +324,7 @@ export const Calendar = forwardRef<CalendarMethods, CalendarProps>(
         selectDate: selectDate,
         deselectDate: deselectDate,
         selectedDates: selectedDates,
+        allowDeselectLastSelectedDate: allowDeselectLastSelectedDate,
         monthsBefore,
         monthsAfter,
         startCalendarYearAndMonth: startCalendarYearAndMonth,
@@ -323,6 +340,7 @@ export const Calendar = forwardRef<CalendarMethods, CalendarProps>(
         selectDate,
         deselectDate,
         selectedDates,
+        allowDeselectLastSelectedDate,
         monthsBefore,
         monthsAfter,
         startCalendarYearAndMonth,

diff --git a/packages/calendars/src/hooks/useSelectedDates.ts b/packages/calendars/src/hooks/useSelectedDates.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { invariant } from '@breeffy/invariants';
 import { isCalendarDatesEqual } from '../helpers';
 import type { CalendarDate, CalendarSelectionMode } from '../types';
@@ -10,8 +10,12 @@ export const useSelectedDates = (
   initialSelectedDates: CalendarDate[]
 ): [
   selectedDates: SelectedDates,
+  isLastSelectedDate: boolean,
   selectDate: (day: CalendarDate) => void,
-  deselectDate: (day: CalendarDate) => void
+  deselectDate: (
+    day: CalendarDate,
+    allowDeselectLastSelectedDate?: boolean
+  ) => void
 ] => {
   invariant(
     selectionMode === 'multipleDays' ||
@@ -23,6 +27,11 @@ export const useSelectedDates = (
 
   const [selectedDates, setSelectedDates] =
     useState<SelectedDates>(initialSelectedDates);
+
+  const isLastSelectedDate = useMemo(() => {
+    return selectedDates.length === 1;
+  }, [selectedDates]);
+
   const selectDate = useCallback(
     (day: CalendarDate) => {
       if (selectionMode === 'singleDay') {
@@ -34,11 +43,19 @@ export const useSelectedDates = (
     [selectionMode]
   );
 
-  const deselectDate = useCallback((day: CalendarDate) => {
-    setSelectedDates(prevSelectedDates =>
-      prevSelectedDates.filter(it => !isCalendarDatesEqual(it, day))
-    );
-  }, []);
+  const deselectDate = useCallback(
+    (day: CalendarDate, allowDeselectLastSelectedDate: boolean = true) => {
+      setSelectedDates(prevSelectedDates => {
+        const allowDeselect =
+          allowDeselectLastSelectedDate || !isLastSelectedDate;
+        if (allowDeselect) {
+          return prevSelectedDates.filter(it => !isCalendarDatesEqual(it, day));
+        }
+        return prevSelectedDates;
+      });
+    },
+    [isLastSelectedDate]
+  );
 
-  return [selectedDates, selectDate, deselectDate];
+  return [selectedDates, isLastSelectedDate, selectDate, deselectDate];
 };
diff --git a/packages/calendars/src/types/public.ts b/packages/calendars/src/types/public.ts
@@ -43,9 +43,15 @@ export interface CalendarMethods {
   select: (date: CalendarDate) => void;
   /**
    * Deselect specific date on calendar.
-   * If it is not selected function call is no-op.
+   *
+   * If `date` is not selected function call is no-op.
+   *
+   * If `allowDeselectLastSelectedDate` is `false` and `date` is only selected date call is no-op.
    */
-  deselect: (date: CalendarDate) => void;
+  deselect: (
+    date: CalendarDate,
+    allowDeselectLastSelectedDate?: boolean | undefined
+  ) => void;
 }
 
 export type CalendarCurrentAnimatedMonthFromCommonEra =

diff --git a/packages/example-app/src/stories/Calendar.stories.tsx b/packages/example-app/src/stories/Calendar.stories.tsx
@@ -35,7 +35,8 @@ const CalendarMeta: ComponentMeta<typeof Calendar> = {
     monthsBefore: 24,
     monthsAfter: 24,
     scrollMode: 'oneMonth',
-    selectionMode: 'singleDay'
+    selectionMode: 'singleDay',
+    allowDeselectLastSelectedDate: true
   }
 };