Merge pull request #24 from jason89521/fix/calendar

Author: jason89521

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

@@ -5,13 +5,14 @@ import Calendar from '../Calendar';
 import StateInfo from '../StateInfo';
 
 export function Single() {
-  const [value, setValue] = useState(new Date());
+  const [value, setValue] = useState<Date | undefined>(new Date());
   const calendarControl = useCalendarComponent({ value, onChange: setValue });
 
   return (
     <div>
       <Calendar calendarControl={calendarControl} />
-      <StateInfo value={[value]} />
+      <StateInfo value={value ? [value] : []} />
+      <button onClick={() => setValue(undefined)}>clear</button>
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { CALENDAR_CELLS_NUM } from '../constant';
 import type {
@@ -34,12 +34,20 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
   } = useDisplayedDate(initialDisplayedDate);
   const [internalValue, setInternalValue] = useState(userValue);
   const selectedDates = normalizeValue(selectType, userValue || internalValue);
+  const isControlledRef = useRef(false);
 
   const handleValueChange = (value: Value<S>) => {
     onChange(value);
-    setInternalValue(value);
+    if (!isControlledRef.current) setInternalValue(value);
   };
 
+  useEffect(() => {
+    if (!isControlledRef.current && typeof userValue !== 'undefined') {
+      setInternalValue(undefined);
+      isControlledRef.current = true;
+    }
+  }, [userValue]);
+
   const getDateCellInfo = (
     year: number,
     month: number,

packages/react-use-calendar-component/src/test/useCalendarComponent.test.ts

@@ -131,4 +131,22 @@ describe('useCalendarComponent', () => {
       expect(isExcluded).toBe(true);
     });
   });
+
+  it('should not set internalValue if it is controlled by user', () => {
+    const { result } = renderHook(() => {
+      const [value, setValue] = useState<Date | undefined>(now);
+      return {
+        ...useCalendarComponent({ value, onChange: setValue }),
+        value,
+        setValue,
+      };
+    });
+    act(() => {
+      result.current.setValue(undefined);
+    });
+    const noSelectedDates = result.current
+      .getDateCellInfos()
+      .every(info => !info.isSelected);
+    expect(noSelectedDates).toBe(true);
+  });
 });