refactor: use array to store selected date

Author: jason89521

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

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import useCalendarComponent from '../../lib';
 import CalendarBody from './CalendarBody';
 import CalendarHeader from './CalendarHeader';
@@ -12,17 +10,11 @@ export default function Calendar({ calendarControl }: Props) {
   const {
     displayedYear,
     displayedMonth,
-    selectedDate,
     changeDisplayedMonth,
     changeDisplayedYear,
     getDateCellInfos,
   } = calendarControl;
 
-  useEffect(() => {
-    const { year, month, dayOfMonth } = selectedDate;
-    console.log(new Date(year, month, dayOfMonth).toLocaleString());
-  }, [selectedDate]);
-
   return (
     <div className='bg-white shadow-2xl rounded-3xl p-8 w-[500px]'>
       <CalendarHeader

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

@@ -19,9 +19,33 @@ export default function CalendarBody({ dateCellInfos }: Props) {
         ))}
       </div>
       <div className='grid grid-cols-7 gap-y-4'>
-        {dateCellInfos.map(info => (
-          <CalendarCell key={info.key} dateCellInfo={info} />
-        ))}
+        {dateCellInfos.map(
+          ({
+            key,
+            monthStatus,
+            isSelected,
+            isToday,
+            dayOfMonth,
+            selectThisDate,
+          }) => {
+            let className = 'rounded-full';
+            if (monthStatus !== 'current')
+              className = `${className} text-slate-300`;
+            if (isSelected) className = `${className} bg-green-200`;
+            if (isToday && !isSelected) className = `${className} bg-amber-200`;
+            if (!isToday && !isSelected)
+              className = `${className} hover:bg-stone-100`;
+
+            return (
+              <CalendarCell
+                key={key}
+                onClick={selectThisDate}
+                className={className}
+                dayOfMonth={dayOfMonth}
+              />
+            );
+          }
+        )}
       </div>
     </div>
   );

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

@@ -1,24 +1,16 @@
-import type { DateCellInfo } from '../../lib/types';
-
 interface Props {
-  dateCellInfo: DateCellInfo;
+  className: string;
+  onClick: () => void;
+  dayOfMonth: number;
 }
 
-export default function CalendarCell({ dateCellInfo }: Props) {
-  const { key, monthStatus, dayOfMonth, isToday, isSelected, selectThisDate } =
-    dateCellInfo;
-  let className = 'rounded-full hover:bg-stone-100';
-  if (monthStatus !== 'current') className = `${className} text-slate-300`;
-  if (isSelected) className = `${className} bg-green-200`;
-  if (isToday && !isSelected) className = `${className} bg-amber-200`;
-
+export default function CalendarCell({
+  className,
+  onClick,
+  dayOfMonth,
+}: Props) {
   return (
-    <button
-      key={key}
-      className={className}
-      onClick={() => {
-        selectThisDate({ changeDisplayedValues: true });
-      }}>
+    <button className={className} onClick={onClick}>
       <div className='flex items-center justify-center'>
         <span>{dayOfMonth}</span>
       </div>

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

@@ -2,7 +2,18 @@ import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
 
 export default function Single() {
-  const calendarControl = useCalendarComponent();
+  const calendarControl = useCalendarComponent({});
+  // const { selectedDate } = calendarControl;
+  // const { year, month, dayOfMonth } = selectedDate;
 
-  return <Calendar calendarControl={calendarControl} />;
+  return (
+    <div>
+      <Calendar calendarControl={calendarControl} />
+      {/* <p className='text-center mt-10 text-white'>
+        {new Date(year, month, dayOfMonth).toLocaleString(navigator.language, {
+          dateStyle: 'long',
+        })}
+      </p> */}
+    </div>
+  );
 }

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

@@ -1,26 +1,28 @@
 import { useState } from 'react';
 
 import type {
+  UseCalendarOptions,
   DateCellInfo,
   SelectDate,
   ChangeDisplayedValue,
   SelectDateOptions,
+  ControlOptions,
 } from '../types';
-import getNumberOfDays from '../utils/getNumberOfDays';
-import isToday from '../utils/isToday';
-
-const dateInstance = new Date();
+import { getNumberOfDays, isToday } from '../utils';
 
 const CELLS_OF_PICKER = 42;
 
-export default function useCalendarComponent(initialDate: Date = new Date()) {
-  const [displayedYear, setDisplayedYear] = useState(initialDate.getFullYear());
-  const [displayedMonth, setDisplayedMonth] = useState(initialDate.getMonth());
-  const [selectedDate, internalSetSelectedDate] = useState({
-    year: displayedYear,
-    month: displayedMonth,
-    dayOfMonth: dateInstance.getDate(),
-  });
+export default function useCalendarComponent<C extends ControlOptions>({
+  displayedDate = new Date(),
+}: UseCalendarOptions<C> = {}) {
+  const [displayedYear, setDisplayedYear] = useState(
+    displayedDate.getFullYear()
+  );
+  const [displayedMonth, setDisplayedMonth] = useState(
+    displayedDate.getMonth()
+  );
+
+  const [selectedDate, setSelectedDate] = useState<Date[]>([]);
 
   const getDateCellInfo = (cellIndex: number): DateCellInfo => {
     const prevMonth = displayedMonth === 0 ? 11 : displayedMonth - 1;
@@ -65,9 +67,9 @@ export default function useCalendarComponent(initialDate: Date = new Date()) {
       dayOfWeek: weekDay,
       isToday: isToday(year, month, dayOfMonth),
       isSelected:
-        year === selectedDate.year &&
-        month === selectedDate.month &&
-        dayOfMonth === selectedDate.dayOfMonth,
+        year === selectedDate[0]?.getFullYear() &&
+        month === selectedDate[0]?.getMonth() &&
+        dayOfMonth === selectedDate[0]?.getDate(),
       monthStatus:
         monthOffset < 0 ? 'previous' : monthOffset > 0 ? 'next' : 'current',
       selectThisDate,
@@ -111,19 +113,21 @@ export default function useCalendarComponent(initialDate: Date = new Date()) {
     } else setDisplayedMonth(nextMonth);
   };
 
-  const selectDate: SelectDate = (dateUnit, options = {}) => {
+  const selectDate: SelectDate = (
+    { year, month, dayOfMonth },
+    options = {}
+  ) => {
     const { changeDisplayedValues = false } = options;
-    internalSetSelectedDate(dateUnit);
+    setSelectedDate([new Date(year, month, dayOfMonth)]);
     if (changeDisplayedValues) {
-      setDisplayedYear(dateUnit.year);
-      setDisplayedMonth(dateUnit.month);
+      setDisplayedYear(year);
+      setDisplayedMonth(month);
     }
   };
 
   return {
     displayedYear,
     displayedMonth,
-    selectedDate,
     changeDisplayedYear,
     changeDisplayedMonth,
     getDateCellInfos,

packages/react-use-calendar-component/src/lib/types.ts

@@ -1,3 +1,31 @@
+// useCalendarComponent
+export interface SingleOptions {
+  defaultSelectedDate?: Date;
+  type: 'single';
+}
+
+export interface MultipleOptions {
+  defaultSelectedDate?: Date[];
+  type: 'multiple';
+}
+
+export interface RangeOptions {
+  defaultRange?: [Date, Date];
+  type: 'range';
+}
+
+export type ControlOptions = SingleOptions | MultipleOptions;
+export type SelectedDate<C extends ControlOptions> = C extends SingleOptions
+  ? SingleOptions['defaultSelectedDate']
+  : C extends MultipleOptions
+  ? MultipleOptions['defaultSelectedDate']
+  : never;
+
+export type UseCalendarOptions<C extends ControlOptions> = {
+  displayedDate?: Date;
+  controlOptions?: C;
+};
+
 export interface DateCellInfo {
   key: string;
   year: number;

packages/react-use-calendar-component/src/lib/utils/getNumberOfDays.ts

@@ -1,5 +1,5 @@
 const MAGIC_NUMBER = 40;
 
-export default function getNumberOfDays(year: number, month: number) {
+export function getNumberOfDays(year: number, month: number) {
   return MAGIC_NUMBER - new Date(year, month, MAGIC_NUMBER).getDate();
 }

packages/react-use-calendar-component/src/lib/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './getNumberOfDays';
+export * from './isToday';
+export * from './locale';

packages/react-use-calendar-component/src/lib/utils/isToday.ts

@@ -1,4 +1,4 @@
-export default function isToday(year: number, month: number, date: number) {
+export function isToday(year: number, month: number, date: number) {
   const todayDate = new Date();
 
   return (

packages/react-use-calendar-component/tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "noUncheckedIndexedAccess": true
   },
   "include": ["src/"],
   "references": [{ "path": "./tsconfig.node.json" }]