Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

disableDate后导致部分日期无法禁用或无法点击 #188

Closed
wants to merge 7 commits into from
Closed

disableDate后导致部分日期无法禁用或无法点击 #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7cc3425
fix: select Panel
HelloAny Dec 10, 2020
dc4a8c0
fix
HelloAny Dec 10, 2020
1beefec
Update PanelBody.tsx
HelloAny Dec 10, 2020
d01975e
fix: dateFns
HelloAny Dec 10, 2020
a8dc56a
fix: dayjs
HelloAny Dec 10, 2020
7e91522
lint
HelloAny Dec 10, 2020
2d1272c
add tests
HelloAny Dec 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/PickerPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,7 +347,7 @@ function PickerPanel<DateType>(props: PickerPanelProps<DateType>) {
onViewDateChange: setViewDate,
sourceMode,
onPanelChange: onInternalPanelChange,
disabledDate: mergedMode !== 'decade' ? disabledDate : undefined,
disabledDate,
};
delete pickerProps.onChange;
delete pickerProps.onSelect;
Expand Down
3 changes: 3 additions & 0 deletions src/generate/dateFns.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
getMonth,
getDate,
endOfMonth,
endOfYear,
getHours,
getMinutes,
getSeconds,
Expand Down Expand Up @@ -62,6 +63,8 @@ const generateConfig: GenerateConfig<Date> = {
setHour: (date, hour) => setHours(date, hour),
setMinute: (date, minute) => setMinutes(date, minute),
setSecond: (date, second) => setSeconds(date, second),
addEndMonth: (date, diff) => addMonths(endOfMonth(date), diff),
addEndYear: (date, diff) => addYears(endOfYear(date), diff),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个里面的方法都是到时暴露给用户的，但是在这里只是供内部使用，不够优雅。

我认为这个应该是判断禁用时的边界问题，看看能不能通过内部写个自定义的hook什么的专门判断月份、年等面板的禁用日期？

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在判断月份和年等面板的时候是用户的disableDate函数返回，这个函数内部对比是无法感知的而且是基于moment等外部库的比较，如果用内部的自定义方法去干涉disableDate函数内部的比较可能会导致antd暴露的api产生变动。

关于generate里的方法似乎只是内部使用，我并未找到暴露的接口😂

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不好意思，理解错了😅

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

没事😅，其他能帮忙review一下吗

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

你这个解决方案是将调用 disableDate 函数的日期参数改为了，月、年、十年的末尾日期去比较，这样的确解决了 issue 里面的问题，但是应该没有从根源解决。

issue 中 disableDate 的逻辑是禁用今天与今天之前的日期，用你这种方法是可行的，但是如果 disableDate 禁用的是今天和今天之后的日期，这是切换到月份面板的时候，按照你的方法，当前的月份还是会被禁用的，还有更复杂的，当禁用这个月中的某个区间的时候（例如今天19号，禁用15号到20号），你的方法还是不适用的。

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感觉只有重写disable逻辑才能解决问题了，因为这一步是将内部的函数暴露给用户，用户的逻辑代码无法获取


// Compare
isAfter: (date1, date2) => isAfter(date1, date2),
Expand Down
2 changes: 2 additions & 0 deletions src/generate/dayjs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@ const generateConfig: GenerateConfig<Dayjs> = {
setHour: (date, hour) => date.hour(hour),
setMinute: (date, minute) => date.minute(minute),
setSecond: (date, second) => date.second(second),
addEndMonth: (date, diff) => date.add(diff, 'month').endOf('month'),
addEndYear: (date, diff) => date.add(diff, 'year').endOf('year'),

// Compare
isAfter: (date1, date2) => date1.isAfter(date2),
Expand Down
2 changes: 2 additions & 0 deletions src/generate/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ export interface GenerateConfig<DateType> {
setHour: (value: DateType, hour: number) => DateType;
setMinute: (value: DateType, minute: number) => DateType;
setSecond: (value: DateType, second: number) => DateType;
addEndMonth: (value: DateType, second: number) => DateType;
addEndYear: (value: DateType, second: number) => DateType;

// Compare
isAfter: (date1: DateType, date2: DateType) => boolean;
Expand Down
8 changes: 8 additions & 0 deletions src/generate/moment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,14 @@ const generateConfig: GenerateConfig<Moment> = {
const clone = date.clone();
return clone.second(second);
},
addEndMonth: (date, diff) => {
const clone = date.clone();
return clone.endOf('month').add(diff, 'month');
},
addEndYear: (date, diff) => {
const clone = date.clone();
return clone.endOf('year').add(diff, 'year');
},

// Compare
isAfter: (date1, date2) => date1.isAfter(date2),
Expand Down
1 change: 1 addition & 0 deletions src/panels/DatePanel/DateBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
getCellText={generateConfig.getDate}
getCellClassName={getCellClassName}
getCellDate={generateConfig.addDate}
getCompareDate={generateConfig.addDate}
titleCell={date =>
formatValue(date, {
locale,
Expand Down
6 changes: 2 additions & 4 deletions src/panels/DecadePanel/DecadeBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,12 @@ export interface YearBodyProps<DateType> {
prefixCls: string;
generateConfig: GenerateConfig<DateType>;
viewDate: DateType;
disabledDate?: (date: DateType) => boolean;
onSelect: (value: DateType) => void;
}

function DecadeBody<DateType>(props: YearBodyProps<DateType>) {
const DECADE_UNIT_DIFF_DES = DECADE_UNIT_DIFF - 1;
const { prefixCls, viewDate, generateConfig, disabledDate } = props;
const { prefixCls, viewDate, generateConfig } = props;

const cellPrefixCls = `${prefixCls}-cell`;

Expand All @@ -35,13 +34,11 @@ function DecadeBody<DateType>(props: YearBodyProps<DateType>) {
);

const getCellClassName = (date: DateType) => {
const disabled = disabledDate && disabledDate(date);

const startDecadeNumber = generateConfig.getYear(date);
const endDecadeNumber = startDecadeNumber + DECADE_UNIT_DIFF_DES;

return {
[`${cellPrefixCls}-disabled`]: disabled,
[`${cellPrefixCls}-in-view`]:
startDecadeYear <= startDecadeNumber && endDecadeNumber <= endDecadeYear,
[`${cellPrefixCls}-selected`]: startDecadeNumber === decadeYearNumber,
Expand All @@ -60,6 +57,7 @@ function DecadeBody<DateType>(props: YearBodyProps<DateType>) {
}}
getCellClassName={getCellClassName}
getCellDate={(date, offset) => generateConfig.addYear(date, offset * DECADE_UNIT_DIFF)}
getCompareDate={(date, offset) => generateConfig.addEndYear(date, offset * DECADE_UNIT_DIFF + DECADE_UNIT_DIFF_DES)}
/>
);
}
Expand Down
1 change: 1 addition & 0 deletions src/panels/MonthPanel/MonthBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ function MonthBody<DateType>(props: MonthBodyProps<DateType>) {
}
getCellClassName={getCellClassName}
getCellDate={generateConfig.addMonth}
getCompareDate={generateConfig.addEndMonth}
titleCell={date =>
formatValue(date, {
locale,
Expand Down
12 changes: 9 additions & 3 deletions src/panels/PanelBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export interface PanelBodyProps<DateType> {
baseDate: DateType;
getCellClassName: (date: DateType) => Record<string, boolean | undefined>;
getCellDate: (date: DateType, offset: number) => DateType;
getCompareDate: (date: DateType, offset: number) => DateType;
getCellText: (date: DateType) => React.ReactNode;
getCellNode?: (date: DateType) => React.ReactNode;
titleCell?: (date: DateType) => string;
Expand All @@ -42,6 +43,7 @@ export default function PanelBody<DateType>({
getCellText,
getCellNode,
getCellDate,
getCompareDate,
generateConfig,
titleCell,
headerCells,
Expand All @@ -60,7 +62,8 @@ export default function PanelBody<DateType>({
for (let j = 0; j < colNum; j += 1) {
const offset = i * colNum + j;
const currentDate = getCellDate(baseDate, offset);
const disabled = disabledDate && disabledDate(currentDate);
const compareDate = getCompareDate(baseDate, offset);
const disabled = disabledDate && disabledDate(compareDate);

if (j === 0) {
rowStartDate = currentDate;
Expand All @@ -78,8 +81,11 @@ export default function PanelBody<DateType>({
title={title}
className={classNames(cellPrefixCls, {
[`${cellPrefixCls}-disabled`]: disabled,
[`${cellPrefixCls}-start`]: getCellText(currentDate) === 1 || picker === 'year' && Number(title) % 10 === 0,
[`${cellPrefixCls}-end`]: title === getLastDay(generateConfig, currentDate) || picker === 'year' && Number(title) % 10 === 9,
[`${cellPrefixCls}-start`]:
getCellText(currentDate) === 1 || (picker === 'year' && Number(title) % 10 === 0),
[`${cellPrefixCls}-end`]:
title === getLastDay(generateConfig, currentDate) ||
(picker === 'year' && Number(title) % 10 === 9),
...getCellClassName(currentDate),
})}
onClick={() => {
Expand Down
1 change: 1 addition & 0 deletions src/panels/QuarterPanel/QuarterBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ function QuarterBody<DateType>(props: QuarterBodyProps<DateType>) {
}
getCellClassName={getCellClassName}
getCellDate={(date, offset) => generateConfig.addMonth(date, offset * 3)}
getCompareDate={(date, offset) => generateConfig.addEndMonth(date, offset * 3)}
titleCell={date =>
formatValue(date, {
locale,
Expand Down
1 change: 1 addition & 0 deletions src/panels/YearPanel/YearBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ function YearBody<DateType>(props: YearBodyProps<DateType>) {
getCellText={generateConfig.getYear}
getCellClassName={getCellClassName}
getCellDate={generateConfig.addYear}
getCompareDate={generateConfig.addEndYear}
titleCell={date =>
formatValue(date, {
locale,
Expand Down
7 changes: 7 additions & 0 deletions tests/generate.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,13 @@ describe('Picker.Generate', () => {
expect(generateConfig.locale.format('en_US', date, 'YYYY-MM-DD')).toEqual('1992-11-05');
});

it('end', () => {
let date = generateConfig.getNow();
date = generateConfig.addEndMonth(date, 2);
date = generateConfig.addEndYear(date, 2);
expect(generateConfig.locale.format('en_US', date, 'YYYY-MM-DD')).toEqual('1992-12-31');
});

it('isAfter', () => {
const now = generateConfig.getNow();
const prev = generateConfig.addDate(now, -1);
Expand Down