mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
docs: add getValueProps demo (#49072)
* docs: add getValueProps demo * feat: normalize * feat: normalize * feat: name * feat: name * feat: doc * feat: date * feat: tz * feat: tz
This commit is contained in:
叶枫
GitHub
parent
81f88c5c22
commit
54286673de
3
.github/workflows/test.yml
vendored
3
.github/workflows/test.yml
vendored
@ -4,6 +4,9 @@ name: ✅ test
|
||||
|
||||
on: [push, pull_request]
|
||||
|
||||
env:
|
||||
TZ: Asia/Shanghai
|
||||
|
||||
# Cancel prev CI if new commit come
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
|
||||
|
||||
@ -7,6 +7,9 @@ on:
|
||||
branches: [master, feature]
|
||||
types: [opened, synchronize, reopened]
|
||||
|
||||
env:
|
||||
TZ: Asia/Shanghai
|
||||
|
||||
# Cancel prev CI if new commit come
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
|
||||
|
||||
@ -7413,6 +7413,711 @@ exports[`renders components/form/demo/form-item-path.tsx extend context correctl
|
||||
|
||||
exports[`renders components/form/demo/form-item-path.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/form/demo/getValueProps-normalize.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="getValueProps"
|
||||
style="max-width: 600px;"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-8 ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class="ant-form-item-required"
|
||||
for="getValueProps_date"
|
||||
title="Date"
|
||||
>
|
||||
Date
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-16 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-picker ant-picker-outlined"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
id="getValueProps_date"
|
||||
placeholder="Select date"
|
||||
size="12"
|
||||
value="2024-05-11"
|
||||
/>
|
||||
<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>
|
||||
<span
|
||||
class="ant-picker-clear"
|
||||
role="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</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"
|
||||
>
|
||||
May
|
||||
</button>
|
||||
<button
|
||||
class="ant-picker-year-btn"
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
2024
|
||||
</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="2024-04-28"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
28
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2024-04-29"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
29
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2024-04-30"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-01"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-02"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-03"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-04"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-05"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-06"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-07"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-08"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-09"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
9
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-10"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
10
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-hover ant-picker-cell-selected ant-picker-cell-in-view"
|
||||
title="2024-05-11"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
11
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-12"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
12
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-13"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
13
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-14"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
14
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-15"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
15
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-16"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
16
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-17"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
17
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-18"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
18
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-19"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
19
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-20"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
20
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-21"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
21
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-22"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
22
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-23"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
23
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-24"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
24
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-25"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
25
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-26"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
26
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-27"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
27
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-28"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
28
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-29"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
29
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-30"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
30
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell ant-picker-cell-in-view"
|
||||
title="2024-05-31"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
31
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2024-06-01"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2024-06-02"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2024-06-03"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2024-06-04"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2024-06-05"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2024-06-06"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
6
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2024-06-07"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
7
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="ant-picker-cell"
|
||||
title="2024-06-08"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-cell-inner"
|
||||
>
|
||||
8
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-footer"
|
||||
>
|
||||
<ul
|
||||
class="ant-picker-ranges"
|
||||
>
|
||||
<li
|
||||
class="ant-picker-now"
|
||||
>
|
||||
<a
|
||||
aria-disabled="false"
|
||||
class="ant-picker-now-btn"
|
||||
>
|
||||
Today
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/getValueProps-normalize.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/form/demo/global-state.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<form
|
||||
|
||||
@ -4340,6 +4340,140 @@ exports[`renders components/form/demo/form-item-path.tsx correctly 1`] = `
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/getValueProps-normalize.tsx correctly 1`] = `
|
||||
<form
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="getValueProps"
|
||||
style="max-width:600px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-8 ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class="ant-form-item-required"
|
||||
for="getValueProps_date"
|
||||
title="Date"
|
||||
>
|
||||
Date
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-16 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-picker ant-picker-outlined"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
id="getValueProps_date"
|
||||
placeholder="Select date"
|
||||
size="12"
|
||||
value="2024-05-11"
|
||||
/>
|
||||
<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>
|
||||
<span
|
||||
class="ant-picker-clear"
|
||||
role="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-16 ant-col-offset-8 ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/global-state.tsx correctly 1`] = `
|
||||
Array [
|
||||
<form
|
||||
|
||||
7
components/form/demo/getValueProps-normalize.md
Normal file
7
components/form/demo/getValueProps-normalize.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
配合 `getValueProps` 和 `normalize`，可以转换 `value` 的格式，如将时间戳转成 `dayjs` 对象再传给 `DatePicker`。
|
||||
|
||||
## en-US
|
||||
|
||||
By combining `getValueProps` and `normalize`, it is possible to convert the format of `value`, such as converting the timestamp into a `dayjs` object and then passing it to the `DatePicker`.
|
||||
42
components/form/demo/getValueProps-normalize.tsx
Normal file
42
components/form/demo/getValueProps-normalize.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import type { FormProps } from 'antd';
|
||||
import { Button, DatePicker, Form } from 'antd';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
type FieldType = {
|
||||
date?: string;
|
||||
};
|
||||
|
||||
const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Form
|
||||
name="getValueProps"
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
style={{ maxWidth: 600 }}
|
||||
initialValues={{ date: '1715356800000' }}
|
||||
onFinish={onFinish}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item<FieldType>
|
||||
label="Date"
|
||||
name="date"
|
||||
rules={[{ required: true }]}
|
||||
getValueProps={(value) => ({ value: value && dayjs(Number(value)) })}
|
||||
normalize={(value) => value && `${dayjs(value).valueOf()}`}
|
||||
>
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -47,6 +47,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
|
||||
<code src="./demo/validate-static.tsx">Customized Validation</code>
|
||||
<code src="./demo/dynamic-rule.tsx">Dynamic Rules</code>
|
||||
<code src="./demo/form-dependencies.tsx">Dependencies</code>
|
||||
<code src="./demo/getValueProps-normalize.tsx">getValueProps + normalize</code>
|
||||
<code src="./demo/validate-scroll-to-field.tsx" iframe="360">Slide to error field</code>
|
||||
<code src="./demo/validate-other.tsx">Other Form Controls</code>
|
||||
<code src="./demo/disabled-input-debug.tsx" debug>Disabled Input Debug</code>
|
||||
|
||||
@ -50,6 +50,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
|
||||
<code src="./demo/form-dependencies.tsx">校验与更新依赖</code>
|
||||
<code src="./demo/validate-scroll-to-field.tsx" iframe="360">滑动到错误字段</code>
|
||||
<code src="./demo/validate-other.tsx">校验其他组件</code>
|
||||
<code src="./demo/getValueProps-normalize.tsx">getValueProps + normalize</code>
|
||||
<code src="./demo/disabled-input-debug.tsx" debug>Disabled Input Debug</code>
|
||||
<code src="./demo/label-debug.tsx" debug>测试 label 省略</code>
|
||||
<code src="./demo/col-24-debug.tsx" debug>测试特殊 col 24 用法</code>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user