refactor: removed weekIndex dayIndex props from cell

adaptui · Sep 22, 2020 · 2df03fa · 2df03fa
1 parent 10d28d0
commit 2df03fa
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 44 deletions.
diff --git a/src/calendar-v1/CalendarCell.ts b/src/calendar-v1/CalendarCell.ts
@@ -18,12 +18,9 @@ import { CalendarStateReturn, getCellOptionsReturn } from "./CalendarState";
 export type CalendarCellOptions = BoxOptions &
   Pick<CalendarStateReturn, "dateValue" | "isDisabled"> &
   Partial<Pick<RangeCalendarStateReturn, "highlightDate">> & {
-    weekIndex: number;
-    dayIndex: number;
     date: Date;
     getCellOptions: (
-      weekIndex: number,
-      dayIndex: number,
+      date: Date,
     ) => Partial<getRangeCellOptionsReturn & getCellOptionsReturn>;
   };
 
@@ -39,11 +36,8 @@ export const useCalendarCell = createHook<
   compose: useBox,
   keys: CALENDAR_CELL_KEYS,
 
-  useProps(
-    { date, getCellOptions, weekIndex, dayIndex, highlightDate, isDisabled },
-    htmlProps,
-  ) {
-    const cellProps = getCellOptions?.(weekIndex, dayIndex);
+  useProps({ date, getCellOptions, highlightDate, isDisabled }, htmlProps) {
+    const cellProps = getCellOptions?.(date);
 
     const onMouseEnter = () => {
       highlightDate && highlightDate(date);

diff --git a/src/calendar-v1/CalendarRangeState.ts b/src/calendar-v1/CalendarRangeState.ts
@@ -87,11 +87,8 @@ export function useRangeCalendarState(props: RangeCalendarProps) {
         calendar.setFocusedDate(date);
       }
     },
-    getCellOptions(
-      weekIndex: number,
-      dayIndex: number,
-    ): getRangeCellOptionsReturn {
-      const opts = calendar.getCellOptions(weekIndex, dayIndex);
+    getCellOptions(cellDate: Date): getRangeCellOptionsReturn {
+      const opts = calendar.getCellOptions(cellDate);
       const isSelected =
         highlightedRange &&
         opts.cellDate >= highlightedRange.start &&
@@ -101,12 +98,10 @@ export function useRangeCalendarState(props: RangeCalendarProps) {
         ...opts,
         isRangeSelection: isSelected,
         isSelected,
-        isRangeStart:
-          isSelected && (dayIndex === 0 || opts.cellDate.getDate() === 1),
+        isRangeStart: isSelected && opts.cellDate.getDate() === 1,
         isRangeEnd:
           isSelected &&
-          (dayIndex === 6 ||
-            opts.cellDate.getDate() === getDaysInMonth(calendar.currentMonth)),
+          opts.cellDate.getDate() === getDaysInMonth(calendar.currentMonth),
         isSelectionStart:
           highlightedRange && isSameDay(opts.cellDate, highlightedRange.start),
         isSelectionEnd:

diff --git a/src/calendar-v1/CalendarState.ts b/src/calendar-v1/CalendarState.ts
@@ -179,9 +179,7 @@ export function useCalendarState(props: IUseCalendarProps = {}) {
     selectDate(date: Date) {
       setValue(date);
     },
-    getCellOptions(weekIndex: number, dayIndex: number): getCellOptionsReturn {
-      const day = weekIndex * 7 + dayIndex - monthStartsAt + 1;
-      const cellDate = new Date(year, month, day);
+    getCellOptions(cellDate: Date): getCellOptionsReturn {
       const isCurrentMonth = cellDate.getMonth() === month;
 
       return {

diff --git a/src/calendar-v1/__keys.ts b/src/calendar-v1/__keys.ts
@@ -47,13 +47,8 @@ export const CALENDAR_BUTTON_KEYS = [
   "goto",
   "getAriaLabel",
 ] as const;
-export const CALENDAR_CELL_KEYS = [
-  ...CALENDAR_KEYS,
-  "weekIndex",
-  "dayIndex",
-  "date",
-] as const;
-export const CALENDAR_CELL_BUTTON_KEYS = [...CALENDAR_KEYS, "date"] as const;
+export const CALENDAR_CELL_KEYS = [...CALENDAR_KEYS, "date"] as const;
+export const CALENDAR_CELL_BUTTON_KEYS = CALENDAR_CELL_KEYS;
 export const CALENDAR_GRID_KEYS = CALENDAR_KEYS;
 export const CALENDAR_HEADER_KEYS = [...CALENDAR_GRID_KEYS, "format"] as const;
 export const CALENDAR_WEEK_TITLE_KEYS = [

diff --git a/src/calendar-v1/stories/Calendar.stories.tsx b/src/calendar-v1/stories/Calendar.stories.tsx
@@ -112,14 +112,7 @@ const CalendarComp: React.FC<IUseCalendarProps> = props => {
           {state.daysInMonth.map((week, weekIndex) => (
             <tr key={weekIndex}>
               {week.map((day, dayIndex) => (
-                <CalendarCell
-                  {...state}
-                  as="td"
-                  key={dayIndex}
-                  date={day}
-                  dayIndex={dayIndex}
-                  weekIndex={weekIndex}
-                >
+                <CalendarCell {...state} as="td" key={dayIndex} date={day}>
                   <CalendarCellButton {...state} date={day} />
                 </CalendarCell>
               ))}

diff --git a/src/calendar-v1/stories/RangeCalendar.stories.tsx b/src/calendar-v1/stories/RangeCalendar.stories.tsx
@@ -114,14 +114,7 @@ const RangeCalendarComp: React.FC<RangeCalendarProps> = props => {
           {state.daysInMonth.map((week, weekIndex) => (
             <tr key={weekIndex}>
               {week.map((day, dayIndex) => (
-                <CalendarCell
-                  dayIndex={dayIndex}
-                  weekIndex={weekIndex}
-                  {...state}
-                  as="td"
-                  key={dayIndex}
-                  date={day}
-                >
+                <CalendarCell {...state} as="td" key={dayIndex} date={day}>
                   <CalendarCellButton {...state} date={day} />
                 </CalendarCell>
               ))}