From 66a6d0dc7097c8aca0da42f80c0da2c28b0bc162 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Wed, 25 May 2022 23:05:17 +0800
Subject: [PATCH] chore(components): [date-picker] extract props (#7894)

- Extract props on basic-year-table
- Update the function signature of utils.castArray
---
 .../src/date-picker-com/basic-year-table.vue  | 34 ++++++-------------
 .../date-picker/src/props/basic-year-table.ts | 14 ++++++++
 .../date-picker/src/props/shared.ts           |  1 +
 packages/utils/arrays.ts                      |  5 +--
 4 files changed, 29 insertions(+), 25 deletions(-)
 create mode 100644 packages/components/date-picker/src/props/basic-year-table.ts

diff --git a/packages/components/date-picker/src/date-picker-com/basic-year-table.vue b/packages/components/date-picker/src/date-picker-com/basic-year-table.vue
index d84b763cc4..0eb5d9f145 100644
--- a/packages/components/date-picker/src/date-picker-com/basic-year-table.vue
+++ b/packages/components/date-picker/src/date-picker-com/basic-year-table.vue
@@ -6,13 +6,13 @@
     @click="handleYearTableClick"
   >
     <tbody ref="tbodyRef">
-      <tr v-for="(n, i) in 3" :key="i">
-        <template v-for="(nn, j) in 4" :key="i + '_' + j">
+      <tr v-for="(_, i) in 3" :key="i">
+        <template v-for="(__, j) in 4" :key="i + '_' + j">
           <td
             v-if="i * 4 + j < 10"
             :ref="
               (el) =>
-                isSelectedCell(startYear + i * 4 + j) && (currentCellRef = el)
+                isSelectedCell(startYear + i * 4 + j) && (currentCellRef = el as HTMLElement)
             "
             class="available"
             :class="getCellStyle(startYear + i * 4 + j)"
@@ -36,11 +36,9 @@ import dayjs from 'dayjs'
 import { useLocale } from '@element-plus/hooks'
 import { rangeArr } from '@element-plus/components/time-picker'
 import { castArray, hasClass } from '@element-plus/utils'
+import { basicYearTableProps } from '../props/basic-year-table'
 
-import type { PropType } from 'vue'
-import type { Dayjs } from 'dayjs'
-
-const datesInYear = (year: Dayjs, lang: string) => {
+const datesInYear = (year: number, lang: string) => {
   const firstDay = dayjs(String(year)).locale(lang).startOf('year')
   const lastDay = firstDay.endOf('year')
   const numOfDays = lastDay.dayOfYear()
@@ -48,17 +46,7 @@ const datesInYear = (year: Dayjs, lang: string) => {
 }
 
 export default defineComponent({
-  props: {
-    disabledDate: {
-      type: Function as PropType<(_: Date) => void>,
-    },
-    parsedValue: {
-      type: Object as PropType<Dayjs>,
-    },
-    date: {
-      type: Object as PropType<Dayjs>,
-    },
-  },
+  props: basicYearTableProps,
 
   emits: ['pick'],
   expose: ['focus'],
@@ -85,8 +73,8 @@ export default defineComponent({
       currentCellRef.value?.focus()
     }
 
-    const getCellStyle = (year) => {
-      const style = {} as any
+    const getCellStyle = (year: number) => {
+      const style: Record<string, boolean> = {}
       const today = dayjs().locale(lang.value)
 
       style.disabled = props.disabledDate
@@ -101,16 +89,16 @@ export default defineComponent({
       return style
     }
 
-    const isSelectedCell = (year) => {
+    const isSelectedCell = (year: number) => {
       return (
         (year === startYear.value &&
           props.date.year() < startYear.value &&
           props.date.year() > startYear.value + 9) ||
-        castArray(props.date).findIndex((_) => _.year() === year) >= 0
+        castArray(props.date).findIndex((date) => date.year() === year) >= 0
       )
     }
 
-    const handleYearTableClick = (event: MouseEvent) => {
+    const handleYearTableClick = (event: MouseEvent | KeyboardEvent) => {
       const clickTarget = event.target as HTMLDivElement
       const target = clickTarget.closest('td')
       if (target) {
diff --git a/packages/components/date-picker/src/props/basic-year-table.ts b/packages/components/date-picker/src/props/basic-year-table.ts
new file mode 100644
index 0000000000..a9b752a8ca
--- /dev/null
+++ b/packages/components/date-picker/src/props/basic-year-table.ts
@@ -0,0 +1,14 @@
+import { buildProps } from '@element-plus/utils'
+import { datePickerSharedProps } from './shared'
+
+import type { ExtractPropTypes } from 'vue'
+
+const { date, disabledDate, parsedValue } = datePickerSharedProps
+
+export const basicYearTableProps = buildProps({
+  date,
+  disabledDate,
+  parsedValue,
+})
+
+export type BasicYearTableProps = ExtractPropTypes<typeof basicYearTableProps>
diff --git a/packages/components/date-picker/src/props/shared.ts b/packages/components/date-picker/src/props/shared.ts
index 12a0d31789..a50e0c0066 100644
--- a/packages/components/date-picker/src/props/shared.ts
+++ b/packages/components/date-picker/src/props/shared.ts
@@ -25,6 +25,7 @@ export const datePickerSharedProps = buildProps({
   },
   parsedValue: {
     type: definePropType<Dayjs | Dayjs[]>([Object, Array]),
+    required: true,
   },
   rangeState: {
     type: definePropType<RangeState>(Object),
diff --git a/packages/utils/arrays.ts b/packages/utils/arrays.ts
index 52ee8e75e0..78a8f00285 100644
--- a/packages/utils/arrays.ts
+++ b/packages/utils/arrays.ts
@@ -1,9 +1,10 @@
 export const unique = <T>(arr: T[]) => [...new Set(arr)]
 
+type Many<T> = T | ReadonlyArray<T>
 // TODO: rename to `ensureArray`
 /** like `_.castArray`, except falsy value returns empty array. */
-export const castArray = (arr: any): any[] => {
-  if (!arr && arr !== 0) return []
+export const castArray = <T>(arr: Many<T>): T[] => {
+  if (!arr && (arr as any) !== 0) return []
   return Array.isArray(arr) ? arr : [arr]
 }