refactor(components): [time-picker] props (#8108)

* Extract props to separate files.

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>

packages/components/time-picker/src/props/basic-time-spinner.ts

@@ -0,0 +1,49 @@
+import { buildProps, definePropType } from '@element-plus/utils'
+
+import type { ExtractPropTypes } from 'vue'
+import type { Dayjs } from 'dayjs'
+
+export const basicTimeSpinnerProps = buildProps({
+  role: {
+    type: String,
+    required: true,
+  },
+  spinnerDate: {
+    type: definePropType<Dayjs>(Object),
+    required: true,
+  },
+  showSeconds: {
+    type: Boolean,
+    default: true,
+  },
+  arrowControl: Boolean,
+  amPmMode: {
+    // 'a': am/pm; 'A': AM/PM
+    type: definePropType<'a' | 'A'>(String),
+    default: '',
+  },
+  disabledHours: {
+    type: definePropType<(role: string, comparingDate?: Dayjs) => boolean[]>(
+      Function
+    ),
+  },
+  disabledMinutes: {
+    type: definePropType<
+      (hour: number, role: string, comparingDate?: Dayjs) => boolean[]
+    >(Function),
+  },
+  disabledSeconds: {
+    type: definePropType<
+      (
+        hour: number,
+        minute: number,
+        role: string,
+        comparingDate?: Dayjs
+      ) => boolean[]
+    >(Function),
+  },
+} as const)
+
+export type BasicTimeSpinnerProps = ExtractPropTypes<
+  typeof basicTimeSpinnerProps
+>

packages/components/time-picker/src/props/panel-time-picker.ts

@@ -0,0 +1,22 @@
+import { buildProps, definePropType } from '@element-plus/utils'
+
+import type { ExtractPropTypes } from 'vue'
+import type { Dayjs } from 'dayjs'
+
+export const panelTimePickerProps = buildProps({
+  visible: Boolean,
+  actualVisible: {
+    type: Boolean,
+    default: undefined,
+  },
+  datetimeRole: String,
+  parsedValue: {
+    type: definePropType<string | Dayjs>([Object, String]),
+  },
+  format: {
+    type: String,
+    default: '',
+  },
+} as const)
+
+export type PanelTimePickerProps = ExtractPropTypes<typeof panelTimePickerProps>

packages/components/time-picker/src/props/panel-time-range.ts

@@ -0,0 +1,18 @@
+import { buildProps, definePropType } from '@element-plus/utils'
+
+import type { ExtractPropTypes } from 'vue'
+import type { Dayjs } from 'dayjs'
+
+export const panelTimeRangeProps = buildProps({
+  visible: Boolean,
+  actualVisible: Boolean,
+  parsedValue: {
+    type: definePropType<Dayjs[]>(Array),
+  },
+  format: {
+    type: String,
+    default: '',
+  },
+} as const)
+
+export type PanelTimeRangeProps = ExtractPropTypes<typeof panelTimeRangeProps>

packages/components/time-picker/src/time-picker-com/basic-time-spinner.vue

@@ -85,10 +85,10 @@ import ElScrollbar from '@element-plus/components/scrollbar'
 import ElIcon from '@element-plus/components/icon'
 import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
 import { useNamespace } from '@element-plus/hooks'
+import { basicTimeSpinnerProps } from '../props/basic-time-spinner'
 import { getTimeLists } from './useTimePicker'
 
-import type { PropType, Ref } from 'vue'
+import type { Ref } from 'vue'
-import type { Dayjs } from 'dayjs'
 import type { Nullable } from '@element-plus/utils'
 
 export default defineComponent({
@@ -103,34 +103,7 @@ export default defineComponent({
     ArrowDown,
   },
 
-  props: {
+  props: basicTimeSpinnerProps,
-    role: {
-      type: String,
-      required: true,
-    },
-    spinnerDate: {
-      type: Object as PropType<Dayjs>,
-      required: true,
-    },
-    showSeconds: {
-      type: Boolean,
-      default: true,
-    },
-    arrowControl: Boolean,
-    amPmMode: {
-      type: String,
-      default: '', // 'a': am/pm; 'A': AM/PM
-    },
-    disabledHours: {
-      type: Function,
-    },
-    disabledMinutes: {
-      type: Function,
-    },
-    disabledSeconds: {
-      type: Function,
-    },
-  },
 
   emits: ['change', 'select-range', 'set-option'],
 

packages/components/time-picker/src/time-picker-com/panel-time-pick.vue

@@ -43,10 +43,10 @@ import dayjs from 'dayjs'
 import { EVENT_CODE } from '@element-plus/constants'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { isUndefined } from '@element-plus/utils'
+import { panelTimePickerProps } from '../props/panel-time-picker'
 import TimeSpinner from './basic-time-spinner.vue'
 import { getAvailableArrs, useOldValue } from './useTimePicker'
 
-import type { PropType } from 'vue'
 import type { Dayjs } from 'dayjs'
 
 export default defineComponent({
@@ -54,23 +54,7 @@ export default defineComponent({
     TimeSpinner,
   },
 
-  props: {
+  props: panelTimePickerProps,
-    visible: Boolean,
-    actualVisible: {
-      type: Boolean,
-      default: undefined,
-    },
-    datetimeRole: {
-      type: String,
-    },
-    parsedValue: {
-      type: [Object, String] as PropType<string | Dayjs>,
-    },
-    format: {
-      type: String,
-      default: '',
-    },
-  },
 
   emits: ['pick', 'select-range', 'set-picker-option'],
 

packages/components/time-picker/src/time-picker-com/panel-time-range.vue

@@ -87,10 +87,10 @@ import dayjs from 'dayjs'
 import { union } from 'lodash-unified'
 import { useLocale, useNamespace } from '@element-plus/hooks'
 import { EVENT_CODE } from '@element-plus/constants'
+import { panelTimeRangeProps } from '../props/panel-time-range'
 import TimeSpinner from './basic-time-spinner.vue'
 import { getAvailableArrs, useOldValue } from './useTimePicker'
 
-import type { PropType } from 'vue'
 import type { Dayjs } from 'dayjs'
 
 const makeSelectRange = (start: number, end: number) => {
@@ -103,17 +103,7 @@ const makeSelectRange = (start: number, end: number) => {
 export default defineComponent({
   components: { TimeSpinner },
 
-  props: {
+  props: panelTimeRangeProps,
-    visible: Boolean,
-    actualVisible: Boolean,
-    parsedValue: {
-      type: [Array] as PropType<Array<Dayjs>>,
-    },
-    format: {
-      type: String,
-      default: '',
-    },
-  },
 
   emits: ['pick', 'select-range', 'set-picker-option'],