refactor: extract displayed to be a new hook

Author: jason89521

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

@@ -2,7 +2,7 @@ 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;
 

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

@@ -4,24 +4,27 @@ import type {
   UseCalendarOptions,
   DateCellInfo,
   SelectDate,
-  ChangeDisplayedValue,
   SelectDateOptions,
-  ControlOptions,
+  SelectType,
 } from '../types';
 import { getNumberOfDays, isToday } from '../utils';
+import useDisplayedDate from './useDisplayedDate';
 
 const CELLS_OF_PICKER = 42;
 
-export default function useCalendarComponent<C extends ControlOptions>({
+export default function useCalendarComponent<S extends SelectType>({
   displayedDate = new Date(),
-}: UseCalendarOptions<C> = {}) {
-  const [displayedYear, setDisplayedYear] = useState(
-    displayedDate.getFullYear()
-  );
-  const [displayedMonth, setDisplayedMonth] = useState(
-    displayedDate.getMonth()
-  );
-
+  selectType,
+}: UseCalendarOptions<S> = {}) {
+  console.log(selectType);
+  const {
+    displayedYear,
+    displayedMonth,
+    setDisplayedYear,
+    setDisplayedMonth,
+    changeDisplayedYear,
+    changeDisplayedMonth,
+  } = useDisplayedDate(displayedDate);
   const [selectedDate, setSelectedDate] = useState<Date[]>([]);
 
   const getDateCellInfo = (cellIndex: number): DateCellInfo => {
@@ -85,34 +88,6 @@ export default function useCalendarComponent<C extends ControlOptions>({
     return arr;
   };
 
-  const changeDisplayedYear: ChangeDisplayedValue = (value, options = {}) => {
-    const { override = false } = options;
-    if (override) {
-      setDisplayedYear(value);
-      return;
-    }
-
-    if (displayedYear + value >= 0) setDisplayedYear(displayedYear + value);
-    else setDisplayedYear(0);
-  };
-
-  const changeDisplayedMonth: ChangeDisplayedValue = (value, options = {}) => {
-    const { override = false } = options;
-    if (override) {
-      setDisplayedMonth(value);
-      return;
-    }
-
-    const nextMonth = displayedMonth + value;
-    if (nextMonth < 0) {
-      setDisplayedMonth(11);
-      changeDisplayedYear(-1);
-    } else if (nextMonth > 11) {
-      setDisplayedMonth(0);
-      changeDisplayedYear(1);
-    } else setDisplayedMonth(nextMonth);
-  };
-
   const selectDate: SelectDate = (
     { year, month, dayOfMonth },
     options = {}
@@ -131,6 +106,5 @@ export default function useCalendarComponent<C extends ControlOptions>({
     changeDisplayedYear,
     changeDisplayedMonth,
     getDateCellInfos,
-    selectDate,
   };
 }

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

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+import type { ChangeDisplayedValue } from '../types';
+
+export default function useDisplayedDate(date: Date) {
+  const [displayedYear, setDisplayedYear] = useState(date.getFullYear());
+  const [displayedMonth, setDisplayedMonth] = useState(date.getMonth());
+
+  const changeDisplayedYear: ChangeDisplayedValue = (value, options = {}) => {
+    const { override = false } = options;
+    if (override) {
+      setDisplayedYear(value);
+      return;
+    }
+
+    if (displayedYear + value >= 0) setDisplayedYear(displayedYear + value);
+    else setDisplayedYear(0);
+  };
+
+  const changeDisplayedMonth: ChangeDisplayedValue = (value, options = {}) => {
+    const { override = false } = options;
+    if (override) {
+      setDisplayedMonth(value);
+      return;
+    }
+
+    const nextMonth = displayedMonth + value;
+    if (nextMonth < 0) {
+      setDisplayedMonth(11);
+      changeDisplayedYear(-1);
+    } else if (nextMonth > 11) {
+      setDisplayedMonth(0);
+      changeDisplayedYear(1);
+    } else setDisplayedMonth(nextMonth);
+  };
+
+  return {
+    displayedYear,
+    displayedMonth,
+    setDisplayedYear,
+    setDisplayedMonth,
+    changeDisplayedYear,
+    changeDisplayedMonth,
+  };
+}

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

@@ -1,29 +1,16 @@
 // 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 SelectType = 'single' | 'multiple';
 
-export type ControlOptions = SingleOptions | MultipleOptions;
-export type SelectedDate<C extends ControlOptions> = C extends SingleOptions
-  ? SingleOptions['defaultSelectedDate']
-  : C extends MultipleOptions
-  ? MultipleOptions['defaultSelectedDate']
+export type DefaultValue<S extends SelectType> = S extends 'single'
+  ? Date
+  : S extends 'multiple'
+  ? Date[]
   : never;
 
-export type UseCalendarOptions<C extends ControlOptions> = {
+export type UseCalendarOptions<S extends SelectType = 'single'> = {
   displayedDate?: Date;
-  controlOptions?: C;
+  selectType?: S;
+  defaultValue?: DefaultValue<S>;
 };
 
 export interface DateCellInfo {