mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-06 08:53:28 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fix: DatePicker with multiple support placeholder (#48387)

Browse Source 
* feat: add placeholder option for multiple datepicker

* fix: update style

* chore: bump rc-picker

* test: update snapshot

---------

Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
This commit is contained in:
希亚的西红柿 2024-04-16 14:54:19 +08:00 committed by GitHub
parent 33ae55f928
commit 5716831849
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 659 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

595
components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -42620,6 +42620,601 @@ exports[`renders components/date-picker/demo/multiple-debug.tsx extend context c
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-picker ant-picker-multiple ant-picker-outlined"
>
<div
class="ant-picker-selector"
>
<div
class="ant-picker-selection-overflow"
/>
<span
class="ant-picker-selection-placeholder"
>
Bamboo
</span>
</div>
<input
class="ant-picker-multiple-input"
readonly=""
value=""
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-picker-panel-container ant-picker-date-panel-container"
style="margin-left: 0px; margin-right: auto;"
tabindex="-1"
>
<div
class="ant-picker-panel-layout"
>
<div>
<div
class="ant-picker-panel"
tabindex="0"
>
<div
class="ant-picker-date-panel"
>
<div
class="ant-picker-header"
>
<button
class="ant-picker-header-super-prev-btn"
tabindex="-1"
type="button"
>
<span
class="ant-picker-super-prev-icon"
/>
</button>
<button
class="ant-picker-header-prev-btn"
tabindex="-1"
type="button"
>
<span
class="ant-picker-prev-icon"
/>
</button>
<div
class="ant-picker-header-view"
>
<button
class="ant-picker-month-btn"
tabindex="-1"
type="button"
>
Nov
</button>
<button
class="ant-picker-year-btn"
tabindex="-1"
type="button"
>
2016
</button>
</div>
<button
class="ant-picker-header-next-btn"
tabindex="-1"
type="button"
>
<span
class="ant-picker-next-icon"
/>
</button>
<button
class="ant-picker-header-super-next-btn"
tabindex="-1"
type="button"
>
<span
class="ant-picker-super-next-icon"
/>
</button>
</div>
<div
class="ant-picker-body"
>
<table
class="ant-picker-content"
>
<thead>
<tr>
<th>
Su
</th>
<th>
Mo
</th>
<th>
Tu
</th>
<th>
We
</th>
<th>
Th
</th>
<th>
Fr
</th>
<th>
Sa
</th>
</tr>
</thead>
<tbody>
<tr>
<td
class="ant-picker-cell"
title="2016-10-30"
>
<div
class="ant-picker-cell-inner"
>
30
</div>
</td>
<td
class="ant-picker-cell"
title="2016-10-31"
>
<div
class="ant-picker-cell-inner"
>
31
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-01"
>
<div
class="ant-picker-cell-inner"
>
1
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-02"
>
<div
class="ant-picker-cell-inner"
>
2
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-03"
>
<div
class="ant-picker-cell-inner"
>
3
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-04"
>
<div
class="ant-picker-cell-inner"
>
4
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-05"
>
<div
class="ant-picker-cell-inner"
>
5
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-06"
>
<div
class="ant-picker-cell-inner"
>
6
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-07"
>
<div
class="ant-picker-cell-inner"
>
7
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-08"
>
<div
class="ant-picker-cell-inner"
>
8
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-09"
>
<div
class="ant-picker-cell-inner"
>
9
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-10"
>
<div
class="ant-picker-cell-inner"
>
10
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-11"
>
<div
class="ant-picker-cell-inner"
>
11
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-12"
>
<div
class="ant-picker-cell-inner"
>
12
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-13"
>
<div
class="ant-picker-cell-inner"
>
13
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-14"
>
<div
class="ant-picker-cell-inner"
>
14
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-15"
>
<div
class="ant-picker-cell-inner"
>
15
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-16"
>
<div
class="ant-picker-cell-inner"
>
16
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-17"
>
<div
class="ant-picker-cell-inner"
>
17
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-18"
>
<div
class="ant-picker-cell-inner"
>
18
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-19"
>
<div
class="ant-picker-cell-inner"
>
19
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-20"
>
<div
class="ant-picker-cell-inner"
>
20
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-21"
>
<div
class="ant-picker-cell-inner"
>
21
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
title="2016-11-22"
>
<div
class="ant-picker-cell-inner"
>
22
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-23"
>
<div
class="ant-picker-cell-inner"
>
23
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-24"
>
<div
class="ant-picker-cell-inner"
>
24
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-25"
>
<div
class="ant-picker-cell-inner"
>
25
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-26"
>
<div
class="ant-picker-cell-inner"
>
26
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-27"
>
<div
class="ant-picker-cell-inner"
>
27
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-28"
>
<div
class="ant-picker-cell-inner"
>
28
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-29"
>
<div
class="ant-picker-cell-inner"
>
29
</div>
</td>
<td
class="ant-picker-cell ant-picker-cell-in-view"
title="2016-11-30"
>
<div
class="ant-picker-cell-inner"
>
30
</div>
</td>
<td
class="ant-picker-cell"
title="2016-12-01"
>
<div
class="ant-picker-cell-inner"
>
1
</div>
</td>
<td
class="ant-picker-cell"
title="2016-12-02"
>
<div
class="ant-picker-cell-inner"
>
2
</div>
</td>
<td
class="ant-picker-cell"
title="2016-12-03"
>
<div
class="ant-picker-cell-inner"
>
3
</div>
</td>
</tr>
<tr>
<td
class="ant-picker-cell"
title="2016-12-04"
>
<div
class="ant-picker-cell-inner"
>
4
</div>
</td>
<td
class="ant-picker-cell"
title="2016-12-05"
>
<div
class="ant-picker-cell-inner"
>
5
</div>
</td>
<td
class="ant-picker-cell"
title="2016-12-06"
>
<div
class="ant-picker-cell-inner"
>
6
</div>
</td>
<td
class="ant-picker-cell"
title="2016-12-07"
>
<div
class="ant-picker-cell-inner"
>
7
</div>
</td>
<td
class="ant-picker-cell"
title="2016-12-08"
>
<div
class="ant-picker-cell-inner"
>
8
</div>
</td>
<td
class="ant-picker-cell"
title="2016-12-09"
>
<div
class="ant-picker-cell-inner"
>
9
</div>
</td>
<td
class="ant-picker-cell"
title="2016-12-10"
>
<div
class="ant-picker-cell-inner"
>
10
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-picker ant-picker-multiple ant-picker-small ant-picker-outlined"
>

44
components/date-picker/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -3315,6 +3315,50 @@ exports[`renders components/date-picker/demo/multiple-debug.tsx correctly 1`] =
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-picker ant-picker-multiple ant-picker-outlined"
>
<div
class="ant-picker-selector"
>
<div
class="ant-picker-selection-overflow"
/>
<span
class="ant-picker-selection-placeholder"
>
Bamboo
</span>
</div>
<input
class="ant-picker-multiple-input"
readonly=""
value=""
/>
<span
class="ant-picker-suffix"
>
<span
aria-label="calendar"
class="anticon anticon-calendar"
role="img"
>
<svg
aria-hidden="true"
data-icon="calendar"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-picker ant-picker-multiple ant-picker-small ant-picker-outlined"
>

1
components/date-picker/demo/multiple-debug.tsx
View File

@ -6,6 +6,7 @@ const defaultValue = new Array(10).fill(0).map((_, index) => dayjs('2000-01-01')
const App: React.FC = () => (
<Flex vertical gap="small">
<DatePicker multiple placeholder="Bamboo" />
<DatePicker multiple defaultValue={defaultValue} size="small" />
<DatePicker multiple defaultValue={defaultValue} />
<DatePicker multiple defaultValue={defaultValue} size="large" />

18
components/date-picker/style/multiple.ts
View File

@ -65,15 +65,33 @@ const genPickerMultipleStyle: GenerateStyle<PickerToken> = (token) => {
{
[`${componentCls}${componentCls}-multiple`]: {
width: '100%',
cursor: 'text',
// ==================== Selector =====================
[`${componentCls}-selector`]: {
flex: 'auto',
padding: 0,
position: 'relative',
'&:after': {
margin: 0,
},
// ================== placeholder ==================
[`${componentCls}-selection-placeholder`]: {
position: 'absolute',
top: '50%',
insetInlineStart: token.inputPaddingHorizontalBase,
insetInlineEnd: 0,
transform: 'translateY(-50%)',
transition: `all ${token.motionDurationSlow}`,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
flex: 1,
color: token.colorTextPlaceholder,
pointerEvents: 'none',
},
},
// ===================== Overflow ====================

2
package.json
View File

@ -145,7 +145,7 @@
"rc-motion": "^2.9.0",
"rc-notification": "~5.4.0",
"rc-pagination": "~4.0.4",
"rc-picker": "~4.3.2",
"rc-picker": "~4.4.1",
"rc-progress": "~4.0.0",
"rc-rate": "~2.12.0",
"rc-resize-observer": "^1.4.0",