refactor: Move cell className logic into hooks

Author: zombieJ

src/hooks/useCellClassName.ts

@@ -0,0 +1,61 @@
+import { isInRange } from '../utils/dateUtil';
+import { GenerateConfig } from '../generate';
+import { RangeValue, NullableDateType } from '../interface';
+
+export default function useCellClassName<DateType>({
+  cellPrefixCls,
+  generateConfig,
+  rangedValue,
+  hoverRangedValue,
+  isSameCell,
+  today,
+  value,
+}: {
+  cellPrefixCls: string;
+  generateConfig: GenerateConfig<DateType>;
+  isSameCell: (
+    current: NullableDateType<DateType>,
+    target: NullableDateType<DateType>,
+  ) => boolean;
+  rangedValue?: RangeValue<DateType>;
+  hoverRangedValue?: RangeValue<DateType>;
+  today?: DateType;
+  value?: DateType;
+}) {
+  function getClassName(currentDate: DateType) {
+    return {
+      [`${cellPrefixCls}-in-range`]: isInRange<DateType>(
+        generateConfig,
+        rangedValue && rangedValue[0],
+        rangedValue && rangedValue[1],
+        currentDate,
+      ),
+      [`${cellPrefixCls}-range-start`]: isSameCell(
+        rangedValue && rangedValue[0],
+        currentDate,
+      ),
+      [`${cellPrefixCls}-range-end`]: isSameCell(
+        rangedValue && rangedValue[1],
+        currentDate,
+      ),
+      [`${cellPrefixCls}-range-hover`]: isInRange(
+        generateConfig,
+        hoverRangedValue && hoverRangedValue[0],
+        hoverRangedValue && hoverRangedValue[1],
+        currentDate,
+      ),
+      [`${cellPrefixCls}-range-hover-start`]: isSameCell(
+        hoverRangedValue && hoverRangedValue[0],
+        currentDate,
+      ),
+      [`${cellPrefixCls}-range-hover-end`]: isSameCell(
+        hoverRangedValue && hoverRangedValue[1],
+        currentDate,
+      ),
+      [`${cellPrefixCls}-today`]: isSameCell(today, currentDate),
+      [`${cellPrefixCls}-selected`]: isSameCell(value, currentDate),
+    };
+  }
+
+  return getClassName;
+}

src/panels/DatePanel/DateBody.tsx

@@ -6,11 +6,11 @@ import {
   getWeekStartDate,
   isSameDate,
   isSameMonth,
-  isInRange,
 } from '../../utils/dateUtil';
 import { Locale } from '../../interface';
 import RangeContext from '../../RangeContext';
 import PanelContext from '../../PanelContext';
+import useCellClassName from '../../hooks/useCellClassName';
 
 export type DateRender<DateType> = (
   currentDate: DateType,
@@ -76,6 +76,16 @@ function DateBody<DateType>({
   // =============================== Date ===============================
   const rows: React.ReactNode[] = [];
   const startDate = getWeekStartDate(locale.locale, generateConfig, viewDate);
+  const getCellClassName = useCellClassName({
+    cellPrefixCls: datePrefixCls,
+    today,
+    value,
+    generateConfig,
+    rangedValue,
+    hoverRangedValue,
+    isSameCell: (current, target) =>
+      isSameDate(generateConfig, current, target),
+  });
 
   for (let y = 0; y < rowCount; y += 1) {
     const row: React.ReactNode[] = [];
@@ -118,48 +128,8 @@ function DateBody<DateType>({
               currentDate,
               viewDate,
             ),
-            [`${datePrefixCls}-in-range`]: isInRange(
-              generateConfig,
-              rangedValue && rangedValue[0],
-              rangedValue && rangedValue[1],
-              currentDate,
-            ),
-            [`${datePrefixCls}-range-start`]: isSameDate(
-              generateConfig,
-              rangedValue && rangedValue[0],
-              currentDate,
-            ),
-            [`${datePrefixCls}-range-end`]: isSameDate(
-              generateConfig,
-              rangedValue && rangedValue[1],
-              currentDate,
-            ),
-            [`${datePrefixCls}-range-hover`]: isInRange(
-              generateConfig,
-              hoverRangedValue && hoverRangedValue[0],
-              hoverRangedValue && hoverRangedValue[1],
-              currentDate,
-            ),
-            [`${datePrefixCls}-range-hover-start`]: isSameDate(
-              generateConfig,
-              hoverRangedValue && hoverRangedValue[0],
-              currentDate,
-            ),
-            [`${datePrefixCls}-range-hover-end`]: isSameDate(
-              generateConfig,
-              hoverRangedValue && hoverRangedValue[1],
-              currentDate,
-            ),
-            [`${datePrefixCls}-today`]: isSameDate(
-              generateConfig,
-              today,
-              currentDate,
-            ),
-            [`${datePrefixCls}-selected`]: isSameDate(
-              generateConfig,
-              value,
-              currentDate,
-            ),
+
+            ...getCellClassName(currentDate),
           })}
         >
           {dateRender ? (

src/utils/dateUtil.ts

@@ -108,11 +108,11 @@ export function isEqual<DateType>(
 /** Between in date but not equal of date */
 export function isInRange<DateType>(
   generateConfig: GenerateConfig<DateType>,
-  startDate: DateType,
-  endDate: DateType,
-  current: DateType,
+  startDate: NullableDateType<DateType>,
+  endDate: NullableDateType<DateType>,
+  current: NullableDateType<DateType>,
 ) {
-  if (!startDate || !endDate) {
+  if (!startDate || !endDate || !current) {
     return false;
   }