feat: add controlled state

Author: jason89521

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

@@ -1,17 +1,18 @@
-import { useEffect } from 'react';
+import { useState } from 'react';
 
 import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
 import SelectedDates from '../SelectedDates';
 
 export function Multiple() {
-  const calendarControl = useCalendarComponent({ selectType: 'multiple' });
-  const { selectedDates, value } = calendarControl;
-  // const { year, month, dayOfMonth } = selectedDate;
-
-  useEffect(() => {
-    console.log('value:', value);
-  }, [value]);
+  const [value, setValue] = useState([new Date()]);
+  console.log(value);
+  const calendarControl = useCalendarComponent({
+    selectType: 'multiple',
+    value,
+    onChange: setValue,
+  });
+  const { selectedDates } = calendarControl;
 
   return (
     <div>

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

@@ -1,9 +1,12 @@
+import { useState } from 'react';
+
 import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
 import SelectedDates from '../SelectedDates';
 
 export function Single() {
-  const calendarControl = useCalendarComponent();
+  const [value, setValue] = useState(new Date());
+  const calendarControl = useCalendarComponent({ value, onChange: setValue });
   const { selectedDates } = calendarControl;
 
   return (

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

@@ -6,14 +6,16 @@ import type {
   DateCellInfo,
   SelectDateOptions,
   SelectType,
+  Value,
 } from '../types';
-import { getDateInfoByIndex } from '../utils';
+import { getDateInfoByIndex, isSameDate, noop } from '../utils';
 import useDisplayedDate from './useDisplayedDate';
 
 export default function useCalendarComponent<S extends SelectType = 'single'>({
   initialDisplayedDate = new Date(),
   selectType,
-  defaultValue,
+  value,
+  onChange = noop,
 }: UseCalendarOptions<S> = {}) {
   const {
     displayedYear,
@@ -23,8 +25,23 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
     changeDisplayedYear,
     changeDisplayedMonth,
   } = useDisplayedDate(initialDisplayedDate);
-  const [selectedDates, setSelectedDates] = useState<Date[]>([]);
-  const [value, setValue] = useState(defaultValue);
+  const [internalValue, setInternalValue] = useState(value);
+  const selectedDates = (() => {
+    if (selectType === 'multiple') {
+      if (value) return value as Date[];
+      if (internalValue) return internalValue as Date[];
+    }
+
+    if (value) return [value] as Date[];
+    if (internalValue) return [internalValue] as Date[];
+
+    return [];
+  })();
+
+  const handleValueChange = (value: Value<S>) => {
+    onChange(value);
+    setInternalValue(value);
+  };
 
   const getDateCellInfo = (
     year: number,
@@ -46,30 +63,26 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
       const selectedDate = new Date(dateYear, dateMonth, dayOfMonth);
       if (selectType === 'multiple') {
         const newDates = selectedDates.filter(
-          date => date.toString() !== selectedDate.toString()
+          date => !isSameDate(date, selectedDate)
         );
         if (newDates.length === selectedDates.length)
           newDates.push(selectedDate);
         newDates.sort((a, b) => a.getTime() - b.getTime());
-        setSelectedDates(newDates);
-        setValue(newDates as any);
+        handleValueChange(newDates as any);
 
         return;
       }
 
-      setSelectedDates([selectedDate]);
-      setValue(selectedDate as any);
+      handleValueChange(selectedDate as any);
     };
 
     return {
       key: `${dateYear}-${dateMonth}-${dayOfMonth}`,
       year: dateYear,
       month: dateMonth,
       dayOfMonth: dayOfMonth,
-      isSelected: !!selectedDates.find(
-        date =>
-          date.toString() ===
-          new Date(dateYear, dateMonth, dayOfMonth).toString()
+      isSelected: !!selectedDates.find(date =>
+        isSameDate(date, new Date(dateYear, dateMonth, dayOfMonth))
       ),
       selectThisDate,
       ...info,
@@ -92,7 +105,6 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
     selectedDates,
     displayedYear,
     displayedMonth,
-    value,
     changeDisplayedYear,
     changeDisplayedMonth,
     getDateCellInfos,

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

@@ -1,7 +1,7 @@
 // useCalendarComponent
 export type SelectType = 'single' | 'multiple';
 
-export type DefaultValue<S extends SelectType> = S extends 'single'
+export type Value<S extends SelectType> = S extends 'single'
   ? Date
   : S extends 'multiple'
   ? Date[]
@@ -10,7 +10,8 @@ export type DefaultValue<S extends SelectType> = S extends 'single'
 export type UseCalendarOptions<S extends SelectType = 'single'> = {
   initialDisplayedDate?: Date;
   selectType?: S;
-  defaultValue?: DefaultValue<S>;
+  value?: Value<S>;
+  onChange?: (value: Value<S>) => void;
 };
 
 export interface DateInfo {

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

@@ -2,3 +2,5 @@ export * from './getNumberOfDays';
 export * from './isToday';
 export * from './locale';
 export * from './getDateInfo';
+export * from './noop';
+export * from './isSameDate';

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

@@ -0,0 +1,6 @@
+export function isSameDate(a: Date, b: Date) {
+  if (a.getFullYear() !== b.getFullYear()) return false;
+  if (a.getMonth() !== b.getMonth()) return false;
+  if (a.getDate() !== b.getDate()) return false;
+  return true;
+}

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

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function noop(...args: any[]) {
+  return;
+}