From bf7085882d28243278b1d65c3e65aa07f8eb90d5 Mon Sep 17 00:00:00 2001 From: MadCcc Date: Thu, 21 Dec 2023 20:43:40 +0800 Subject: [PATCH] feat: DatePicker support variant (#46568) * feat: DatePicker support variant * chore: update snapshot * chore: update api table * chore: update snapshot --- .../__snapshots__/components.test.tsx.snap | 70 +- .../__snapshots__/DatePicker.test.tsx.snap | 6 +- .../__snapshots__/QuarterPicker.test.tsx.snap | 2 +- .../__snapshots__/RangePicker.test.tsx.snap | 4 +- .../__snapshots__/WeekPicker.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 17521 +++++++++++----- .../__snapshots__/demo.test.tsx.snap | 1606 +- .../__snapshots__/mount.test.ts.snap | 8 +- .../__snapshots__/other.test.tsx.snap | 12 +- components/date-picker/demo/bordered.tsx | 19 - components/date-picker/demo/filled-debug.md | 7 + components/date-picker/demo/filled-debug.tsx | 43 + components/date-picker/demo/variant.md | 7 + components/date-picker/demo/variant.tsx | 23 + .../generatePicker/generateRangePicker.tsx | 9 +- .../generatePicker/generateSinglePicker.tsx | 12 +- .../date-picker/generatePicker/index.tsx | 9 +- components/date-picker/index.en-US.md | 5 +- components/date-picker/index.zh-CN.md | 5 +- components/date-picker/style/index.ts | 282 +- components/date-picker/style/token.ts | 158 + components/date-picker/style/variants.ts | 13 + .../__snapshots__/demo-extend.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 28 +- .../__snapshots__/demo.test.tsx.snap | 28 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 12 +- .../__snapshots__/demo.test.tsx.snap | 12 +- .../__snapshots__/index.test.tsx.snap | 420 +- .../__snapshots__/demo-extend.test.ts.snap | 16 +- .../__snapshots__/demo.test.tsx.snap | 14 +- .../__snapshots__/demo-extend.test.ts.snap | 11540 +++++++--- .../__snapshots__/demo.test.tsx.snap | 572 +- .../__snapshots__/index.test.tsx.snap | 6 +- components/time-picker/demo/bordered.md | 7 - components/time-picker/demo/bordered.tsx | 13 - .../demo/variant.md} | 0 components/time-picker/demo/variant.tsx | 23 + components/time-picker/index.en-US.md | 4 +- components/time-picker/index.zh-CN.md | 4 +- 40 files changed, 23032 insertions(+), 9496 deletions(-) delete mode 100644 components/date-picker/demo/bordered.tsx create mode 100644 components/date-picker/demo/filled-debug.md create mode 100644 components/date-picker/demo/filled-debug.tsx create mode 100644 components/date-picker/demo/variant.md create mode 100644 components/date-picker/demo/variant.tsx create mode 100644 components/date-picker/style/token.ts create mode 100644 components/date-picker/style/variants.ts delete mode 100644 components/time-picker/demo/bordered.md delete mode 100644 components/time-picker/demo/bordered.tsx rename components/{date-picker/demo/bordered.md => time-picker/demo/variant.md} (100%) create mode 100644 components/time-picker/demo/variant.tsx diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index b02817ca78..63fcf06ff3 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -12546,7 +12546,7 @@ exports[`ConfigProvider components Collapse prefixCls 1`] = ` exports[`ConfigProvider components DatePicker DatePicker configProvider 1`] = `
-
-
-
- - - - - - -
-
-
-
-
-
-
-
- - -
- - -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
- 30 -
- 		-
- 31 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
- 		-
- 4 -
- 		-
- 5 -
-
-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
- 		-
- 11 -
- 		-
- 12 -
-
-
- 13 -
- 		-
- 14 -
- 		-
- 15 -
- 		-
- 16 -
- 		-
- 17 -
- 		-
- 18 -
- 		-
- 19 -
-
-
- 20 -
- 		-
- 21 -
- 		-
- 22 -
- 		-
- 23 -
- 		-
- 24 -
- 		-
- 25 -
- 		-
- 26 -
-
-
- 27 -
- 		-
- 28 -
- 		-
- 29 -
- 		-
- 30 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
-
-
- 4 -
- 		-
- 5 -
- 		-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
-
-
-
-
- - Today - -
-
-
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
- - -
- - -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
- 45 -
- 		-
- 30 -
- 		-
- 31 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
- 		-
- 4 -
- 		-
- 5 -
-
-
- 46 -
- 		-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
- 		-
- 11 -
- 		-
- 12 -
-
-
- 47 -
- 		-
- 13 -
- 		-
- 14 -
- 		-
- 15 -
- 		-
- 16 -
- 		-
- 17 -
- 		-
- 18 -
- 		-
- 19 -
-
-
- 48 -
- 		-
- 20 -
- 		-
- 21 -
- 		-
- 22 -
- 		-
- 23 -
- 		-
- 24 -
- 		-
- 25 -
- 		-
- 26 -
-
-
- 49 -
- 		-
- 27 -
- 		-
- 28 -
- 		-
- 29 -
- 		-
- 30 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
-
-
- 50 -
- 		-
- 4 -
- 		-
- 5 -
- 		-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
-
-
-
-
-
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
- -
- -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - -
-
- Jan -
- 		-
- Feb -
- 		-
- Mar -
-
-
- Apr -
- 		-
- May -
- 		-
- Jun -
-
-
- Jul -
- 		-
- Aug -
- 		-
- Sep -
-
-
- Oct -
- 		-
- Nov -
- 		-
- Dec -
-
-
-
-
-
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
- -
- -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - -
-
- 2009 -
- 		-
- 2010 -
- 		-
- 2011 -
-
-
- 2012 -
- 		-
- 2013 -
- 		-
- 2014 -
-
-
- 2015 -
- 		-
- 2016 -
- 		-
- 2017 -
-
-
- 2018 -
- 		-
- 2019 -
- 		-
- 2020 -
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - - - - -
-
- -
-
- - - - - -
-
-
-
-
-
-
-
-
-
-
- - -
- - -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
- 30 -
- 		-
- 31 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
- 		-
- 4 -
- 		-
- 5 -
-
-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
- 		-
- 11 -
- 		-
- 12 -
-
-
- 13 -
- 		-
- 14 -
- 		-
- 15 -
- 		-
- 16 -
- 		-
- 17 -
- 		-
- 18 -
- 		-
- 19 -
-
-
- 20 -
- 		-
- 21 -
- 		-
- 22 -
- 		-
- 23 -
- 		-
- 24 -
- 		-
- 25 -
- 		-
- 26 -
-
-
- 27 -
- 		-
- 28 -
- 		-
- 29 -
- 		-
- 30 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
-
-
- 4 -
- 		-
- 5 -
- 		-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
-
-
-
-
-
-
-
- - -
- - -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
- 27 -
- 		-
- 28 -
- 		-
- 29 -
- 		-
- 30 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
-
-
- 4 -
- 		-
- 5 -
- 		-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
-
-
- 11 -
- 		-
- 12 -
- 		-
- 13 -
- 		-
- 14 -
- 		-
- 15 -
- 		-
- 16 -
- 		-
- 17 -
-
-
- 18 -
- 		-
- 19 -
- 		-
- 20 -
- 		-
- 21 -
- 		-
- 22 -
- 		-
- 23 -
- 		-
- 24 -
-
-
- 25 -
- 		-
- 26 -
- 		-
- 27 -
- 		-
- 28 -
- 		-
- 29 -
- 		-
- 30 -
- 		-
- 31 -
-
-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
- 		-
- 4 -
- 		-
- 5 -
- 		-
- 6 -
- 		-
- 7 -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - - - - -
-
- -
-
- - - - - -
-
-
-
-
-
-
-
-
-
-
- - -
- - -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
- 45 -
- 		-
- 30 -
- 		-
- 31 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
- 		-
- 4 -
- 		-
- 5 -
-
-
- 46 -
- 		-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
- 		-
- 11 -
- 		-
- 12 -
-
-
- 47 -
- 		-
- 13 -
- 		-
- 14 -
- 		-
- 15 -
- 		-
- 16 -
- 		-
- 17 -
- 		-
- 18 -
- 		-
- 19 -
-
-
- 48 -
- 		-
- 20 -
- 		-
- 21 -
- 		-
- 22 -
- 		-
- 23 -
- 		-
- 24 -
- 		-
- 25 -
- 		-
- 26 -
-
-
- 49 -
- 		-
- 27 -
- 		-
- 28 -
- 		-
- 29 -
- 		-
- 30 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
-
-
- 50 -
- 		-
- 4 -
- 		-
- 5 -
- 		-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
-
-
-
-
-
-
-
- - -
- - -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
- 49 -
- 		-
- 27 -
- 		-
- 28 -
- 		-
- 29 -
- 		-
- 30 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
-
-
- 50 -
- 		-
- 4 -
- 		-
- 5 -
- 		-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
-
-
- 51 -
- 		-
- 11 -
- 		-
- 12 -
- 		-
- 13 -
- 		-
- 14 -
- 		-
- 15 -
- 		-
- 16 -
- 		-
- 17 -
-
-
- 52 -
- 		-
- 18 -
- 		-
- 19 -
- 		-
- 20 -
- 		-
- 21 -
- 		-
- 22 -
- 		-
- 23 -
- 		-
- 24 -
-
-
- 53 -
- 		-
- 25 -
- 		-
- 26 -
- 		-
- 27 -
- 		-
- 28 -
- 		-
- 29 -
- 		-
- 30 -
- 		-
- 31 -
-
-
- 1 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
- 		-
- 4 -
- 		-
- 5 -
- 		-
- 6 -
- 		-
- 7 -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - - - - -
-
- -
-
- - - - - -
-
-
-
-
-
-
-
-
-
-
- -
- -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - -
-
- Jan -
- 		-
- Feb -
- 		-
- Mar -
-
-
- Apr -
- 		-
- May -
- 		-
- Jun -
-
-
- Jul -
- 		-
- Aug -
- 		-
- Sep -
-
-
- Oct -
- 		-
- Nov -
- 		-
- Dec -
-
-
-
-
-
-
-
- -
- -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - -
-
- Jan -
- 		-
- Feb -
- 		-
- Mar -
-
-
- Apr -
- 		-
- May -
- 		-
- Jun -
-
-
- Jul -
- 		-
- Aug -
- 		-
- Sep -
-
-
- Oct -
- 		-
- Nov -
- 		-
- Dec -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- - - - - -
-
- -
-
- - - - - -
-
-
-
-
-
-
-
-
-
-
- -
- -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - -
-
- 2009 -
- 		-
- 2010 -
- 		-
- 2011 -
-
-
- 2012 -
- 		-
- 2013 -
- 		-
- 2014 -
-
-
- 2015 -
- 		-
- 2016 -
- 		-
- 2017 -
-
-
- 2018 -
- 		-
- 2019 -
- 		-
- 2020 -
-
-
-
-
-
-
-
- -
- -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - -
-
- 2019 -
- 		-
- 2020 -
- 		-
- 2021 -
-
-
- 2022 -
- 		-
- 2023 -
- 		-
- 2024 -
-
-
- 2025 -
- 		-
- 2026 -
- 		-
- 2027 -
-
-
- 2028 -
- 		-
- 2029 -
- 		-
- 2030 -
-
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`renders components/date-picker/demo/bordered.tsx extend context correctly 2`] = `[]`; - exports[`renders components/date-picker/demo/cell-render.tsx extend context correctly 1`] = `
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+
+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+
+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+
+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+
+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+
+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+
+
+
+
+ + Today + +
+
+
+
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+ Jan +
+ 		+
+ Feb +
+ 		+
+ Mar +
+
+
+ Apr +
+ 		+
+ May +
+ 		+
+ Jun +
+
+
+ Jul +
+ 		+
+ Aug +
+ 		+
+ Sep +
+
+
+ Oct +
+ 		+
+ Nov +
+ 		+
+ Dec +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+
+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+
+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+
+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+
+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+
+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+
+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+
+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+
+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+
+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+
+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+
+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+
+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+
+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+
+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+
+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+
+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+
+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+
+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+
+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+
+
+
+
+ + Today + +
+
+
+
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+ + Today + +
+
+
+
+
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+
+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+
+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+
+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+
+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+
+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+
+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`renders components/date-picker/demo/filled-debug.tsx extend context correctly 2`] = `[]`; + exports[`renders components/date-picker/demo/format.tsx extend context correctly 1`] = `
,
,
,
,
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+ + Today + +
+
+
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+
+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+
+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+
+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+ + Today + +
+
+
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+
+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+
+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+
+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+ + Today + +
+
+
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+
+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+
+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+
+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+
+
+
+
+
+ + +
+ + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+
+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+
+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+
+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`renders components/date-picker/demo/variant.tsx extend context correctly 2`] = `[]`; diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap b/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap index 512f988581..f55ccce827 100644 --- a/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap @@ -8,7 +8,7 @@ exports[`renders components/date-picker/demo/basic.tsx correctly 1`] = ` class="ant-space-item" >
`; -exports[`renders components/date-picker/demo/bordered.tsx correctly 1`] = ` -
-
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
- - - - - - -
-
-
-
-
-
- -
-
- - - - - -
-
- -
-
- - - - - -
-
-
-
-
- -
-
- - - - - -
-
- -
-
- - - - - -
-
-
-
-
- -
-
- - - - - -
-
- -
-
- - - - - -
-
-
-
-
- -
-
- - - - - -
-
- -
-
- - - - - -
-
-
-`; - exports[`renders components/date-picker/demo/cell-render.tsx correctly 1`] = `
`; +exports[`renders components/date-picker/demo/filled-debug.tsx correctly 1`] = ` +
+
+
+
+ + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + + + + + + +
+
+
+
+
+ + + + + + + + + + + +
+
+
+
+
+
+ + + + + + +
+
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+`; + exports[`renders components/date-picker/demo/format.tsx correctly 1`] = `
,
,
,
,
`; + +exports[`renders components/date-picker/demo/variant.tsx correctly 1`] = ` +
+
+
+
+ + + + + + +
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+ + + + + + +
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+ + + + + + +
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+`; diff --git a/components/date-picker/__tests__/__snapshots__/mount.test.ts.snap b/components/date-picker/__tests__/__snapshots__/mount.test.ts.snap index 5f7df157a8..8556b2ee00 100644 --- a/components/date-picker/__tests__/__snapshots__/mount.test.ts.snap +++ b/components/date-picker/__tests__/__snapshots__/mount.test.ts.snap @@ -2,7 +2,7 @@ exports[`mount rtl render component should be rendered correctly in RTL direction 1`] = `
( - - - - - - - - - - -); - -export default App; diff --git a/components/date-picker/demo/filled-debug.md b/components/date-picker/demo/filled-debug.md new file mode 100644 index 0000000000..e98da344f6 --- /dev/null +++ b/components/date-picker/demo/filled-debug.md @@ -0,0 +1,7 @@ +## zh-CN + +Filled Debug + +## en-US + +Filled Debug diff --git a/components/date-picker/demo/filled-debug.tsx b/components/date-picker/demo/filled-debug.tsx new file mode 100644 index 0000000000..b27b0f4bf7 --- /dev/null +++ b/components/date-picker/demo/filled-debug.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import dayjs from 'dayjs'; +import customParseFormat from 'dayjs/plugin/customParseFormat'; +import { DatePicker, Space } from 'antd'; + +dayjs.extend(customParseFormat); + +const { RangePicker } = DatePicker; + +const dateFormat = 'YYYY-MM-DD'; + +const App: React.FC = () => ( + + + + + + + + + + +); + +export default App; diff --git a/components/date-picker/demo/variant.md b/components/date-picker/demo/variant.md new file mode 100644 index 0000000000..4ba16eaa6d --- /dev/null +++ b/components/date-picker/demo/variant.md @@ -0,0 +1,7 @@ +## zh-CN + +可选 `outlined` `filled` `borderless` 三种形态。 + +## en-US + +There are `outlined` `fille` and `borderless`, totally three variants to choose from. diff --git a/components/date-picker/demo/variant.tsx b/components/date-picker/demo/variant.tsx new file mode 100644 index 0000000000..71a02c143e --- /dev/null +++ b/components/date-picker/demo/variant.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { DatePicker, Flex } from 'antd'; + +const { RangePicker } = DatePicker; + +const App: React.FC = () => ( + + + + + + + + + + + + + + +); + +export default App; diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index b7338be3a6..da7db8974d 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -29,6 +29,8 @@ import Components from './Components'; import type { CommonPickerMethods, PickerComponentClass } from './interface'; import { useZIndex } from '../../_util/hooks/useZIndex'; import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls'; +import useVariant from '../../_util/hooks/useVariants'; +import { InputVariants } from '../../input/Input'; export default function generateRangePicker(generateConfig: GenerateConfig) { type InternalRangePickerProps = RangePickerProps & {}; @@ -62,6 +64,7 @@ export default function generateRangePicker(generateConfig: GenerateCo clearIcon, allowClear, rootClassName, + variant: customVariant, ...restProps } = props; @@ -72,6 +75,8 @@ export default function generateRangePicker(generateConfig: GenerateCo const { format, showTime, picker } = props as any; const rootPrefixCls = getPrefixCls(); + const [variant, enableVariantCls] = useVariant(customVariant, bordered, InputVariants); + const rootCls = useCSSVarCls(prefixCls); const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls); @@ -85,6 +90,8 @@ export default function generateRangePicker(generateConfig: GenerateCo const warning = devUseWarning('DatePicker.RangePicker'); warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName'); + + warning.deprecated(!('bordered' in props), 'bordered', 'variant'); } // ===================== Size ===================== @@ -139,7 +146,7 @@ export default function generateRangePicker(generateConfig: GenerateCo className={classNames( { [`${prefixCls}-${mergedSize}`]: mergedSize, - [`${prefixCls}-borderless`]: !bordered, + [`${prefixCls}-${variant}`]: enableVariantCls, }, getStatusClassNames(prefixCls, getMergedStatus(contextStatus, customStatus), hasFeedback), hashId, diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index 2aab988c00..32cc542ac8 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -30,6 +30,8 @@ import Components from './Components'; import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './interface'; import { useZIndex } from '../../_util/hooks/useZIndex'; import useCSSVarCls from '../../config-provider/hooks/useCSSVarCls'; +import useVariant from '../../_util/hooks/useVariants'; +import { InputVariants } from '../../input/Input'; export default function generatePicker(generateConfig: GenerateConfig) { type CustomPickerProps = { @@ -55,7 +57,7 @@ export default function generatePicker(generateConfig: GenerateConfig< className, rootClassName, size: customizeSize, - bordered = true, + bordered, placement, placeholder, popupClassName, @@ -64,6 +66,7 @@ export default function generatePicker(generateConfig: GenerateConfig< status: customStatus, clearIcon, allowClear, + variant: customVariant, ...restProps } = props; @@ -80,6 +83,8 @@ export default function generatePicker(generateConfig: GenerateConfig< const innerRef = React.useRef>(null); const { format, showTime } = props as any; + const [variant, enableVariantCls] = useVariant(customVariant, bordered, InputVariants); + const rootCls = useCSSVarCls(prefixCls); const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls, rootCls); @@ -118,6 +123,8 @@ export default function generatePicker(generateConfig: GenerateConfig< ); warning.deprecated(!dropdownClassName, 'dropdownClassName', 'popupClassName'); + + warning.deprecated(!('bordered' in props), 'bordered', 'variant'); } // ===================== Size ===================== @@ -162,7 +169,7 @@ export default function generatePicker(generateConfig: GenerateConfig< className={classNames( { [`${prefixCls}-${mergedSize}`]: mergedSize, - [`${prefixCls}-borderless`]: !bordered, + [`${prefixCls}-${variant}`]: enableVariantCls, }, getStatusClassNames( prefixCls, @@ -187,6 +194,7 @@ export default function generatePicker(generateConfig: GenerateConfig< dropdownClassName={classNames( hashId, cssVarCls, + rootCls, rootClassName, popupClassName || dropdownClassName, )} diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx index 18f28d417c..10eec09cca 100644 --- a/components/date-picker/generatePicker/index.tsx +++ b/components/date-picker/generatePicker/index.tsx @@ -15,9 +15,10 @@ import type { SizeType } from '../../config-provider/SizeContext'; import type { TimePickerLocale } from '../../time-picker'; import generateRangePicker from './generateRangePicker'; import generateSinglePicker from './generateSinglePicker'; +import type { InputVariant } from '../../input/Input'; const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const; -type DataPickerPlacement = typeof DataPickerPlacements[number]; +type DataPickerPlacement = (typeof DataPickerPlacements)[number]; type InjectDefaultProps = Omit< Props, @@ -26,8 +27,14 @@ type InjectDefaultProps = Omit< locale?: PickerLocale; size?: SizeType; placement?: DataPickerPlacement; + /** @deprecated Use `variant` instead */ bordered?: boolean; status?: InputStatus; + /** + * @since 5.13.0 + * @default "outlined" + */ + variant?: InputVariant; }; export type PickerLocale = { diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index b7a40aa761..1c2f13ddec 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -29,7 +29,8 @@ By clicking the input box, you can select a date from a popup calendar. Three Sizes Customized Cell Rendering Status -Bordered-less +Variants +Filled Debug Placement Controlled Panels Customized Range Picker @@ -89,7 +90,6 @@ The following APIs are shared by DatePicker, RangePicker. | --- | --- | --- | --- | --- | | allowClear | Customize clear button | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: Support object type | | autoFocus | If get focus when component mounted | boolean | false | | -| bordered | Whether has border style | boolean | true | | | className | The picker className | string | - | | | dateRender | Custom rendering function for date cells, >= 5.4.0 use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 | | changeOnBlur | Trigger `change` when blur. e.g. datetime picker no need click confirm button | boolean | false | 5.5.0 | @@ -117,6 +117,7 @@ The following APIs are shared by DatePicker, RangePicker. | suffixIcon | The custom suffix icon | ReactNode | - | | | superNextIcon | The custom super next icon | ReactNode | - | 4.17.0 | | superPrevIcon | The custom super prev icon | ReactNode | - | 4.17.0 | +| variant | Variants of picker | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 | | onOpenChange | Callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | | | onPanelChange | Callback when picker panel mode is changed | function(value, mode) | - | | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index b61cd91d4c..e979e3fcce 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -30,7 +30,8 @@ demo: 三种大小 定制单元格 自定义状态 -无边框 +多种形态 +Filled Debug 弹出位置 受控面板 自定义日期范围选择 @@ -90,7 +91,6 @@ import 'dayjs/locale/zh-cn'; | --- | --- | --- | --- | --- | | allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 | | autoFocus | 自动获取焦点 | boolean | false | | -| bordered | 是否有边框 | boolean | true | | | className | 选择器 className | string | - | | | dateRender | 自定义日期单元格的内容，5.4.0 起用 `cellRender` 代替 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 | | changeOnBlur | 失去焦点时触发 `change` 事件，例如 datetime 下不再需要点击确认按钮 | boolean | false | 5.5.0 | @@ -118,6 +118,7 @@ import 'dayjs/locale/zh-cn'; | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | | superNextIcon | 自定义 `>>` 切换图标 | ReactNode | - | 4.17.0 | | superPrevIcon | 自定义 `<<` 切换图标 | ReactNode | - | 4.17.0 | +| variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 | | onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | | | onPanelChange | 日历面板切换的回调 | function(value, mode) | - | | diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 5edac6146a..fe04afafc6 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -1,15 +1,7 @@ import type { CSSObject } from '@ant-design/cssinjs'; import { unit } from '@ant-design/cssinjs'; import { TinyColor } from '@ctrl/tinycolor'; - -import type { SharedComponentToken, SharedInputToken } from '../../input/style/token'; -import { - genActiveStyle, - genBasicInputStyle, - initComponentToken, - initInputToken, -} from '../../input/style'; -import { genHoverStyle } from '../../input/style/variants'; +import { genPlaceholderStyle, initInputToken } from '../../input/style'; import { resetComponent, textEllipsis } from '../../style'; import { genCompactItemStyle } from '../../style/compact-item'; import { @@ -20,115 +12,23 @@ import { slideUpIn, slideUpOut, } from '../../style/motion'; -import type { GlobalToken } from '../../theme/interface'; -import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; +import type { GenerateStyle } from '../../theme/internal'; import { genStyleHooks, mergeToken } from '../../theme/internal'; -import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'; -import type { ArrowToken } from '../../style/roundedArrow'; -import { genRoundedArrow, getArrowToken } from '../../style/roundedArrow'; +import { genRoundedArrow } from '../../style/roundedArrow'; +import type { + ComponentToken, + PanelComponentToken, + PickerPanelToken, + PickerToken, + SharedPickerToken, +} from './token'; +import { initPanelComponentToken, initPickerPanelToken, prepareComponentToken } from './token'; +import genVariantsStyle from './variants'; -export interface PanelComponentToken { - /** - * @desc 单元格悬浮态背景色 - * @descEN Background color of cell hover state - */ - cellHoverBg: string; - /** - * @desc 选取范围内的单元格背景色 - * @descEN Background color of cell in range - */ - cellActiveWithRangeBg: string; - /** - * @desc 选取范围内的单元格悬浮态背景色 - * @descEN Background color of hovered cell in range - */ - cellHoverWithRangeBg: string; - /** - * @desc 单元格禁用态背景色 - * @descEN Background color of disabled cell - */ - cellBgDisabled: string; - /** - * @desc 选取范围时单元格边框色 - * @descEN Border color of cell in range when picking - */ - cellRangeBorderColor: string; - /** - * @desc 时间列宽度 - * @descEN Width of time column - */ - timeColumnWidth: number; - /** - * @desc 时间列高度 - * @descEN Height of time column - */ - timeColumnHeight: number; - /** - * @desc 时间单元格高度 - * @descEN Height of time cell - */ - timeCellHeight: number; - /** - * @desc 单元格高度 - * @descEN Height of cell - */ - cellHeight: number; - /** - * @desc 单元格宽度 - * @descEN Width of cell - */ - cellWidth: number; - /** - * @desc 单元格文本高度 - * @descEN Height of cell text - */ - textHeight: number; - /** - * @desc 十年/年/季/月/周单元格高度 - * @descEN Height of decade/year/quarter/month/week cell - */ - withoutTimeCellHeight: number; -} +export type { ComponentToken, PanelComponentToken, PickerPanelToken }; +export { initPickerPanelToken, initPanelComponentToken }; -export interface ComponentToken - extends Exclude, - PanelComponentToken, - ArrowToken { - /** - * @desc 预设区域宽度 - * @descEN Width of preset area - */ - presetsWidth: number; - /** - * @desc 预设区域最大宽度 - * @descEN Max width of preset area - */ - presetsMaxWidth: number; - /** - * @desc 弹窗 z-index - * @descEN z-index of popup - */ - zIndexPopup: number; -} - -export type PickerPanelToken = { - pickerCellCls: string; - pickerCellInnerCls: string; - pickerDatePanelPaddingHorizontal: number | string; - pickerYearMonthCellWidth: number | string; - pickerCellPaddingVertical: number | string; - pickerQuarterPanelContentHeight: number | string; - pickerCellBorderGap: number; - pickerControlIconSize: number; - pickerControlIconMargin: number; - pickerControlIconBorderWidth: number; -}; - -type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken; - -type SharedPickerToken = TokenWithCommonCls & PickerPanelToken & PanelComponentToken; - -const genPikerPadding = ( +const genPickerPadding = ( token: PickerToken, inputHeight: number, fontHeight: number, @@ -1025,58 +925,17 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { }; const genPickerStatusStyle: GenerateStyle = (token) => { - const { - componentCls, - colorBgContainer, - colorError, - errorActiveShadow, - colorWarning, - warningActiveShadow, - colorErrorHover, - colorWarningHover, - } = token; + const { componentCls, colorError, colorWarning } = token; return { [`${componentCls}:not(${componentCls}-disabled):not([disabled])`]: { [`&${componentCls}-status-error`]: { - backgroundColor: colorBgContainer, - borderColor: colorError, - - '&:hover': { - borderColor: colorErrorHover, - }, - - [`&${componentCls}-focused, &:focus`]: { - ...genActiveStyle( - mergeToken(token, { - activeBorderColor: colorError, - activeShadow: errorActiveShadow, - }), - ), - }, - [`${componentCls}-active-bar`]: { background: colorError, }, }, [`&${componentCls}-status-warning`]: { - backgroundColor: colorBgContainer, - borderColor: colorWarning, - - '&:hover': { - borderColor: colorWarningHover, - }, - - [`&${componentCls}-focused, &:focus`]: { - ...genActiveStyle( - mergeToken(token, { - activeBorderColor: colorWarning, - activeShadow: warningActiveShadow, - }), - ), - }, - [`${componentCls}-active-bar`]: { background: colorWarning, }, @@ -1091,13 +950,11 @@ const genPickerStyle: GenerateStyle = (token) => { antCls, controlHeight, paddingInline, - colorBgContainer, lineWidth, lineType, colorBorder, borderRadius, motionDurationMid, - colorBgContainerDisabled, colorTextDisabled, colorTextPlaceholder, controlHeightLG, @@ -1126,7 +983,6 @@ const genPickerStyle: GenerateStyle = (token) => { presetsWidth, presetsMaxWidth, boxShadowPopoverArrow, - colorTextQuaternary, fontHeight, fontHeightLG, lineHeightLG, @@ -1136,39 +992,13 @@ const genPickerStyle: GenerateStyle = (token) => { { [componentCls]: { ...resetComponent(token), - ...genPikerPadding(token, controlHeight, fontHeight, paddingInline), + ...genPickerPadding(token, controlHeight, fontHeight, paddingInline), position: 'relative', display: 'inline-flex', alignItems: 'center', - background: colorBgContainer, lineHeight: 1, - border: `${unit(lineWidth)} ${lineType} ${colorBorder}`, borderRadius, - transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`, - - '&:hover': { - ...genHoverStyle(token), - }, - - [`&-focused${componentCls}`]: { - ...genActiveStyle(token), - }, - - [`&${componentCls}-disabled`]: { - background: colorBgContainerDisabled, - borderColor: colorBorder, - cursor: 'not-allowed', - - [`${componentCls}-suffix`]: { - color: colorTextQuaternary, - }, - }, - - [`&${componentCls}-borderless`]: { - backgroundColor: 'transparent !important', - borderColor: 'transparent !important', - boxShadow: 'none !important', - }, + transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}, background ${motionDurationMid}`, // ======================== Input ========================= [`${componentCls}-input`]: { @@ -1178,7 +1008,14 @@ const genPickerStyle: GenerateStyle = (token) => { width: '100%', '> input': { - ...genBasicInputStyle(token), + position: 'relative', + display: 'inline-block', + width: '100%', + color: 'inherit', + fontSize: token.fontSize, + lineHeight: token.lineHeight, + transition: `all ${motionDurationMid}`, + ...genPlaceholderStyle(colorTextPlaceholder), flex: 'auto', // Fix Firefox flex not correct: @@ -1188,15 +1025,17 @@ const genPickerStyle: GenerateStyle = (token) => { padding: 0, background: 'transparent', border: 0, - borderRadius: 0, fontFamily: 'inherit', '&:focus': { boxShadow: 'none', + outline: 0, }, '&[disabled]': { background: 'transparent', + color: colorTextDisabled, + cursor: 'not-allowed', }, }, @@ -1204,6 +1043,12 @@ const genPickerStyle: GenerateStyle = (token) => { [`${componentCls}-clear`]: { opacity: 1, }, + // Should use the following selector, but since `:has` has poor compatibility, + // we use `:not(:last-child)` instead, which may cause some problems in some cases. + // [`${componentCls}-suffix:has(+ ${componentCls}-clear)`]: { + [`${componentCls}-suffix:not(:last-child)`]: { + opacity: 0, + }, }, '&-placeholder': { @@ -1215,7 +1060,7 @@ const genPickerStyle: GenerateStyle = (token) => { // Size '&-large': { - ...genPikerPadding(token, controlHeightLG, fontHeightLG, paddingInline), + ...genPickerPadding(token, controlHeightLG, fontHeightLG, paddingInline), [`${componentCls}-input > input`]: { fontSize: fontSizeLG, @@ -1224,7 +1069,7 @@ const genPickerStyle: GenerateStyle = (token) => { }, '&-small': { - ...genPikerPadding(token, controlHeightSM, fontHeight, paddingInlineSM), + ...genPickerPadding(token, controlHeightSM, fontHeight, paddingInlineSM), }, [`${componentCls}-suffix`]: { @@ -1235,6 +1080,7 @@ const genPickerStyle: GenerateStyle = (token) => { color: colorTextDisabled, lineHeight: 1, pointerEvents: 'none', + transition: `opacity ${motionDurationMid}, color ${motionDurationMid}`, '> *': { verticalAlign: 'top', @@ -1251,7 +1097,6 @@ const genPickerStyle: GenerateStyle = (token) => { insetInlineEnd: 0, color: colorTextDisabled, lineHeight: 1, - background: colorBgContainer, transform: 'translateY(-50%)', cursor: 'pointer', opacity: 0, @@ -1301,6 +1146,12 @@ const genPickerStyle: GenerateStyle = (token) => { [`${componentCls}-clear`]: { opacity: 1, }, + // Should use the following selector, but since `:has` has poor compatibility, + // we use `:not(:last-child)` instead, which may cause some problems in some cases. + // [`${componentCls}-suffix:has(+ ${componentCls}-clear)`]: { + [`${componentCls}-suffix:not(:last-child)`]: { + opacity: 0, + }, }, // Active bar @@ -1569,50 +1420,6 @@ const genPickerStyle: GenerateStyle = (token) => { ]; }; -export const initPickerPanelToken = (token: TokenWithCommonCls): PickerPanelToken => { - const { componentCls, controlHeightLG, paddingXXS, padding } = token; - - return { - pickerCellCls: `${componentCls}-cell`, - pickerCellInnerCls: `${componentCls}-cell-inner`, - pickerYearMonthCellWidth: token.calc(controlHeightLG).mul(1.5).equal(), - pickerQuarterPanelContentHeight: token.calc(controlHeightLG).mul(1.4).equal(), - pickerCellPaddingVertical: token.calc(paddingXXS).add(token.calc(paddingXXS).div(2)).equal(), - pickerCellBorderGap: 2, // Magic for gap between cells - pickerControlIconSize: 7, - pickerControlIconMargin: 4, - pickerControlIconBorderWidth: 1.5, - pickerDatePanelPaddingHorizontal: token - .calc(padding) - .add(token.calc(paddingXXS).div(2)) - .equal(), // 18 in normal - }; -}; - -export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken => ({ - cellHoverBg: token.controlItemBgHover, - cellActiveWithRangeBg: token.controlItemBgActive, - cellHoverWithRangeBg: new TinyColor(token.colorPrimary).lighten(35).toHexString(), - cellRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toHexString(), - cellBgDisabled: token.colorBgContainerDisabled, - timeColumnWidth: token.controlHeightLG * 1.4, - timeColumnHeight: 28 * 8, - timeCellHeight: 28, - cellWidth: token.controlHeightSM * 1.5, - cellHeight: token.controlHeightSM, - textHeight: token.controlHeightLG, - withoutTimeCellHeight: token.controlHeightLG * 1.65, -}); - -export const prepareComponentToken: GetDefaultToken<'DatePicker'> = (token) => ({ - ...initComponentToken(token), - ...initPanelComponentToken(token), - ...getArrowToken(token), - presetsWidth: 120, - presetsMaxWidth: 200, - zIndexPopup: token.zIndexPopupBase + 50, -}); - // ============================== Export ============================== export default genStyleHooks( 'DatePicker', @@ -1620,6 +1427,7 @@ export default genStyleHooks( const pickerToken = mergeToken(initInputToken(token), initPickerPanelToken(token)); return [ genPickerStyle(pickerToken), + genVariantsStyle(pickerToken), genPickerStatusStyle(pickerToken), // ===================================================== // == Space Compact == diff --git a/components/date-picker/style/token.ts b/components/date-picker/style/token.ts new file mode 100644 index 0000000000..82f34f628c --- /dev/null +++ b/components/date-picker/style/token.ts @@ -0,0 +1,158 @@ +import type { SharedComponentToken, SharedInputToken } from '../../input/style/token'; +import type { ArrowToken } from '../../style/roundedArrow'; +import type { + FullToken, + TokenWithCommonCls, + GetDefaultToken, +} from '../../theme/util/genComponentStyleHook'; +import type { GlobalToken } from '../../theme/interface'; +import { TinyColor } from '@ctrl/tinycolor'; +import { initComponentToken } from '../../input/style/token'; +import { getArrowToken } from '../../style/roundedArrow'; + +export interface PanelComponentToken { + /** + * @desc 单元格悬浮态背景色 + * @descEN Background color of cell hover state + */ + cellHoverBg: string; + /** + * @desc 选取范围内的单元格背景色 + * @descEN Background color of cell in range + */ + cellActiveWithRangeBg: string; + /** + * @desc 选取范围内的单元格悬浮态背景色 + * @descEN Background color of hovered cell in range + */ + cellHoverWithRangeBg: string; + /** + * @desc 单元格禁用态背景色 + * @descEN Background color of disabled cell + */ + cellBgDisabled: string; + /** + * @desc 选取范围时单元格边框色 + * @descEN Border color of cell in range when picking + */ + cellRangeBorderColor: string; + /** + * @desc 时间列宽度 + * @descEN Width of time column + */ + timeColumnWidth: number; + /** + * @desc 时间列高度 + * @descEN Height of time column + */ + timeColumnHeight: number; + /** + * @desc 时间单元格高度 + * @descEN Height of time cell + */ + timeCellHeight: number; + /** + * @desc 单元格高度 + * @descEN Height of cell + */ + cellHeight: number; + /** + * @desc 单元格宽度 + * @descEN Width of cell + */ + cellWidth: number; + /** + * @desc 单元格文本高度 + * @descEN Height of cell text + */ + textHeight: number; + /** + * @desc 十年/年/季/月/周单元格高度 + * @descEN Height of decade/year/quarter/month/week cell + */ + withoutTimeCellHeight: number; +} + +export interface ComponentToken + extends Exclude, + PanelComponentToken, + ArrowToken { + /** + * @desc 预设区域宽度 + * @descEN Width of preset area + */ + presetsWidth: number; + /** + * @desc 预设区域最大宽度 + * @descEN Max width of preset area + */ + presetsMaxWidth: number; + /** + * @desc 弹窗 z-index + * @descEN z-index of popup + */ + zIndexPopup: number; +} + +export type PickerPanelToken = { + pickerCellCls: string; + pickerCellInnerCls: string; + pickerDatePanelPaddingHorizontal: number | string; + pickerYearMonthCellWidth: number | string; + pickerCellPaddingVertical: number | string; + pickerQuarterPanelContentHeight: number | string; + pickerCellBorderGap: number; + pickerControlIconSize: number; + pickerControlIconMargin: number; + pickerControlIconBorderWidth: number; +}; + +export type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken; + +export type SharedPickerToken = TokenWithCommonCls & + PickerPanelToken & + PanelComponentToken; + +export const initPickerPanelToken = (token: TokenWithCommonCls): PickerPanelToken => { + const { componentCls, controlHeightLG, paddingXXS, padding } = token; + + return { + pickerCellCls: `${componentCls}-cell`, + pickerCellInnerCls: `${componentCls}-cell-inner`, + pickerYearMonthCellWidth: token.calc(controlHeightLG).mul(1.5).equal(), + pickerQuarterPanelContentHeight: token.calc(controlHeightLG).mul(1.4).equal(), + pickerCellPaddingVertical: token.calc(paddingXXS).add(token.calc(paddingXXS).div(2)).equal(), + pickerCellBorderGap: 2, // Magic for gap between cells + pickerControlIconSize: 7, + pickerControlIconMargin: 4, + pickerControlIconBorderWidth: 1.5, + pickerDatePanelPaddingHorizontal: token + .calc(padding) + .add(token.calc(paddingXXS).div(2)) + .equal(), // 18 in normal + }; +}; + +export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken => ({ + cellHoverBg: token.controlItemBgHover, + cellActiveWithRangeBg: token.controlItemBgActive, + cellHoverWithRangeBg: new TinyColor(token.colorPrimary).lighten(35).toHexString(), + cellRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toHexString(), + cellBgDisabled: token.colorBgContainerDisabled, + timeColumnWidth: token.controlHeightLG * 1.4, + timeColumnHeight: 28 * 8, + timeCellHeight: 28, + cellWidth: token.controlHeightSM * 1.5, + cellHeight: token.controlHeightSM, + textHeight: token.controlHeightLG, + withoutTimeCellHeight: token.controlHeightLG * 1.65, +}); + +export const prepareComponentToken: GetDefaultToken<'DatePicker'> = (token) => ({ + ...initComponentToken(token), + ...initPanelComponentToken(token), + ...getArrowToken(token), + presetsWidth: 120, + presetsMaxWidth: 200, + zIndexPopup: token.zIndexPopupBase + 50, +}); diff --git a/components/date-picker/style/variants.ts b/components/date-picker/style/variants.ts new file mode 100644 index 0000000000..f048fed8e6 --- /dev/null +++ b/components/date-picker/style/variants.ts @@ -0,0 +1,13 @@ +import type { PickerToken } from './token'; +import type { CSSObject } from '@ant-design/cssinjs'; +import { genBorderlessStyle, genFilledStyle, genOutlinedStyle } from '../../input/style/variants'; + +const genVariantsStyle = (token: PickerToken): CSSObject => ({ + [token.componentCls]: { + ...genOutlinedStyle(token), + ...genFilledStyle(token), + ...genBorderlessStyle(token), + }, +}); + +export default genVariantsStyle; diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap index 83e639ae07..8ae3b7af88 100644 --- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap +++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap @@ -1551,7 +1551,7 @@ Array [ >
,
,
,
,
,
,
,
,