抽取公共代码

tusen-ai · Sep 23, 2021 · d0c70dc · d0c70dc
1 parent fac9c2d
commit d0c70dc
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 84 deletions.
diff --git a/src/date-picker/src/panel/month.tsx b/src/date-picker/src/panel/month.tsx
@@ -5,6 +5,7 @@ import { useCalendar } from './use-calendar'
 import { warnOnce } from '../../../_utils'
 import { NScrollbar } from '../../../scrollbar'
 import { VirtualList } from 'vueuc'
+import { MonthItem, YearItem } from '../utils'
 
 /**
  * Month Panel
@@ -30,6 +31,40 @@ export default defineComponent({
   },
   render () {
     const { mergedClsPrefix, mergedTheme, shortcuts } = this
+    const itemRenderer = (item: YearItem | MonthItem, i: number): VNode => {
+      return (
+        <div
+          data-n-date
+          key={i}
+          data-selected={item.selected ? '' : null}
+          class={[
+            `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item`,
+            {
+              [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`]:
+                item.type === 'month'
+                  ? (item as MonthItem).inCurrentMonth
+                  : (item as YearItem).inCurrentYear,
+              [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`]:
+                item.selected,
+              [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]:
+                this.mergedIsDateDisabled(item.ts)
+            }
+          ]}
+          onClick={() => this.handleDateClick(item)}
+        >
+          {item.type === 'month'
+            ? (item as MonthItem).showText
+            : (item as YearItem).dateObject.year}
+          {(
+            item.type === 'month'
+              ? (item as MonthItem).inCurrentMonth
+              : (item as YearItem).inCurrentYear
+          ) ? (
+            <div class={`${mergedClsPrefix}-date-panel-month-calendar__sup`} />
+              ) : null}
+        </div>
+      )
+    }
     return (
       <div
         ref="selfRef"
@@ -52,32 +87,9 @@ export default defineComponent({
           >
             <VirtualList
               ref="yearScrollRef"
-              items={this.yearArray.map((yearItem, i) => (
-                <div
-                  data-n-date
-                  key={i}
-                  data-selected={yearItem.selected ? '' : null}
-                  class={[
-                    `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item`,
-                    {
-                      [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`]:
-                        yearItem.inCurrentYear,
-                      [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`]:
-                        yearItem.selected,
-                      [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]:
-                        this.mergedIsDateDisabled(yearItem.ts)
-                    }
-                  ]}
-                  onClick={() => this.handleDateClick(yearItem)}
-                >
-                  {yearItem.dateObject.year}
-                  {yearItem.inCurrentYear ? (
-                    <div
-                      class={`${mergedClsPrefix}-date-panel-month-calendar__sup`}
-                    />
-                  ) : null}
-                </div>
-              ))}
+              items={this.yearArray.map((yearItem, i) =>
+                itemRenderer(yearItem, i)
+              )}
               itemSize={40}
               showScrollbar={false}
               onScroll={this.handleVirtualListScroll}
@@ -100,32 +112,9 @@ export default defineComponent({
             >
               {{
                 default: () => [
-                  ...this.monthArray.map((monthItem, i) => (
-                    <div
-                      data-n-date
-                      key={i}
-                      data-selected={monthItem.selected ? '' : null}
-                      class={[
-                        `${mergedClsPrefix}-date-panel-month-calendar__picker-col-item`,
-                        {
-                          [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`]:
-                            monthItem.inCurrentMonth,
-                          [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`]:
-                            monthItem.selected,
-                          [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]:
-                            this.mergedIsDateDisabled(monthItem.ts)
-                        }
-                      ]}
-                      onClick={() => this.handleDateClick(monthItem)}
-                    >
-                      {monthItem.showText}
-                      {monthItem.inCurrentMonth ? (
-                        <div
-                          class={`${mergedClsPrefix}-date-panel-month-calendar__sup`}
-                        />
-                      ) : null}
-                    </div>
-                  )),
+                  ...this.monthArray.map((monthItem, i) =>
+                    itemRenderer(monthItem, i)
+                  ),
                   <div
                     class={`${mergedClsPrefix}-date-panel-month-calendar__padding`}
                   />

diff --git a/src/date-picker/src/utils.ts b/src/date-picker/src/utils.ts
@@ -92,9 +92,6 @@ export interface MonthItem {
     year: number
   }
   inCurrentMonth: boolean
-  inSpan: boolean
-  startOfSpan: boolean
-  endOfSpan: boolean
   selected: boolean
   ts: number
   showText?: string
@@ -106,9 +103,6 @@ export interface YearItem {
     year: number
   }
   inCurrentYear: boolean
-  inSpan: boolean
-  startOfSpan: boolean
-  endOfSpan: boolean
   selected: boolean
   ts: number
 }
@@ -151,26 +145,13 @@ function monthItem (
   valueTs: number | [number, number] | null,
   currentTs: number
 ): MonthItem {
-  let inSpan = false
-  let startOfSpan = false
-  let endOfSpan = false
-  if (Array.isArray(valueTs)) {
-    if (valueTs[0] < monthTs && monthTs < valueTs[1]) {
-      inSpan = true
-    }
-    if (matchMonth(valueTs[0], monthTs)) startOfSpan = true
-    if (matchMonth(valueTs[1], monthTs)) endOfSpan = true
-  }
   return {
     type: 'month',
     dateObject: {
       month: getMonth(monthTs),
       year: getYear(monthTs)
     },
     inCurrentMonth: isSameMonth(currentTs, monthTs),
-    inSpan,
-    startOfSpan,
-    endOfSpan,
     selected: valueTs !== null && matchMonth(valueTs, monthTs),
     ts: getTime(monthTs)
   }
@@ -181,25 +162,12 @@ function yearItem (
   valueTs: number | [number, number] | null,
   currentTs: number
 ): YearItem {
-  let inSpan = false
-  let startOfSpan = false
-  let endOfSpan = false
-  if (Array.isArray(valueTs)) {
-    if (valueTs[0] < yearTs && yearTs < valueTs[1]) {
-      inSpan = true
-    }
-    if (matchMonth(valueTs[0], yearTs)) startOfSpan = true
-    if (matchMonth(valueTs[1], yearTs)) endOfSpan = true
-  }
   return {
     type: 'year',
     dateObject: {
       year: getYear(yearTs)
     },
     inCurrentYear: isSameYear(currentTs, yearTs),
-    inSpan,
-    startOfSpan,
-    endOfSpan,
     selected: valueTs !== null && matchYear(valueTs, yearTs),
     ts: getTime(yearTs)
   }