From 8a1684b36a54c0d8591135f7855f49fa5fda72f5 Mon Sep 17 00:00:00 2001 From: Henrique Silva Date: Tue, 26 Oct 2021 19:03:30 +0200 Subject: [PATCH 1/8] Format titleCell with locale --- src/panels/DatePanel/DateBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/DatePanel/DateBody.tsx b/src/panels/DatePanel/DateBody.tsx index d0df6788b..8ea87df8e 100644 --- a/src/panels/DatePanel/DateBody.tsx +++ b/src/panels/DatePanel/DateBody.tsx @@ -95,7 +95,7 @@ function DateBody(props: DateBodyProps) { titleCell={date => formatValue(date, { locale, - format: 'YYYY-MM-DD', + format: locale.dateFormat, generateConfig, }) } From 77728b5828495f14314bff34ac447ca16c3e20c5 Mon Sep 17 00:00:00 2001 From: Henrique Silva Date: Wed, 27 Oct 2021 11:31:42 +0200 Subject: [PATCH 2/8] Use locale.dateFormate to generate lastDay --- src/panels/PanelBody.tsx | 6 ++++-- src/utils/timeUtil.ts | 28 +++++++++++----------------- tests/util.spec.tsx | 10 ++++------ 3 files changed, 19 insertions(+), 25 deletions(-) diff --git a/src/panels/PanelBody.tsx b/src/panels/PanelBody.tsx index fce93d478..474f05077 100644 --- a/src/panels/PanelBody.tsx +++ b/src/panels/PanelBody.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames'; import PanelContext from '../PanelContext'; import type { GenerateConfig } from '../generate'; import { getLastDay } from '../utils/timeUtil'; -import type { PanelMode } from '../interface'; +import type { PanelMode, Locale } from '../interface'; import { getCellDateDisabled } from '../utils/dateUtil'; export type PanelBodyProps = { @@ -23,6 +23,7 @@ export type PanelBodyProps = { getCellNode?: (date: DateType) => React.ReactNode; titleCell?: (date: DateType) => string; generateConfig: GenerateConfig; + locale: Locale; // Used for week panel prefixColumn?: (date: DateType) => React.ReactNode; @@ -44,6 +45,7 @@ export default function PanelBody({ getCellNode, getCellDate, generateConfig, + locale, titleCell, headerCells, }: PanelBodyProps) { @@ -87,7 +89,7 @@ export default function PanelBody({ [`${cellPrefixCls}-start`]: getCellText(currentDate) === 1 || (picker === 'year' && Number(title) % 10 === 0), [`${cellPrefixCls}-end`]: - title === getLastDay(generateConfig, currentDate) || + title === getLastDay(generateConfig, currentDate, locale) || (picker === 'year' && Number(title) % 10 === 9), ...getCellClassName(currentDate), })} diff --git a/src/utils/timeUtil.ts b/src/utils/timeUtil.ts index 3b4051824..815ede9aa 100644 --- a/src/utils/timeUtil.ts +++ b/src/utils/timeUtil.ts @@ -1,5 +1,6 @@ import type { NullableDateType } from '../interface'; import type { GenerateConfig } from '../generate'; +import type { Locale } from '../interface'; export function setTime( generateConfig: GenerateConfig, @@ -24,22 +25,12 @@ export function setDateTime( } let newDate = date; - newDate = generateConfig.setHour( - newDate, - generateConfig.getHour(defaultDate), - ); - newDate = generateConfig.setMinute( - newDate, - generateConfig.getMinute(defaultDate), - ); - newDate = generateConfig.setSecond( - newDate, - generateConfig.getSecond(defaultDate), - ); + newDate = generateConfig.setHour(newDate, generateConfig.getHour(defaultDate)); + newDate = generateConfig.setMinute(newDate, generateConfig.getMinute(defaultDate)); + newDate = generateConfig.setSecond(newDate, generateConfig.getSecond(defaultDate)); return newDate; } - export function getLowerBoundTime( hour: number, minute: number, @@ -60,11 +51,14 @@ export function getLowerBoundTime( return [lowerBoundHour, lowerBoundMinute, lowerBoundSecond]; } -export function getLastDay(generateConfig: GenerateConfig, date: DateType) { +export function getLastDay( + generateConfig: GenerateConfig, + date: DateType, + locale: Locale, +) { const year = generateConfig.getYear(date); const month = generateConfig.getMonth(date) + 1; const endDate = generateConfig.getEndDate(generateConfig.getFixedDate(`${year}-${month}-01`)); - const lastDay = generateConfig.getDate(endDate); - const monthShow = month < 10 ? `0${month}` : `${month}`; - return `${year}-${monthShow}-${lastDay}`; + + return generateConfig.locale.format(locale.locale, endDate, locale.dateFormat); } diff --git a/tests/util.spec.tsx b/tests/util.spec.tsx index 0348574ee..e70afb050 100644 --- a/tests/util.spec.tsx +++ b/tests/util.spec.tsx @@ -3,6 +3,8 @@ import { getLowerBoundTime, setTime, getLastDay } from '../src/utils/timeUtil'; import { toArray } from '../src/utils/miscUtil'; import { isSameTime, isSameDecade } from '../src/utils/dateUtil'; import { getMoment } from './util/commonUtil'; +import koKR from '../src/locale/ko_KR'; +import enUS from '../src/locale/en_US'; describe('Picker.Util', () => { it('toArray', () => { @@ -66,11 +68,7 @@ describe('Picker.Util', () => { }); describe('getLastDay', () => { - expect( - getLastDay( - momentGenerateConfig, - getMoment('2020-10-01'), - ), - ).toEqual('2020-10-31'); + expect(getLastDay(momentGenerateConfig, getMoment('2020-10-01'), koKR)).toEqual('2020-10-31'); + expect(getLastDay(momentGenerateConfig, getMoment('2020-10-01'), enUS)).toEqual('10/31/2020'); }); }); From db0662208856461960893268e471183114e8ee29 Mon Sep 17 00:00:00 2001 From: Henrique Silva Date: Wed, 27 Oct 2021 11:33:47 +0200 Subject: [PATCH 3/8] Update rc-picker-cell snapshots --- tests/__snapshots__/panel.spec.tsx.snap | 84 ++++++++++++------------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/tests/__snapshots__/panel.spec.tsx.snap b/tests/__snapshots__/panel.spec.tsx.snap index 769478ed3..80f1fd2b2 100644 --- a/tests/__snapshots__/panel.spec.tsx.snap +++ b/tests/__snapshots__/panel.spec.tsx.snap @@ -178,7 +178,7 @@ exports[`Picker.Panel should render correctly in rtl 1`] = `
Date: Wed, 27 Oct 2021 11:41:34 +0200 Subject: [PATCH 4/8] Refactor code due to format being always a string --- src/panels/DatePanel/DateBody.tsx | 30 +++++------------------------- 1 file changed, 5 insertions(+), 25 deletions(-) diff --git a/src/panels/DatePanel/DateBody.tsx b/src/panels/DatePanel/DateBody.tsx index 8ea87df8e..f55e2de19 100644 --- a/src/panels/DatePanel/DateBody.tsx +++ b/src/panels/DatePanel/DateBody.tsx @@ -1,12 +1,6 @@ import * as React from 'react'; import type { GenerateConfig } from '../../generate'; -import { - WEEK_DAY_COUNT, - getWeekStartDate, - isSameDate, - isSameMonth, - formatValue, -} from '../../utils/dateUtil'; +import { WEEK_DAY_COUNT, getWeekStartDate, isSameDate, isSameMonth } from '../../utils/dateUtil'; import type { Locale } from '../../interface'; import RangeContext from '../../RangeContext'; import useCellClassName from '../../hooks/useCellClassName'; @@ -34,16 +28,8 @@ export type DateBodyProps = { } & DateBodyPassProps; function DateBody(props: DateBodyProps) { - const { - prefixCls, - generateConfig, - prefixColumn, - locale, - rowCount, - viewDate, - value, - dateRender, - } = props; + const { prefixCls, generateConfig, prefixColumn, locale, rowCount, viewDate, value, dateRender } = + props; const { rangedValue, hoverRangedValue } = React.useContext(RangeContext); @@ -76,7 +62,7 @@ function DateBody(props: DateBodyProps) { rangedValue: prefixColumn ? null : rangedValue, hoverRangedValue: prefixColumn ? null : hoverRangedValue, isSameCell: (current, target) => isSameDate(generateConfig, current, target), - isInView: date => isSameMonth(generateConfig, date, viewDate), + isInView: (date) => isSameMonth(generateConfig, date, viewDate), offsetCell: (date, offset) => generateConfig.addDate(date, offset), }); @@ -92,13 +78,7 @@ function DateBody(props: DateBodyProps) { getCellText={generateConfig.getDate} getCellClassName={getCellClassName} getCellDate={generateConfig.addDate} - titleCell={date => - formatValue(date, { - locale, - format: locale.dateFormat, - generateConfig, - }) - } + titleCell={(date) => generateConfig.locale.format(locale.locale, date, locale.dateFormat)} headerCells={headerCells} /> ); From 6d142e1cf0c94e1fa520c4bc541a78b744a73470 Mon Sep 17 00:00:00 2001 From: Henrique Silva Date: Thu, 28 Oct 2021 09:41:05 +0200 Subject: [PATCH 5/8] Make locale optional --- src/panels/PanelBody.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/panels/PanelBody.tsx b/src/panels/PanelBody.tsx index 474f05077..4501a4c3a 100644 --- a/src/panels/PanelBody.tsx +++ b/src/panels/PanelBody.tsx @@ -23,7 +23,7 @@ export type PanelBodyProps = { getCellNode?: (date: DateType) => React.ReactNode; titleCell?: (date: DateType) => string; generateConfig: GenerateConfig; - locale: Locale; + locale?: Locale; // Used for week panel prefixColumn?: (date: DateType) => React.ReactNode; @@ -79,6 +79,7 @@ export default function PanelBody({ } const title = titleCell && titleCell(currentDate); + const lastDayTitle = locale && getLastDay(generateConfig, currentDate, locale); row.push( ({ [`${cellPrefixCls}-start`]: getCellText(currentDate) === 1 || (picker === 'year' && Number(title) % 10 === 0), [`${cellPrefixCls}-end`]: - title === getLastDay(generateConfig, currentDate, locale) || - (picker === 'year' && Number(title) % 10 === 9), + title === lastDayTitle || (picker === 'year' && Number(title) % 10 === 9), ...getCellClassName(currentDate), })} onClick={() => { From 5e8b95ee3cae6257939f47eadfc0d750737f3336 Mon Sep 17 00:00:00 2001 From: Henrique Silva Date: Thu, 28 Oct 2021 09:50:40 +0200 Subject: [PATCH 6/8] Refactor code to mimic the panels structure The locale should be present if picker isn't a year picker --- src/panels/PanelBody.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/panels/PanelBody.tsx b/src/panels/PanelBody.tsx index 4501a4c3a..da7d9282f 100644 --- a/src/panels/PanelBody.tsx +++ b/src/panels/PanelBody.tsx @@ -79,7 +79,10 @@ export default function PanelBody({ } const title = titleCell && titleCell(currentDate); - const lastDayTitle = locale && getLastDay(generateConfig, currentDate, locale); + const lastDateTitle = + picker === 'year' + ? Number(title) % 10 === 9 + : getLastDay(generateConfig, currentDate, locale); row.push( ({ [`${cellPrefixCls}-disabled`]: disabled, [`${cellPrefixCls}-start`]: getCellText(currentDate) === 1 || (picker === 'year' && Number(title) % 10 === 0), - [`${cellPrefixCls}-end`]: - title === lastDayTitle || (picker === 'year' && Number(title) % 10 === 9), + [`${cellPrefixCls}-end`]: title === lastDateTitle, ...getCellClassName(currentDate), })} onClick={() => { From 2e6ff53fb74f8ee06656a1a4f4b0d4ee9f530dda Mon Sep 17 00:00:00 2001 From: Henrique Silva Date: Thu, 28 Oct 2021 11:01:05 +0200 Subject: [PATCH 7/8] Check for locale on panelBody --- src/panels/PanelBody.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/PanelBody.tsx b/src/panels/PanelBody.tsx index da7d9282f..f5d9c2e84 100644 --- a/src/panels/PanelBody.tsx +++ b/src/panels/PanelBody.tsx @@ -82,7 +82,7 @@ export default function PanelBody({ const lastDateTitle = picker === 'year' ? Number(title) % 10 === 9 - : getLastDay(generateConfig, currentDate, locale); + : locale && getLastDay(generateConfig, currentDate, locale); row.push( Date: Fri, 29 Oct 2021 16:49:52 +0200 Subject: [PATCH 8/8] Tie default formatters to locale --- src/Picker.tsx | 2 +- src/RangePicker.tsx | 4 +++- src/utils/uiUtil.ts | 7 ++++--- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/Picker.tsx b/src/Picker.tsx index d6d0e3e89..b2dd2e491 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -181,7 +181,7 @@ function InnerPicker(props: PickerProps) { const needConfirmButton: boolean = (picker === 'date' && !!showTime) || picker === 'time'; // ============================= State ============================= - const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours)); + const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours, locale)); // Panel ref const panelDivRef = React.useRef(null); diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index fc4031c0c..9349c6de4 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -234,7 +234,9 @@ function InnerRangePicker(props: RangePickerProps) { const endInputRef = useRef(null); // ============================= Misc ============================== - const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours)); + const formatList = toArray( + getDefaultFormat(format, picker, showTime, use12Hours, locale), + ); // Active picker const [mergedActivePickerIndex, setMergedActivePickerIndex] = useMergedState<0 | 1>(0, { diff --git a/src/utils/uiUtil.ts b/src/utils/uiUtil.ts index 1ac765c7c..4229b993a 100644 --- a/src/utils/uiUtil.ts +++ b/src/utils/uiUtil.ts @@ -2,7 +2,7 @@ import KeyCode from 'rc-util/lib/KeyCode'; import raf from 'rc-util/lib/raf'; import isVisible from 'rc-util/lib/Dom/isVisible'; import type { GenerateConfig } from '../generate'; -import type { CustomFormat, PanelMode, PickerMode } from '../interface'; +import type { CustomFormat, PanelMode, PickerMode, Locale } from '../interface'; const scrollIds = new Map(); @@ -149,6 +149,7 @@ export function getDefaultFormat( picker: PickerMode | undefined, showTime: boolean | object | undefined, use12Hours: boolean | undefined, + locale: Locale, ) { let mergedFormat = format; if (!mergedFormat) { @@ -170,11 +171,11 @@ export function getDefaultFormat( break; case 'year': - mergedFormat = 'YYYY'; + mergedFormat = locale.yearFormat; break; default: - mergedFormat = showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'; + mergedFormat = showTime ? locale.dateTimeFormat : locale.dateFormat; } }