Skip to content

Commit 8f7df7e

Browse files
zombieJzombieJ
authored
Fix: week disabled (#80)
* adjust week disabled logic * keep update * updat quota
1 parent 7a0d5bc commit 8f7df7e

File tree

8 files changed

+119
-117
lines changed

8 files changed

+119
-117
lines changed

‎examples/range.tsx‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,12 @@ function formatDate(date: Moment | null) {
1414
}
1515

1616
export default () => {
17-
const [value, setValue] = React.useState<
18-
[Moment | null, Moment | null] | null
19-
>([defaultStartValue, defaultEndValue]);
17+
const [value, setValue] = React.useState<[Moment | null, Moment | null] | null>([
18+
defaultStartValue,
19+
defaultEndValue,
20+
]);
2021

21-
const onChange = (
22-
newValue: [Moment | null, Moment | null] | null,
23-
formatStrings?: string[],
24-
) => {
22+
const onChange = (newValue: [Moment | null, Moment | null] | null, formatStrings?: string[]) => {
2523
console.log('Change:', newValue, formatStrings);
2624
setValue(newValue);
2725
};
@@ -44,10 +42,7 @@ export default () => {
4442

4543
return (
4644
<div>
47-
<h2>
48-
Value:{' '}
49-
{value ? `${formatDate(value[0])} ~ ${formatDate(value[1])}` : 'null'}
50-
</h2>
45+
<h2>Value: {value ? `${formatDate(value[0])} ~ ${formatDate(value[1])}` : 'null'}</h2>
5146

5247
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
5348
<div style={{ margin: '0 8px' }}>
@@ -110,6 +105,11 @@ export default () => {
110105
<RangePicker<Moment> {...sharedProps} locale={zhCN} picker="year" />
111106
</div>
112107

108+
<div style={{ margin: '0 8px' }}>
109+
<h3>Quarter</h3>
110+
<RangePicker<Moment> {...sharedProps} locale={zhCN} picker="quarter" />
111+
</div>
112+
113113
<div style={{ margin: '0 8px' }}>
114114
<h3>Month</h3>
115115
<RangePicker<Moment> {...sharedProps} locale={zhCN} picker="month" />
@@ -132,21 +132,11 @@ export default () => {
132132

133133
<div style={{ margin: '0 8px' }}>
134134
<h3>Start disabled</h3>
135-
<RangePicker<Moment>
136-
{...sharedProps}
137-
locale={zhCN}
138-
allowClear
139-
disabled={[true, false]}
140-
/>
135+
<RangePicker<Moment> {...sharedProps} locale={zhCN} allowClear disabled={[true, false]} />
141136
</div>
142137
<div style={{ margin: '0 8px' }}>
143138
<h3>End disabled</h3>
144-
<RangePicker<Moment>
145-
{...sharedProps}
146-
locale={zhCN}
147-
allowClear
148-
disabled={[false, true]}
149-
/>
139+
<RangePicker<Moment> {...sharedProps} locale={zhCN} allowClear disabled={[false, true]} />
150140
</div>
151141

152142
<div style={{ margin: '0 8px' }}>

‎src/RangePicker.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,13 @@ import usePickerInput from './hooks/usePickerInput';
1111
import getDataOrAriaProps, { toArray, getValue, updateValues } from './utils/miscUtil';
1212
import { getDefaultFormat, getInputSize, elementsContains } from './utils/uiUtil';
1313
import PanelContext, { ContextOperationRefProps } from './PanelContext';
14-
import { isEqual, getClosingViewDate, isSameDate } from './utils/dateUtil';
14+
import {
15+
isEqual,
16+
getClosingViewDate,
17+
isSameDate,
18+
isSameWeek,
19+
isSameQuarter,
20+
} from './utils/dateUtil';
1521
import useValueTexts from './hooks/useValueTexts';
1622
import useTextValueMapping from './hooks/useTextValueMapping';
1723
import { GenerateConfig } from './generate';
@@ -348,7 +354,17 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
348354
let endValue = getValue(values, 1);
349355

350356
if (startValue && endValue && generateConfig.isAfter(startValue, endValue)) {
351-
if (!isSameDate(generateConfig, startValue, endValue)) {
357+
if (
358+
// WeekPicker only compare week
359+
(picker === 'week' && !isSameWeek(generateConfig, locale.locale, startValue, endValue)) ||
360+
// WeekPicker only compare week
361+
(picker === 'quarter' && !isSameQuarter(generateConfig, startValue, endValue)) ||
362+
// Other non-TimePicker compare date
363+
(picker !== 'week' &&
364+
picker !== 'quarter' &&
365+
picker !== 'time' &&
366+
!isSameDate(generateConfig, startValue, endValue))
367+
) {
352368
// Clean up end date when start date is after end date
353369
values = [startValue, null];
354370
endValue = null;

‎src/hooks/useRangeDisabled.ts‎

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import * as React from 'react';
22
import { RangeValue, PickerMode, Locale } from '../interface';
33
import { getValue } from '../utils/miscUtil';
44
import { GenerateConfig } from '../generate';
5-
import { isSameDate } from '../utils/dateUtil';
6-
import useWeekDisabled from './useWeekDisabled';
5+
import { isSameDate, getQuarter } from '../utils/dateUtil';
76

87
export default function useRangeDisabled<DateType>({
98
picker,
@@ -30,10 +29,7 @@ export default function useRangeDisabled<DateType>({
3029
}
3130

3231
if (disabled[1] && endDate) {
33-
return (
34-
!isSameDate(generateConfig, date, endDate) &&
35-
generateConfig.isAfter(date, endDate)
36-
);
32+
return !isSameDate(generateConfig, date, endDate) && generateConfig.isAfter(date, endDate);
3733
}
3834

3935
return false;
@@ -48,12 +44,25 @@ export default function useRangeDisabled<DateType>({
4844
}
4945

5046
if (startDate) {
51-
const compareStartDate =
52-
picker === 'week' ? generateConfig.addDate(startDate, -7) : startDate;
47+
if (picker === 'week') {
48+
const startWeek = generateConfig.locale.getWeek(locale.locale, startDate);
49+
const dateWeek = generateConfig.locale.getWeek(locale.locale, date);
50+
51+
return dateWeek < startWeek;
52+
}
53+
54+
if (picker === 'quarter') {
55+
const startYear = generateConfig.getYear(startDate);
56+
const dateYear = generateConfig.getYear(date);
57+
const startQuarter = getQuarter(generateConfig, startDate);
58+
const dateQuarter = getQuarter(generateConfig, date);
59+
const startVal = startYear * 10 + startQuarter;
60+
const dateVal = dateYear * 10 + dateQuarter;
61+
return dateVal < startVal;
62+
}
5363

5464
return (
55-
!isSameDate(generateConfig, date, compareStartDate) &&
56-
generateConfig.isAfter(compareStartDate, date)
65+
!isSameDate(generateConfig, date, startDate) && generateConfig.isAfter(startDate, date)
5766
);
5867
}
5968

@@ -62,24 +71,5 @@ export default function useRangeDisabled<DateType>({
6271
[disabledDate, startDate, picker],
6372
);
6473

65-
// Handle week date disabled
66-
const sharedWeekDisabledConfig = {
67-
generateConfig,
68-
locale,
69-
};
70-
71-
const [disabledStartWeekDate] = useWeekDisabled({
72-
...sharedWeekDisabledConfig,
73-
disabledDate: disabledStartDate,
74-
});
75-
const [disabledEndWeekDate] = useWeekDisabled({
76-
...sharedWeekDisabledConfig,
77-
disabledDate: disableEndDate,
78-
});
79-
80-
if (picker === 'week') {
81-
return [disabledStartWeekDate, disabledEndWeekDate];
82-
}
83-
8474
return [disabledStartDate, disableEndDate];
8575
}

‎src/hooks/useRangeViewDates.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ function getStartEndDistance<DateType>(
2525
switch (picker) {
2626
case 'year':
2727
return getDistance((start, end) => isSameDecade(generateConfig, start, end));
28+
case 'quarter':
2829
case 'month':
2930
return getDistance((start, end) => isSameYear(generateConfig, start, end));
3031
default:

‎src/hooks/useWeekDisabled.ts‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎src/utils/dateUtil.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ export function getClosingViewDate<DateType>(
185185
switch (picker) {
186186
case 'year':
187187
return generateConfig.addYear(viewDate, offset * 10);
188+
case 'quarter':
188189
case 'month':
189190
return generateConfig.addYear(viewDate, offset);
190191
default:

‎tests/range.spec.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
66
import { Moment } from 'moment';
77
import { mount, getMoment, isSame, MomentRangePicker, Wrapper } from './util/commonUtil';
88
import zhCN from '../src/locale/zh_CN';
9+
import { PickerMode } from '../src/interface';
910

1011
describe('Picker.Range', () => {
1112
function matchValues(wrapper: Wrapper, value1: string, value2: string) {
@@ -1096,4 +1097,62 @@ describe('Picker.Range', () => {
10961097
wrapper.selectCell(4);
10971098
matchValues(wrapper, '1989-09-03', '1989-09-04');
10981099
});
1100+
1101+
describe('can select endDate when in same level', () => {
1102+
/**
1103+
* Selection should support in same level.
1104+
* Like `2020-12-31` ~ `2020-01-01` is validate in `year` picker.
1105+
*/
1106+
const list: {
1107+
picker: PickerMode;
1108+
defaultValue: string[];
1109+
selectCell: string;
1110+
match: string[];
1111+
}[] = [
1112+
// {
1113+
// picker: 'week',
1114+
// defaultValue: ['2020-06-13'],
1115+
// selectCell: '9',
1116+
// match: ['2020-24th'],
1117+
// },
1118+
// {
1119+
// picker: 'month',
1120+
// defaultValue: ['2020-03-31', '2020-04-01'],
1121+
// selectCell: 'Mar',
1122+
// match: ['2020-03'],
1123+
// },
1124+
{
1125+
picker: 'quarter',
1126+
defaultValue: ['2020-03-30', '2020-05-20'],
1127+
selectCell: 'Q1',
1128+
match: ['2020-Q1'],
1129+
},
1130+
// {
1131+
// picker: 'year',
1132+
// defaultValue: ['2020-12-31', '2021-01-01'],
1133+
// selectCell: '2020',
1134+
// match: ['2020'],
1135+
// },
1136+
];
1137+
1138+
list.forEach(({ picker, defaultValue, match, selectCell }) => {
1139+
it(picker, () => {
1140+
const onChange = jest.fn();
1141+
const wrapper = mount(
1142+
<MomentRangePicker
1143+
picker={picker}
1144+
onChange={onChange}
1145+
defaultValue={[
1146+
getMoment(defaultValue[0]),
1147+
getMoment(defaultValue[1] || defaultValue[0]),
1148+
]}
1149+
/>,
1150+
);
1151+
wrapper.openPicker(1);
1152+
wrapper.selectCell(selectCell);
1153+
expect(onChange).toHaveBeenCalled();
1154+
expect(onChange).toHaveBeenCalledWith(expect.anything(), [match[0], match[1] || match[0]]);
1155+
});
1156+
});
1157+
});
10991158
});

‎tests/setup.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,15 @@ Object.assign(Enzyme.ReactWrapper.prototype, {
3333
findCell(text, index = 0) {
3434
let matchCell;
3535

36-
this.find('table')
37-
.at(index)
38-
.find('td')
39-
.forEach(td => {
40-
if (td.text() === String(text) && td.props().className.includes('-in-view')) {
41-
matchCell = td;
42-
}
43-
});
36+
const table = this.find('table').at(index);
37+
38+
table.find('td').forEach(td => {
39+
if (td.text() === String(text) && td.props().className.includes('-in-view')) {
40+
matchCell = td;
41+
}
42+
});
4443
if (!matchCell) {
44+
console.log(table.html());
4545
throw new Error('Cell not match in picker panel.');
4646
}
4747

0 commit comments

Comments
 (0)