Skip to content

Commit eb62b37

Browse files
zombieJzombieJ
committed
feat: Add edge className
1 parent 52b8261 commit eb62b37

File tree

5 files changed

+89
-42
lines changed

5 files changed

+89
-42
lines changed

‎src/hooks/useCellClassName.ts‎

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import { isInRange } from '../utils/dateUtil';
22
import { GenerateConfig } from '../generate';
33
import { RangeValue, NullableDateType } from '../interface';
4+
import { getValue } from '../utils/miscUtil';
45

56
export default function useCellClassName<DateType>({
67
cellPrefixCls,
78
generateConfig,
89
rangedValue,
910
hoverRangedValue,
11+
isInView,
1012
isSameCell,
13+
offsetCell,
1114
today,
1215
value,
1316
}: {
@@ -17,41 +20,60 @@ export default function useCellClassName<DateType>({
1720
current: NullableDateType<DateType>,
1821
target: NullableDateType<DateType>,
1922
) => boolean;
23+
offsetCell: (date: DateType, offset: number) => DateType;
24+
isInView: (date: DateType) => boolean;
2025
rangedValue?: RangeValue<DateType>;
2126
hoverRangedValue?: RangeValue<DateType>;
2227
today?: NullableDateType<DateType>;
2328
value?: NullableDateType<DateType>;
2429
}) {
2530
function getClassName(currentDate: DateType) {
31+
const prevDate = offsetCell(currentDate, -1);
32+
const nextDate = offsetCell(currentDate, 1);
33+
const isRangeHovered = isInRange(
34+
generateConfig,
35+
getValue(hoverRangedValue, 0),
36+
getValue(hoverRangedValue, 1),
37+
currentDate,
38+
);
39+
40+
function isRangeStart(date: DateType) {
41+
return isSameCell(getValue(rangedValue, 0), date);
42+
}
43+
function isRangeEnd(date: DateType) {
44+
return isSameCell(getValue(rangedValue, 1), date);
45+
}
46+
const isHoverStart = isSameCell(getValue(hoverRangedValue, 0), currentDate);
47+
const isHoverEnd = isSameCell(getValue(hoverRangedValue, 1), currentDate);
48+
2649
return {
50+
// In view
51+
[`${cellPrefixCls}-in-view`]: isInView(currentDate),
52+
53+
// Range
2754
[`${cellPrefixCls}-in-range`]: isInRange<DateType>(
2855
generateConfig,
29-
rangedValue && rangedValue[0],
30-
rangedValue && rangedValue[1],
31-
currentDate,
32-
),
33-
[`${cellPrefixCls}-range-start`]: isSameCell(
34-
rangedValue && rangedValue[0],
35-
currentDate,
36-
),
37-
[`${cellPrefixCls}-range-end`]: isSameCell(
38-
rangedValue && rangedValue[1],
39-
currentDate,
40-
),
41-
[`${cellPrefixCls}-range-hover`]: isInRange(
42-
generateConfig,
43-
hoverRangedValue && hoverRangedValue[0],
44-
hoverRangedValue && hoverRangedValue[1],
45-
currentDate,
46-
),
47-
[`${cellPrefixCls}-range-hover-start`]: isSameCell(
48-
hoverRangedValue && hoverRangedValue[0],
49-
currentDate,
50-
),
51-
[`${cellPrefixCls}-range-hover-end`]: isSameCell(
52-
hoverRangedValue && hoverRangedValue[1],
56+
getValue(rangedValue, 0),
57+
getValue(rangedValue, 1),
5358
currentDate,
5459
),
60+
[`${cellPrefixCls}-range-start`]: isRangeStart(currentDate),
61+
[`${cellPrefixCls}-range-end`]: isRangeEnd(currentDate),
62+
63+
// Range Hover
64+
[`${cellPrefixCls}-range-hover`]: isRangeHovered,
65+
[`${cellPrefixCls}-range-hover-start`]: isHoverStart,
66+
[`${cellPrefixCls}-range-hover-end`]: isHoverEnd,
67+
68+
// Range Edge
69+
[`${cellPrefixCls}-range-hover-edge-start`]:
70+
(isRangeHovered || isHoverEnd) &&
71+
(!isInView(prevDate) || isRangeEnd(prevDate)),
72+
[`${cellPrefixCls}-range-hover-edge-end`]:
73+
(isRangeHovered || isHoverStart) &&
74+
(!isInView(nextDate) || isRangeStart(nextDate)),
75+
76+
// Others
5577
[`${cellPrefixCls}-today`]: isSameCell(today, currentDate),
5678
[`${cellPrefixCls}-selected`]: isSameCell(value, currentDate),
5779
};

‎src/panels/DatePanel/DateBody.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@ function DateBody<DateType>({
8585
hoverRangedValue: prefixColumn ? null : hoverRangedValue,
8686
isSameCell: (current, target) =>
8787
isSameDate(generateConfig, current, target),
88+
isInView: date => isSameMonth(generateConfig, date, viewDate),
89+
offsetCell: (date, offset) => generateConfig.addDate(date, offset),
8890
});
8991

9092
for (let y = 0; y < rowCount; y += 1) {
@@ -123,11 +125,6 @@ function DateBody<DateType>({
123125
}}
124126
className={classNames(datePrefixCls, {
125127
[`${datePrefixCls}-disabled`]: disabled,
126-
[`${datePrefixCls}-in-view`]: isSameMonth(
127-
generateConfig,
128-
currentDate,
129-
viewDate,
130-
),
131128

132129
...getCellClassName(currentDate),
133130
})}

‎src/panels/MonthPanel/MonthBody.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ function MonthBody<DateType>({
5151
hoverRangedValue,
5252
isSameCell: (current, target) =>
5353
isSameMonth(generateConfig, current, target),
54+
isInView: () => true,
55+
offsetCell: (date, offset) => generateConfig.addMonth(date, offset),
5456
});
5557

5658
const monthsLocale: string[] =
@@ -79,7 +81,6 @@ function MonthBody<DateType>({
7981
)}
8082
className={classNames(monthPrefixCls, {
8183
[`${monthPrefixCls}-disabled`]: disabled,
82-
[`${monthPrefixCls}-in-view`]: true,
8384
[`${monthPrefixCls}-selected`]: isSameMonth(
8485
generateConfig,
8586
value,

‎src/panels/YearPanel/YearBody.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,16 @@ function YearBody<DateType>({
3636
const yearPrefixCls = `${prefixCls}-cell`;
3737

3838
// =============================== Year ===============================
39+
const yearNumber = generateConfig.getYear(viewDate);
40+
const startYear =
41+
Math.floor(yearNumber / YEAR_DECADE_COUNT) * YEAR_DECADE_COUNT;
42+
const endYear = startYear + YEAR_DECADE_COUNT - 1;
43+
const baseYear = generateConfig.setYear(
44+
viewDate,
45+
startYear -
46+
Math.ceil((YEAR_COL_COUNT * YEAR_ROW_COUNT - YEAR_DECADE_COUNT) / 2),
47+
);
48+
3949
const rows: React.ReactNode[] = [];
4050
const getCellClassName = useCellClassName<DateType>({
4151
cellPrefixCls: yearPrefixCls,
@@ -45,18 +55,13 @@ function YearBody<DateType>({
4555
hoverRangedValue,
4656
isSameCell: (current, target) =>
4757
isSameYear(generateConfig, current, target),
58+
isInView: date => {
59+
const currentYearNumber = generateConfig.getYear(date);
60+
return startYear <= currentYearNumber && currentYearNumber <= endYear;
61+
},
62+
offsetCell: (date, offset) => generateConfig.addYear(date, offset),
4863
});
4964

50-
const yearNumber = generateConfig.getYear(viewDate);
51-
const startYear =
52-
Math.floor(yearNumber / YEAR_DECADE_COUNT) * YEAR_DECADE_COUNT;
53-
const endYear = startYear + YEAR_DECADE_COUNT - 1;
54-
const baseYear = generateConfig.setYear(
55-
viewDate,
56-
startYear -
57-
Math.ceil((YEAR_COL_COUNT * YEAR_ROW_COUNT - YEAR_DECADE_COUNT) / 2),
58-
);
59-
6065
for (let i = 0; i < YEAR_ROW_COUNT; i += 1) {
6166
const row: React.ReactNode[] = [];
6267

@@ -72,8 +77,6 @@ function YearBody<DateType>({
7277
title={generateConfig.locale.format(locale.locale, yearDate, 'YYYY')}
7378
className={classNames(yearPrefixCls, {
7479
[`${yearPrefixCls}-disabled`]: disabled,
75-
[`${yearPrefixCls}-in-view`]:
76-
startYear <= currentYearNumber && currentYearNumber <= endYear,
7780
...getCellClassName(yearDate),
7881
})}
7982
onClick={() => {

‎tests/range.spec.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -617,6 +617,30 @@ describe('Picker.Range', () => {
617617
).toBeFalsy();
618618
});
619619
});
620+
621+
it('range edge className', () => {
622+
const wrapper = mount(
623+
<MomentRangePicker
624+
value={[getMoment('1990-09-20'), getMoment('1990-09-20')]}
625+
/>,
626+
);
627+
628+
// End edge
629+
wrapper.openPicker();
630+
wrapper.findCell(10).simulate('mouseEnter');
631+
expect(
632+
wrapper.findCell(19).hasClass('rc-picker-cell-range-hover-edge-end'),
633+
).toBeTruthy();
634+
wrapper.findCell(10).simulate('mouseOut');
635+
636+
// Start edge
637+
wrapper.openPicker(1);
638+
wrapper.findCell(28).simulate('mouseEnter');
639+
expect(
640+
wrapper.findCell(21).hasClass('rc-picker-cell-range-hover-edge-start'),
641+
).toBeTruthy();
642+
wrapper.findCell(28).simulate('mouseOut');
643+
});
620644
});
621645

622646
it('should close when user focus out', () => {

0 commit comments

Comments
 (0)