test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-05 05:28:20 +08:00
Code Issues Actions 115 Packages Projects Releases Wiki Activity

Merge pull request #22880 from ant-design/master

Browse Source 
chore: Feature merge master
This commit is contained in:
二货机器人 2020-04-03 13:58:35 +08:00 committed by GitHub
commit 678168a74e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 7428 additions and 6999 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
components/calendar/__tests__/__snapshots__/index.test.js.snap
View File

@ -207,23 +207,6 @@ exports[`Calendar Calendar should support locale 1`] = `
</thead>
<tbody>
<tr>
<td
class="ant-picker-cell"
title="2018-09-30"
>
<div
class="ant-picker-cell-inner ant-picker-calendar-date"
>
<div
class="ant-picker-calendar-date-value"
>
30
</div>
<div
class="ant-picker-calendar-date-content"
/>
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2018-10-01"
@ -326,8 +309,6 @@ exports[`Calendar Calendar should support locale 1`] = `
/>
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2018-10-07"
@ -345,6 +326,8 @@ exports[`Calendar Calendar should support locale 1`] = `
/>
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2018-10-08"
@ -447,8 +430,6 @@ exports[`Calendar Calendar should support locale 1`] = `
/>
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2018-10-14"
@ -466,6 +447,8 @@ exports[`Calendar Calendar should support locale 1`] = `
/>
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2018-10-15"
@ -568,8 +551,6 @@ exports[`Calendar Calendar should support locale 1`] = `
/>
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2018-10-21"
@ -587,6 +568,8 @@ exports[`Calendar Calendar should support locale 1`] = `
/>
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2018-10-22"
@ -689,8 +672,6 @@ exports[`Calendar Calendar should support locale 1`] = `
/>
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2018-10-28"
@ -708,6 +689,8 @@ exports[`Calendar Calendar should support locale 1`] = `
/>
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2018-10-29"
@ -810,8 +793,6 @@ exports[`Calendar Calendar should support locale 1`] = `
/>
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell"
title="2018-11-04"
@ -829,6 +810,8 @@ exports[`Calendar Calendar should support locale 1`] = `
/>
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell"
title="2018-11-05"
@ -931,6 +914,23 @@ exports[`Calendar Calendar should support locale 1`] = `
/>
</div>
</td>
<td
class="ant-picker-cell"
title="2018-11-11"
>
<div
class="ant-picker-cell-inner ant-picker-calendar-date"
>
<div
class="ant-picker-calendar-date-value"
>
11
</div>
<div
class="ant-picker-calendar-date-content"
/>
</div>
</td>
</tr>
</tbody>
</table>

285
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -6088,10 +6088,9 @@ exports[`ConfigProvider components DatePicker RangePicker configProvider 1`] = `
class="config-picker-range-separator"
>
<span
aria-label="to"
class="config-picker-separator"
>
→
</span>
/>
</div>
<div
class="config-picker-input"
@ -6154,10 +6153,9 @@ exports[`ConfigProvider components DatePicker RangePicker normal 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -6220,10 +6218,9 @@ exports[`ConfigProvider components DatePicker RangePicker prefixCls 1`] = `
class="prefix-RangePicker-range-separator"
>
<span
aria-label="to"
class="prefix-RangePicker-separator"
>
→
</span>
/>
</div>
<div
class="prefix-RangePicker-input"
@ -11632,59 +11629,63 @@ exports[`ConfigProvider components Table configProvider 1`] = `
class="config-table-filter-column-title"
>
<div
class="config-table-column-sorters"
class="config-table-column-sorters-with-tooltip"
>
<span>
Name
</span>
<span
class="config-table-column-sorter config-table-column-sorter-full"
<div
class="config-table-column-sorters"
>
<span>
Name
</span>
<span
class="config-table-column-sorter-inner"
class="config-table-column-sorter config-table-column-sorter-full"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
class="config-table-column-sorter-inner"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="caret-up"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down config-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down config-table-column-sorter-down"
role="img"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</span>
</div>
</div>
</span>
<span
@ -11902,59 +11903,63 @@ exports[`ConfigProvider components Table normal 1`] = `
class="ant-table-filter-column-title"
>
<div
class="ant-table-column-sorters"
class="ant-table-column-sorters-with-tooltip"
>
<span>
Name
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
<div
class="ant-table-column-sorters"
>
<span>
Name
</span>
<span
class="ant-table-column-sorter-inner"
class="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
class="ant-table-column-sorter-inner"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</span>
</div>
</div>
</span>
<span
@ -12172,59 +12177,63 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
class="prefix-Table-filter-column-title"
>
<div
class="prefix-Table-column-sorters"
class="prefix-Table-column-sorters-with-tooltip"
>
<span>
Name
</span>
<span
class="prefix-Table-column-sorter prefix-Table-column-sorter-full"
<div
class="prefix-Table-column-sorters"
>
<span>
Name
</span>
<span
class="prefix-Table-column-sorter-inner"
class="prefix-Table-column-sorter prefix-Table-column-sorter-full"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up prefix-Table-column-sorter-up"
role="img"
class="prefix-Table-column-sorter-inner"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="caret-up"
class="anticon anticon-caret-up prefix-Table-column-sorter-up"
role="img"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down prefix-Table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down prefix-Table-column-sorter-down"
role="img"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</span>
</div>
</div>
</span>
<span

40
components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
View File

@ -769,16 +769,6 @@ Array [
</thead>
<tbody>
<tr>
<td
class="ant-picker-cell"
title="1999-12-26"
>
<div
class="ant-picker-cell-inner"
>
26
</div>
</td>
<td
class="ant-picker-cell"
title="1999-12-27"
@ -839,8 +829,6 @@ Array [
1
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-02"
@ -851,6 +839,8 @@ Array [
2
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-03"
@ -911,8 +901,6 @@ Array [
8
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-09"
@ -923,6 +911,8 @@ Array [
9
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-10"
@ -983,8 +973,6 @@ Array [
15
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-16"
@ -995,6 +983,8 @@ Array [
16
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-17"
@ -1055,8 +1045,6 @@ Array [
22
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-23"
@ -1067,6 +1055,8 @@ Array [
23
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-24"
@ -1127,8 +1117,6 @@ Array [
29
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-30"
@ -1139,6 +1127,8 @@ Array [
30
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-31"
@ -1199,6 +1189,16 @@ Array [
5
</div>
</td>
<td
class="ant-picker-cell"
title="2000-02-06"
>
<div
class="ant-picker-cell-inner"
>
6
</div>
</td>
</tr>
</tbody>
</table>

125
components/date-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -383,10 +383,9 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -445,10 +444,9 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -507,10 +505,9 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -569,10 +566,9 @@ exports[`renders ./components/date-picker/demo/bordered.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -674,10 +670,9 @@ exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -823,10 +818,9 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -886,10 +880,9 @@ exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -1057,10 +1050,9 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -1118,10 +1110,9 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -1264,10 +1255,9 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -1326,10 +1316,9 @@ exports[`renders ./components/date-picker/demo/extra-footer.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -1624,10 +1613,9 @@ exports[`renders ./components/date-picker/demo/format.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -1754,10 +1742,9 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -1820,10 +1807,9 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -1882,10 +1868,9 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -1948,10 +1933,9 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -2010,10 +1994,9 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -2072,10 +2055,9 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -2134,10 +2116,9 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -2196,10 +2177,9 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -2261,10 +2241,9 @@ exports[`renders ./components/date-picker/demo/select-in-range.md correctly 1`]
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -2470,10 +2449,9 @@ exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -2739,10 +2717,9 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -2883,10 +2860,9 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -2991,10 +2967,9 @@ exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"

5
components/date-picker/__tests__/__snapshots__/mount.test.js.snap
View File

@ -144,10 +144,9 @@ exports[`mount rtl render component should be rendered correctly in RTL directio
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"

110
components/date-picker/__tests__/__snapshots__/other.test.js.snap
View File

@ -304,6 +304,16 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
>
1
</td>
<td
class="ant-picker-cell"
title="1999-12-26"
>
<div
class="ant-picker-cell-inner"
>
26
</div>
</td>
<td
class="ant-picker-cell"
title="1999-12-27"
@ -364,6 +374,15 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
1
</div>
</td>
</tr>
<tr
class="ant-picker-week-panel-row"
>
<td
class="ant-picker-cell ant-picker-cell-week"
>
2
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-02"
@ -374,15 +393,6 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
2
</div>
</td>
</tr>
<tr
class="ant-picker-week-panel-row"
>
<td
class="ant-picker-cell ant-picker-cell-week"
>
2
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-03"
@ -443,6 +453,15 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
8
</div>
</td>
</tr>
<tr
class="ant-picker-week-panel-row"
>
<td
class="ant-picker-cell ant-picker-cell-week"
>
3
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-09"
@ -453,15 +472,6 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
9
</div>
</td>
</tr>
<tr
class="ant-picker-week-panel-row"
>
<td
class="ant-picker-cell ant-picker-cell-week"
>
3
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-10"
@ -522,6 +532,15 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
15
</div>
</td>
</tr>
<tr
class="ant-picker-week-panel-row"
>
<td
class="ant-picker-cell ant-picker-cell-week"
>
4
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-16"
@ -532,15 +551,6 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
16
</div>
</td>
</tr>
<tr
class="ant-picker-week-panel-row"
>
<td
class="ant-picker-cell ant-picker-cell-week"
>
4
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-17"
@ -601,6 +611,15 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
22
</div>
</td>
</tr>
<tr
class="ant-picker-week-panel-row"
>
<td
class="ant-picker-cell ant-picker-cell-week"
>
5
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-23"
@ -611,15 +630,6 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
23
</div>
</td>
</tr>
<tr
class="ant-picker-week-panel-row"
>
<td
class="ant-picker-cell ant-picker-cell-week"
>
5
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-24"
@ -680,6 +690,15 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
29
</div>
</td>
</tr>
<tr
class="ant-picker-week-panel-row"
>
<td
class="ant-picker-cell ant-picker-cell-week"
>
6
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-30"
@ -690,15 +709,6 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
30
</div>
</td>
</tr>
<tr
class="ant-picker-week-panel-row"
>
<td
class="ant-picker-cell ant-picker-cell-week"
>
6
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2000-01-31"
@ -759,16 +769,6 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
5
</div>
</td>
<td
class="ant-picker-cell"
title="2000-02-06"
>
<div
class="ant-picker-cell-inner"
>
6
</div>
</td>
</tr>
</tbody>
</table>

380
components/date-picker/generatePicker.tsx
View File

@ -1,380 +0,0 @@
import * as React from 'react';
import classNames from 'classnames';
import RCPicker, { RangePicker as RCRangePicker } from 'rc-picker';
import { GenerateConfig } from 'rc-picker/lib/generate/index';
import {
PickerBaseProps as RCPickerBaseProps,
PickerDateProps as RCPickerDateProps,
PickerTimeProps as RCPickerTimeProps,
} from 'rc-picker/lib/Picker';
import { SharedTimeProps } from 'rc-picker/lib/panels/TimePanel';
import {
RangePickerBaseProps as RCRangePickerBaseProps,
RangePickerDateProps as RCRangePickerDateProps,
RangePickerTimeProps as RCRangePickerTimeProps,
} from 'rc-picker/lib/RangePicker';
import { PickerMode, Locale as RcPickerLocale } from 'rc-picker/lib/interface';
import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import { ConfigContext, ConfigConsumerProps } from '../config-provider';
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import enUS from './locale/en_US';
import { getPlaceholder, getRangePlaceholder } from './util';
import PickerButton from './PickerButton';
import PickerTag from './PickerTag';
import SizeContext, { SizeType } from '../config-provider/SizeContext';
import { TimePickerLocale } from '../time-picker';
const Components = { button: PickerButton, rangeItem: PickerTag };
function toArray<T>(list: T | T[]): T[] {
if (!list) {
return [];
}
return Array.isArray(list) ? list : [list];
}
function getTimeProps<DateType>(
props: { format?: string; picker?: PickerMode } & SharedTimeProps<DateType>,
) {
const { format, picker, showHour, showMinute, showSecond, use12Hours } = props;
const firstFormat = toArray(format)[0];
const showTimeObj: SharedTimeProps<DateType> = { ...props };
if (firstFormat) {
if (!firstFormat.includes('s') && showSecond === undefined) {
showTimeObj.showSecond = false;
}
if (!firstFormat.includes('m') && showMinute === undefined) {
showTimeObj.showMinute = false;
}
if (!firstFormat.includes('H') && !firstFormat.includes('h') && showHour === undefined) {
showTimeObj.showHour = false;
}
if ((firstFormat.includes('a') || firstFormat.includes('A')) && use12Hours === undefined) {
showTimeObj.use12Hours = true;
}
}
if (picker === 'time') {
return showTimeObj;
}
return {
showTime: showTimeObj,
};
}
type InjectDefaultProps<Props> = Omit<
Props,
| 'locale'
| 'generateConfig'
| 'prevIcon'
| 'nextIcon'
| 'superPrevIcon'
| 'superNextIcon'
| 'hideHeader'
| 'components'
> & {
locale?: PickerLocale;
size?: SizeType;
bordered?: boolean;
};
export type PickerLocale = {
lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
timePickerLocale: TimePickerLocale;
} & AdditionalPickerLocaleProps;
export type AdditionalPickerLocaleProps = {
dateFormat?: string;
dateTimeFormat?: string;
weekFormat?: string;
monthFormat?: string;
};
export type AdditionalPickerLocaleLangProps = {
placeholder: string;
yearPlaceholder?: string;
quarterPlaceholder?: string;
monthPlaceholder?: string;
weekPlaceholder?: string;
rangeYearPlaceholder?: [string, string];
rangeMonthPlaceholder?: [string, string];
rangeWeekPlaceholder?: [string, string];
rangePlaceholder?: [string, string];
};
// Picker Props
export type PickerBaseProps<DateType> = InjectDefaultProps<RCPickerBaseProps<DateType>>;
export type PickerDateProps<DateType> = InjectDefaultProps<RCPickerDateProps<DateType>>;
export type PickerTimeProps<DateType> = InjectDefaultProps<RCPickerTimeProps<DateType>>;
export type PickerProps<DateType> =
| PickerBaseProps<DateType>
| PickerDateProps<DateType>
| PickerTimeProps<DateType>;
// Range Picker Props
export type RangePickerBaseProps<DateType> = InjectDefaultProps<RCRangePickerBaseProps<DateType>>;
export type RangePickerDateProps<DateType> = InjectDefaultProps<RCRangePickerDateProps<DateType>>;
export type RangePickerTimeProps<DateType> = InjectDefaultProps<RCRangePickerTimeProps<DateType>>;
export type RangePickerProps<DateType> =
| RangePickerBaseProps<DateType>
| RangePickerDateProps<DateType>
| RangePickerTimeProps<DateType>;
function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
// =========================== Picker ===========================
type DatePickerProps = PickerProps<DateType>;
function getPicker<InnerPickerProps extends DatePickerProps>(
picker?: PickerMode,
displayName?: string,
) {
class Picker extends React.Component<InnerPickerProps> {
static contextType = ConfigContext;
static displayName: string;
context: ConfigConsumerProps;
pickerRef = React.createRef<RCPicker<DateType>>();
focus = () => {
if (this.pickerRef.current) {
this.pickerRef.current.focus();
}
};
blur = () => {
if (this.pickerRef.current) {
this.pickerRef.current.blur();
}
};
getDefaultLocale = () => {
const { locale } = this.props;
const result = {
...enUS,
...locale,
};
result.lang = {
...result.lang,
...((locale || {}) as PickerLocale).lang,
};
return result;
};
renderPicker = (locale: PickerLocale) => {
const { getPrefixCls, direction } = this.context;
const {
prefixCls: customizePrefixCls,
className,
size: customizeSize,
bordered = true,
...restProps
} = this.props;
const { format, showTime } = this.props as any;
const prefixCls = getPrefixCls('picker', customizePrefixCls);
const additionalProps = {
showToday: true,
};
let additionalOverrideProps: any = {};
if (picker) {
additionalOverrideProps.picker = picker;
}
const mergedPicker = picker || this.props.picker;
additionalOverrideProps = {
...additionalOverrideProps,
...(showTime ? getTimeProps({ format, picker: mergedPicker, ...showTime }) : {}),
...(mergedPicker === 'time'
? getTimeProps({ format, ...this.props, picker: mergedPicker })
: {}),
};
return (
<SizeContext.Consumer>
{size => {
const mergedSize = customizeSize || size;
return (
<RCPicker<DateType>
ref={this.pickerRef}
placeholder={getPlaceholder(mergedPicker, locale)}
suffixIcon={
mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />
}
clearIcon={<CloseCircleFilled />}
allowClear
transitionName="slide-up"
{...additionalProps}
{...restProps}
{...additionalOverrideProps}
locale={locale!.lang}
className={classNames(className, {
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
})}
prefixCls={prefixCls}
generateConfig={generateConfig}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
components={Components}
direction={direction}
/>
);
}}
</SizeContext.Consumer>
);
};
render() {
return (
<LocaleReceiver componentName="DatePicker" defaultLocale={this.getDefaultLocale}>
{this.renderPicker}
</LocaleReceiver>
);
}
}
if (displayName) {
Picker.displayName = displayName;
}
return Picker as React.ComponentClass<InnerPickerProps>;
}
const DatePicker = getPicker<DatePickerProps>();
const WeekPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('week', 'WeekPicker');
const MonthPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('month', 'MonthPicker');
const YearPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('year', 'YearPicker');
const TimePicker = getPicker<Omit<PickerTimeProps<DateType>, 'picker'>>('time', 'TimePicker');
// ======================== Range Picker ========================
class RangePicker extends React.Component<RangePickerProps<DateType>> {
static contextType = ConfigContext;
context: ConfigConsumerProps;
pickerRef = React.createRef<RCRangePicker<DateType>>();
focus = () => {
if (this.pickerRef.current) {
this.pickerRef.current.focus();
}
};
blur = () => {
if (this.pickerRef.current) {
this.pickerRef.current.blur();
}
};
getDefaultLocale = () => {
const { locale } = this.props;
const result = {
...enUS,
...locale,
};
result.lang = {
...result.lang,
...((locale || {}) as PickerLocale).lang,
};
return result;
};
renderPicker = (locale: PickerLocale) => {
const { getPrefixCls, direction } = this.context;
const {
prefixCls: customizePrefixCls,
className,
size: customizeSize,
bordered = true,
...restProps
} = this.props;
const { format, showTime, picker } = this.props as any;
const prefixCls = getPrefixCls('picker', customizePrefixCls);
let additionalOverrideProps: any = {};
additionalOverrideProps = {
...additionalOverrideProps,
...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
...(picker === 'time' ? getTimeProps({ format, ...this.props, picker }) : {}),
};
return (
<SizeContext.Consumer>
{size => {
const mergedSize = customizeSize || size;
return (
<RCRangePicker<DateType>
separator={<span className={`${prefixCls}-separator`}>→</span>}
ref={this.pickerRef}
placeholder={getRangePlaceholder(picker, locale)}
suffixIcon={picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
clearIcon={<CloseCircleFilled />}
allowClear
transitionName="slide-up"
{...restProps}
className={classNames(className, {
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
})}
{...additionalOverrideProps}
locale={locale!.lang}
prefixCls={prefixCls}
generateConfig={generateConfig}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
components={Components}
direction={direction}
/>
);
}}
</SizeContext.Consumer>
);
};
render() {
return (
<LocaleReceiver componentName="DatePicker" defaultLocale={this.getDefaultLocale}>
{this.renderPicker}
</LocaleReceiver>
);
}
}
// =========================== Export ===========================
type MergedDatePicker = typeof DatePicker & {
WeekPicker: typeof WeekPicker;
MonthPicker: typeof MonthPicker;
YearPicker: typeof YearPicker;
RangePicker: React.ComponentClass<RangePickerProps<DateType>>;
TimePicker: typeof TimePicker;
};
const MergedDatePicker = DatePicker as MergedDatePicker;
MergedDatePicker.WeekPicker = WeekPicker;
MergedDatePicker.MonthPicker = MonthPicker;
MergedDatePicker.YearPicker = YearPicker;
MergedDatePicker.RangePicker = RangePicker;
MergedDatePicker.TimePicker = TimePicker;
return MergedDatePicker;
}
export default generatePicker;

116
components/date-picker/generatePicker/generateRangePicker.tsx Normal file
View File

@ -0,0 +1,116 @@
import * as React from 'react';
import classNames from 'classnames';
import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import { RangePicker as RCRangePicker } from 'rc-picker';
import { GenerateConfig } from 'rc-picker/lib/generate/index';
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 { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
export default function generateRangePicker<DateType>(
generateConfig: GenerateConfig<DateType>,
): React.ComponentClass<RangePickerProps<DateType>> {
class RangePicker extends React.Component<RangePickerProps<DateType>> {
static contextType = ConfigContext;
context: ConfigConsumerProps;
pickerRef = React.createRef<RCRangePicker<DateType>>();
focus = () => {
if (this.pickerRef.current) {
this.pickerRef.current.focus();
}
};
blur = () => {
if (this.pickerRef.current) {
this.pickerRef.current.blur();
}
};
getDefaultLocale = () => {
const { locale } = this.props;
const result = {
...enUS,
...locale,
};
result.lang = {
...result.lang,
...((locale || {}) as PickerLocale).lang,
};
return result;
};
renderPicker = (locale: PickerLocale) => {
const { getPrefixCls, direction } = this.context;
const {
prefixCls: customizePrefixCls,
className,
size: customizeSize,
bordered = true,
...restProps
} = this.props;
const { format, showTime, picker } = this.props as any;
const prefixCls = getPrefixCls('picker', customizePrefixCls);
let additionalOverrideProps: any = {};
additionalOverrideProps = {
...additionalOverrideProps,
...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),
...(picker === 'time' ? getTimeProps({ format, ...this.props, picker }) : {}),
};
return (
<SizeContext.Consumer>
{size => {
const mergedSize = customizeSize || size;
return (
<RCRangePicker<DateType>
separator={<span aria-label="to" className={`${prefixCls}-separator`} />}
ref={this.pickerRef}
placeholder={getRangePlaceholder(picker, locale)}
suffixIcon={picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
clearIcon={<CloseCircleFilled />}
allowClear
transitionName="slide-up"
{...restProps}
className={classNames(className, {
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
})}
{...additionalOverrideProps}
locale={locale!.lang}
prefixCls={prefixCls}
generateConfig={generateConfig}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
components={Components}
direction={direction}
/>
);
}}
</SizeContext.Consumer>
);
};
render() {
return (
<LocaleReceiver componentName="DatePicker" defaultLocale={this.getDefaultLocale}>
{this.renderPicker}
</LocaleReceiver>
);
}
}
return RangePicker;
}

155
components/date-picker/generatePicker/generateSinglePicker.tsx Normal file
View File

@ -0,0 +1,155 @@
import * as React from 'react';
import classNames from 'classnames';
import CalendarOutlined from '@ant-design/icons/CalendarOutlined';
import ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
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 { ConfigContext, ConfigConsumerProps } from '../../config-provider';
import LocaleReceiver from '../../locale-provider/LocaleReceiver';
import SizeContext from '../../config-provider/SizeContext';
import {
PickerProps,
PickerLocale,
PickerDateProps,
PickerTimeProps,
getTimeProps,
Components,
} from '.';
export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
type DatePickerProps = PickerProps<DateType>;
function getPicker<InnerPickerProps extends DatePickerProps>(
picker?: PickerMode,
displayName?: string,
) {
class Picker extends React.Component<InnerPickerProps> {
static contextType = ConfigContext;
static displayName: string;
context: ConfigConsumerProps;
pickerRef = React.createRef<RCPicker<DateType>>();
focus = () => {
if (this.pickerRef.current) {
this.pickerRef.current.focus();
}
};
blur = () => {
if (this.pickerRef.current) {
this.pickerRef.current.blur();
}
};
getDefaultLocale = () => {
const { locale } = this.props;
const result = {
...enUS,
...locale,
};
result.lang = {
...result.lang,
...((locale || {}) as PickerLocale).lang,
};
return result;
};
renderPicker = (locale: PickerLocale) => {
const { getPrefixCls, direction } = this.context;
const {
prefixCls: customizePrefixCls,
className,
size: customizeSize,
bordered = true,
...restProps
} = this.props;
const { format, showTime } = this.props as any;
const prefixCls = getPrefixCls('picker', customizePrefixCls);
const additionalProps = {
showToday: true,
};
let additionalOverrideProps: any = {};
if (picker) {
additionalOverrideProps.picker = picker;
}
const mergedPicker = picker || this.props.picker;
additionalOverrideProps = {
...additionalOverrideProps,
...(showTime ? getTimeProps({ format, picker: mergedPicker, ...showTime }) : {}),
...(mergedPicker === 'time'
? getTimeProps({ format, ...this.props, picker: mergedPicker })
: {}),
};
return (
<SizeContext.Consumer>
{size => {
const mergedSize = customizeSize || size;
return (
<RCPicker<DateType>
ref={this.pickerRef}
placeholder={getPlaceholder(mergedPicker, locale)}
suffixIcon={
mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />
}
clearIcon={<CloseCircleFilled />}
allowClear
transitionName="slide-up"
{...additionalProps}
{...restProps}
{...additionalOverrideProps}
locale={locale!.lang}
className={classNames(className, {
[`${prefixCls}-${mergedSize}`]: mergedSize,
[`${prefixCls}-borderless`]: !bordered,
})}
prefixCls={prefixCls}
generateConfig={generateConfig}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
components={Components}
direction={direction}
/>
);
}}
</SizeContext.Consumer>
);
};
render() {
return (
<LocaleReceiver componentName="DatePicker" defaultLocale={this.getDefaultLocale}>
{this.renderPicker}
</LocaleReceiver>
);
}
}
if (displayName) {
Picker.displayName = displayName;
}
return Picker as React.ComponentClass<InnerPickerProps>;
}
const DatePicker = getPicker<DatePickerProps>();
const WeekPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('week', 'WeekPicker');
const MonthPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('month', 'MonthPicker');
const YearPicker = getPicker<Omit<PickerDateProps<DateType>, 'picker'>>('year', 'YearPicker');
const TimePicker = getPicker<Omit<PickerTimeProps<DateType>, 'picker'>>('time', 'TimePicker');
return { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker };
}

152
components/date-picker/generatePicker/index.tsx Normal file
View File

@ -0,0 +1,152 @@
import * as React from 'react';
import { GenerateConfig } from 'rc-picker/lib/generate/index';
import {
PickerBaseProps as RCPickerBaseProps,
PickerDateProps as RCPickerDateProps,
PickerTimeProps as RCPickerTimeProps,
} from 'rc-picker/lib/Picker';
import { SharedTimeProps } from 'rc-picker/lib/panels/TimePanel';
import {
RangePickerBaseProps as RCRangePickerBaseProps,
RangePickerDateProps as RCRangePickerDateProps,
RangePickerTimeProps as RCRangePickerTimeProps,
} from 'rc-picker/lib/RangePicker';
import { PickerMode, Locale as RcPickerLocale } from 'rc-picker/lib/interface';
import { SizeType } from '../../config-provider/SizeContext';
import PickerButton from '../PickerButton';
import PickerTag from '../PickerTag';
import { TimePickerLocale } from '../../time-picker';
import generateSinglePicker from './generateSinglePicker';
import generateRangePicker from './generateRangePicker';
export const Components = { button: PickerButton, rangeItem: PickerTag };
function toArray<T>(list: T | T[]): T[] {
if (!list) {
return [];
}
return Array.isArray(list) ? list : [list];
}
export function getTimeProps<DateType>(
props: { format?: string; picker?: PickerMode } & SharedTimeProps<DateType>,
) {
const { format, picker, showHour, showMinute, showSecond, use12Hours } = props;
const firstFormat = toArray(format)[0];
const showTimeObj: SharedTimeProps<DateType> = { ...props };
if (firstFormat) {
if (!firstFormat.includes('s') && showSecond === undefined) {
showTimeObj.showSecond = false;
}
if (!firstFormat.includes('m') && showMinute === undefined) {
showTimeObj.showMinute = false;
}
if (!firstFormat.includes('H') && !firstFormat.includes('h') && showHour === undefined) {
showTimeObj.showHour = false;
}
if ((firstFormat.includes('a') || firstFormat.includes('A')) && use12Hours === undefined) {
showTimeObj.use12Hours = true;
}
}
if (picker === 'time') {
return showTimeObj;
}
return {
showTime: showTimeObj,
};
}
type InjectDefaultProps<Props> = Omit<
Props,
| 'locale'
| 'generateConfig'
| 'prevIcon'
| 'nextIcon'
| 'superPrevIcon'
| 'superNextIcon'
| 'hideHeader'
| 'components'
> & {
locale?: PickerLocale;
size?: SizeType;
bordered?: boolean;
};
export type PickerLocale = {
lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
timePickerLocale: TimePickerLocale;
} & AdditionalPickerLocaleProps;
export type AdditionalPickerLocaleProps = {
dateFormat?: string;
dateTimeFormat?: string;
weekFormat?: string;
monthFormat?: string;
};
export type AdditionalPickerLocaleLangProps = {
placeholder: string;
yearPlaceholder?: string;
quarterPlaceholder?: string;
monthPlaceholder?: string;
weekPlaceholder?: string;
rangeYearPlaceholder?: [string, string];
rangeMonthPlaceholder?: [string, string];
rangeWeekPlaceholder?: [string, string];
rangePlaceholder?: [string, string];
};
// Picker Props
export type PickerBaseProps<DateType> = InjectDefaultProps<RCPickerBaseProps<DateType>>;
export type PickerDateProps<DateType> = InjectDefaultProps<RCPickerDateProps<DateType>>;
export type PickerTimeProps<DateType> = InjectDefaultProps<RCPickerTimeProps<DateType>>;
export type PickerProps<DateType> =
| PickerBaseProps<DateType>
| PickerDateProps<DateType>
| PickerTimeProps<DateType>;
// Range Picker Props
export type RangePickerBaseProps<DateType> = InjectDefaultProps<RCRangePickerBaseProps<DateType>>;
export type RangePickerDateProps<DateType> = InjectDefaultProps<RCRangePickerDateProps<DateType>>;
export type RangePickerTimeProps<DateType> = InjectDefaultProps<RCRangePickerTimeProps<DateType>>;
export type RangePickerProps<DateType> =
| RangePickerBaseProps<DateType>
| RangePickerDateProps<DateType>
| RangePickerTimeProps<DateType>;
function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
// =========================== Picker ===========================
const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker } = generateSinglePicker(
generateConfig,
);
// ======================== Range Picker ========================
const RangePicker = generateRangePicker(generateConfig);
// =========================== Export ===========================
type MergedDatePicker = typeof DatePicker & {
WeekPicker: typeof WeekPicker;
MonthPicker: typeof MonthPicker;
YearPicker: typeof YearPicker;
RangePicker: React.ComponentClass<RangePickerProps<DateType>>;
TimePicker: typeof TimePicker;
};
const MergedDatePicker = DatePicker as MergedDatePicker;
MergedDatePicker.WeekPicker = WeekPicker;
MergedDatePicker.MonthPicker = MonthPicker;
MergedDatePicker.YearPicker = YearPicker;
MergedDatePicker.RangePicker = RangePicker;
MergedDatePicker.TimePicker = TimePicker;
return MergedDatePicker;
}
export default generatePicker;

38
components/date-picker/style/index.less
View File

@ -126,15 +126,35 @@
}
&-separator {
position: relative;
display: inline-block;
align-self: center;
width: 2em;
width: 1em;
height: @font-size-lg;
color: @disabled-color;
font-size: @font-size-lg;
line-height: @font-size-lg;
text-align: center;
vertical-align: top;
cursor: default;
&::before,
&::after {
position: absolute;
border-top: 1px solid #979797;
content: '';
}
&::before {
top: 50%;
left: 0.1em;
width: 0.8em;
}
&::after {
top: 50%;
right: 0.11em;
width: 0.8em;
width: 0.3em;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.@{picker-prefix-cls}-range-separator & {
.@{picker-prefix-cls}-disabled & {
cursor: not-allowed;
@ -174,6 +194,12 @@
opacity: 1;
}
}
&-separator {
align-items: center;
padding: 0 @padding-xs;
line-height: 1;
}
}
// ======================= Dropdown =======================

10
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3552,10 +3552,9 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"
@ -3640,10 +3639,9 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"

2
components/form/index.en-US.md
View File

@ -84,7 +84,7 @@ Form field component for data bidirectional binding, validation, layout, and so
| normalize | Normalize value to form component | (value, prevValue, prevValues) => any | - |
| required | Whether provided or not, it will be generated by the validation rule | boolean | false |
| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)[] | - |
| shouldUpdate | Custom field update logic. See [bellow](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false |
| shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false |
| trigger | When to collect the value of children node | string | onChange |
| validateFirst | Whether stop validate on first rule of error for this field | boolean | false |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | - |

5
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -700,10 +700,9 @@ exports[`renders ./components/input/demo/align.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"

11000
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

4
components/menu/style/rtl.less
View File

@ -4,6 +4,10 @@
@menu-prefix-cls: ~'@{ant-prefix}-menu';
.@{menu-prefix-cls} {
&-rtl {
direction: rtl;
}
&-item-group-title {
.@{menu-prefix-cls}-rtl & {
text-align: right;

2
components/style/themes/default.less
View File

@ -11,7 +11,7 @@
// -------- Colors -----------
@primary-color: @blue-6;
@info-color: @blue-6;
@info-color: @primary-color;
@success-color: @green-6;
@processing-color: @blue-6;
@error-color: @red-5;

85
components/table/__tests__/Table.filter.test.js
View File

@ -11,12 +11,7 @@ import ConfigProvider from '../../config-provider';
const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => {} } };
function getDropdownWrapper(wrapper) {
return mount(
wrapper
.find('Trigger')
.instance()
.getComponent(),
);
return mount(wrapper.find('Trigger').instance().getComponent());
}
describe('Table.filter', () => {
@ -62,6 +57,18 @@ describe('Table.filter', () => {
return wrapper.find('BodyRow').map(row => row.props().record.name);
}
it('not show filter icon when undefined', () => {
const noFilterColumn = { ...column, filters: undefined };
delete noFilterColumn.onFilter;
const wrapper = mount(
createTable({
columns: [noFilterColumn],
}),
);
expect(wrapper.find('.ant-table-filter-column')).toHaveLength(0);
});
it('renders filter correctly', () => {
const wrapper = mount(createTable());
@ -213,7 +220,10 @@ describe('Table.filter', () => {
expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toBeFalsy();
wrapper.find('FilterDropdown').find('input[type="checkbox"]').first().simulate('click');
wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper
.find('FilterDropdown')
.find('.ant-table-filter-dropdown-btns .ant-btn-primary')
.simulate('click');
expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']);
wrapper.setProps({ dataSource: [...data, { key: 999, name: 'Chris' }] });
expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']);
@ -342,7 +352,10 @@ describe('Table.filter', () => {
const wrapper = mount(createTable({ onChange: handleChange }));
wrapper.find('.ant-dropdown-trigger').first().simulate('click');
wrapper.find('FilterDropdown').find('MenuItem').first().simulate('click');
wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper
.find('FilterDropdown')
.find('.ant-table-filter-dropdown-btns .ant-btn-primary')
.simulate('click');
expect(handleChange).toHaveBeenCalledWith(
{},
{ name: ['boy'] },
@ -358,12 +371,15 @@ describe('Table.filter', () => {
const wrapper = mount(createTable({ pagination: { onChange: onPaginationChange } }));
wrapper.find('.ant-dropdown-trigger').first().simulate('click');
wrapper.find('FilterDropdown').find('MenuItem').first().simulate('click');
wrapper.find('FilterDropdown').find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper
.find('FilterDropdown')
.find('.ant-table-filter-dropdown-btns .ant-btn-primary')
.simulate('click');
expect(onPaginationChange).toHaveBeenCalledWith(1, 10);
});
it('should not fire change event on close filterDropdown without changing anything', () => {
it('should not fire change event when close filterDropdown without changing anything', () => {
const handleChange = jest.fn();
const wrapper = mount(createTable({ onChange: handleChange }));
@ -373,6 +389,26 @@ describe('Table.filter', () => {
expect(handleChange).not.toHaveBeenCalled();
});
it('should not fire change event when close a filtered filterDropdown without changing anything', () => {
const handleChange = jest.fn();
const wrapper = mount(
createTable({
onChange: handleChange,
columns: [
{
...column,
defaultFilteredValue: ['boy', 'designer'],
},
],
}),
);
wrapper.find('.ant-dropdown-trigger').first().simulate('click');
wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
expect(handleChange).not.toHaveBeenCalled();
});
it('three levels menu', () => {
const filters = [
{ text: 'Upper', value: 'Upper' },
@ -410,29 +446,17 @@ describe('Table.filter', () => {
let dropdownWrapper = getDropdownWrapper(wrapper);
expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
// select
dropdownWrapper
.find('.ant-dropdown-menu-submenu-title')
.at(0)
.simulate('mouseEnter');
dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(0).simulate('mouseEnter');
jest.runAllTimers();
dropdownWrapper = getDropdownWrapper(wrapper);
dropdownWrapper
.find('.ant-dropdown-menu-submenu-title')
.at(1)
.simulate('mouseEnter');
dropdownWrapper.find('.ant-dropdown-menu-submenu-title').at(1).simulate('mouseEnter');
jest.runAllTimers();
dropdownWrapper = getDropdownWrapper(wrapper);
dropdownWrapper
.find('MenuItem')
.last()
.simulate('click');
dropdownWrapper.find('MenuItem').last().simulate('click');
dropdownWrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click');
wrapper.update();
expect(renderedNames(wrapper)).toEqual(['Jack']);
dropdownWrapper
.find('MenuItem')
.last()
.simulate('click');
dropdownWrapper.find('MenuItem').last().simulate('click');
jest.useRealTimers();
});
@ -1060,12 +1084,9 @@ describe('Table.filter', () => {
expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').text()).toEqual(
'Bamboo',
);
expect(
wrapper
.find('.ant-table-filter-dropdown-btns .ant-btn-link')
.last()
.text(),
).toEqual('Reset');
expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').last().text()).toEqual(
'Reset',
);
});
it('filtered should work', () => {

3
components/table/__tests__/Table.rowSelection.test.js
View File

@ -429,6 +429,7 @@ describe('Table.rowSelection', () => {
const wrapper = render(
createTable({
rowSelection: { fixed: true },
scroll: { x: 903 },
}),
);
@ -444,6 +445,7 @@ describe('Table.rowSelection', () => {
},
},
rowSelection: { fixed: true },
scroll: { x: 903 },
}),
);
@ -461,6 +463,7 @@ describe('Table.rowSelection', () => {
fixed: 'left',
},
],
scroll: { x: 903 },
}),
);

19
components/table/__tests__/Table.sorter.test.js
View File

@ -155,38 +155,37 @@ describe('Table.sorter', () => {
jest.useFakeTimers();
const wrapper = mount(createTable({}));
// default show sorter tooltip
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
// set table props showSorterTooltip is false
wrapper.setProps({ showSorterTooltip: false });
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeFalsy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
// set table props showSorterTooltip is false, column showSorterTooltip is true
wrapper.setProps({
showSorterTooltip: false,
columns: [{ ...column, showSorterTooltip: true }],
});
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
// set table props showSorterTooltip is true, column showSorterTooltip is false
wrapper.setProps({
showSorterTooltip: true,
columns: [{ ...column, showSorterTooltip: false }],
});
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeFalsy();
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
});
it('works with grouping columns in controlled mode', () => {

54
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -11,16 +11,17 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
class="ant-spin-container"
>
<div
class="ant-table ant-table-has-fix-left"
class="ant-table ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
style="overflow-x:scroll;overflow-y:hidden"
>
<table
style="table-layout:fixed"
style="width:903px;min-width:100%;table-layout:fixed"
>
<colgroup>
<col
@ -72,6 +73,21 @@ exports[`Table.rowSelection fix expand on th left when selection column fixed on
<tbody
class="ant-table-tbody"
>
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="0"
@ -329,16 +345,17 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
class="ant-spin-container"
>
<div
class="ant-table ant-table-has-fix-left"
class="ant-table ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
style="overflow-x:scroll;overflow-y:hidden"
>
<table
style="table-layout:fixed"
style="width:903px;min-width:100%;table-layout:fixed"
>
<colgroup>
<col
@ -383,6 +400,18 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<tbody
class="ant-table-tbody"
>
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="0"
@ -600,16 +629,17 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
class="ant-spin-container"
>
<div
class="ant-table ant-table-has-fix-left"
class="ant-table ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
style="overflow-x:scroll;overflow-y:hidden"
>
<table
style="table-layout:fixed"
style="width:903px;min-width:100%;table-layout:fixed"
>
<colgroup>
<col
@ -655,6 +685,18 @@ exports[`Table.rowSelection fix selection column on the left when any other colu
<tbody
class="ant-table-tbody"
>
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="0"

180
components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
View File

@ -9,59 +9,63 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
class="ant-table-cell ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters"
class="ant-table-column-sorters-with-tooltip"
>
<span>
Name
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
<div
class="ant-table-column-sorters"
>
<span>
Name
</span>
<span
class="ant-table-column-sorter-inner"
class="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
class="ant-table-column-sorter-inner"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</span>
</div>
</div>
</th>
</tr>
@ -99,59 +103,63 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters"
class="ant-table-column-sorters-with-tooltip"
>
<span>
Age
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
<div
class="ant-table-column-sorters"
>
<span>
Age
</span>
<span
class="ant-table-column-sorter-inner"
class="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up active"
role="img"
class="ant-table-column-sorter-inner"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up active"
role="img"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</span>
</div>
</div>
</th>
</tr>

1292
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

117
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

@ -240,16 +240,17 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-spin-container"
>
<div
class="ant-table ant-table-has-fix-left ant-table-has-fix-right"
class="ant-table ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
style="overflow-x:scroll;overflow-y:hidden"
>
<table
style="table-layout:fixed"
style="width:1px;min-width:100%;table-layout:fixed"
>
<colgroup>
<col
@ -337,6 +338,45 @@ exports[`Table renders empty table with fixed columns 1`] = `
<tbody
class="ant-table-tbody"
>
<tr
aria-hidden="true"
class="ant-table-measure-row"
style="height:0"
>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
<td
style="padding:0;border:0;height:0"
/>
</tr>
<tr
class="ant-table-placeholder"
>
@ -345,50 +385,55 @@ exports[`Table renders empty table with fixed columns 1`] = `
colspan="11"
>
<div
class="ant-empty ant-empty-normal"
class="ant-table-expanded-row-fixed"
style="width:0;position:sticky;left:0;overflow:hidden"
>
<div
class="ant-empty-image"
class="ant-empty ant-empty-normal"
>
<svg
class="ant-empty-img-simple"
height="41"
viewBox="0 0 64 41"
width="64"
xmlns="http://www.w3.org/2000/svg"
<div
class="ant-empty-image"
>
<g
fill="none"
fill-rule="evenodd"
transform="translate(0 1)"
<svg
class="ant-empty-img-simple"
height="41"
viewBox="0 0 64 41"
width="64"
xmlns="http://www.w3.org/2000/svg"
>
<ellipse
class="ant-empty-img-simple-ellipse"
cx="32"
cy="33"
rx="32"
ry="7"
/>
<g
class="ant-empty-img-simple-g"
fill-rule="nonzero"
fill="none"
fill-rule="evenodd"
transform="translate(0 1)"
>
<path
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
/>
<path
class="ant-empty-img-simple-path"
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
<ellipse
class="ant-empty-img-simple-ellipse"
cx="32"
cy="33"
rx="32"
ry="7"
/>
<g
class="ant-empty-img-simple-g"
fill-rule="nonzero"
>
<path
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
/>
<path
class="ant-empty-img-simple-path"
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
/>
</g>
</g>
</g>
</svg>
</svg>
</div>
<p
class="ant-empty-description"
>
No Data
</p>
</div>
<p
class="ant-empty-description"
>
No Data
</p>
</div>
</td>
</tr>

4
components/table/__tests__/empty.test.js
View File

@ -51,7 +51,9 @@ describe('Table', () => {
});
it('renders empty table with fixed columns', () => {
const wrapper = render(<Table dataSource={[]} columns={columnsFixed} pagination={false} />);
const wrapper = render(
<Table dataSource={[]} columns={columnsFixed} pagination={false} scroll={{ x: 1 }} />,
);
expect(wrapper).toMatchSnapshot();
});

19
components/table/demo/dynamic-settings.md
View File

@ -21,22 +21,33 @@ const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [
{
text: 'London',
value: 'London',
},
{
text: 'New York',
value: 'New York',
},
],
onFilter: (value, record) => record.address.indexOf(value) === 0,
},
{
title: 'Action',
key: 'action',
sorter: true,
filters: [],
onFilter: () => {},
render: () => (
<span>
<a style={{ marginRight: 16 }}>Delete</a>

5
components/table/hooks/useFilter/FilterDropdown.tsx
View File

@ -1,5 +1,6 @@
import * as React from 'react';
import classNames from 'classnames';
import isEqual from 'lodash/isEqual';
import FilterFilled from '@ant-design/icons/FilterFilled';
import Button from '../../../button';
import Menu from '../../../menu';
@ -131,6 +132,10 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
return null;
}
if (isEqual(mergedKeys, filterState?.filteredKeys)) {
return null;
}
triggerFilter({
column,
key: columnKey,

4
components/table/hooks/useFilter/index.tsx
View File

@ -31,7 +31,7 @@ function collectFilterStates<RecordType>(
if ('children' in column) {
filterStates = [...filterStates, ...collectFilterStates(column.children, init, columnPos)];
} else if ('filters' in column || 'filterDropdown' in column || 'onFilter' in column) {
} else if (column.filters || 'filterDropdown' in column || 'onFilter' in column) {
if ('filteredValue' in column) {
// Controlled
filterStates.push({
@ -70,7 +70,7 @@ function injectFilter<RecordType>(
const columnPos = getColumnPos(index, pos);
const { filterMultiple = true } = column as ColumnType<RecordType>;
if ('filters' in column || 'filterDropdown' in column) {
if (column.filters || 'filterDropdown' in column) {
const columnKey = getColumnKey(column, columnPos);
const filterState = filterStates.find(({ key }) => columnKey === key);

4
components/table/hooks/useSorter.tsx
View File

@ -167,7 +167,9 @@ function injectSorter<RecordType>(
</div>
);
return showSorterTooltip ? (
<Tooltip title={sortTip}>{renderSortTitle}</Tooltip>
<Tooltip title={sortTip}>
<div className={`${prefixCls}-column-sorters-with-tooltip`}>{renderSortTitle}</div>
</Tooltip>
) : (
renderSortTitle
);

22
components/table/index.en-US.md
View File

@ -92,14 +92,14 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
<Table
onRow={(record, rowIndex) => {
return {
onClick: (event) => {}, // click row
onDoubleClick: (event) => {}, // double click row
onContextMenu: (event) => {}, // right button click row
onMouseEnter: (event) => {}, // mouse enter row
onMouseLeave: (event) => {}, // mouse leave row
onClick: event => {}, // click row
onDoubleClick: event => {}, // double click row
onContextMenu: event => {}, // right button click row
onMouseEnter: event => {}, // mouse enter row
onMouseLeave: event => {}, // mouse leave row
};
}}
onHeaderRow={(column) => {
onHeaderRow={column => {
return {
onClick: () => {}, // click header row
};
@ -265,7 +265,7 @@ If `dataSource[i].key` is not provided, then you should specify the primary key
// primary key is uid
return <Table rowKey="uid" />;
// or
return <Table rowKey={(record) => record.uid} />;
return <Table rowKey={record => record.uid} />;
```
## Migrate to v4
@ -276,6 +276,12 @@ Besides, the breaking change is changing `dataIndex` from nest string path like
## FAQ
### How to hide pagination when single page or not data
### How to hide pagination when single page or not data?
You can set `hideOnSinglePage` with `pagination` prop.
### Table will return to first page when filter data.
Table total page count usually reduce after filter data, we defaultly return to first page in case of current page is out of filtered results.
You may need to keep current page after filtering when fetch data from remote service, please check [this demo](https://codesandbox.io/s/yuanchengjiazaishuju-ant-design-demo-7y2uf) as workaround.

22
components/table/index.zh-CN.md
View File

@ -95,16 +95,16 @@ const columns = [
```jsx
<Table
onRow={(record) => {
onRow={record => {
return {
onClick: (event) => {}, // 点击行
onDoubleClick: (event) => {},
onContextMenu: (event) => {},
onMouseEnter: (event) => {}, // 鼠标移入行
onMouseLeave: (event) => {},
onClick: event => {}, // 点击行
onDoubleClick: event => {},
onContextMenu: event => {},
onMouseEnter: event => {}, // 鼠标移入行
onMouseLeave: event => {},
};
}}
onHeaderRow={(column) => {
onHeaderRow={column => {
return {
onClick: () => {}, // 点击表头行
};
@ -269,7 +269,7 @@ class NameColumn extends Table.Column<User> {}
// 比如你的数据主键是 uid
return <Table rowKey="uid" />;
// 或
return <Table rowKey={(record) => record.uid} />;
return <Table rowKey={record => record.uid} />;
```
## 从 v3 升级到 v4
@ -283,3 +283,9 @@ Table 移除了在 v3 中废弃的 `onRowClick`、`onRowDoubleClick`、`onRowMou
### 如何在没有数据或只有一页数据时隐藏分页栏
你可以设置 `pagination` 的 `hideOnSinglePage` 属性为 `true`。
### 表格过滤时会回到第一页？
 前端过滤时通常条目总数会减少，从而导致总页数小于筛选前的当前页数，为了防止当前页面没有数据，我们默认会返回第一页。
如果你在使用远程分页，很可能需要保持当前页面，你可以参照这个 [受控例子](https://codesandbox.io/s/yuanchengjiazaishuju-ant-design-demo-7y2uf) 控制当前页面不变。

2
components/table/style/bordered.less
View File

@ -53,7 +53,7 @@
}
}
&.@{table-prefix-cls}-fixed-column {
&.@{table-prefix-cls}-scroll-horizontal {
tr.@{table-prefix-cls}-expanded-row,
tr.@{table-prefix-cls}-placeholder {
> td {

43
components/table/style/index.less
View File

@ -124,20 +124,22 @@
}
// ========================= Nest Table ===========================
.@{table-prefix-cls} {
margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal +
ceil(@font-size-sm * 1.4));
.@{table-prefix-cls}-wrapper:only-child {
.@{table-prefix-cls} {
margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical (@table-padding-horizontal +
ceil(@font-size-sm * 1.4));
td {
background: transparent;
}
td {
background: transparent;
}
&-tbody > tr:last-child > td {
border-bottom: 0;
&-tbody > tr:last-child > td {
border-bottom: 0;
&:first-child,
&:last-child {
border-radius: 0;
&:first-child,
&:last-child {
border-radius: 0;
}
}
}
}
@ -199,10 +201,14 @@
background: @table-body-sort-bg;
}
&-column-sorters-with-tooltip {
display: inline-block;
width: 100%;
}
&-column-sorters {
display: inline-flex;
align-items: center;
width: 100%;
padding: @table-padding-vertical @table-padding-horizontal;
}
@ -249,6 +255,17 @@
padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal;
}
// Remove padding when sorter also provided
&-thead tr th.@{table-prefix-cls}-column-has-sorters {
.@{table-prefix-cls}-filter-column {
margin: 0;
}
.@{table-prefix-cls}-filter-column-title {
padding: 0 2.3em 0 0;
}
}
&-filter-trigger-container {
position: absolute;
top: 0;
@ -361,7 +378,7 @@
top: 0;
right: -10px;
cursor: pointer;
transition: all .3s;
transition: all 0.3s;
.@{iconfont-css-prefix} {
.iconfont-size-under-12px(10px);

22
components/table/style/size.less
View File

@ -1,7 +1,7 @@
@import './index';
.table-size(@size, @padding-vertical, @padding-horizontal) {
.@{table-prefix-cls}.@{table-prefix-cls}-@{size} {
.@{table-prefix-cls}-@{size} {
.@{table-prefix-cls}-title,
.@{table-prefix-cls}-footer,
.@{table-prefix-cls}-thead > tr > th,
@ -9,8 +9,22 @@
padding: @padding-vertical @padding-horizontal;
}
.@{table-prefix-cls}-filter-column {
margin: -@padding-vertical -@padding-horizontal;
.@{table-prefix-cls}-thead {
th.@{table-prefix-cls}-column-has-sorters {
padding: 0;
}
.@{table-prefix-cls}-filter-column {
margin: -@padding-vertical -@padding-horizontal;
}
.@{table-prefix-cls}-filter-column-title {
padding: @padding-vertical 2.3em @padding-vertical @padding-horizontal;
}
.@{table-prefix-cls}-column-sorters {
padding: @padding-vertical @padding-horizontal;
}
}
.@{table-prefix-cls}-expanded-row-fixed {
@ -29,7 +43,7 @@
// ================================================================
.table-size(~'small', @table-padding-vertical-sm, @table-padding-horizontal-sm);
.@{table-prefix-cls}.@{table-prefix-cls}-small {
.@{table-prefix-cls}-small {
.@{table-prefix-cls}-thead > tr > th {
background-color: @table-header-bg-sm;
}

5
components/time-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -401,10 +401,9 @@ exports[`renders ./components/time-picker/demo/range-picker.md correctly 1`] = `
class="ant-picker-range-separator"
>
<span
aria-label="to"
class="ant-picker-separator"
>
→
</span>
/>
</div>
<div
class="ant-picker-input"

9
components/typography/__tests__/__snapshots__/demo.test.js.snap
View File

@ -275,6 +275,15 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
</span>
case. Bnt Design, a design language for background applications, is refined by Ant UED Team. Cnt Design, a design language for background applications, is refined by Ant UED Team. Dnt Design, a design language for background applications, is refined by Ant UED Team. Ent Design, a design language for background applications, is refined by Ant UED Team.
</div>
<p>
2333
<span
class="ant-typography ant-typography-ellipsis"
>
2333
</span>
2333
</p>
</div>
`;

4
components/typography/demo/ellipsis-debug.md
View File

@ -63,6 +63,10 @@ class Demo extends React.Component {
Hello World
</Paragraph>
)}
<p>
2333<Text ellipsis>2333</Text>2333
</p>
</div>
);
}

5
components/typography/style/index.less
View File

@ -192,6 +192,11 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// https://blog.csdn.net/iefreer/article/details/50421025
span& {
vertical-align: bottom;
}
}
&-ellipsis-multiple-line {

2
docs/react/use-in-typescript.en-US.md
View File

@ -5,6 +5,8 @@ title: Use in TypeScript
Let's create a TypeScript project by using `create-react-app`, then import `antd` step by step.
> We build `antd` based on latest stable version of TypeScript (`>=3.8.4`), please make sure your project dependency matches it.
---
## Install and Initialization

2
docs/react/use-in-typescript.zh-CN.md
View File

@ -5,6 +5,8 @@ title: 在 TypeScript 中使用
使用 `create-react-app` 一步步地创建一个 TypeScript 项目，并引入 antd。
> `antd` 基于最新稳定版本的 TypeScript（`>=3.8.4`），请确保项目中使用匹配的版本。
---
## 安装和初始化

2
docs/react/use-with-create-react-app.en-US.md
View File

@ -203,6 +203,8 @@ We have built-in dark theme and compact theme in antd, you can reference to [Use
> You could also try [craco](https://github.com/sharegate/craco) and [craco-antd](https://github.com/FormAPI/craco-antd) to customize create-react-app webpack config same as customize-cra does.
> Note: It is recommended to use the latest version of `less`, or a minimum version greater than `3.0.1`.
## Replace momentjs to Day.js
You can use [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) plugin to replace momentjs to Day.js to reduce bundle size dramatically.

4
docs/react/use-with-create-react-app.zh-CN.md
View File

@ -201,6 +201,10 @@ module.exports = override(
antd 内建了深色主题和紧凑主题，你可以参照 [使用暗色主题和紧凑主题](/docs/react/customize-theme#使用暗色主题和紧凑主题) 进行接入。
> 同样，你可以使用 [craco](https://github.com/sharegate/craco) 和 [craco-antd](https://github.com/FormAPI/craco-antd) 来自定义 create-react-app 的 webpack 配置，类似于 customize-cra。
> 注意：建议使用最新版本的 `less`，或不低于 `3.0.1`。
## 使用 Day.js 替换 momentjs 优化打包大小
你可以使用 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) 插件用 Day.js 替换 momentjs 来大幅减小打包大小。

2
docs/spec/visual.zh-CN.md
View File

@ -70,7 +70,7 @@ title: 可视化
### 色板
<img class="preview-img no-padding" align="right" description="AntV 官方默认色板示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*58AFS77miwoAAAAAAAAAAABkARQnAQ" />
<img class="preview-img no-padding" align="right" description="AntV 官方默认色板示例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Skn6TZsQ7ksAAAAAAAAAAABkARQnAQ" />
AntV 提供了一套默认的图表颜色，包括颜色的用法，

2
docs/spec/visualization-page.md
View File

@ -169,7 +169,7 @@ title:
#### 选择正确的色板
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*hip9RpGrtJQAAAAAAAAAAABkARQnAQ">
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Skn6TZsQ7ksAAAAAAAAAAABkARQnAQ">
## 延伸阅读

10
package.json
View File

@ -51,8 +51,8 @@
"bundlesize": "bundlesize",
"check-commit": "node ./scripts/check-commit.js",
"compile": "antd-tools run compile",
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml CNAME _site && cp -r .circleci/ _site && npm run site:test",
"deploy": "bisheng gh-pages --push-only",
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml CNAME _site && cp -r .circleci/ .github/ _site && npm run site:test",
"deploy": "bisheng gh-pages --push-only --dotfiles",
"deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages",
"dist": "antd-tools run dist",
"lint": "npm run lint:tsc && npm run lint:script && npm run lint:demo && npm run lint:style && npm run lint:deps",
@ -127,7 +127,7 @@
"rc-slider": "~9.2.3",
"rc-steps": "~3.5.0",
"rc-switch": "~1.9.0",
"rc-table": "~7.3.0",
"rc-table": "~7.4.2",
"rc-tabs": "~10.1.1",
"rc-tooltip": "~4.0.2",
"rc-tree": "~3.1.0",
@ -164,12 +164,12 @@
"antd-theme-generator": "^1.1.6",
"babel-eslint": "^10.0.1",
"babel-plugin-add-react-displayname": "^0.0.5",
"bisheng": "^1.4.6",
"bisheng": "^1.5.1",
"bisheng-plugin-description": "^0.1.4",
"bisheng-plugin-react": "^1.1.0",
"bisheng-plugin-toc": "^0.4.4",
"bundlesize": "^0.18.0",
"chalk": "^3.0.0",
"chalk": "^4.0.0",
"cheerio": "^1.0.0-rc.3",
"concurrently": "^5.0.2",
"cross-env": "^7.0.0",