From 05a00d2cd57b84d0336678914c6322ed81a3f067 Mon Sep 17 00:00:00 2001 From: Kermit Date: Wed, 14 Oct 2020 22:37:07 +0800 Subject: [PATCH] chore: optimize format value --- src/RangePicker.tsx | 12 ++++++++++-- src/panels/DatePanel/DateBody.tsx | 16 ++++++++++++++-- src/panels/DatePanel/DateHeader.tsx | 21 ++++++++++++--------- src/panels/MonthPanel/MonthBody.tsx | 16 +++++++++++++--- src/panels/MonthPanel/MonthHeader.tsx | 7 ++++++- src/panels/QuarterPanel/QuarterBody.tsx | 16 +++++++++++++--- src/panels/QuarterPanel/QuarterHeader.tsx | 7 ++++++- src/panels/TimePanel/TimeHeader.tsx | 7 ++++++- src/panels/YearPanel/YearBody.tsx | 10 ++++++++-- 9 files changed, 88 insertions(+), 24 deletions(-) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 418ac9d95..c4de3b751 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -651,11 +651,19 @@ function InnerRangePicker(props: RangePickerProps) { // Close should sync back with text value const startStr = mergedValue && mergedValue[0] - ? generateConfig.locale.format(locale.locale, mergedValue[0], 'YYYYMMDDHHmmss') + ? formatValue(mergedValue[0], { + locale, + format: 'YYYYMMDDHHmmss', + generateConfig, + }) : ''; const endStr = mergedValue && mergedValue[1] - ? generateConfig.locale.format(locale.locale, mergedValue[1], 'YYYYMMDDHHmmss') + ? formatValue(mergedValue[1], { + locale, + format: 'YYYYMMDDHHmmss', + generateConfig, + }) : ''; useEffect(() => { diff --git a/src/panels/DatePanel/DateBody.tsx b/src/panels/DatePanel/DateBody.tsx index 0a0b4f509..6639bea64 100644 --- a/src/panels/DatePanel/DateBody.tsx +++ b/src/panels/DatePanel/DateBody.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; import { GenerateConfig } from '../../generate'; -import { WEEK_DAY_COUNT, getWeekStartDate, isSameDate, isSameMonth } from '../../utils/dateUtil'; +import { + WEEK_DAY_COUNT, + getWeekStartDate, + isSameDate, + isSameMonth, + formatValue, +} from '../../utils/dateUtil'; import { Locale } from '../../interface'; import RangeContext from '../../RangeContext'; import useCellClassName from '../../hooks/useCellClassName'; @@ -86,7 +92,13 @@ function DateBody(props: DateBodyProps) { getCellText={generateConfig.getDate} getCellClassName={getCellClassName} getCellDate={generateConfig.addDate} - titleCell={date => generateConfig.locale.format(locale.locale, date, 'YYYY-MM-DD')} + titleCell={date => + formatValue(date, { + locale, + format: 'YYYY-MM-DD', + generateConfig, + }) + } headerCells={headerCells} /> ); diff --git a/src/panels/DatePanel/DateHeader.tsx b/src/panels/DatePanel/DateHeader.tsx index ededfae33..b229936f8 100644 --- a/src/panels/DatePanel/DateHeader.tsx +++ b/src/panels/DatePanel/DateHeader.tsx @@ -3,6 +3,7 @@ import Header from '../Header'; import { Locale } from '../../interface'; import { GenerateConfig } from '../../generate'; import PanelContext from '../../PanelContext'; +import { formatValue } from '../../utils/dateUtil'; export interface DateHeaderProps { prefixCls: string; @@ -57,7 +58,11 @@ function DateHeader(props: DateHeaderProps) { tabIndex={-1} className={`${prefixCls}-year-btn`} > - {generateConfig.locale.format(locale.locale, viewDate, locale.yearFormat)} + {formatValue(viewDate, { + locale, + format: locale.yearFormat, + generateConfig, + })} ); const monthNode: React.ReactNode = ( @@ -69,18 +74,16 @@ function DateHeader(props: DateHeaderProps) { className={`${prefixCls}-month-btn`} > {locale.monthFormat - ? generateConfig.locale.format( - locale.locale, - viewDate, - locale.monthFormat, - ) + ? formatValue(viewDate, { + locale, + format: locale.monthFormat, + generateConfig, + }) : monthsLocale[month]} ); - const monthYearNodes = locale.monthBeforeYear - ? [monthNode, yearNode] - : [yearNode, monthNode]; + const monthYearNodes = locale.monthBeforeYear ? [monthNode, yearNode] : [yearNode, monthNode]; return (
(props: MonthBodyProps) { getCellNode={getCellNode} getCellText={date => locale.monthFormat - ? generateConfig.locale.format(locale.locale, date, locale.monthFormat) + ? formatValue(date, { + locale, + format: locale.monthFormat, + generateConfig, + }) : monthsLocale[generateConfig.getMonth(date)] } getCellClassName={getCellClassName} getCellDate={generateConfig.addMonth} - titleCell={date => generateConfig.locale.format(locale.locale, date, 'YYYY-MM')} + titleCell={date => + formatValue(date, { + locale, + format: 'YYYY-MM', + generateConfig, + }) + } /> ); } diff --git a/src/panels/MonthPanel/MonthHeader.tsx b/src/panels/MonthPanel/MonthHeader.tsx index 58e44b77e..36eea4971 100644 --- a/src/panels/MonthPanel/MonthHeader.tsx +++ b/src/panels/MonthPanel/MonthHeader.tsx @@ -3,6 +3,7 @@ import Header from '../Header'; import { Locale } from '../../interface'; import { GenerateConfig } from '../../generate'; import PanelContext from '../../PanelContext'; +import { formatValue } from '../../utils/dateUtil'; export interface MonthHeaderProps { prefixCls: string; @@ -40,7 +41,11 @@ function MonthHeader(props: MonthHeaderProps) { onSuperNext={onNextYear} >
); diff --git a/src/panels/QuarterPanel/QuarterBody.tsx b/src/panels/QuarterPanel/QuarterBody.tsx index 012cd3a61..2bc4afb6e 100644 --- a/src/panels/QuarterPanel/QuarterBody.tsx +++ b/src/panels/QuarterPanel/QuarterBody.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { GenerateConfig } from '../../generate'; import { Locale } from '../../interface'; -import { isSameQuarter } from '../../utils/dateUtil'; +import { formatValue, isSameQuarter } from '../../utils/dateUtil'; import RangeContext from '../../RangeContext'; import useCellClassName from '../../hooks/useCellClassName'; import PanelBody from '../PanelBody'; @@ -46,11 +46,21 @@ function QuarterBody(props: QuarterBodyProps) { colNum={QUARTER_COL_COUNT} baseDate={baseQuarter} getCellText={date => - generateConfig.locale.format(locale.locale, date, locale.quarterFormat || '[Q]Q') + formatValue(date, { + locale, + format: locale.quarterFormat || '[Q]Q', + generateConfig, + }) } getCellClassName={getCellClassName} getCellDate={(date, offset) => generateConfig.addMonth(date, offset * 3)} - titleCell={date => generateConfig.locale.format(locale.locale, date, 'YYYY-[Q]Q')} + titleCell={date => + formatValue(date, { + locale, + format: 'YYYY-[Q]Q', + generateConfig, + }) + } /> ); } diff --git a/src/panels/QuarterPanel/QuarterHeader.tsx b/src/panels/QuarterPanel/QuarterHeader.tsx index 8c94d2e94..79a2d2ded 100644 --- a/src/panels/QuarterPanel/QuarterHeader.tsx +++ b/src/panels/QuarterPanel/QuarterHeader.tsx @@ -3,6 +3,7 @@ import Header from '../Header'; import { Locale } from '../../interface'; import { GenerateConfig } from '../../generate'; import PanelContext from '../../PanelContext'; +import { formatValue } from '../../utils/dateUtil'; export interface QuarterHeaderProps { prefixCls: string; @@ -39,7 +40,11 @@ function QuarterHeader(props: QuarterHeaderProps) { onSuperNext={onNextYear} > ); diff --git a/src/panels/TimePanel/TimeHeader.tsx b/src/panels/TimePanel/TimeHeader.tsx index b988463f7..a993ae2af 100644 --- a/src/panels/TimePanel/TimeHeader.tsx +++ b/src/panels/TimePanel/TimeHeader.tsx @@ -3,6 +3,7 @@ import Header from '../Header'; import { Locale } from '../../interface'; import { GenerateConfig } from '../../generate'; import PanelContext from '../../PanelContext'; +import { formatValue } from '../../utils/dateUtil'; export interface TimeHeaderProps { prefixCls: string; @@ -24,7 +25,11 @@ function TimeHeader(props: TimeHeaderProps) { return (
{value - ? generateConfig.locale.format(locale.locale, value, format) + ? formatValue(value, { + locale, + format, + generateConfig, + }) : '\u00A0'}
); diff --git a/src/panels/YearPanel/YearBody.tsx b/src/panels/YearPanel/YearBody.tsx index ed630ff13..b0ca29ec3 100644 --- a/src/panels/YearPanel/YearBody.tsx +++ b/src/panels/YearPanel/YearBody.tsx @@ -3,7 +3,7 @@ import { GenerateConfig } from '../../generate'; import { YEAR_DECADE_COUNT } from '.'; import { Locale, NullableDateType } from '../../interface'; import useCellClassName from '../../hooks/useCellClassName'; -import { isSameYear } from '../../utils/dateUtil'; +import { formatValue, isSameYear } from '../../utils/dateUtil'; import RangeContext from '../../RangeContext'; import PanelBody from '../PanelBody'; @@ -60,7 +60,13 @@ function YearBody(props: YearBodyProps) { getCellText={generateConfig.getYear} getCellClassName={getCellClassName} getCellDate={generateConfig.addYear} - titleCell={date => generateConfig.locale.format(locale.locale, date, 'YYYY')} + titleCell={date => + formatValue(date, { + locale, + format: 'YYYY', + generateConfig, + }) + } /> ); }