fix(DatePicker): optimize RangePicker's range area style (#44206)

* feat: optimize range-picker's range area style

* feat: optimize range-picker's range area style

* feat: optimize range-picker's range area style
This commit is contained in:
kiner-tang(文辉) 2023-08-14 20:59:34 +08:00 committed by GitHub
parent e0e373f301
commit 41cb8be608
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 7 deletions

View File

@ -68,9 +68,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
const [wrapSSR, hashId] = useStyle(prefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
let additionalOverrideProps: any = {}; const additionalOverrideProps: any = {
additionalOverrideProps = {
...additionalOverrideProps,
...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}), ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
...(picker === 'time' ? getTimeProps({ format, ...props, picker }) : {}), ...(picker === 'time' ? getTimeProps({ format, ...props, picker }) : {}),
}; };

View File

@ -130,6 +130,12 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
borderRadius: borderRadiusSM, borderRadius: borderRadiusSM,
transition: `background ${motionDurationMid}, border ${motionDurationMid}`, transition: `background ${motionDurationMid}, border ${motionDurationMid}`,
}, },
[`&-range-hover-start, &-range-hover-end`]: {
[pickerCellInnerCls]: {
borderStartEndRadius: 0,
borderEndEndRadius: 0,
},
},
// >>> Hover // >>> Hover
[`&:hover:not(${pickerCellCls}-in-view), [`&:hover:not(${pickerCellCls}-in-view),
@ -263,8 +269,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
&-in-view${pickerCellCls}-range-hover-start::after`]: { &-in-view${pickerCellCls}-range-hover-start::after`]: {
insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartStartRadius: lineWidth, borderStartStartRadius: borderRadiusSM,
borderEndStartRadius: lineWidth, borderEndStartRadius: borderRadiusSM,
}, },
// Edge end // Edge end
@ -275,8 +281,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
&-in-view${pickerCellCls}-range-hover-end::after`]: { &-in-view${pickerCellCls}-range-hover-end::after`]: {
insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
borderStartEndRadius: lineWidth, borderStartEndRadius: borderRadiusSM,
borderEndEndRadius: lineWidth, borderEndEndRadius: borderRadiusSM,
}, },
// >>> Disabled // >>> Disabled