Skip to content

Commit

Permalink
fix: week picker not need cell select logic (#589)
Browse files Browse the repository at this point in the history
zombieJ authored Feb 17, 2023
1 parent 98ead31 commit 85606b4
Showing 4 changed files with 27 additions and 19 deletions.
18 changes: 10 additions & 8 deletions src/panels/DatePanel/DateBody.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import * as React from 'react';
import type { GenerateConfig } from '../../generate';
import useCellClassName from '../../hooks/useCellClassName';
import type { Locale } from '../../interface';
import RangeContext from '../../RangeContext';
import {
WEEK_DAY_COUNT,
formatValue,
getWeekStartDate,
isSameDate,
isSameMonth,
formatValue,
WEEK_DAY_COUNT,
} from '../../utils/dateUtil';
import type { Locale } from '../../interface';
import RangeContext from '../../RangeContext';
import useCellClassName from '../../hooks/useCellClassName';
import PanelBody from '../PanelBody';

export type DateRender<DateType> = (currentDate: DateType, today: DateType) => React.ReactNode;
@@ -21,6 +21,7 @@ export type DateBodyPassProps<DateType> = {
// Used for week panel
prefixColumn?: (date: DateType) => React.ReactNode;
rowClassName?: (date: DateType) => string;
isSameCell?: (current: DateType, target: DateType) => boolean;
};

export type DateBodyProps<DateType> = {
@@ -43,6 +44,7 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
viewDate,
value,
dateRender,
isSameCell,
} = props;

const { rangedValue, hoverRangedValue } = React.useContext(RangeContext);
@@ -75,8 +77,8 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
generateConfig,
rangedValue: prefixColumn ? null : rangedValue,
hoverRangedValue: prefixColumn ? null : hoverRangedValue,
isSameCell: (current, target) => isSameDate(generateConfig, current, target),
isInView: date => isSameMonth(generateConfig, date, viewDate),
isSameCell: isSameCell || ((current, target) => isSameDate(generateConfig, current, target)),
isInView: (date) => isSameMonth(generateConfig, date, viewDate),
offsetCell: (date, offset) => generateConfig.addDate(date, offset),
});

@@ -92,7 +94,7 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
getCellText={generateConfig.getDate}
getCellClassName={getCellClassName}
getCellDate={generateConfig.addDate}
titleCell={date =>
titleCell={(date) =>
formatValue(date, {
locale,
format: 'YYYY-MM-DD',
23 changes: 12 additions & 11 deletions src/panels/DatePanel/index.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react';
import classNames from 'classnames';
import type { DateBodyPassProps, DateRender } from './DateBody';
import DateBody from './DateBody';
import DateHeader from './DateHeader';
import * as React from 'react';
import type { PanelSharedProps } from '../../interface';
import { WEEK_DAY_COUNT } from '../../utils/dateUtil';
import type { KeyboardConfig } from '../../utils/uiUtil';
import { createKeyDownHandler } from '../../utils/uiUtil';
import type { DateBodyPassProps, DateRender } from './DateBody';
import DateBody from './DateBody';
import DateHeader from './DateHeader';

const DATE_ROW_COUNT = 6;

@@ -17,7 +17,8 @@ export type DatePanelProps<DateType> = {
// Used for week panel
panelName?: string;
keyboardConfig?: KeyboardConfig;
} & PanelSharedProps<DateType> & DateBodyPassProps<DateType>;
} & PanelSharedProps<DateType> &
DateBodyPassProps<DateType>;

function DatePanel<DateType>(props: DatePanelProps<DateType>) {
const {
@@ -37,18 +38,18 @@ function DatePanel<DateType>(props: DatePanelProps<DateType>) {

// ======================= Keyboard =======================
operationRef.current = {
onKeyDown: event =>
onKeyDown: (event) =>
createKeyDownHandler(event, {
onLeftRight: diff => {
onLeftRight: (diff) => {
onSelect(generateConfig.addDate(value || viewDate, diff), 'key');
},
onCtrlLeftRight: diff => {
onCtrlLeftRight: (diff) => {
onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
},
onUpDown: diff => {
onUpDown: (diff) => {
onSelect(generateConfig.addDate(value || viewDate, diff * WEEK_DAY_COUNT), 'key');
},
onPageUpDown: diff => {
onPageUpDown: (diff) => {
onSelect(generateConfig.addMonth(value || viewDate, diff), 'key');
},
...keyboardConfig,
@@ -100,7 +101,7 @@ function DatePanel<DateType>(props: DatePanelProps<DateType>) {
/>
<DateBody
{...props}
onSelect={date => onSelect(date, 'mouse')}
onSelect={(date) => onSelect(date, 'mouse')}
prefixCls={prefixCls}
value={value}
viewDate={viewDate}
2 changes: 2 additions & 0 deletions src/panels/WeekPanel/index.tsx
Original file line number Diff line number Diff line change
@@ -84,6 +84,8 @@ function WeekPanel<DateType>(props: WeekPanelProps<DateType>) {
keyboardConfig={{
onLeftRight: null,
}}
// No need check cell level
isSameCell={() => false}
/>
);
}
3 changes: 3 additions & 0 deletions tests/range.spec.tsx
Original file line number Diff line number Diff line change
@@ -1772,5 +1772,8 @@ describe('Picker.Range', () => {
fireEvent.mouseLeave(findWeekCell('37'));

expect(findWeekCell('37').parentElement).toHaveClass('rc-picker-week-panel-row-range-end');

// No selected cell
expect(document.querySelector('.rc-picker-cell-selected')).toBeFalsy();
});
});

0 comments on commit 85606b4

Please sign in to comment.