feat: support multiple selection

Author: jason89521

packages/react-use-calendar-component/src/app/App.tsx

@@ -1,11 +1,13 @@
 import { useState } from 'react';
 
+import Multiple from './components/Examples/Multiple';
 import Single from './components/Examples/Single';
 
-type ExampleType = 'single';
+type ExampleType = 'single' | 'multiple';
 
 const exampleMap = {
   single: <Single />,
+  multiple: <Multiple />,
 };
 
 export default function App() {
@@ -17,6 +19,7 @@ export default function App() {
         value={value}
         onChange={e => setValue(e.currentTarget.value as ExampleType)}>
         <option value='single'>single</option>
+        <option value='multiple'>multiple</option>
       </select>
       {exampleMap[value]}
     </div>

packages/react-use-calendar-component/src/app/components/Examples/Multiple.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+import useCalendarComponent from '../../../lib';
+import Calendar from '../Calendar';
+
+export default function Multiple() {
+  const calendarControl = useCalendarComponent({ selectType: 'multiple' });
+  const { selectedDates, value } = calendarControl;
+  // const { year, month, dayOfMonth } = selectedDate;
+
+  useEffect(() => {
+    console.log('value:', value);
+  }, [value]);
+
+  return (
+    <div>
+      <Calendar calendarControl={calendarControl} />
+      <p className='text-center mt-10 text-white flex flex-col'>
+        {selectedDates.map(date => {
+          const localeString = date.toLocaleString(navigator.language, {
+            dateStyle: 'long',
+          });
+          return <span key={localeString}>{localeString}</span>;
+        })}
+      </p>
+    </div>
+  );
+}

packages/react-use-calendar-component/src/app/components/Examples/Single.tsx

@@ -1,19 +1,28 @@
+import { useEffect } from 'react';
+
 import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
 
 export default function Single() {
   const calendarControl = useCalendarComponent();
-  // const { selectedDate } = calendarControl;
+  const { selectedDates, value } = calendarControl;
   // const { year, month, dayOfMonth } = selectedDate;
 
+  useEffect(() => {
+    console.log('value:', value);
+  }, [value]);
+
   return (
     <div>
       <Calendar calendarControl={calendarControl} />
-      {/* <p className='text-center mt-10 text-white'>
-        {new Date(year, month, dayOfMonth).toLocaleString(navigator.language, {
-          dateStyle: 'long',
+      <p className='text-center mt-10 text-white flex flex-col'>
+        {selectedDates.map(date => {
+          const localeString = date.toLocaleString(navigator.language, {
+            dateStyle: 'long',
+          });
+          return <span key={localeString}>{localeString}</span>;
         })}
-      </p> */}
+      </p>
     </div>
   );
 }

packages/react-use-calendar-component/src/lib/hooks/useCalendarComponent.ts

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import type {
   UseCalendarOptions,
   DateCellInfo,
-  SelectDate,
   SelectDateOptions,
   SelectType,
 } from '../types';
@@ -12,11 +11,11 @@ import useDisplayedDate from './useDisplayedDate';
 
 const CELLS_OF_PICKER = 42;
 
-export default function useCalendarComponent<S extends SelectType>({
+export default function useCalendarComponent<S extends SelectType = 'single'>({
   displayedDate = new Date(),
   selectType,
+  defaultValue,
 }: UseCalendarOptions<S> = {}) {
-  console.log(selectType);
   const {
     displayedYear,
     displayedMonth,
@@ -25,7 +24,8 @@ export default function useCalendarComponent<S extends SelectType>({
     changeDisplayedYear,
     changeDisplayedMonth,
   } = useDisplayedDate(displayedDate);
-  const [selectedDate, setSelectedDate] = useState<Date[]>([]);
+  const [selectedDates, setSelectedDates] = useState<Date[]>([]);
+  const [value, setValue] = useState(defaultValue);
 
   const getDateCellInfo = (cellIndex: number): DateCellInfo => {
     const prevMonth = displayedMonth === 0 ? 11 : displayedMonth - 1;
@@ -58,8 +58,28 @@ export default function useCalendarComponent<S extends SelectType>({
       };
     })();
     const weekDay = cellIndex % 7;
-    const selectThisDate = (options?: SelectDateOptions) => {
-      selectDate({ year, month, dayOfMonth }, options);
+    const selectThisDate = (options: SelectDateOptions = {}) => {
+      const { changeDisplayedValues = true } = options;
+      if (changeDisplayedValues) {
+        setDisplayedYear(year);
+        setDisplayedMonth(month);
+      }
+      const selectedDate = new Date(year, month, dayOfMonth);
+      if (selectType === 'multiple') {
+        const newDates = selectedDates.filter(
+          date => date.toString() !== selectedDate.toString()
+        );
+        if (newDates.length === selectedDates.length)
+          newDates.push(selectedDate);
+        newDates.sort((a, b) => a.getTime() - b.getTime());
+        setSelectedDates(newDates);
+        setValue(newDates as any);
+
+        return;
+      }
+
+      setSelectedDates([selectedDate]);
+      setValue(selectedDate as any);
     };
 
     return {
@@ -69,10 +89,12 @@ export default function useCalendarComponent<S extends SelectType>({
       dayOfMonth: dayOfMonth,
       dayOfWeek: weekDay,
       isToday: isToday(year, month, dayOfMonth),
-      isSelected:
-        year === selectedDate[0]?.getFullYear() &&
-        month === selectedDate[0]?.getMonth() &&
-        dayOfMonth === selectedDate[0]?.getDate(),
+      isSelected: !!selectedDates.find(
+        date =>
+          date.getFullYear() === year &&
+          date.getMonth() === month &&
+          date.getDate() === dayOfMonth
+      ),
       monthStatus:
         monthOffset < 0 ? 'previous' : monthOffset > 0 ? 'next' : 'current',
       selectThisDate,
@@ -88,21 +110,11 @@ export default function useCalendarComponent<S extends SelectType>({
     return arr;
   };
 
-  const selectDate: SelectDate = (
-    { year, month, dayOfMonth },
-    options = {}
-  ) => {
-    const { changeDisplayedValues = false } = options;
-    setSelectedDate([new Date(year, month, dayOfMonth)]);
-    if (changeDisplayedValues) {
-      setDisplayedYear(year);
-      setDisplayedMonth(month);
-    }
-  };
-
   return {
+    selectedDates,
     displayedYear,
     displayedMonth,
+    value,
     changeDisplayedYear,
     changeDisplayedMonth,
     getDateCellInfos,