From 571369bb6689417e6d0f94a8e983353decf42f0d Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 20 Jul 2021 17:37:26 +0800 Subject: [PATCH] refactor: date --- components/vc-picker/PanelContext.tsx | 3 +- components/vc-picker/Picker.tsx | 28 ++++------ components/vc-picker/PickerPanel.tsx | 22 +++----- components/vc-picker/PickerTrigger.tsx | 6 +-- components/vc-picker/RangeContext.tsx | 13 +---- components/vc-picker/RangePicker.tsx | 39 ++++++-------- components/vc-picker/index.tsx | 8 +-- components/vc-picker/locale/by_BY.ts | 54 +++++++++---------- components/vc-picker/locale/pt_BR.ts | 15 +----- .../vc-picker/panels/DatePanel/DateBody.tsx | 2 +- .../vc-picker/panels/DatePanel/DateHeader.tsx | 2 +- .../vc-picker/panels/DatePanel/index.tsx | 1 - components/vc-picker/panels/Header.tsx | 4 +- .../vc-picker/panels/MonthPanel/MonthBody.tsx | 2 +- components/vc-picker/panels/PanelBody.tsx | 2 +- .../panels/QuarterPanel/QuarterBody.tsx | 2 +- .../vc-picker/panels/TimePanel/TimeBody.tsx | 10 ++-- components/vc-picker/utils/getRanges.tsx | 2 +- 18 files changed, 82 insertions(+), 133 deletions(-) diff --git a/components/vc-picker/PanelContext.tsx b/components/vc-picker/PanelContext.tsx index 82193aa2e..3b593d528 100644 --- a/components/vc-picker/PanelContext.tsx +++ b/components/vc-picker/PanelContext.tsx @@ -1,4 +1,5 @@ -import { inject, InjectionKey, provide, Ref } from 'vue'; +import type { InjectionKey, Ref } from 'vue'; +import { inject, provide } from 'vue'; import type { OnSelect, PanelMode } from './interface'; export type ContextOperationRefProps = { diff --git a/components/vc-picker/Picker.tsx b/components/vc-picker/Picker.tsx index fcb00cbf2..087706e5e 100644 --- a/components/vc-picker/Picker.tsx +++ b/components/vc-picker/Picker.tsx @@ -20,27 +20,19 @@ import PickerPanel from './PickerPanel'; import PickerTrigger from './PickerTrigger'; import { formatValue, isEqual, parseValue } from './utils/dateUtil'; import getDataOrAriaProps, { toArray } from './utils/miscUtil'; -import { ContextOperationRefProps, useProvidePanel } from './PanelContext'; +import type { ContextOperationRefProps } from './PanelContext'; +import { useProvidePanel } from './PanelContext'; import type { CustomFormat, PickerMode } from './interface'; import { getDefaultFormat, getInputSize, elementsContains } from './utils/uiUtil'; import usePickerInput from './hooks/usePickerInput'; import useTextValueMapping from './hooks/useTextValueMapping'; import useValueTexts from './hooks/useValueTexts'; import useHoverValue from './hooks/useHoverValue'; -import { - computed, - createVNode, - CSSProperties, - defineComponent, - HtmlHTMLAttributes, - ref, - Ref, - toRef, - watch, -} from 'vue'; -import { ChangeEvent, FocusEventHandler, MouseEventHandler } from '../_util/EventInterface'; -import { VueNode } from '../_util/type'; -import { AlignType } from '../vc-align/interface'; +import type { CSSProperties, HtmlHTMLAttributes, Ref } from 'vue'; +import { computed, createVNode, defineComponent, ref, toRef, watch } from 'vue'; +import type { ChangeEvent, FocusEventHandler, MouseEventHandler } from '../_util/EventInterface'; +import type { VueNode } from '../_util/type'; +import type { AlignType } from '../vc-align/interface'; import useMergedState from '../_util/hooks/useMergedState'; import { warning } from '../vc-util/warning'; import classNames from '../_util/classNames'; @@ -137,6 +129,7 @@ type MergedPickerProps = { function Picker() { return defineComponent>({ name: 'Picker', + inheritAttrs: false, props: [ 'prefixCls', 'id', @@ -181,7 +174,6 @@ function Picker() { 'direction', 'autocomplete', ] as any, - inheritAttrs: false, slots: [ 'suffixIcon', 'clearIcon', @@ -267,7 +259,7 @@ function Picker() { onChange( newValue, newValue - ? formatValue(newValue, { generateConfig, locale, format: formatList[0] }) + ? formatValue(newValue, { generateConfig, locale, format: formatList.value[0] }) : '', ); } @@ -317,7 +309,7 @@ function Picker() { triggerOpen, forwardKeyDown, isClickOutside: target => - !elementsContains([panelDivRef.current, inputDivRef.current], target as HTMLElement), + !elementsContains([panelDivRef.value, inputDivRef.value], target as HTMLElement), onSubmit: () => { if (props.disabledDate && props.disabledDate(selectedValue.value)) { return false; diff --git a/components/vc-picker/PickerPanel.tsx b/components/vc-picker/PickerPanel.tsx index cb415341b..8e8145ff4 100644 --- a/components/vc-picker/PickerPanel.tsx +++ b/components/vc-picker/PickerPanel.tsx @@ -32,17 +32,9 @@ import { useInjectRange } from './RangeContext'; import getExtraFooter from './utils/getExtraFooter'; import getRanges from './utils/getRanges'; import { getLowerBoundTime, setDateTime, setTime } from './utils/timeUtil'; -import { VueNode } from '../_util/type'; -import { - computed, - createVNode, - defineComponent, - HTMLAttributes, - ref, - toRef, - watch, - watchEffect, -} from 'vue'; +import type { VueNode } from '../_util/type'; +import type { HTMLAttributes } from 'vue'; +import { computed, createVNode, defineComponent, ref, toRef, watch, watchEffect } from 'vue'; import useMergedState from '../_util/hooks/useMergedState'; import { warning } from '../vc-util/warning'; import KeyCode from '../_util/KeyCode'; @@ -292,7 +284,7 @@ function PickerPanel() { const triggerSelect = ( date: DateType, type: 'key' | 'mouse' | 'submit', - forceTriggerSelect: boolean = false, + forceTriggerSelect = false, ) => { const { picker, generateConfig, onSelect, onChange, disabledDate } = props; if (mergedMode.value === picker || forceTriggerSelect) { @@ -359,9 +351,9 @@ function PickerPanel() { generateConfig.getHour(now), generateConfig.getMinute(now), generateConfig.getSecond(now), - isHourStepValid ? hourStep : 1, - isMinuteStepValid ? minuteStep : 1, - isSecondStepValid ? secondStep : 1, + isHourStepValid.value ? hourStep : 1, + isMinuteStepValid.value ? minuteStep : 1, + isSecondStepValid.value ? secondStep : 1, ); const adjustedNow = setTime( generateConfig, diff --git a/components/vc-picker/PickerTrigger.tsx b/components/vc-picker/PickerTrigger.tsx index 600f7346f..aa7149311 100644 --- a/components/vc-picker/PickerTrigger.tsx +++ b/components/vc-picker/PickerTrigger.tsx @@ -1,8 +1,8 @@ -import { CSSProperties } from '@vue/runtime-dom'; -import { AlignType } from '../vc-align/interface'; +import type { CSSProperties } from '@vue/runtime-dom'; +import type { AlignType } from '../vc-align/interface'; import Trigger from '../vc-trigger'; import classNames from '../_util/classNames'; -import { VueNode } from '../_util/type'; +import type { VueNode } from '../_util/type'; import useMergeProps from './hooks/useMergeProps'; const BUILT_IN_PLACEMENTS = { diff --git a/components/vc-picker/RangeContext.tsx b/components/vc-picker/RangeContext.tsx index 2a10a9310..3e0f777d4 100644 --- a/components/vc-picker/RangeContext.tsx +++ b/components/vc-picker/RangeContext.tsx @@ -1,14 +1,5 @@ -import { - defineComponent, - inject, - InjectionKey, - PropType, - provide, - ref, - Ref, - toRef, - watch, -} from 'vue'; +import type { InjectionKey, PropType, Ref } from 'vue'; +import { defineComponent, inject, provide, ref, toRef, watch } from 'vue'; import type { NullableDateType, RangeValue } from './interface'; export type RangeContextProps = { diff --git a/components/vc-picker/RangePicker.tsx b/components/vc-picker/RangePicker.tsx index 20e2501a3..af5ee78c7 100644 --- a/components/vc-picker/RangePicker.tsx +++ b/components/vc-picker/RangePicker.tsx @@ -6,7 +6,8 @@ import PickerPanel from './PickerPanel'; import usePickerInput from './hooks/usePickerInput'; import getDataOrAriaProps, { toArray, getValue, updateValues } from './utils/miscUtil'; import { getDefaultFormat, getInputSize, elementsContains } from './utils/uiUtil'; -import { ContextOperationRefProps, useProvidePanel } from './PanelContext'; +import type { ContextOperationRefProps } from './PanelContext'; +import { useProvidePanel } from './PanelContext'; import { isEqual, getClosingViewDate, @@ -27,18 +28,10 @@ import getRanges from './utils/getRanges'; import useRangeViewDates from './hooks/useRangeViewDates'; import type { DateRender } from './panels/DatePanel/DateBody'; import useHoverValue from './hooks/useHoverValue'; -import { VueNode } from '../_util/type'; -import { ChangeEvent, FocusEventHandler, MouseEventHandler } from '../_util/EventInterface'; -import { - computed, - createVNode, - defineComponent, - HTMLAttributes, - ref, - toRef, - watch, - watchEffect, -} from 'vue'; +import type { VueNode } from '../_util/type'; +import type { ChangeEvent, FocusEventHandler, MouseEventHandler } from '../_util/EventInterface'; +import type { HTMLAttributes } from 'vue'; +import { computed, createVNode, defineComponent, ref, toRef, watch, watchEffect } from 'vue'; import useMergedState from '../_util/hooks/useMergedState'; import { warning } from '../vc-util/warning'; import useState from '../_util/hooks/useState'; @@ -291,7 +284,7 @@ function RangerPicker() { postState: values => { let postValues = values; - if (mergedDisabled[0] && mergedDisabled[1]) { + if (mergedDisabled.value[0] && mergedDisabled.value[1]) { return postValues; } @@ -449,11 +442,11 @@ function RangerPicker() { const startStr = values && values[0] - ? formatValue(values[0], { generateConfig, locale, format: formatList[0] }) + ? formatValue(values[0], { generateConfig, locale, format: formatList.value[0] }) : ''; const endStr = values && values[1] - ? formatValue(values[1], { generateConfig, locale, format: formatList[0] }) + ? formatValue(values[1], { generateConfig, locale, format: formatList.value[0] }) : ''; if (onCalendarChange) { @@ -941,8 +934,8 @@ function RangerPicker() { direction, autocomplete = 'off', } = props; - let arrowLeft: number = 0; - let panelLeft: number = 0; + let arrowLeft = 0; + let panelLeft = 0; if ( mergedActivePickerIndex.value && startInputDivRef.value && @@ -1094,10 +1087,10 @@ function RangerPicker() { e.stopPropagation(); let values = mergedValue.value; - if (!mergedDisabled[0]) { + if (!mergedDisabled.value[0]) { values = updateValues(values, null, 0); } - if (!mergedDisabled[1]) { + if (!mergedDisabled.value[1]) { values = updateValues(values, null, 1); } @@ -1112,11 +1105,11 @@ function RangerPicker() { } const inputSharedProps = { - size: getInputSize(picker, formatList[0], generateConfig), + size: getInputSize(picker, formatList.value[0], generateConfig), }; - let activeBarLeft: number = 0; - let activeBarWidth: number = 0; + let activeBarLeft = 0; + let activeBarWidth = 0; if (startInputDivRef.value && endInputDivRef.value && separatorRef.value) { if (mergedActivePickerIndex.value === 0) { activeBarWidth = startInputDivRef.value.offsetWidth; diff --git a/components/vc-picker/index.tsx b/components/vc-picker/index.tsx index 4773cc35f..10a59da73 100644 --- a/components/vc-picker/index.tsx +++ b/components/vc-picker/index.tsx @@ -2,12 +2,6 @@ import Picker, { PickerProps } from './Picker'; import PickerPanel, { PickerPanelProps } from './PickerPanel'; import RangePicker, { RangePickerProps } from './RangePicker'; -export { - PickerPanel, - RangePicker, - PickerProps, - PickerPanelProps, - RangePickerProps, -}; +export { PickerPanel, RangePicker, PickerProps, PickerPanelProps, RangePickerProps }; export default Picker; diff --git a/components/vc-picker/locale/by_BY.ts b/components/vc-picker/locale/by_BY.ts index 3339d970b..fe5984afa 100644 --- a/components/vc-picker/locale/by_BY.ts +++ b/components/vc-picker/locale/by_BY.ts @@ -1,33 +1,33 @@ import type { Locale } from '../interface'; const locale: Locale = { -locale: 'by_BY', -today: 'Сёння', -now: 'Зараз', -backToToday: 'Дадзеная дата', -ok: 'Ok', -clear: 'Ачысціць', -month: 'Месяц', -year: 'Год', -timeSelect: 'Выбраць час', -dateSelect: 'Выбраць дату', -weekSelect: 'Выбраць тыдзень', -monthSelect: 'Выбраць месяц', -yearSelect: 'Выбраць год', -decadeSelect: 'Выбраць дзесяцігоддзе', -yearFormat: 'YYYY', -dateFormat: 'D-M-YYYY', -dayFormat: 'D', -dateTimeFormat: 'D-M-YYYY HH:mm:ss', -monthBeforeYear: true, -previousMonth: 'Папярэдні месяц (PageUp)', -nextMonth: 'Наступны месяц (PageDown)', -previousYear: 'Папярэдні год (Control + left)', -nextYear: 'Наступны год (Control + right)', -previousDecade: 'Папярэдняе дзесяцігоддзе', -nextDecade: 'Наступнае дзесяцігоддзе', -previousCentury: 'Папярэдні век', -nextCentury: 'Наступны век', + locale: 'by_BY', + today: 'Сёння', + now: 'Зараз', + backToToday: 'Дадзеная дата', + ok: 'Ok', + clear: 'Ачысціць', + month: 'Месяц', + year: 'Год', + timeSelect: 'Выбраць час', + dateSelect: 'Выбраць дату', + weekSelect: 'Выбраць тыдзень', + monthSelect: 'Выбраць месяц', + yearSelect: 'Выбраць год', + decadeSelect: 'Выбраць дзесяцігоддзе', + yearFormat: 'YYYY', + dateFormat: 'D-M-YYYY', + dayFormat: 'D', + dateTimeFormat: 'D-M-YYYY HH:mm:ss', + monthBeforeYear: true, + previousMonth: 'Папярэдні месяц (PageUp)', + nextMonth: 'Наступны месяц (PageDown)', + previousYear: 'Папярэдні год (Control + left)', + nextYear: 'Наступны год (Control + right)', + previousDecade: 'Папярэдняе дзесяцігоддзе', + nextDecade: 'Наступнае дзесяцігоддзе', + previousCentury: 'Папярэдні век', + nextCentury: 'Наступны век', }; export default locale; diff --git a/components/vc-picker/locale/pt_BR.ts b/components/vc-picker/locale/pt_BR.ts index a6839ba1d..a6ca2af3b 100644 --- a/components/vc-picker/locale/pt_BR.ts +++ b/components/vc-picker/locale/pt_BR.ts @@ -28,20 +28,7 @@ const locale: Locale = { previousCentury: 'Século anterior', nextCentury: 'Próximo século', shortWeekDays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'], - shortMonths: [ - 'Jan', - 'Fev', - 'Mar', - 'Abr', - 'Mai', - 'Jun', - 'Jul', - 'Ago', - 'Set', - 'Out', - 'Nov', - 'Dez', - ], + shortMonths: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'], }; export default locale; diff --git a/components/vc-picker/panels/DatePanel/DateBody.tsx b/components/vc-picker/panels/DatePanel/DateBody.tsx index 24fa0f437..4aa74105d 100644 --- a/components/vc-picker/panels/DatePanel/DateBody.tsx +++ b/components/vc-picker/panels/DatePanel/DateBody.tsx @@ -9,7 +9,7 @@ import { import type { Locale } from '../../interface'; import useCellClassName from '../../hooks/useCellClassName'; import PanelBody from '../PanelBody'; -import { VueNode } from '../../../_util/type'; +import type { VueNode } from '../../../_util/type'; import { useInjectRange } from '../../RangeContext'; import useMergeProps from '../../hooks/useMergeProps'; diff --git a/components/vc-picker/panels/DatePanel/DateHeader.tsx b/components/vc-picker/panels/DatePanel/DateHeader.tsx index 909d50b67..941f31d45 100644 --- a/components/vc-picker/panels/DatePanel/DateHeader.tsx +++ b/components/vc-picker/panels/DatePanel/DateHeader.tsx @@ -3,7 +3,7 @@ import type { Locale } from '../../interface'; import type { GenerateConfig } from '../../generate'; import { useInjectPanel } from '../../PanelContext'; import { formatValue } from '../../utils/dateUtil'; -import { VueNode } from '../../../_util/type'; +import type { VueNode } from '../../../_util/type'; import useMergeProps from '../../hooks/useMergeProps'; export type DateHeaderProps = { diff --git a/components/vc-picker/panels/DatePanel/index.tsx b/components/vc-picker/panels/DatePanel/index.tsx index 05c0f3b9b..b41896a57 100644 --- a/components/vc-picker/panels/DatePanel/index.tsx +++ b/components/vc-picker/panels/DatePanel/index.tsx @@ -6,7 +6,6 @@ import { WEEK_DAY_COUNT } from '../../utils/dateUtil'; import type { KeyboardConfig } from '../../utils/uiUtil'; import { createKeyDownHandler } from '../../utils/uiUtil'; import classNames from '../../../_util/classNames'; -import { ref } from '@vue/reactivity'; import useMergeProps from '../../hooks/useMergeProps'; const DATE_ROW_COUNT = 6; diff --git a/components/vc-picker/panels/Header.tsx b/components/vc-picker/panels/Header.tsx index 9b3b9fa6e..335994332 100644 --- a/components/vc-picker/panels/Header.tsx +++ b/components/vc-picker/panels/Header.tsx @@ -1,5 +1,5 @@ -import { CSSProperties } from 'vue'; -import { VueNode } from '../../_util/type'; +import type { CSSProperties } from 'vue'; +import type { VueNode } from '../../_util/type'; import useMergeProps from '../hooks/useMergeProps'; import { useInjectPanel } from '../PanelContext'; diff --git a/components/vc-picker/panels/MonthPanel/MonthBody.tsx b/components/vc-picker/panels/MonthPanel/MonthBody.tsx index 599f0de2d..18e2dfb25 100644 --- a/components/vc-picker/panels/MonthPanel/MonthBody.tsx +++ b/components/vc-picker/panels/MonthPanel/MonthBody.tsx @@ -4,7 +4,7 @@ import { formatValue, isSameMonth } from '../../utils/dateUtil'; import { useInjectRange } from '../../RangeContext'; import useCellClassName from '../../hooks/useCellClassName'; import PanelBody from '../PanelBody'; -import { VueNode } from '../../../_util/type'; +import type { VueNode } from '../../../_util/type'; import useMergeProps from '../../hooks/useMergeProps'; export const MONTH_COL_COUNT = 3; diff --git a/components/vc-picker/panels/PanelBody.tsx b/components/vc-picker/panels/PanelBody.tsx index ee0ba27b8..b7407c14b 100644 --- a/components/vc-picker/panels/PanelBody.tsx +++ b/components/vc-picker/panels/PanelBody.tsx @@ -3,7 +3,7 @@ import type { GenerateConfig } from '../generate'; import { getLastDay } from '../utils/timeUtil'; import type { PanelMode } from '../interface'; import { getCellDateDisabled } from '../utils/dateUtil'; -import { VueNode } from '../../_util/type'; +import type { VueNode } from '../../_util/type'; import classNames from '../../_util/classNames'; import useMergeProps from '../hooks/useMergeProps'; diff --git a/components/vc-picker/panels/QuarterPanel/QuarterBody.tsx b/components/vc-picker/panels/QuarterPanel/QuarterBody.tsx index a1f825108..edbb8add6 100644 --- a/components/vc-picker/panels/QuarterPanel/QuarterBody.tsx +++ b/components/vc-picker/panels/QuarterPanel/QuarterBody.tsx @@ -1,7 +1,7 @@ import type { GenerateConfig } from '../../generate'; import type { Locale } from '../../interface'; import { formatValue, isSameQuarter } from '../../utils/dateUtil'; -import RangeContext, { useInjectRange } from '../../RangeContext'; +import { useInjectRange } from '../../RangeContext'; import useCellClassName from '../../hooks/useCellClassName'; import PanelBody from '../PanelBody'; import useMergeProps from '../../hooks/useMergeProps'; diff --git a/components/vc-picker/panels/TimePanel/TimeBody.tsx b/components/vc-picker/panels/TimePanel/TimeBody.tsx index bab96faf4..2c99941e0 100644 --- a/components/vc-picker/panels/TimePanel/TimeBody.tsx +++ b/components/vc-picker/panels/TimePanel/TimeBody.tsx @@ -6,7 +6,7 @@ import { leftPad } from '../../utils/miscUtil'; import type { SharedTimeProps } from '.'; import { setTime as utilSetTime } from '../../utils/timeUtil'; import { cloneElement } from '../../../_util/vnode'; -import { VueNode } from '../../../_util/type'; +import type { VueNode } from '../../../_util/type'; import type { Ref } from 'vue'; import { computed, defineComponent } from 'vue'; @@ -74,7 +74,7 @@ const TimeBody = defineComponent({ return false; } }); - let hour = computed(() => { + const hour = computed(() => { // Should additional logic to handle 12 hours if (props.use12Hours) { return originHour.value % 12; @@ -134,7 +134,7 @@ const TimeBody = defineComponent({ const hours = computed(() => { if (!props.use12Hours) return rawHours.value; return rawHours.value - .filter(isPM ? hourMeta => hourMeta.value >= 12 : hourMeta => hourMeta.value < 12) + .filter(isPM.value ? hourMeta => hourMeta.value >= 12 : hourMeta => hourMeta.value < 12) .map(hourMeta => { const hourValue = hourMeta.value % 12; const hourLabel = hourValue === 0 ? '12' : leftPad(hourValue, 2); @@ -260,8 +260,8 @@ const TimeBody = defineComponent({ // 12 Hours let PMIndex = -1; - if (typeof isPM === 'boolean') { - PMIndex = isPM ? 1 : 0; + if (typeof isPM.value === 'boolean') { + PMIndex = isPM.value ? 1 : 0; } addColumnNode( diff --git a/components/vc-picker/utils/getRanges.tsx b/components/vc-picker/utils/getRanges.tsx index 3bb9a20e4..4aab0daac 100644 --- a/components/vc-picker/utils/getRanges.tsx +++ b/components/vc-picker/utils/getRanges.tsx @@ -1,4 +1,4 @@ -import { VueNode } from '../../_util/type'; +import type { VueNode } from '../../_util/type'; import type { Components, RangeList, Locale } from '../interface'; export type RangesProps = {