+ |
+
+ 30
+
+ |
+
-
-
- |
+
-
-
-
+ |
+
-
- |
+
+
- 2016
-
-
- |
+
-
-
- |
+
-
-
-
-
-
+ 5
+
+
+
+
+
-
-
- |
- Su
- |
-
- Mo
- |
-
- Tu
- |
-
- We
- |
-
- Th
- |
-
- Fr
- |
-
- Sa
- |
-
-
- |
-
- |
-
+ 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
+ |
+
+
+
+
+ |
+
+ 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
@@ -35490,7 +37351,244 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
- 5
+ 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
|
@@ -35500,76 +37598,76 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
- 46
+ 49
|
- 6
+ 27
|
- 7
+ 28
|
- 8
+ 29
|
- 9
+ 30
|
- 10
+ 1
|
- 11
+ 2
|
- 12
+ 3
|
@@ -35579,155 +37677,262 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
- 47
+ 50
|
- 13
+ 4
|
- 14
+ 5
|
- 15
+ 6
|
- 16
+ 7
|
- 17
+ 8
|
- 18
+ 9
|
- 19
+ 10
|
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+ Su
+ |
+
+ Mo
+ |
+
+ Tu
+ |
+
+ We
+ |
+
+ Th
+ |
+
+ Fr
+ |
+
+ Sa
+ |
+
+
+
|
- 48
+ 49
|
- 20
+ 27
|
- 21
+ 28
|
- 22
+ 29
|
- 23
+ 30
|
- 24
+ 1
|
- 25
+ 2
|
- 26
+ 3
|
@@ -35737,76 +37942,76 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
- 49
+ 50
|
- 27
+ 4
|
- 28
+ 5
|
- 29
+ 6
|
- 30
+ 7
|
- 1
+ 8
|
- 2
+ 9
|
- 3
+ 10
|
@@ -35816,262 +38021,155 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
- 50
+ 51
|
- 4
+ 11
|
- 5
+ 12
|
- 6
+ 13
|
- 7
+ 14
|
- 8
+ 15
|
- 9
+ 16
|
- 10
+ 17
|
-
-
-
-
-
-
-
-
-
-
-
-
- |
-
- Su
- |
-
- Mo
- |
-
- Tu
- |
-
- We
- |
-
- Th
- |
-
- Fr
- |
-
- Sa
- |
-
-
-
|
- 49
+ 52
|
- 27
+ 18
|
- 28
+ 19
|
- 29
+ 20
|
- 30
+ 21
|
- 1
+ 22
|
- 2
+ 23
|
- 3
+ 24
|
@@ -36081,392 +38179,626 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
- 50
+ 53
|
- 4
+ 25
|
- 5
+ 26
|
- 6
+ 27
|
- 7
+ 28
|
- 8
+ 29
|
+
+ 30
+
+ |
+
+
+ 31
+
+ |
+
+
+ |
+ 1
+ |
+
- 9
+ 1
|
- 10
+ 2
|
-
-
- |
- 51
- |
- 11
+ 3
|
- 12
+ 4
|
- 13
+ 5
|
- 14
+ 6
|
- 15
+ 7
|
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
|
- 16
+ Jan
|
- 17
+ Feb
|
-
-
- |
- 52
- |
- 18
+ Mar
|
+
+
|
- 19
+ Apr
|
- 20
+ May
|
- 21
+ Jun
|
+
+
|
- 22
+ Jul
|
- 23
+ Aug
|
- 24
+ Sep
|
-
- |
- 53
- |
+
|
- 25
+ Oct
|
- 26
+ Nov
|
- 27
+ Dec
|
+
+
+
+
+
+
+
+
+
+
+
+
+
|
- 28
+ Jan
|
- 29
+ Feb
|
- 30
+ Mar
|
+
+
|
- 31
+ Apr
|
-
-
|
- 1
+
+ May
+
|
- 1
+ Jun
|
+
+
|
- 2
+ Jul
|
- 3
+ Aug
|
- 4
+ Sep
|
+
+
|
- 5
+ Oct
|
- 6
+ Nov
|
- 7
+ Dec
|
@@ -36493,7 +38825,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
>
-
-
-
-
- |
-
- Jan
-
- |
-
-
- Feb
-
- |
-
-
- Mar
-
- |
-
-
- |
-
- Apr
-
- |
-
-
- May
-
- |
-
-
- Jun
-
- |
-
-
- |
-
- Jul
-
- |
-
-
- Aug
-
- |
+
+
+
+
|
- Sep
+ Q1
|
-
-
|
- Oct
+ Q2
|
- Nov
+ Q3
|
- Dec
+ Q4
|
@@ -36771,7 +39017,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
tabindex="-1"
>
+
+
+ -
+
+ 00
+
+
+ -
+
+ 01
+
+
+ -
+
+ 02
+
+
+ -
+
+ 03
+
+
+ -
+
+ 04
+
+
+ -
+
+ 05
+
+
+ -
+
+ 06
+
+
+ -
+
+ 07
+
+
+ -
+
+ 08
+
+
+ -
+
+ 09
+
+
+ -
+
+ 10
+
+
+ -
+
+ 11
+
+
+ -
+
+ 12
+
+
+ -
+
+ 13
+
+
+ -
+
+ 14
+
+
+ -
+
+ 15
+
+
+ -
+
+ 16
+
+
+ -
+
+ 17
+
+
+ -
+
+ 18
+
+
+ -
+
+ 19
+
+
+ -
+
+ 20
+
+
+ -
+
+ 21
+
+
+ -
+
+ 22
+
+
+ -
+
+ 23
+
+
+
+
+ -
+
+ 00
+
+
+ -
+
+ 01
+
+
+ -
+
+ 02
+
+
+ -
+
+ 03
+
+
+ -
+
+ 04
+
+
+ -
+
+ 05
+
+
+ -
+
+ 06
+
+
+ -
+
+ 07
+
+
+ -
+
+ 08
+
+
+ -
+
+ 09
+
+
+ -
+
+ 10
+
+
+ -
+
+ 11
+
+
+ -
+
+ 12
+
+
+ -
+
+ 13
+
+
+ -
+
+ 14
+
+
+ -
+
+ 15
+
+
+ -
+
+ 16
+
+
+ -
+
+ 17
+
+
+ -
+
+ 18
+
+
+ -
+
+ 19
+
+
+ -
+
+ 20
+
+
+ -
+
+ 21
+
+
+ -
+
+ 22
+
+
+ -
+
+ 23
+
+
+ -
+
+ 24
+
+
+ -
+
+ 25
+
+
+ -
+
+ 26
+
+
+ -
+
+ 27
+
+
+ -
+
+ 28
+
+
+ -
+
+ 29
+
+
+ -
+
+ 30
+
+
+ -
+
+ 31
+
+
+ -
+
+ 32
+
+
+ -
+
+ 33
+
+
+ -
+
+ 34
+
+
+ -
+
+ 35
+
+
+ -
+
+ 36
+
+
+ -
+
+ 37
+
+
+ -
+
+ 38
+
+
+ -
+
+ 39
+
+
+ -
+
+ 40
+
+
+ -
+
+ 41
+
+
+ -
+
+ 42
+
+
+ -
+
+ 43
+
+
+ -
+
+ 44
+
+
+ -
+
+ 45
+
+
+ -
+
+ 46
+
+
+ -
+
+ 47
+
+
+ -
+
+ 48
+
+
+ -
+
+ 49
+
+
+ -
+
+ 50
+
+
+ -
+
+ 51
+
+
+ -
+
+ 52
+
+
+ -
+
+ 53
+
+
+ -
+
+ 54
+
+
+ -
+
+ 55
+
+
+ -
+
+ 56
+
+
+ -
+
+ 57
+
+
+ -
+
+ 58
+
+
+ -
+
+ 59
+
+
+
-
- -
-
- 00
-
-
-
- 01
+ 24
-
- 02
+ 25
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders ./components/date-picker/demo/status.md extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ Su
+ |
+
+ Mo
+ |
+
+ Tu
+ |
+
+ We
+ |
+
+ Th
+ |
+
+ Fr
+ |
+
+ Sa
+ |
+
+
+
+
+ |
- 37
-
-
-
-
+ 30
+
+ |
+
- 38
-
-
-
-
+ 31
+
+ |
+
- 39
-
-
-
-
+ 1
+
+ |
+
- 40
-
-
-
-
+ 2
+
+ |
+
- 41
-
-
-
-
+ 3
+
+ |
+
- 42
-
-
-
-
+ 4
+
+ |
+
- 43
-
-
-
-
+ 5
+
+ |
+
+
+ |
- 44
-
-
-
-
+ 6
+
+ |
+
- 45
-
-
-
-
+ 7
+
+ |
+
- 46
-
-
-
-
+ 8
+
+ |
+
- 47
-
-
-
-
+ 9
+
+ |
+
- 48
-
-
-
-
+ 10
+
+ |
+
- 49
-
-
-
-
+ 11
+
+ |
+
- 50
-
-
-
-
+ 12
+
+ |
+
+
+ |
- 51
-
-
-
-
+ 13
+
+ |
+
- 52
-
-
-
-
+ 14
+
+ |
+
- 53
-
-
-
-
+ 15
+
+ |
+
- 54
-
-
-
-
+ 16
+
+ |
+
- 55
-
-
-
-
+ 17
+
+ |
+
- 56
-
-
-
-
+ 18
+
+ |
+
- 57
-
-
-
-
+ 19
+
+ |
+
+
+ |
- 58
-
-
-
-
+ 20
+
+ |
+
- 59
-
-
-
- |
+
- 00
-
-
-
-
+ 22
+
+ |
+
- 01
-
-
-
-
+ 23
+
+ |
+
- 02
-
-
-
-
+ 24
+
+ |
+
- 03
-
-
-
-
+ 25
+
+ |
+
- 04
-
-
-
-
+ 26
+
+ |
+
+
+ |
- 05
-
-
-
-
+ 27
+
+ |
+
- 06
-
-
-
-
+ 28
+
+ |
+
- 07
-
-
-
-
+ 29
+
+ |
+
- 08
-
-
-
-
+ 30
+
+ |
+
- 09
-
-
-
-
+ 1
+
+ |
+
- 10
-
-
-
-
+ 2
+
+ |
+
- 11
-
-
-
-
+ 3
+
+ |
+
+
+ |
+
+ 4
+
+ |
+
- 12
-
-
-
-
+ 5
+
+ |
+
- 13
-
-
-
-
+ 6
+
+ |
+
- 14
-
-
-
-
+ 7
+
+ |
+
- 15
-
-
-
-
+ 8
+
+ |
+
- 16
-
-
-
-
+ 9
+
+ |
+
- 17
-
-
-
-
+ 10
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ Su
+ |
+
+ Mo
+ |
+
+ Tu
+ |
+
+ We
+ |
+
+ Th
+ |
+
+ Fr
+ |
+
+ Sa
+ |
+
+
+
+
+ |
- 18
-
-
-
-
+ 30
+
+ |
+
- 19
-
-
-
-
+ 31
+
+ |
+
- 20
-
-
-
-
+ 1
+
+ |
+
- 21
-
-
-
-
+ 2
+
+ |
+
- 22
-
-
-
-
+ 3
+
+ |
+
- 23
-
-
-
-
+ 4
+
+ |
+
- 24
-
-
-
-
+ 5
+
+ |
+
+
+ |
- 25
-
-
-
-
+ 6
+
+ |
+
- 26
-
-
-
-
+ 7
+
+ |
+
- 27
-
-
-
-
+ 8
+
+ |
+
- 28
-
-
-
-
+ 9
+
+ |
+
- 29
-
-
-
-
+ 10
+
+ |
+
- 30
-
-
-
-
+ 11
+
+ |
+
- 31
-
-
-
-
+ 12
+
+ |
+
+
+ |
- 32
-
-
-
-
+ 13
+
+ |
+
- 33
-
-
-
-
+ 14
+
+ |
+
- 34
-
-
-
-
+ 15
+
+ |
+
- 35
-
-
-
-
+ 16
+
+ |
+
- 36
-
-
-
-
+ 17
+
+ |
+
- 37
-
-
-
-
+ 18
+
+ |
+
- 38
-
-
-
-
+ 19
+
+ |
+
+
+ |
- 39
-
-
-
-
+ 20
+
+ |
+
- 40
-
-
-
-
+ 21
+
+ |
+
- 41
-
-
-
-
+ 22
+
+ |
+
- 42
-
-
-
-
+ 23
+
+ |
+
- 43
-
-
-
-
+ 24
+
+ |
+
- 44
-
-
-
-
+ 25
+
+ |
+
- 45
-
-
-
-
+ 26
+
+ |
+
+
+ |
- 46
-
-
-
-
+ 27
+
+ |
+
- 47
-
-
-
-
+ 28
+
+ |
+
- 48
-
-
-
-
+ 29
+
+ |
+
- 49
-
-
-
-
+ 30
+
+ |
+
- 50
-
-
-
-
+ 1
+
+ |
+
- 51
-
-
-
-
+ 2
+
+ |
+
- 52
-
-
-
-
+ 3
+
+ |
+
+
+ |
- 53
-
-
-
-
+ 4
+
+ |
+
- 54
-
-
-
-
+ 5
+
+ |
+
- 55
-
-
-
-
+ 6
+
+ |
+
- 56
-
-
-
-
+ 7
+
+ |
+
- 57
-
-
-
-
+ 8
+
+ |
+
- 58
-
-
-
-
+ 9
+
+ |
+
- 59
-
-
-
-
+
+ 10
+
+ |
+
+
+
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
index a8c220b6cb43..6e0dc91b0fc2 100644
--- a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -2349,6 +2349,216 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
`;
+exports[`renders ./components/date-picker/demo/placement.md correctly 1`] = `
+Array [
+
+
+
+
+
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+]
+`;
+
exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -3432,6 +3728,103 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `
`;
+exports[`renders ./components/date-picker/demo/status.md correctly 1`] = `
+
+`;
+
exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
{
it('DatePicker ref methods', () => {
@@ -13,6 +15,23 @@ describe('DatePicker.typescript', () => {
);
expect(datePicker).toBeTruthy();
});
+
+ // https://github.com/ant-design/ant-design/issues/33417
+ it('DatePicker ref methods with forwardRef', () => {
+ const MyDatePicker = React.forwardRef((props, ref: DatePickRef ) => (
+
+ ));
+ const datePicker = (
+ {
+ picker?.focus();
+ picker?.blur();
+ }}
+ />
+ );
+ expect(datePicker).toBeTruthy();
+ });
+
it('RangePicker ref methods', () => {
const rangePicker = (
{
);
expect(rangePicker).toBeTruthy();
});
+
+ it('RangePicker ref methods with forwardRef', () => {
+ const MyRangePicker = React.forwardRef((props, ref: RangePickerRef) => (
+
+ ));
+ const datePicker = (
+ {
+ picker?.focus();
+ picker?.blur();
+ }}
+ />
+ );
+ expect(datePicker).toBeTruthy();
+ });
});
diff --git a/components/date-picker/demo/placement.md b/components/date-picker/demo/placement.md
new file mode 100644
index 000000000000..b878b80cf830
--- /dev/null
+++ b/components/date-picker/demo/placement.md
@@ -0,0 +1,47 @@
+---
+order: 28
+title:
+ zh-CN: 基本
+ en-US: Basic
+---
+
+## zh-CN
+
+可以通过 `placement` 手动指定弹出的位置。
+
+## en-US
+
+You can manually specify the position of the popup via `placement`.
+
+```jsx
+import { DatePicker, Space, Radio } from 'infrad';
+
+const { RangePicker } = DatePicker;
+
+const SetPlacementDemo = () => {
+ const [placement, SetPlacement] = React.useState('topLeft');
+
+ const placementChange = e => {
+ SetPlacement(e.target.value);
+ };
+
+ return (
+ <>
+
+ topLeft
+ topRight
+ bottomLeft
+ bottomRight
+
+
+
+
+
+
+
+
+ );
+};
+
+ReactDOM.render(, mountNode);
+```
diff --git a/components/date-picker/demo/range-picker.md b/components/date-picker/demo/range-picker.md
index 67ea108c6c88..7e7f09f6141a 100644
--- a/components/date-picker/demo/range-picker.md
+++ b/components/date-picker/demo/range-picker.md
@@ -24,6 +24,7 @@ ReactDOM.render(
+
,
mountNode,
diff --git a/components/date-picker/demo/status.md b/components/date-picker/demo/status.md
new file mode 100644
index 000000000000..7a75ecd7bafa
--- /dev/null
+++ b/components/date-picker/demo/status.md
@@ -0,0 +1,28 @@
+---
+order: 19
+version: 4.19.0
+title:
+ zh-CN: 自定义状态
+ en-US: Status
+---
+
+## zh-CN
+
+使用 `status` 为 DatePicker 添加状态，可选 `error` 或者 `warning`。
+
+## en-US
+
+Add status to DatePicker with `status`, which could be `error` or `warning`.
+
+```tsx
+import { DatePicker, Space } from 'infrad';
+
+const Status: React.FC = () => (
+
+
+
+
+);
+
+ReactDOM.render(, mountNode);
+```
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index ad3cb8e25b0d..b22466ffa80a 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -12,7 +12,7 @@ import enUS from '../locale/en_US';
import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
import SizeContext from '../../config-provider/SizeContext';
import LocaleReceiver from '../../locale-provider/LocaleReceiver';
-import { getRangePlaceholder } from '../util';
+import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
import { PickerComponentClass } from './interface';
@@ -45,6 +45,7 @@ export default function generateRangePicker(
prefixCls: customizePrefixCls,
getPopupContainer: customGetPopupContainer,
className,
+ placement,
size: customizeSize,
bordered = true,
placeholder,
@@ -75,6 +76,7 @@ export default function generateRangePicker(
}
ref={this.pickerRef}
+ dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
placeholder={getRangePlaceholder(picker, locale, placeholder)}
suffixIcon={picker === 'time' ? : }
clearIcon={}
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index d86f254201c6..2a8e13e2a4d7 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -5,7 +5,7 @@ import RCPicker from 'rc-picker';
import { PickerMode } from 'rc-picker/lib/interface';
import { GenerateConfig } from 'rc-picker/lib/generate/index';
import enUS from '../locale/en_US';
-import { getPlaceholder } from '../util';
+import { getPlaceholder, transPlacement2DropdownAlign } from '../util';
import devWarning from '../../_util/devWarning';
import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
import LocaleReceiver from '../../locale-provider/LocaleReceiver';
@@ -19,9 +19,18 @@ import {
Components,
} from '.';
import { PickerComponentClass } from './interface';
+import { FormItemStatusContext } from '../../form/context';
+import {
+ getFeedbackIcon,
+ getMergedStatus,
+ getStatusClassNames,
+ InputStatus,
+} from '../../_util/statusUtils';
export default function generatePicker(generateConfig: GenerateConfig) {
- type DatePickerProps = PickerProps;
+ type DatePickerProps = PickerProps & {
+ status?: InputStatus;
+ };
function getPicker(
picker?: PickerMode,
@@ -57,6 +66,23 @@ export default function generatePicker(generateConfig: GenerateConfig<
}
};
+ renderFeedback = (prefixCls: string) => (
+
+ {({ hasFeedback, status: contextStatus }) => {
+ const { status: customStatus } = this.props;
+ const status = getMergedStatus(contextStatus, customStatus);
+ return hasFeedback && getFeedbackIcon(prefixCls, status);
+ }}
+
+ );
+
+ renderSuffix = (prefixCls: string, mergedPicker?: PickerMode) => (
+ <>
+ {mergedPicker === 'time' ? : }
+ {this.renderFeedback(prefixCls)}
+
+ );
+
renderPicker = (contextLocale: PickerLocale) => {
const locale = { ...contextLocale, ...this.props.locale };
const { getPrefixCls, direction, getPopupContainer } = this.context;
@@ -66,7 +92,9 @@ export default function generatePicker(generateConfig: GenerateConfig<
className,
size: customizeSize,
bordered = true,
+ placement,
placeholder,
+ status: customStatus,
...restProps
} = this.props;
const { format, showTime } = this.props as any;
@@ -97,36 +125,44 @@ export default function generatePicker(generateConfig: GenerateConfig<
const mergedSize = customizeSize || size;
return (
-
- ref={this.pickerRef}
- placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
- suffixIcon={
- mergedPicker === 'time' ? :
- }
- clearIcon={}
- prevIcon={}
- nextIcon={}
- superPrevIcon={}
- superNextIcon={}
- allowClear
- transitionName={`${rootPrefixCls}-slide-up`}
- {...additionalProps}
- {...restProps}
- {...additionalOverrideProps}
- locale={locale!.lang}
- className={classNames(
- {
- [`${prefixCls}-${mergedSize}`]: mergedSize,
- [`${prefixCls}-borderless`]: !bordered,
- },
- className,
+
+ {({ hasFeedback, status: contextStatus }) => (
+
+ ref={this.pickerRef}
+ placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
+ suffixIcon={this.renderSuffix(prefixCls, mergedPicker)}
+ dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+ clearIcon={}
+ prevIcon={}
+ nextIcon={}
+ superPrevIcon={}
+ superNextIcon={}
+ allowClear
+ transitionName={`${rootPrefixCls}-slide-up`}
+ {...additionalProps}
+ {...restProps}
+ {...additionalOverrideProps}
+ locale={locale!.lang}
+ className={classNames(
+ {
+ [`${prefixCls}-${mergedSize}`]: mergedSize,
+ [`${prefixCls}-borderless`]: !bordered,
+ },
+ getStatusClassNames(
+ prefixCls,
+ getMergedStatus(contextStatus, customStatus),
+ hasFeedback,
+ ),
+ className,
+ )}
+ prefixCls={prefixCls}
+ getPopupContainer={customizeGetPopupContainer || getPopupContainer}
+ generateConfig={generateConfig}
+ components={Components}
+ direction={direction}
+ />
)}
- prefixCls={prefixCls}
- getPopupContainer={customizeGetPopupContainer || getPopupContainer}
- generateConfig={generateConfig}
- components={Components}
- direction={direction}
- />
+
);
}}
diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx
index adf7476f5b10..f6341c972408 100644
--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@@ -19,6 +19,7 @@ import { TimePickerLocale } from '../../time-picker';
import generateSinglePicker from './generateSinglePicker';
import generateRangePicker from './generateRangePicker';
import { QuickPicker, IQuickDatePicker } from './QuickPicker';
+import { tuple } from '../../_util/type';
export const Components = { button: PickerButton, rangeItem: PickerTag };
@@ -29,13 +30,18 @@ function toArray(list: T | T[]): T[] {
return Array.isArray(list) ? list : [list];
}
-export function getTimeProps(
- props: { format?: string; picker?: PickerMode } & SharedTimeProps,
+export function getTimeProps(
+ props: { format?: string; picker?: PickerMode } & Omit<
+ SharedTimeProps,
+ 'disabledTime'
+ > & {
+ disabledTime?: DisabledTime;
+ },
) {
const { format, picker, showHour, showMinute, showSecond, use12Hours } = props;
const firstFormat = toArray(format)[0];
- const showTimeObj: SharedTimeProps = { ...props };
+ const showTimeObj = { ...props };
if (firstFormat && typeof firstFormat === 'string') {
if (!firstFormat.includes('s') && showSecond === undefined) {
@@ -66,6 +72,8 @@ export function getTimeProps(
showTime: showTimeObj,
};
}
+const DataPickerPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
+type DataPickerPlacement = typeof DataPickerPlacements[number];
type InjectDefaultProps = Omit<
Props,
@@ -73,6 +81,7 @@ type InjectDefaultProps = Omit<
> & {
locale?: PickerLocale;
size?: SizeType;
+ placement?: DataPickerPlacement;
bordered?: boolean;
};
@@ -95,6 +104,7 @@ export type AdditionalPickerLocaleLangProps = {
monthPlaceholder?: string;
weekPlaceholder?: string;
rangeYearPlaceholder?: [string, string];
+ rangeQuarterPlaceholder?: [string, string];
rangeMonthPlaceholder?: [string, string];
rangeWeekPlaceholder?: [string, string];
rangePlaceholder?: [string, string];
diff --git a/components/date-picker/generatePicker/interface.tsx b/components/date-picker/generatePicker/interface.tsx
index 2daf343d66a0..c0771f2e0cac 100644
--- a/components/date-picker/generatePicker/interface.tsx
+++ b/components/date-picker/generatePicker/interface.tsx
@@ -1,4 +1,5 @@
-import { ComponentClass } from 'react';
+import type { ComponentClass, ForwardedRef, Component } from 'react';
+import { PickerProps, RangePickerProps } from '.';
export interface CommonPickerMethods {
focus: () => void;
@@ -9,3 +10,9 @@ export interface PickerComponentClass extends ComponentClas
new (...args: ConstructorParameters>): InstanceType> &
CommonPickerMethods;
}
+
+export type PickerRef = ForwardedRef & CommonPickerMethods>;
+
+export type DatePickRef = PickerRef>;
+
+export type RangePickerRef = PickerRef>;
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index 0a93414b4797..648ef673f1c0 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -69,9 +69,11 @@ The following APIs are shared by DatePicker, RangePicker.
| panelRender | Customize panel render | (panelNode) => ReactNode | - | 4.5.0 |
| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
| placeholder | The placeholder of date input | string \| \[string,string] | - | |
+| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | |
| prevIcon | The custom prev icon | ReactNode | - | 4.17.0 |
| size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
+| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
| style | To customize the style of the input box | CSSProperties | {} | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| superNextIcon | The custom super next icon | ReactNode | - | 4.17.0 |
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index a65f3d4431e5..e2780b3e5ee3 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -71,9 +71,11 @@ import locale from 'infrad/lib/locale/zh_CN';
| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
| placeholder | 输入框提示文字 | string \| \[string, string] | - | |
+| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | |
+| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
| style | 自定义输入框样式 | CSSProperties | {} | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| superNextIcon | 自定义 `<<` 切换图标 | ReactNode | - | 4.17.0 |
diff --git a/components/date-picker/locale/en_GB.tsx b/components/date-picker/locale/en_GB.tsx
index 15cb6161b257..5e278f58c032 100644
--- a/components/date-picker/locale/en_GB.tsx
+++ b/components/date-picker/locale/en_GB.tsx
@@ -12,6 +12,7 @@ const locale: PickerLocale = {
weekPlaceholder: 'Select week',
rangePlaceholder: ['Start date', 'End date'],
rangeYearPlaceholder: ['Start year', 'End year'],
+ rangeQuarterPlaceholder: ['Start quarter', 'End quarter'],
rangeMonthPlaceholder: ['Start month', 'End month'],
rangeWeekPlaceholder: ['Start week', 'End week'],
...CalendarLocale,
diff --git a/components/date-picker/locale/en_US.tsx b/components/date-picker/locale/en_US.tsx
index 47b57b9eeb24..358216edd786 100644
--- a/components/date-picker/locale/en_US.tsx
+++ b/components/date-picker/locale/en_US.tsx
@@ -12,6 +12,7 @@ const locale: PickerLocale = {
weekPlaceholder: 'Select week',
rangePlaceholder: ['Start date', 'End date'],
rangeYearPlaceholder: ['Start year', 'End year'],
+ rangeQuarterPlaceholder: ['Start quarter', 'End quarter'],
rangeMonthPlaceholder: ['Start month', 'End month'],
rangeWeekPlaceholder: ['Start week', 'End week'],
...CalendarLocale,
diff --git a/components/date-picker/locale/zh_CN.tsx b/components/date-picker/locale/zh_CN.tsx
index bb3181123d8b..41df329de639 100644
--- a/components/date-picker/locale/zh_CN.tsx
+++ b/components/date-picker/locale/zh_CN.tsx
@@ -13,6 +13,7 @@ const locale: PickerLocale = {
rangePlaceholder: ['开始日期', '结束日期'],
rangeYearPlaceholder: ['开始年份', '结束年份'],
rangeMonthPlaceholder: ['开始月份', '结束月份'],
+ rangeQuarterPlaceholder: ['开始季度', '结束季度'],
rangeWeekPlaceholder: ['开始周', '结束周'],
...CalendarLocale,
},
diff --git a/components/date-picker/locale/zh_TW.tsx b/components/date-picker/locale/zh_TW.tsx
index 663e94380282..f0bcf20c1e34 100644
--- a/components/date-picker/locale/zh_TW.tsx
+++ b/components/date-picker/locale/zh_TW.tsx
@@ -13,6 +13,7 @@ const locale: PickerLocale = {
rangePlaceholder: ['開始日期', '結束日期'],
rangeYearPlaceholder: ['開始年份', '結束年份'],
rangeMonthPlaceholder: ['開始月份', '結束月份'],
+ rangeQuarterPlaceholder: ['開始季度', '結束季度'],
rangeWeekPlaceholder: ['開始周', '結束周'],
...CalendarLocale,
},
diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less
index fe07cffcaf71..c0f0a2d88bb3 100644
--- a/components/date-picker/style/index.less
+++ b/components/date-picker/style/index.less
@@ -1,6 +1,7 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
+@import './status';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
@@ -13,7 +14,7 @@
}
.@{picker-prefix-cls} {
- @arrow-size: 10px;
+ @arrow-size: @popover-arrow-width;
.reset-component();
.picker-padding(@input-height-base, @font-size-base, @input-padding-horizontal-base);
@@ -106,6 +107,8 @@
}
&-suffix {
+ display: flex;
+ flex: none;
align-self: center;
margin-left: (@padding-xs / 2);
color: @disabled-color;
@@ -114,6 +117,10 @@
> * {
vertical-align: top;
+
+ &:not(:last-child) {
+ margin-right: 8px;
+ }
}
}
@@ -221,17 +228,17 @@
&-placement-bottomLeft {
.@{picker-prefix-cls}-range-arrow {
- top: (@arrow-size / 2) - (@arrow-size / 3);
+ top: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
display: block;
- transform: rotate(-45deg);
+ transform: rotate(-135deg) translateY(1px);
}
}
&-placement-topLeft {
.@{picker-prefix-cls}-range-arrow {
- bottom: (@arrow-size / 2) - (@arrow-size / 3);
+ bottom: (@arrow-size / 2) - (@arrow-size / 3) + 0.7px;
display: block;
- transform: rotate(135deg);
+ transform: rotate(45deg);
}
}
@@ -311,19 +318,14 @@
width: @arrow-size;
height: @arrow-size;
margin-left: @input-padding-horizontal-base * 1.5;
- box-shadow: 2px -2px 6px fade(@black, 6%);
+ background: linear-gradient(
+ 135deg,
+ transparent 40%,
+ @calendar-bg 40%
+ ); // Use linear-gradient to prevent arrow from covering text
+ box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover
transition: left @animation-duration-slow ease-out;
-
- &::after {
- position: absolute;
- top: @border-width-base;
- right: @border-width-base;
- width: @arrow-size;
- height: @arrow-size;
- border: (@arrow-size / 2) solid @border-color-split;
- border-color: @calendar-bg @calendar-bg transparent transparent;
- content: '';
- }
+ .roundedArrow(@arrow-size, 5px, @calendar-bg);
}
&-panel-container {
diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx
index cc4424295a44..18447e360f85 100644
--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@@ -3,3 +3,5 @@ import './index.less';
// style dependencies
import '../../tag/style';
import '../../button/style';
+
+// deps-lint-skip: form
diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less
index 5c6ee0a4f0e8..fec6899f38c7 100644
--- a/components/date-picker/style/panel.less
+++ b/components/date-picker/style/panel.less
@@ -101,7 +101,7 @@
display: inline-block;
width: @picker-arrow-size;
height: @picker-arrow-size;
- border: 0 solid currentColor;
+ border: 0 solid currentcolor;
border-width: 1.5px 0 0 1.5px;
content: '';
}
@@ -116,7 +116,7 @@
display: inline-block;
width: @picker-arrow-size;
height: @picker-arrow-size;
- border: 0 solid currentColor;
+ border: 0 solid currentcolor;
border-width: 1.5px 0 0 1.5px;
content: '';
}
diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less
new file mode 100644
index 000000000000..be3adba330e3
--- /dev/null
+++ b/components/date-picker/style/status.less
@@ -0,0 +1,52 @@
+@import '../../input/style/mixin';
+
+@picker-prefix-cls: ~'@{ant-prefix}-picker';
+
+.picker-status-color(
+ @text-color: @input-color;
+ @border-color: @input-border-color;
+ @background-color: @input-bg;
+ @hoverBorderColor: @primary-color-hover;
+ @outlineColor: @primary-color-outline;
+) {
+ &.@{picker-prefix-cls} {
+ &,
+ &:not([disabled]):hover {
+ background-color: @background-color;
+ border-color: @border-color;
+ }
+
+ &-focused,
+ &:focus {
+ .active(@text-color, @hoverBorderColor, @outlineColor);
+ }
+ }
+
+ .@{picker-prefix-cls}-feedback-icon {
+ color: @text-color;
+ }
+}
+
+.@{picker-prefix-cls} {
+ &-status-error {
+ .picker-status-color(@error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline);
+ }
+
+ &-status-warning {
+ .picker-status-color(@warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
+ }
+
+ &-status-validating {
+ .@{picker-prefix-cls}-feedback-icon {
+ display: inline-block;
+ color: @primary-color;
+ }
+ }
+
+ &-status-success {
+ .@{picker-prefix-cls}-feedback-icon {
+ color: @success-color;
+ animation-name: diffZoomIn1 !important;
+ }
+ }
+}
diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts
index 0643a0842a16..c2dbc6c50132 100644
--- a/components/date-picker/util.ts
+++ b/components/date-picker/util.ts
@@ -1,4 +1,6 @@
import { PickerMode } from 'rc-picker/lib/interface';
+import { DirectionType } from '../config-provider';
+import { SelectCommonPlacement } from '../_util/motion';
import { PickerLocale } from './generatePicker';
export function getPlaceholder(
@@ -40,6 +42,9 @@ export function getRangePlaceholder(
if (picker === 'year' && locale.lang.yearPlaceholder) {
return locale.lang.rangeYearPlaceholder;
}
+ if (picker === 'quarter' && locale.lang.quarterPlaceholder) {
+ return locale.lang.rangeQuarterPlaceholder;
+ }
if (picker === 'month' && locale.lang.monthPlaceholder) {
return locale.lang.rangeMonthPlaceholder;
}
@@ -51,3 +56,56 @@ export function getRangePlaceholder(
}
return locale.lang.rangePlaceholder;
}
+
+export function transPlacement2DropdownAlign(
+ direction: DirectionType,
+ placement?: SelectCommonPlacement,
+) {
+ const overflow = {
+ adjustX: 1,
+ adjustY: 1,
+ };
+ switch (placement) {
+ case 'bottomLeft': {
+ return {
+ points: ['tl', 'bl'],
+ offset: [0, 4],
+ overflow,
+ };
+ }
+ case 'bottomRight': {
+ return {
+ points: ['tr', 'br'],
+ offset: [0, 4],
+ overflow,
+ };
+ }
+ case 'topLeft': {
+ return {
+ points: ['bl', 'tl'],
+ offset: [0, -4],
+ overflow,
+ };
+ }
+ case 'topRight': {
+ return {
+ points: ['br', 'tr'],
+ offset: [0, -4],
+ overflow,
+ };
+ }
+ default: {
+ return direction === 'rtl'
+ ? {
+ points: ['tr', 'br'],
+ offset: [0, 4],
+ overflow,
+ }
+ : {
+ points: ['tl', 'bl'],
+ offset: [0, 4],
+ overflow,
+ };
+ }
+ }
+}
diff --git a/components/divider/index.tsx b/components/divider/index.tsx
index e45e8a9e60ea..aa52bdd74d74 100644
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
export interface DividerProps {
prefixCls?: string;
@@ -14,56 +14,54 @@ export interface DividerProps {
plain?: boolean;
}
-const Divider: React.FC = props => (
-
- {({ getPrefixCls, direction }: ConfigConsumerProps) => {
- const {
- prefixCls: customizePrefixCls,
- type = 'horizontal',
- orientation = 'center',
- orientationMargin,
- className,
- children,
- dashed,
- plain,
- ...restProps
- } = props;
- const prefixCls = getPrefixCls('divider', customizePrefixCls);
- const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
- const hasChildren = !!children;
- const hasCustomMarginLeft = orientation === 'left' && orientationMargin != null;
- const hasCustomMarginRight = orientation === 'right' && orientationMargin != null;
- const classString = classNames(
- prefixCls,
- `${prefixCls}-${type}`,
- {
- [`${prefixCls}-with-text`]: hasChildren,
- [`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
- [`${prefixCls}-dashed`]: !!dashed,
- [`${prefixCls}-plain`]: !!plain,
- [`${prefixCls}-rtl`]: direction === 'rtl',
- [`${prefixCls}-no-default-orientation-margin-left`]: hasCustomMarginLeft,
- [`${prefixCls}-no-default-orientation-margin-right`]: hasCustomMarginRight,
- },
- className,
- );
+const Divider: React.FC = props => {
+ const { getPrefixCls, direction } = React.useContext(ConfigContext);
- const innerStyle = {
- ...(hasCustomMarginLeft && { marginLeft: orientationMargin }),
- ...(hasCustomMarginRight && { marginRight: orientationMargin }),
- };
+ const {
+ prefixCls: customizePrefixCls,
+ type = 'horizontal',
+ orientation = 'center',
+ orientationMargin,
+ className,
+ children,
+ dashed,
+ plain,
+ ...restProps
+ } = props;
+ const prefixCls = getPrefixCls('divider', customizePrefixCls);
+ const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
+ const hasChildren = !!children;
+ const hasCustomMarginLeft = orientation === 'left' && orientationMargin != null;
+ const hasCustomMarginRight = orientation === 'right' && orientationMargin != null;
+ const classString = classNames(
+ prefixCls,
+ `${prefixCls}-${type}`,
+ {
+ [`${prefixCls}-with-text`]: hasChildren,
+ [`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
+ [`${prefixCls}-dashed`]: !!dashed,
+ [`${prefixCls}-plain`]: !!plain,
+ [`${prefixCls}-rtl`]: direction === 'rtl',
+ [`${prefixCls}-no-default-orientation-margin-left`]: hasCustomMarginLeft,
+ [`${prefixCls}-no-default-orientation-margin-right`]: hasCustomMarginRight,
+ },
+ className,
+ );
- return (
-
- {children && (
-
- {children}
-
- )}
-
- );
- }}
-
-);
+ const innerStyle = {
+ ...(hasCustomMarginLeft && { marginLeft: orientationMargin }),
+ ...(hasCustomMarginRight && { marginRight: orientationMargin }),
+ };
+
+ return (
+
+ {children && (
+
+ {children}
+
+ )}
+
+ );
+};
export default Divider;
diff --git a/components/divider/style/index.less b/components/divider/style/index.less
index ba271e05397e..ff7e932ef09d 100644
--- a/components/divider/style/index.less
+++ b/components/divider/style/index.less
@@ -13,7 +13,7 @@
top: -0.06em;
display: inline-block;
height: 0.9em;
- margin: 0 8px;
+ margin: 0 @divider-vertical-gutter;
vertical-align: middle;
border-top: 0;
border-left: @border-width-base solid @divider-color;
diff --git a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
index 944ad8b1aa4b..5b0680e6b11c 100644
--- a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
@@ -3,7 +3,7 @@
exports[`Drawer render correctly 1`] = `
,
,
@@ -429,7 +429,7 @@ Array [
,
,
|