refactor: rename dayOfMonth/dayOfWeek to monthDay/weekDay

Author: jason89521

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

@@ -4,7 +4,7 @@ export default function CalendarCell({
   monthStatus,
   isSelected,
   isToday,
-  dayOfMonth,
+  monthDay: dayOfMonth,
   selectThisDate,
 }: DateCellInfo) {
   const title = isToday ? 'today' : undefined;

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

@@ -14,7 +14,7 @@ import useDisplayedDate from './useDisplayedDate';
 export default function useCalendarComponent<S extends SelectType = 'single'>({
   initialDisplayedDate = new Date(),
   selectType,
-  value,
+  value: userValue,
   onChange = noop,
 }: UseCalendarOptions<S> = {}) {
   const {
@@ -25,14 +25,14 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
     changeDisplayedYear,
     changeDisplayedMonth,
   } = useDisplayedDate(initialDisplayedDate);
-  const [internalValue, setInternalValue] = useState(value);
+  const [internalValue, setInternalValue] = useState(userValue);
   const selectedDates = (() => {
     if (selectType === 'multiple') {
-      if (value) return value as Date[];
+      if (userValue) return userValue as Date[];
       if (internalValue) return internalValue as Date[];
     }
 
-    if (value) return [value] as Date[];
+    if (userValue) return [userValue] as Date[];
     if (internalValue) return [internalValue] as Date[];
 
     return [];
@@ -51,7 +51,7 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
     const {
       year: dateYear,
       month: dateMonth,
-      dayOfMonth,
+      monthDay,
       ...info
     } = getDateInfoByIndex(year, month, cellIndex);
     const selectThisDate = (options: SelectDateOptions = {}) => {
@@ -60,7 +60,7 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
         setDisplayedYear(dateYear);
         setDisplayedMonth(dateMonth);
       }
-      const selectedDate = new Date(dateYear, dateMonth, dayOfMonth);
+      const selectedDate = new Date(dateYear, dateMonth, monthDay);
       if (selectType === 'multiple') {
         const newDates = selectedDates.filter(
           date => !isSameDate(date, selectedDate)
@@ -77,12 +77,12 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
     };
 
     return {
-      key: `${dateYear}-${dateMonth}-${dayOfMonth}`,
+      key: `${dateYear}-${dateMonth}-${monthDay}`,
       year: dateYear,
       month: dateMonth,
-      dayOfMonth: dayOfMonth,
+      monthDay,
       isSelected: !!selectedDates.find(date =>
-        isSameDate(date, new Date(dateYear, dateMonth, dayOfMonth))
+        isSameDate(date, new Date(dateYear, dateMonth, monthDay))
       ),
       selectThisDate,
       ...info,

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

@@ -17,21 +17,15 @@ export type UseCalendarOptions<S extends SelectType = 'single'> = {
 export interface DateInfo {
   year: number;
   month: number;
-  dayOfMonth: number;
-  dayOfWeek: number;
+  monthDay: number;
+  weekDay: number;
   isToday: boolean;
   monthStatus: 'current' | 'next' | 'previous';
 }
 
-export interface DateCellInfo {
+export interface DateCellInfo extends DateInfo {
   key: string;
-  year: number;
-  month: number;
-  dayOfMonth: number;
-  dayOfWeek: number;
-  isToday: boolean;
   isSelected: boolean;
-  monthStatus: 'current' | 'next' | 'previous';
   selectThisDate: (options?: SelectDateOptions) => void;
 }
 

…r-component/src/lib/utils/getDateInfo.ts …nent/src/lib/utils/getDateInfoByIndex.tspackages/react-use-calendar-component/src/lib/utils/getDateInfo.ts renamed to packages/react-use-calendar-component/src/lib/utils/getDateInfoByIndex.ts packages/react-use-calendar-component/src/lib/utils/getDateInfo.ts renamed to packages/react-use-calendar-component/src/lib/utils/getDateInfoByIndex.ts

@@ -55,8 +55,8 @@ export function getDateInfoByIndex(
   return {
     year: dateYear,
     month: dateMonth,
-    dayOfWeek: index % 7,
-    dayOfMonth,
+    weekDay: index % 7,
+    monthDay: dayOfMonth,
     monthStatus,
     isToday: isToday(dateYear, dateMonth, dayOfMonth),
   };

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

@@ -1,6 +1,6 @@
 export * from './getNumberOfDays';
 export * from './isToday';
 export * from './locale';
-export * from './getDateInfo';
+export * from './getDateInfoByIndex';
 export * from './noop';
 export * from './isSameDate';

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

@@ -11,11 +11,12 @@ describe('getDateInfoByIndex', () => {
 
   it('should determine the date is at the previous month', () => {
     previousIndexes.forEach((value, index) => {
-      const { year, month, dayOfMonth, monthStatus } = getDateInfoByIndex(
-        testYear,
-        testMonth,
-        value
-      );
+      const {
+        year,
+        month,
+        monthDay: dayOfMonth,
+        monthStatus,
+      } = getDateInfoByIndex(testYear, testMonth, value);
       expect(year).toBe(testYear);
       expect(month).toBe(testMonth - 1);
       expect(dayOfMonth).toBe(25 + index);
@@ -24,11 +25,12 @@ describe('getDateInfoByIndex', () => {
   });
   it('should determine the date is at the current month', () => {
     currentIndexes.forEach((value, index) => {
-      const { year, month, dayOfMonth, monthStatus } = getDateInfoByIndex(
-        testYear,
-        testMonth,
-        value
-      );
+      const {
+        year,
+        month,
+        monthDay: dayOfMonth,
+        monthStatus,
+      } = getDateInfoByIndex(testYear, testMonth, value);
       expect(year).toBe(testYear);
       expect(month).toBe(testMonth);
       expect(dayOfMonth).toBe(1 + index);
@@ -37,11 +39,12 @@ describe('getDateInfoByIndex', () => {
   });
   it('should determine the date is at the next month', () => {
     nextIndexes.forEach((value, index) => {
-      const { year, month, dayOfMonth, monthStatus } = getDateInfoByIndex(
-        testYear,
-        testMonth,
-        value
-      );
+      const {
+        year,
+        month,
+        monthDay: dayOfMonth,
+        monthStatus,
+      } = getDateInfoByIndex(testYear, testMonth, value);
       expect(year).toBe(testYear);
       expect(month).toBe(testMonth + 1);
       expect(dayOfMonth).toBe(1 + index);