From f719462333a31385ca76019560bba1d70580b71b Mon Sep 17 00:00:00 2001 From: HQ-Lin Date: Fri, 2 Sep 2022 19:01:23 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=A9=BA=E5=AD=97?= =?UTF-8?q?=E7=AC=A6=E4=B8=B2=E9=A1=B5=E9=9D=A2=E5=B4=A9=E6=BA=83=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_common | 2 +- src/date-picker/DatePicker.tsx | 2 +- src/date-picker/DatePickerPanel.tsx | 2 +- src/date-picker/DateRangePicker.tsx | 2 +- src/date-picker/DateRangePickerPanel.tsx | 4 +- src/date-picker/base/Table.tsx | 2 +- src/date-picker/hooks/useFormat.ts | 191 ----------------------- src/date-picker/hooks/useRange.tsx | 2 +- src/date-picker/hooks/useRangeValue.ts | 8 +- src/date-picker/hooks/useSingle.tsx | 2 +- src/date-picker/hooks/useSingleValue.tsx | 2 +- src/date-picker/panel/PanelContent.tsx | 2 +- src/date-picker/panel/RangePanel.tsx | 2 +- src/date-picker/panel/SinglePanel.tsx | 2 +- 14 files changed, 20 insertions(+), 205 deletions(-) delete mode 100644 src/date-picker/hooks/useFormat.ts diff --git a/src/_common b/src/_common index 6af9c5e66..9522412be 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 6af9c5e66f62180bf4852156a8e1a9cb2d242c2a +Subproject commit 9522412be07088be33820c1a573b882a742bccd9 diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index 4da357ea2..3c46eddb4 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -7,7 +7,7 @@ import { TdDatePickerProps } from './type'; import SelectInput from '../select-input'; import SinglePanel from './panel/SinglePanel'; import useSingle from './hooks/useSingle'; -import { parseToDayjs, getDefaultFormat, formatTime, formatDate } from './hooks/useFormat'; +import { parseToDayjs, getDefaultFormat, formatTime, formatDate } from '../_common/js/date-picker/format'; import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils'; import { datePickerDefaultProps } from './defaultProps'; diff --git a/src/date-picker/DatePickerPanel.tsx b/src/date-picker/DatePickerPanel.tsx index 793067379..a48d2b367 100644 --- a/src/date-picker/DatePickerPanel.tsx +++ b/src/date-picker/DatePickerPanel.tsx @@ -4,7 +4,7 @@ import { StyledProps } from '../common'; import { TdDatePickerPanelProps, DateValue, DatePickerYearChangeTrigger, DatePickerMonthChangeTrigger } from './type'; import SinglePanel from './panel/SinglePanel'; import useSingleValue from './hooks/useSingleValue'; -import { formatDate, getDefaultFormat } from './hooks/useFormat'; +import { formatDate, getDefaultFormat } from '../_common/js/date-picker/format'; import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils'; export interface DatePickerPanelProps extends TdDatePickerPanelProps, StyledProps {} diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx index 1b4a5a460..8c3336724 100644 --- a/src/date-picker/DateRangePicker.tsx +++ b/src/date-picker/DateRangePicker.tsx @@ -8,7 +8,7 @@ import { RangeInputPopup } from '../range-input'; import RangePanel from './panel/RangePanel'; import useRange from './hooks/useRange'; import { initYearMonthTime } from './hooks/useRangeValue'; -import { parseToDayjs, formatTime, formatDate, isValidDate, getDefaultFormat } from './hooks/useFormat'; +import { parseToDayjs, formatTime, formatDate, isValidDate, getDefaultFormat } from '../_common/js/date-picker/format'; import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils'; import { dateRangePickerDefaultProps } from './defaultProps'; import log from '../_common/js/log'; diff --git a/src/date-picker/DateRangePickerPanel.tsx b/src/date-picker/DateRangePickerPanel.tsx index 18dcdc89b..3ea9b4b28 100644 --- a/src/date-picker/DateRangePickerPanel.tsx +++ b/src/date-picker/DateRangePickerPanel.tsx @@ -9,7 +9,7 @@ import { } from './type'; import RangePanel from './panel/RangePanel'; import useRangeValue from './hooks/useRangeValue'; -import { formatDate, getDefaultFormat } from './hooks/useFormat'; +import { formatDate, getDefaultFormat } from '../_common/js/date-picker/format'; import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils'; import log from '../_common/js/log'; @@ -74,7 +74,7 @@ const DateRangePickerPanel = forwardRef dayjs(v).toDate()), e, partial }); + props.onCellClick?.({ date: value.map((v) => dayjs(v).toDate()), e, partial: activeIndex ? 'end' : 'start' }); setIsSelected(true); diff --git a/src/date-picker/base/Table.tsx b/src/date-picker/base/Table.tsx index 53408a4a5..01f08def4 100644 --- a/src/date-picker/base/Table.tsx +++ b/src/date-picker/base/Table.tsx @@ -6,7 +6,7 @@ import DatePickerCell from './Cell'; import { TdDatePickerProps } from '../type'; import { SinglePanelProps } from '../panel/SinglePanel'; import { PanelContentProps } from '../panel/PanelContent'; -import { parseToDayjs } from '../hooks/useFormat'; +import { parseToDayjs } from '../../_common/js/date-picker/format'; export interface DatePickerTableProps extends Pick, diff --git a/src/date-picker/hooks/useFormat.ts b/src/date-picker/hooks/useFormat.ts deleted file mode 100644 index b632fa1c9..000000000 --- a/src/date-picker/hooks/useFormat.ts +++ /dev/null @@ -1,191 +0,0 @@ -import dayjs from 'dayjs'; -import type { DateValue } from '../type'; -import { extractTimeFormat } from '../../_common/js/date-picker/utils'; -import log from '../../_common/js/log'; - -export const TIME_FORMAT = 'HH:mm:ss'; - -// 格式化 range -function formatRange({ newDate, format, targetFormat }) { - if (!newDate || !Array.isArray(newDate)) return []; - - let dayjsDateList = newDate.map((d) => d && parseToDayjs(d, format)); - - // 保证后面的时间大于前面的时间 - if ( - dayjsDateList[0] && - dayjsDateList[1] && - dayjsDateList[0].toDate().getTime() > dayjsDateList[1].toDate().getTime() - ) { - // 数据兼容规则 - dayjsDateList = [dayjsDateList[1], dayjsDateList[0]]; - } - - // 格式化失败提示 - if (dayjsDateList.some((r) => r && !r.isValid())) { - log.error( - 'DatePicker', - `请检查 format、valueType、value 格式是否有效.\nformat: '${format}' valueType: '${targetFormat}' value: '${newDate}'`, - ); - return []; - } - - // valueType = 'time-stamp' 返回时间戳 - if (targetFormat === 'time-stamp') { - return dayjsDateList.map((da) => da && da.toDate().getTime()); - } - - return dayjsDateList.map((da) => da && da.format(targetFormat)); -} - -// 格式化单选 -function formatSingle({ newDate, format, targetFormat }) { - if (!newDate) return ''; - - const dayJsDate = parseToDayjs(newDate, format); - - // 格式化失败提示 - if (!dayJsDate.isValid()) { - log.error( - 'DatePicker', - `请检查 format、valueType、value 格式是否有效.\nformat: '${format}' valueType: '${targetFormat}' value: '${newDate}'`, - ); - return ''; - } - - // valueType = 'time-stamp' 返回时间戳 - if (targetFormat === 'time-stamp') return dayJsDate.toDate().getTime(); - - return dayJsDate.format(targetFormat); -} - -// 检测日期是否合法 -export function isValidDate(value: DateValue | DateValue[], format: string) { - if (Array.isArray(value)) { - if (format === 'time-stamp') return value.every((v) => dayjs(v).isValid()); - return value.every((v) => dayjs(v, format).isValid() || dayjs(v).isValid()); - } - - if (format === 'time-stamp') return dayjs(value).isValid(); - return dayjs(value, format).isValid() || dayjs(value).isValid(); -} - -// 日期格式化 -export function formatDate(newDate: DateValue | DateValue[], { format, targetFormat }) { - let result; - - if (Array.isArray(newDate)) { - result = formatRange({ newDate, format, targetFormat }); - } else { - result = formatSingle({ newDate, format, targetFormat }); - } - - return result; -} - -// 格式化时间 -export function formatTime(value: DateValue | DateValue[], timeFormat: string) { - let result; - - if (Array.isArray(value)) { - result = value.map((v) => dayjs(v).format(timeFormat)); - } else { - result = dayjs((value || new Date()) as DateValue).format(timeFormat); - } - - return result; -} - -// 统一解析日期格式字符串成 Dayjs 对象 -export function parseToDayjs(value: string | Date | number, format: string, timeOfDay?: string) { - let dateText = value; - // format week - if (/[w|W]/g.test(format)) { - if (typeof dateText !== 'string') { - dateText = dayjs(dateText).format(format); - } - - const yearStr = dateText.split(/[-/.]/)[0]; - const weekStr = dateText.split(/[-/.]/)[1]; - const weekFormatStr = format.split(/[-/.]/)[1]; - const firstWeek = dayjs(yearStr, 'YYYY').startOf('year'); - for (let i = 0; i <= 52; i += 1) { - let nextWeek = firstWeek.add(i, 'week'); - // 重置为周的第一天 - if (timeOfDay === 'start') nextWeek = nextWeek.subtract(5, 'day'); - if (nextWeek.format(weekFormatStr) === weekStr) { - return nextWeek; - } - } - } - - // format quarter - if (/Q/g.test(format)) { - if (typeof dateText !== 'string') { - dateText = dayjs(dateText).format(format); - } - - const yearStr = dateText.split(/[-/.]/)[0]; - const quarterStr = dateText.split(/[-/.]/)[1]; - const quarterFormatStr = format.split(/[-/.]/)[1]; - const firstWeek = dayjs(yearStr, 'YYYY').startOf('year'); - for (let i = 0; i <= 52; i += 1) { - const nextQuarter = firstWeek.add(i, 'quarter'); - if (nextQuarter.format(quarterFormatStr) === quarterStr) { - return nextQuarter; - } - } - } - - // 兼容数据格式不标准场景 YYYY-MM-D - return dayjs(dateText, format).isValid() ? dayjs(dateText, format) : dayjs(dateText); -} - -// 根据不同 mode 给出格式化默认值 -export function getDefaultFormat({ - mode = 'date', - format, - valueType, - enableTimePicker, -}: { - mode?: string; - format?: string; - valueType?: string; - enableTimePicker?: boolean; -}) { - if (mode === 'year') { - return { - format: format || 'YYYY', - valueType: valueType || format || 'YYYY', - timeFormat: TIME_FORMAT, - }; - } - if (mode === 'month') { - return { - format: format || 'YYYY-MM', - valueType: valueType || format || 'YYYY-MM', - timeFormat: TIME_FORMAT, - }; - } - if (mode === 'quarter') { - return { - format: format || 'YYYY-[Q]Q', - valueType: valueType || format || 'YYYY-[Q]Q', - timeFormat: TIME_FORMAT, - }; - } - if (mode === 'week') { - return { - format: format || 'YYYY-wo', - valueType: valueType || format || 'YYYY-wo', - timeFormat: TIME_FORMAT, - }; - } - if (mode === 'date') { - return { - format: format || `YYYY-MM-DD${enableTimePicker ? ' HH:mm:ss' : ''}`, - valueType: valueType || format || `YYYY-MM-DD${enableTimePicker ? ' HH:mm:ss' : ''}`, - timeFormat: extractTimeFormat(format || `YYYY-MM-DD${enableTimePicker ? ' HH:mm:ss' : ''}`) || TIME_FORMAT, - }; - } -} diff --git a/src/date-picker/hooks/useRange.tsx b/src/date-picker/hooks/useRange.tsx index 9e4583e53..f1551cd86 100644 --- a/src/date-picker/hooks/useRange.tsx +++ b/src/date-picker/hooks/useRange.tsx @@ -6,7 +6,7 @@ import useConfig from '../../hooks/useConfig'; import useGlobalIcon from '../../hooks/useGlobalIcon'; import { RangeInputRefInterface } from '../../range-input'; import { TdDateRangePickerProps, DateValue } from '../type'; -import { isValidDate, formatDate, getDefaultFormat } from './useFormat'; +import { isValidDate, formatDate, getDefaultFormat } from '../../_common/js/date-picker/format'; import useRangeValue from './useRangeValue'; export const PARTIAL_MAP = { first: 'start', second: 'end' }; diff --git a/src/date-picker/hooks/useRangeValue.ts b/src/date-picker/hooks/useRangeValue.ts index 8bf84dfee..18c7aed6a 100644 --- a/src/date-picker/hooks/useRangeValue.ts +++ b/src/date-picker/hooks/useRangeValue.ts @@ -2,7 +2,13 @@ import { useState, useEffect } from 'react'; import dayjs from 'dayjs'; import useControlled from '../../hooks/useControlled'; import { TdDateRangePickerProps, DateRangeValue } from '../type'; -import { isValidDate, formatDate, formatTime, getDefaultFormat, parseToDayjs } from './useFormat'; +import { + isValidDate, + formatDate, + formatTime, + getDefaultFormat, + parseToDayjs, +} from '../../_common/js/date-picker/format'; import { extractTimeFormat } from '../../_common/js/date-picker/utils'; import log from '../../_common/js/log'; diff --git a/src/date-picker/hooks/useSingle.tsx b/src/date-picker/hooks/useSingle.tsx index 6fbba9b04..df4343384 100644 --- a/src/date-picker/hooks/useSingle.tsx +++ b/src/date-picker/hooks/useSingle.tsx @@ -5,7 +5,7 @@ import classNames from 'classnames'; import useConfig from '../../hooks/useConfig'; import useGlobalIcon from '../../hooks/useGlobalIcon'; import { TdDatePickerProps } from '../type'; -import { isValidDate, formatDate, formatTime, getDefaultFormat } from './useFormat'; +import { isValidDate, formatDate, formatTime, getDefaultFormat } from '../../_common/js/date-picker/format'; import useSingleValue from './useSingleValue'; export default function useSingleInput(props: TdDatePickerProps) { diff --git a/src/date-picker/hooks/useSingleValue.tsx b/src/date-picker/hooks/useSingleValue.tsx index d58e7ced1..6ab7504e0 100644 --- a/src/date-picker/hooks/useSingleValue.tsx +++ b/src/date-picker/hooks/useSingleValue.tsx @@ -1,6 +1,6 @@ import { useState, useEffect } from 'react'; import dayjs from 'dayjs'; -import { formatDate, formatTime, isValidDate, getDefaultFormat } from './useFormat'; +import { formatDate, formatTime, isValidDate, getDefaultFormat } from '../../_common/js/date-picker/format'; import useControlled from '../../hooks/useControlled'; import { TdDatePickerProps } from '../type'; import { extractTimeFormat } from '../../_common/js/date-picker/utils'; diff --git a/src/date-picker/panel/PanelContent.tsx b/src/date-picker/panel/PanelContent.tsx index 8c9a5191e..4fbdef3a7 100644 --- a/src/date-picker/panel/PanelContent.tsx +++ b/src/date-picker/panel/PanelContent.tsx @@ -5,7 +5,7 @@ import { TimePickerPanel } from '../../time-picker'; import type { SinglePanelProps } from './SinglePanel'; import type { RangePanelProps } from './RangePanel'; import useConfig from '../../hooks/useConfig'; -import { getDefaultFormat } from '../hooks/useFormat'; +import { getDefaultFormat } from '../../_common/js/date-picker/format'; export interface PanelContentProps { partial?: 'start' | 'end'; diff --git a/src/date-picker/panel/RangePanel.tsx b/src/date-picker/panel/RangePanel.tsx index 0111bd2df..574b17f9a 100644 --- a/src/date-picker/panel/RangePanel.tsx +++ b/src/date-picker/panel/RangePanel.tsx @@ -6,7 +6,7 @@ import PanelContent from './PanelContent'; import ExtraContent from './ExtraContent'; import { TdDateRangePickerProps, DateValue } from '../type'; import type { TdTimePickerProps } from '../../time-picker'; -import { getDefaultFormat, parseToDayjs } from '../hooks/useFormat'; +import { getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format'; import useTableData from '../hooks/useTableData'; import useDisableDate from '../hooks/useDisableDate'; diff --git a/src/date-picker/panel/SinglePanel.tsx b/src/date-picker/panel/SinglePanel.tsx index 2cab9a94c..3fd4094e6 100644 --- a/src/date-picker/panel/SinglePanel.tsx +++ b/src/date-picker/panel/SinglePanel.tsx @@ -6,7 +6,7 @@ import PanelContent from './PanelContent'; import ExtraContent from './ExtraContent'; import { TdDatePickerProps, DateValue } from '../type'; import type { TdTimePickerProps } from '../../time-picker'; -import { getDefaultFormat, parseToDayjs } from '../hooks/useFormat'; +import { getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format'; import useTableData from '../hooks/useTableData'; import useDisableDate from '../hooks/useDisableDate';