fix(DatePicker): Fixed incorrect cursor when Picker of DatePicker is month and quarter (#40607)

Co-authored-by: Yuiai01 <dujiaqi@kezaihui.com>
This commit is contained in:
JiaQi 2023-02-13 10:42:05 +08:00 committed by GitHub
parent c48c712371
commit f646ba9c3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -321,7 +321,6 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
pickerDateHoverRangeBorderColor, pickerDateHoverRangeBorderColor,
borderRadiusSM, borderRadiusSM,
colorTextLightSolid, colorTextLightSolid,
borderRadius,
controlItemBgHover, controlItemBgHover,
pickerTimePanelColumnHeight, pickerTimePanelColumnHeight,
pickerTimePanelColumnWidth, pickerTimePanelColumnWidth,
@ -331,8 +330,11 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
} = token; } = token;
const pickerPanelWidth = pickerPanelCellWidth * 7 + paddingSM * 2 + 4; const pickerPanelWidth = pickerPanelCellWidth * 7 + paddingSM * 2 + 4;
const hoverCellFixedDistance = const commonHoverCellFixedDistance =
(pickerPanelWidth - paddingXS * 2) / 3 - pickerYearMonthCellWidth / 2; (pickerPanelWidth - paddingXS * 2) / 3 - pickerYearMonthCellWidth - paddingSM;
const quarterHoverCellFixedDistance =
(pickerPanelWidth - paddingXS * 2) / 4 - pickerYearMonthCellWidth;
return { return {
[componentCls]: { [componentCls]: {
@ -565,6 +567,26 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
[`${componentCls}-content`]: { [`${componentCls}-content`]: {
height: pickerQuarterPanelContentHeight, height: pickerQuarterPanelContentHeight,
}, },
// Quarter Panel Special Style
[`${componentCls}-cell-range-hover-start::after`]: {
insetInlineStart: quarterHoverCellFixedDistance,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
[`${componentCls}-panel-rtl &`]: {
insetInlineEnd: quarterHoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
},
},
[`${componentCls}-cell-range-hover-end::after`]: {
insetInlineEnd: quarterHoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
[`${componentCls}-panel-rtl &`]: {
insetInlineStart: quarterHoverCellFixedDistance,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
},
},
}, },
// ======================== Footer ======================== // ======================== Footer ========================
@ -638,37 +660,51 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
}, },
[`${componentCls}-cell-range-hover-start::after`]: { [`${componentCls}-cell-range-hover-start::after`]: {
insetInlineStart: hoverCellFixedDistance,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: borderRadiusSM, borderStartStartRadius: borderRadiusSM,
borderBottomStartRadius: borderRadiusSM, borderEndStartRadius: borderRadiusSM,
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderBottomEndRadius: 0, borderEndEndRadius: 0,
[`${componentCls}-panel-rtl &`]: { [`${componentCls}-panel-rtl &`]: {
insetInlineEnd: hoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderBottomStartRadius: 0, borderEndStartRadius: 0,
borderStartEndRadius: borderRadiusSM, borderStartEndRadius: borderRadiusSM,
borderBottomEndRadius: borderRadiusSM, borderEndEndRadius: borderRadiusSM,
}, },
}, },
[`${componentCls}-cell-range-hover-end::after`]: { [`${componentCls}-cell-range-hover-end::after`]: {
insetInlineEnd: hoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: 0, borderStartStartRadius: 0,
borderBottomStartRadius: 0, borderEndStartRadius: 0,
borderStartEndRadius: borderRadius, borderStartEndRadius: borderRadiusSM,
borderBottomEndRadius: borderRadius, borderEndEndRadius: borderRadiusSM,
[`${componentCls}-panel-rtl &`]: { [`${componentCls}-panel-rtl &`]: {
insetInlineStart: hoverCellFixedDistance, borderStartStartRadius: borderRadiusSM,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderEndStartRadius: borderRadiusSM,
borderStartStartRadius: borderRadius,
borderBottomStartRadius: borderRadius,
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderBottomEndRadius: 0, borderEndEndRadius: 0,
},
},
},
[`&-year-panel,
&-month-panel`]: {
[`${componentCls}-cell-range-hover-start::after`]: {
insetInlineStart: commonHoverCellFixedDistance,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
[`${componentCls}-panel-rtl &`]: {
insetInlineEnd: commonHoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
},
},
[`${componentCls}-cell-range-hover-end::after`]: {
insetInlineEnd: commonHoverCellFixedDistance,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
[`${componentCls}-panel-rtl &`]: {
insetInlineStart: commonHoverCellFixedDistance,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
}, },
}, },
}, },