From 108129641f6367558daae44f039166ec7e478c0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Sun, 19 Feb 2023 12:33:09 +0800 Subject: [PATCH] feat: WeekPicker support hover style (#40772) * feat: support range hover style * chore: adjust hover style * chore: cleanup * chore: update style * test: update snapshot * chore: fix style * chore: cleanup * chore: cleanup --- .../__snapshots__/demo-extend.test.ts.snap | 376 ++++++++++++++---- .../__snapshots__/other.test.tsx.snap | 38 +- components/date-picker/demo/basic.tsx | 2 +- components/date-picker/style/index.ts | 38 +- package.json | 2 +- 5 files changed, 361 insertions(+), 95 deletions(-) diff --git a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 29d990bc91..dcacde6c50 100644 --- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -766,7 +766,11 @@ exports[`renders ./components/date-picker/demo/basic.tsx extend context correctl - 45 +
+ 45 +
- 46 +
+ 46 +
- 47 +
+ 47 +
- 48 +
+ 48 +
- 49 +
+ 49 +
- 50 +
+ 50 +
- 45 +
+ 45 +
- 46 +
+ 46 +
- 47 +
+ 47 +
- 48 +
+ 48 +
- 49 +
+ 49 +
- 50 +
+ 50 +
- 45 +
+ 45 +
- 46 +
+ 46 +
- 47 +
+ 47 +
- 48 +
+ 48 +
- 49 +
+ 49 +
- 50 +
+ 50 +
- 49 +
+ 49 +
- 50 +
+ 50 +
- 51 +
+ 51 +
- 52 +
+ 52 +
- 53 +
+ 53 +
- 1 +
+ 1 +
- 45 +
+ 45 +
- 46 +
+ 46 +
- 47 +
+ 47 +
- 48 +
+ 48 +
- 49 +
+ 49 +
- 50 +
+ 50 +
- 45 +
+ 45 +
- 46 +
+ 46 +
- 47 +
+ 47 +
- 48 +
+ 48 +
- 49 +
+ 49 +
- 50 +
+ 50 +
- 49 +
+ 49 +
- 50 +
+ 50 +
- 51 +
+ 51 +
- 52 +
+ 52 +
- 53 +
+ 53 +
- 1 +
+ 1 +
- 45 +
+ 45 +
- 46 +
+ 46 +
- 47 +
+ 47 +
- 48 +
+ 48 +
- 49 +
+ 49 +
- 50 +
+ 50 +
- 45 +
+ 45 +
- 46 +
+ 46 +
- 47 +
+ 47 +
- 48 +
+ 48 +
- 49 +
+ 49 +
- 50 +
+ 50 +
- 45 +
+ 45 +
- 46 +
+ 46 +
- 47 +
+ 47 +
- 48 +
+ 48 +
- 49 +
+ 49 +
- 50 +
+ 50 +
- 1 +
+ 1 +
- 2 +
+ 2 +
- 3 +
+ 3 +
- 4 +
+ 4 +
- 5 +
+ 5 +
- 6 +
+ 6 +
{ console.log(date, dateString); diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 395cf8105e..08674ff258 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -7,20 +7,20 @@ import { genHoverStyle, initInputToken, } from '../../input/style'; +import { resetComponent, roundedArrow, textEllipsis } from '../../style'; +import { genCompactItemStyle } from '../../style/compact-item'; import { - initSlideMotion, initMoveMotion, + initSlideMotion, slideDownIn, slideDownOut, slideUpIn, slideUpOut, } from '../../style/motion'; +import type { GlobalToken } from '../../theme/interface'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -import type { GlobalToken } from '../../theme/interface'; import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'; -import { resetComponent, roundedArrow, textEllipsis } from '../../style'; -import { genCompactItemStyle } from '../../style/compact-item'; export interface ComponentToken { presetsWidth: number; @@ -729,39 +729,41 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { '&-row': { td: { - transition: `background ${motionDurationMid}`, + '&:before': { + transition: `background ${motionDurationMid}`, + }, - '&:first-child': { + '&:first-child:before': { borderStartStartRadius: borderRadiusSM, borderEndStartRadius: borderRadiusSM, }, - '&:last-child': { + '&:last-child:before': { borderStartEndRadius: borderRadiusSM, borderEndEndRadius: borderRadiusSM, }, }, - '&:hover td': { - background: controlItemBgHover, - }, - - [`&-selected td, - &-selected:hover td`]: { - background: colorPrimary, + [`&:hover td, + &-range-start td, + &-range-end td, + &-selected td`]: { + '&:before': { + background: colorPrimary, + }, [`&${componentCls}-cell-week`]: { color: new TinyColor(colorTextLightSolid).setAlpha(0.5).toHexString(), }, - [`&${componentCls}-cell-today ${pickerCellInnerCls}::before`]: { - borderColor: colorTextLightSolid, - }, - [pickerCellInnerCls]: { color: colorTextLightSolid, }, }, + + [`&-range-hover td:before`]: { + background: controlItemBgActive, + }, }, }, diff --git a/package.json b/package.json index 419eae11ff..531c534f7e 100644 --- a/package.json +++ b/package.json @@ -134,7 +134,7 @@ "rc-motion": "^2.6.1", "rc-notification": "~5.0.0", "rc-pagination": "~3.2.0", - "rc-picker": "~3.1.1", + "rc-picker": "~3.2.4", "rc-progress": "~3.4.1", "rc-rate": "~2.9.0", "rc-resize-observer": "^1.2.0",