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

* Extract props to separate files.

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
This commit is contained in:
Jeremy 2022-06-06 09:05:41 +08:00 committed by GitHub
parent 6cde29f559
commit 364014a35a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 96 additions and 60 deletions

View File

@ -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
>

View File

@ -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>

View File

@ -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>

View File

@ -85,10 +85,10 @@ import ElScrollbar from '@element-plus/components/scrollbar'
import ElIcon from '@element-plus/components/icon' import ElIcon from '@element-plus/components/icon'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue' import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { useNamespace } from '@element-plus/hooks' import { useNamespace } from '@element-plus/hooks'
import { basicTimeSpinnerProps } from '../props/basic-time-spinner'
import { getTimeLists } from './useTimePicker' 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' import type { Nullable } from '@element-plus/utils'
export default defineComponent({ export default defineComponent({
@ -103,34 +103,7 @@ export default defineComponent({
ArrowDown, 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'], emits: ['change', 'select-range', 'set-option'],

View File

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

View File

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