From d84d345fb73343a293bcb45c64860ec4fd6e1d68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 17 Feb 2023 11:38:53 +0800 Subject: [PATCH 1/3] feat: support week range --- src/panels/PanelBody.tsx | 6 +-- src/panels/WeekPanel/index.tsx | 80 +++++++++++++++++++++++++--------- 2 files changed, 63 insertions(+), 23 deletions(-) diff --git a/src/panels/PanelBody.tsx b/src/panels/PanelBody.tsx index fce93d478..50ae61e8b 100644 --- a/src/panels/PanelBody.tsx +++ b/src/panels/PanelBody.tsx @@ -1,10 +1,10 @@ -import * as React from 'react'; import classNames from 'classnames'; -import PanelContext from '../PanelContext'; +import * as React from 'react'; import type { GenerateConfig } from '../generate'; -import { getLastDay } from '../utils/timeUtil'; import type { PanelMode } from '../interface'; +import PanelContext from '../PanelContext'; import { getCellDateDisabled } from '../utils/dateUtil'; +import { getLastDay } from '../utils/timeUtil'; export type PanelBodyProps = { prefixCls: string; diff --git a/src/panels/WeekPanel/index.tsx b/src/panels/WeekPanel/index.tsx index 478f87698..c66bb031c 100644 --- a/src/panels/WeekPanel/index.tsx +++ b/src/panels/WeekPanel/index.tsx @@ -1,36 +1,76 @@ -import * as React from 'react'; import classNames from 'classnames'; -import DatePanel from '../DatePanel'; +import * as React from 'react'; import type { PanelSharedProps } from '../../interface'; -import { isSameWeek } from '../../utils/dateUtil'; +import PanelContext from '../../PanelContext'; +import RangeContext from '../../RangeContext'; +import { getCellDateDisabled, isInRange, isSameWeek } from '../../utils/dateUtil'; +import DatePanel from '../DatePanel'; export type WeekPanelProps = PanelSharedProps; function WeekPanel(props: WeekPanelProps) { - const { prefixCls, generateConfig, locale, value } = props; + const { prefixCls, generateConfig, locale, value, disabledDate, onSelect } = props; + + const { rangedValue, hoverRangedValue } = React.useContext(RangeContext); + const { onDateMouseEnter, onDateMouseLeave } = React.useContext(PanelContext); + + const rangeStart = rangedValue?.[0] || hoverRangedValue?.[0]; + const rangeEnd = rangedValue?.[1] || hoverRangedValue?.[1]; // Render additional column const cellPrefixCls = `${prefixCls}-cell`; - const prefixColumn = (date: DateType) => ( - - {generateConfig.locale.getWeek(locale.locale, date)} - - ); + + const prefixColumn = (date: DateType) => { + // >>> Additional check for disabled + const disabled = getCellDateDisabled({ + cellDate: date, + mode: 'week', + disabledDate, + generateConfig, + }); + + return ( + { + if (!disabled) { + onSelect(date, 'mouse'); + } + }} + onMouseEnter={() => { + if (!disabled && onDateMouseEnter) { + onDateMouseEnter(date); + } + }} + onMouseLeave={() => { + if (!disabled && onDateMouseLeave) { + onDateMouseLeave(date); + } + }} + > + {generateConfig.locale.getWeek(locale.locale, date)} + + ); + }; // Add row className const rowPrefixCls = `${prefixCls}-week-panel-row`; - const rowClassName = (date: DateType) => - classNames(rowPrefixCls, { - [`${rowPrefixCls}-selected`]: isSameWeek( - generateConfig, - locale.locale, - value, - date, - ), + + const rowClassName = (date: DateType) => { + const isRangeStart = isSameWeek(generateConfig, locale.locale, rangeStart, date); + const isRangeEnd = isSameWeek(generateConfig, locale.locale, rangeEnd, date); + return classNames(rowPrefixCls, { + [`${rowPrefixCls}-selected`]: isSameWeek(generateConfig, locale.locale, value, date), + + // Patch for hover range + [`${rowPrefixCls}-range-start`]: isRangeStart, + [`${rowPrefixCls}-range-end`]: isRangeEnd, + [`${rowPrefixCls}-range-hover`]: + !isRangeStart && !isRangeEnd && isInRange(generateConfig, rangeStart, rangeEnd, date), }); + }; return ( Date: Fri, 17 Feb 2023 11:44:20 +0800 Subject: [PATCH 2/3] chore: update less --- assets/index.less | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/assets/index.less b/assets/index.less index 2f98d75d2..887022c87 100644 --- a/assets/index.less +++ b/assets/index.less @@ -203,6 +203,21 @@ background: rgba(0, 0, 255, 0.3); } } + + &-range { + &-hover { + .@{prefix-cls}-cell { + background: rgba(0, 255, 0, 0.1); + } + } + + &-start, + &-end { + .@{prefix-cls}-cell { + background: rgba(0, 255, 0, 0.3); + } + } + } } .@{prefix-cls}-cell, From 4e9209152678fc79f7c4a4f843c4a7f84068536b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 17 Feb 2023 11:59:34 +0800 Subject: [PATCH 3/3] test: add test case --- tests/range.spec.tsx | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 35250c1d2..77d2eada5 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1746,4 +1746,33 @@ describe('Picker.Range', () => { }); mock.mockRestore(); }); + + it('week range selection style', () => { + const { container } = render(); + openPicker(container); + + function findWeekCell(val: string) { + const list = document.querySelectorAll('.rc-picker-cell-week'); + return Array.from(list).find((cell) => cell.textContent == val); + } + + console.log(document.body.innerHTML); + + // Start + fireEvent.mouseEnter(findWeekCell('35')); + fireEvent.click(findWeekCell('35')); + fireEvent.mouseLeave(findWeekCell('35')); + + expect(findWeekCell('35').parentElement).toHaveClass('rc-picker-week-panel-row-range-start'); + + // End Hover + fireEvent.mouseEnter(findWeekCell('37')); + expect(findWeekCell('36').parentElement).toHaveClass('rc-picker-week-panel-row-range-hover'); + + // End Click + fireEvent.click(findWeekCell('37')); + fireEvent.mouseLeave(findWeekCell('37')); + + expect(findWeekCell('37').parentElement).toHaveClass('rc-picker-week-panel-row-range-end'); + }); });