Merge pull request #22880 from ant-design/master

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

View File

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

View File

@ -6088,10 +6088,9 @@ exports[`ConfigProvider components DatePicker RangePicker configProvider 1`] = `
class="config-picker-range-separator" class="config-picker-range-separator"
> >
<span <span
aria-label="to"
class="config-picker-separator" class="config-picker-separator"
> />
</span>
</div> </div>
<div <div
class="config-picker-input" class="config-picker-input"
@ -6154,10 +6153,9 @@ exports[`ConfigProvider components DatePicker RangePicker normal 1`] = `
class="ant-picker-range-separator" class="ant-picker-range-separator"
> >
<span <span
aria-label="to"
class="ant-picker-separator" class="ant-picker-separator"
> />
</span>
</div> </div>
<div <div
class="ant-picker-input" class="ant-picker-input"
@ -6220,10 +6218,9 @@ exports[`ConfigProvider components DatePicker RangePicker prefixCls 1`] = `
class="prefix-RangePicker-range-separator" class="prefix-RangePicker-range-separator"
> >
<span <span
aria-label="to"
class="prefix-RangePicker-separator" class="prefix-RangePicker-separator"
> />
</span>
</div> </div>
<div <div
class="prefix-RangePicker-input" class="prefix-RangePicker-input"
@ -11632,59 +11629,63 @@ exports[`ConfigProvider components Table configProvider 1`] = `
class="config-table-filter-column-title" class="config-table-filter-column-title"
> >
<div <div
class="config-table-column-sorters" class="config-table-column-sorters-with-tooltip"
> >
<span> <div
Name class="config-table-column-sorters"
</span>
<span
class="config-table-column-sorter config-table-column-sorter-full"
> >
<span>
Name
</span>
<span <span
class="config-table-column-sorter-inner" class="config-table-column-sorter config-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="config-table-column-sorter-inner"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
class="" class="anticon anticon-caret-up config-table-column-sorter-up"
data-icon="caret-up" role="img"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-up"
</span> fill="currentColor"
<span focusable="false"
aria-label="caret-down" height="1em"
class="anticon anticon-caret-down config-table-column-sorter-down" viewBox="0 0 1024 1024"
role="img" width="1em"
> >
<svg <path
aria-hidden="true" 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"
class="" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down config-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> 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> </span>
</span> </div>
</div> </div>
</span> </span>
<span <span
@ -11902,59 +11903,63 @@ exports[`ConfigProvider components Table normal 1`] = `
class="ant-table-filter-column-title" class="ant-table-filter-column-title"
> >
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters-with-tooltip"
> >
<span> <div
Name class="ant-table-column-sorters"
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span>
Name
</span>
<span <span
class="ant-table-column-sorter-inner" class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="ant-table-column-sorter-inner"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
class="" class="anticon anticon-caret-up ant-table-column-sorter-up"
data-icon="caret-up" role="img"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-up"
</span> fill="currentColor"
<span focusable="false"
aria-label="caret-down" height="1em"
class="anticon anticon-caret-down ant-table-column-sorter-down" viewBox="0 0 1024 1024"
role="img" width="1em"
> >
<svg <path
aria-hidden="true" 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"
class="" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down ant-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> 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> </span>
</span> </div>
</div> </div>
</span> </span>
<span <span
@ -12172,59 +12177,63 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
class="prefix-Table-filter-column-title" class="prefix-Table-filter-column-title"
> >
<div <div
class="prefix-Table-column-sorters" class="prefix-Table-column-sorters-with-tooltip"
> >
<span> <div
Name class="prefix-Table-column-sorters"
</span>
<span
class="prefix-Table-column-sorter prefix-Table-column-sorter-full"
> >
<span>
Name
</span>
<span <span
class="prefix-Table-column-sorter-inner" class="prefix-Table-column-sorter prefix-Table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="prefix-Table-column-sorter-inner"
class="anticon anticon-caret-up prefix-Table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
class="" class="anticon anticon-caret-up prefix-Table-column-sorter-up"
data-icon="caret-up" role="img"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-up"
</span> fill="currentColor"
<span focusable="false"
aria-label="caret-down" height="1em"
class="anticon anticon-caret-down prefix-Table-column-sorter-down" viewBox="0 0 1024 1024"
role="img" width="1em"
> >
<svg <path
aria-hidden="true" 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"
class="" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down prefix-Table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> 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> </span>
</span> </div>
</div> </div>
</span> </span>
<span <span

View File

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

View File

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

View File

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

View File

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

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;

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;
}

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 };
}

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;

View File

@ -126,15 +126,35 @@
} }
&-separator { &-separator {
position: relative;
display: inline-block; display: inline-block;
align-self: center; width: 1em;
width: 2em;
height: @font-size-lg; height: @font-size-lg;
color: @disabled-color; vertical-align: top;
font-size: @font-size-lg;
line-height: @font-size-lg;
text-align: center;
cursor: default; 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}-range-separator & {
.@{picker-prefix-cls}-disabled & { .@{picker-prefix-cls}-disabled & {
cursor: not-allowed; cursor: not-allowed;
@ -174,6 +194,12 @@
opacity: 1; opacity: 1;
} }
} }
&-separator {
align-items: center;
padding: 0 @padding-xs;
line-height: 1;
}
} }
// ======================= Dropdown ======================= // ======================= Dropdown =======================

View File

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

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 | - | | 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 | | 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)[] | - | | 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 | | 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 | | 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 | - | | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | - |

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,59 +9,63 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
class="ant-table-cell ant-table-column-has-sorters" class="ant-table-cell ant-table-column-has-sorters"
> >
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters-with-tooltip"
> >
<span> <div
Name class="ant-table-column-sorters"
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span>
Name
</span>
<span <span
class="ant-table-column-sorter-inner" class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="ant-table-column-sorter-inner"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
class="" class="anticon anticon-caret-up ant-table-column-sorter-up"
data-icon="caret-up" role="img"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-up"
</span> fill="currentColor"
<span focusable="false"
aria-label="caret-down" height="1em"
class="anticon anticon-caret-down ant-table-column-sorter-down" viewBox="0 0 1024 1024"
role="img" width="1em"
> >
<svg <path
aria-hidden="true" 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"
class="" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down ant-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> 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> </span>
</span> </div>
</div> </div>
</th> </th>
</tr> </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" class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
> >
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters-with-tooltip"
> >
<span> <div
Age class="ant-table-column-sorters"
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span>
Age
</span>
<span <span
class="ant-table-column-sorter-inner" class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="ant-table-column-sorter-inner"
class="anticon anticon-caret-up ant-table-column-sorter-up active"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
class="" class="anticon anticon-caret-up ant-table-column-sorter-up active"
data-icon="caret-up" role="img"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> data-icon="caret-up"
</span> fill="currentColor"
<span focusable="false"
aria-label="caret-down" height="1em"
class="anticon anticon-caret-down ant-table-column-sorter-down" viewBox="0 0 1024 1024"
role="img" width="1em"
> >
<svg <path
aria-hidden="true" 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"
class="" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down ant-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> class=""
</svg> 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> </span>
</span> </div>
</div> </div>
</th> </th>
</tr> </tr>

File diff suppressed because it is too large Load Diff

View File

@ -240,16 +240,17 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-spin-container" class="ant-spin-container"
> >
<div <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 <div
class="ant-table-container" class="ant-table-container"
> >
<div <div
class="ant-table-content" class="ant-table-content"
style="overflow-x:scroll;overflow-y:hidden"
> >
<table <table
style="table-layout:fixed" style="width:1px;min-width:100%;table-layout:fixed"
> >
<colgroup> <colgroup>
<col <col
@ -337,6 +338,45 @@ exports[`Table renders empty table with fixed columns 1`] = `
<tbody <tbody
class="ant-table-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 <tr
class="ant-table-placeholder" class="ant-table-placeholder"
> >
@ -345,50 +385,55 @@ exports[`Table renders empty table with fixed columns 1`] = `
colspan="11" colspan="11"
> >
<div <div
class="ant-empty ant-empty-normal" class="ant-table-expanded-row-fixed"
style="width:0;position:sticky;left:0;overflow:hidden"
> >
<div <div
class="ant-empty-image" class="ant-empty ant-empty-normal"
> >
<svg <div
class="ant-empty-img-simple" class="ant-empty-image"
height="41"
viewBox="0 0 64 41"
width="64"
xmlns="http://www.w3.org/2000/svg"
> >
<g <svg
fill="none" class="ant-empty-img-simple"
fill-rule="evenodd" height="41"
transform="translate(0 1)" 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 <g
class="ant-empty-img-simple-g" fill="none"
fill-rule="nonzero" fill-rule="evenodd"
transform="translate(0 1)"
> >
<path <ellipse
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" class="ant-empty-img-simple-ellipse"
/> cx="32"
<path cy="33"
class="ant-empty-img-simple-path" rx="32"
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" 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>
</g> </svg>
</svg> </div>
<p
class="ant-empty-description"
>
No Data
</p>
</div> </div>
<p
class="ant-empty-description"
>
No Data
</p>
</div> </div>
</td> </td>
</tr> </tr>

View File

@ -51,7 +51,9 @@ describe('Table', () => {
}); });
it('renders empty table with fixed columns', () => { 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(); expect(wrapper).toMatchSnapshot();
}); });

View File

@ -21,22 +21,33 @@ const columns = [
{ {
title: 'Name', title: 'Name',
dataIndex: 'name', dataIndex: 'name',
key: 'name',
render: text => <a>{text}</a>,
}, },
{ {
title: 'Age', title: 'Age',
dataIndex: 'age', dataIndex: 'age',
key: 'age', sorter: (a, b) => a.age - b.age,
}, },
{ {
title: 'Address', title: 'Address',
dataIndex: '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', title: 'Action',
key: 'action', key: 'action',
sorter: true,
filters: [],
onFilter: () => {},
render: () => ( render: () => (
<span> <span>
<a style={{ marginRight: 16 }}>Delete</a> <a style={{ marginRight: 16 }}>Delete</a>

View File

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

View File

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

View File

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

View File

@ -92,14 +92,14 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
<Table <Table
onRow={(record, rowIndex) => { onRow={(record, rowIndex) => {
return { return {
onClick: (event) => {}, // click row onClick: event => {}, // click row
onDoubleClick: (event) => {}, // double click row onDoubleClick: event => {}, // double click row
onContextMenu: (event) => {}, // right button click row onContextMenu: event => {}, // right button click row
onMouseEnter: (event) => {}, // mouse enter row onMouseEnter: event => {}, // mouse enter row
onMouseLeave: (event) => {}, // mouse leave row onMouseLeave: event => {}, // mouse leave row
}; };
}} }}
onHeaderRow={(column) => { onHeaderRow={column => {
return { return {
onClick: () => {}, // click header row 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 // primary key is uid
return <Table rowKey="uid" />; return <Table rowKey="uid" />;
// or // or
return <Table rowKey={(record) => record.uid} />; return <Table rowKey={record => record.uid} />;
``` ```
## Migrate to v4 ## Migrate to v4
@ -276,6 +276,12 @@ Besides, the breaking change is changing `dataIndex` from nest string path like
## FAQ ## 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. 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.

View File

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

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}-expanded-row,
tr.@{table-prefix-cls}-placeholder { tr.@{table-prefix-cls}-placeholder {
> td { > td {

View File

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

View File

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

View File

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

View File

@ -275,6 +275,15 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
</span> </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. 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> </div>
<p>
2333
<span
class="ant-typography ant-typography-ellipsis"
>
2333
</span>
2333
</p>
</div> </div>
`; `;

View File

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

View File

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

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. 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 ## Install and Initialization

View File

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

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. > 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 ## 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. 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.

View File

@ -201,6 +201,10 @@ module.exports = override(
antd 内建了深色主题和紧凑主题,你可以参照 [使用暗色主题和紧凑主题](/docs/react/customize-theme#使用暗色主题和紧凑主题) 进行接入。 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 优化打包大小 ## 使用 Day.js 替换 momentjs 优化打包大小
你可以使用 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) 插件用 Day.js 替换 momentjs 来大幅减小打包大小。 你可以使用 [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin) 插件用 Day.js 替换 momentjs 来大幅减小打包大小。

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 提供了一套默认的图表颜色,包括颜色的用法, AntV 提供了一套默认的图表颜色,包括颜色的用法,

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">
## 延伸阅读 ## 延伸阅读

View File

@ -51,8 +51,8 @@
"bundlesize": "bundlesize", "bundlesize": "bundlesize",
"check-commit": "node ./scripts/check-commit.js", "check-commit": "node ./scripts/check-commit.js",
"compile": "antd-tools run compile", "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", "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", "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", "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", "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", "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-slider": "~9.2.3",
"rc-steps": "~3.5.0", "rc-steps": "~3.5.0",
"rc-switch": "~1.9.0", "rc-switch": "~1.9.0",
"rc-table": "~7.3.0", "rc-table": "~7.4.2",
"rc-tabs": "~10.1.1", "rc-tabs": "~10.1.1",
"rc-tooltip": "~4.0.2", "rc-tooltip": "~4.0.2",
"rc-tree": "~3.1.0", "rc-tree": "~3.1.0",
@ -164,12 +164,12 @@
"antd-theme-generator": "^1.1.6", "antd-theme-generator": "^1.1.6",
"babel-eslint": "^10.0.1", "babel-eslint": "^10.0.1",
"babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-add-react-displayname": "^0.0.5",
"bisheng": "^1.4.6", "bisheng": "^1.5.1",
"bisheng-plugin-description": "^0.1.4", "bisheng-plugin-description": "^0.1.4",
"bisheng-plugin-react": "^1.1.0", "bisheng-plugin-react": "^1.1.0",
"bisheng-plugin-toc": "^0.4.4", "bisheng-plugin-toc": "^0.4.4",
"bundlesize": "^0.18.0", "bundlesize": "^0.18.0",
"chalk": "^3.0.0", "chalk": "^4.0.0",
"cheerio": "^1.0.0-rc.3", "cheerio": "^1.0.0-rc.3",
"concurrently": "^5.0.2", "concurrently": "^5.0.2",
"cross-env": "^7.0.0", "cross-env": "^7.0.0",