mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
feat: transfer support status (#34098)
* feat: transfer support status * docs: update demo
This commit is contained in:
MadCcc
GitHub
parent
bdb297ec5f
commit
ca15cc9b0a
File diff suppressed because it is too large
Load Diff
@ -3190,6 +3190,676 @@ exports[`renders ./components/transfer/demo/search.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/transfer/demo/status.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer ant-transfer-status-error"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer-list"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer-list-header"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-transfer-list-checkbox"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-transfer-list-header-selected"
|
||||
>
|
||||
0 item
|
||||
</span>
|
||||
<span
|
||||
class="ant-transfer-list-header-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list-body"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer-list-body-not-found"
|
||||
>
|
||||
<div
|
||||
class="ant-empty ant-empty-normal ant-empty-small"
|
||||
>
|
||||
<div
|
||||
class="ant-empty-image"
|
||||
>
|
||||
<svg
|
||||
class="ant-empty-img-simple"
|
||||
height="41"
|
||||
viewBox="0 0 64 41"
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
transform="translate(0 1)"
|
||||
>
|
||||
<ellipse
|
||||
class="ant-empty-img-simple-ellipse"
|
||||
cx="32"
|
||||
cy="33"
|
||||
rx="32"
|
||||
ry="7"
|
||||
/>
|
||||
<g
|
||||
class="ant-empty-img-simple-g"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<path
|
||||
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
|
||||
/>
|
||||
<path
|
||||
class="ant-empty-img-simple-path"
|
||||
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="ant-empty-description"
|
||||
>
|
||||
No Data
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-operation"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer-list-header"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-transfer-list-checkbox"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-transfer-list-header-selected"
|
||||
>
|
||||
0 item
|
||||
</span>
|
||||
<span
|
||||
class="ant-transfer-list-header-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list-body"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer-list-body-not-found"
|
||||
>
|
||||
<div
|
||||
class="ant-empty ant-empty-normal ant-empty-small"
|
||||
>
|
||||
<div
|
||||
class="ant-empty-image"
|
||||
>
|
||||
<svg
|
||||
class="ant-empty-img-simple"
|
||||
height="41"
|
||||
viewBox="0 0 64 41"
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
transform="translate(0 1)"
|
||||
>
|
||||
<ellipse
|
||||
class="ant-empty-img-simple-ellipse"
|
||||
cx="32"
|
||||
cy="33"
|
||||
rx="32"
|
||||
ry="7"
|
||||
/>
|
||||
<g
|
||||
class="ant-empty-img-simple-g"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<path
|
||||
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
|
||||
/>
|
||||
<path
|
||||
class="ant-empty-img-simple-path"
|
||||
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="ant-empty-description"
|
||||
>
|
||||
No Data
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer ant-transfer-status-warning"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer-list"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer-list-header"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-transfer-list-checkbox"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-transfer-list-header-selected"
|
||||
>
|
||||
0 item
|
||||
</span>
|
||||
<span
|
||||
class="ant-transfer-list-header-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list-body ant-transfer-list-body-with-search"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer-list-body-search-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-transfer-list-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="Search here"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list-body-not-found"
|
||||
>
|
||||
<div
|
||||
class="ant-empty ant-empty-normal ant-empty-small"
|
||||
>
|
||||
<div
|
||||
class="ant-empty-image"
|
||||
>
|
||||
<svg
|
||||
class="ant-empty-img-simple"
|
||||
height="41"
|
||||
viewBox="0 0 64 41"
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
transform="translate(0 1)"
|
||||
>
|
||||
<ellipse
|
||||
class="ant-empty-img-simple-ellipse"
|
||||
cx="32"
|
||||
cy="33"
|
||||
rx="32"
|
||||
ry="7"
|
||||
/>
|
||||
<g
|
||||
class="ant-empty-img-simple-g"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<path
|
||||
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
|
||||
/>
|
||||
<path
|
||||
class="ant-empty-img-simple-path"
|
||||
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="ant-empty-description"
|
||||
>
|
||||
No Data
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-operation"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="left"
|
||||
class="anticon anticon-left"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="left"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer-list-header"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-transfer-list-checkbox"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-transfer-list-header-selected"
|
||||
>
|
||||
0 item
|
||||
</span>
|
||||
<span
|
||||
class="ant-transfer-list-header-title"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list-body ant-transfer-list-body-with-search"
|
||||
>
|
||||
<div
|
||||
class="ant-transfer-list-body-search-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-transfer-list-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="Search here"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-transfer-list-body-not-found"
|
||||
>
|
||||
<div
|
||||
class="ant-empty ant-empty-normal ant-empty-small"
|
||||
>
|
||||
<div
|
||||
class="ant-empty-image"
|
||||
>
|
||||
<svg
|
||||
class="ant-empty-img-simple"
|
||||
height="41"
|
||||
viewBox="0 0 64 41"
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
transform="translate(0 1)"
|
||||
>
|
||||
<ellipse
|
||||
class="ant-empty-img-simple-ellipse"
|
||||
cx="32"
|
||||
cy="33"
|
||||
rx="32"
|
||||
ry="7"
|
||||
/>
|
||||
<g
|
||||
class="ant-empty-img-simple-g"
|
||||
fill-rule="nonzero"
|
||||
>
|
||||
<path
|
||||
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
|
||||
/>
|
||||
<path
|
||||
class="ant-empty-img-simple-path"
|
||||
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="ant-empty-description"
|
||||
>
|
||||
No Data
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
|
||||
29
components/transfer/demo/status.md
Normal file
29
components/transfer/demo/status.md
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
order: 10
|
||||
version: 4.19.0
|
||||
title:
|
||||
zh-CN: 自定义状态
|
||||
en-US: Status
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 `status` 为 Transfer 添加状态，可选 `error` 或者 `warning`。
|
||||
|
||||
## en-US
|
||||
|
||||
Add status to Transfer with `status`, which could be `error` or `warning`.
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Transfer, Space } from 'antd';
|
||||
|
||||
const Status = () => (
|
||||
<Space direction="vertical">
|
||||
<Transfer status="error" />
|
||||
<Transfer status="warning" showSearch />
|
||||
</Space>
|
||||
);
|
||||
|
||||
ReactDOM.render(<Status />, mountNode);
|
||||
```
|
||||
@ -36,6 +36,7 @@ One or more elements can be selected from either column, one click on the proper
|
||||
| selectedKeys | A set of keys of selected items | string\[] | \[] | |
|
||||
| showSearch | If included, a search box is shown on each column | boolean | false | |
|
||||
| showSelectAll | Show select all checkbox on the header | boolean | true | |
|
||||
| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
|
||||
| targetKeys | A set of keys of elements that are listed on the right column | string\[] | \[] | |
|
||||
| titles | A set of titles that are sorted from left to right | ReactNode\[] | - | |
|
||||
| onChange | A callback function that is executed when the transfer between columns is complete | (targetKeys, direction, moveKeys): void | - | |
|
||||
|
||||
@ -9,6 +9,8 @@ import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../conf
|
||||
import { TransferListBodyProps } from './ListBody';
|
||||
import { PaginationType } from './interface';
|
||||
import devWarning from '../_util/devWarning';
|
||||
import { FormItemStatusContext } from '../form/context';
|
||||
import { getMergedStatus, getStatusClassNames, InputStatus } from '../_util/statusUtils';
|
||||
|
||||
export { TransferListProps } from './list';
|
||||
export { TransferOperationProps } from './operation';
|
||||
@ -86,6 +88,7 @@ export interface TransferProps<RecordType> {
|
||||
selectAllLabels?: SelectAllLabel[];
|
||||
oneWay?: boolean;
|
||||
pagination?: PaginationType;
|
||||
status?: InputStatus;
|
||||
}
|
||||
|
||||
interface TransferState {
|
||||
@ -342,112 +345,119 @@ class Transfer<RecordType extends TransferItem = TransferItem> extends React.Com
|
||||
|
||||
renderTransfer = (transferLocale: TransferLocale) => (
|
||||
<ConfigConsumer>
|
||||
{({ getPrefixCls, renderEmpty, direction }: ConfigConsumerProps) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
disabled,
|
||||
operations = [],
|
||||
showSearch,
|
||||
footer,
|
||||
style,
|
||||
listStyle,
|
||||
operationStyle,
|
||||
filterOption,
|
||||
render,
|
||||
children,
|
||||
showSelectAll,
|
||||
oneWay,
|
||||
pagination,
|
||||
} = this.props;
|
||||
const prefixCls = getPrefixCls('transfer', customizePrefixCls);
|
||||
const locale = this.getLocale(transferLocale, renderEmpty);
|
||||
const { sourceSelectedKeys, targetSelectedKeys } = this.state;
|
||||
{({ getPrefixCls, renderEmpty, direction }: ConfigConsumerProps) => (
|
||||
<FormItemStatusContext.Consumer>
|
||||
{({ hasFeedback, status: contextStatus }) => {
|
||||
const {
|
||||
prefixCls: customizePrefixCls,
|
||||
className,
|
||||
disabled,
|
||||
operations = [],
|
||||
showSearch,
|
||||
footer,
|
||||
style,
|
||||
listStyle,
|
||||
operationStyle,
|
||||
filterOption,
|
||||
render,
|
||||
children,
|
||||
showSelectAll,
|
||||
oneWay,
|
||||
pagination,
|
||||
status: customStatus,
|
||||
} = this.props;
|
||||
const prefixCls = getPrefixCls('transfer', customizePrefixCls);
|
||||
const locale = this.getLocale(transferLocale, renderEmpty);
|
||||
const { sourceSelectedKeys, targetSelectedKeys } = this.state;
|
||||
const mergedStatus = getMergedStatus(contextStatus, customStatus);
|
||||
|
||||
const mergedPagination = !children && pagination;
|
||||
const mergedPagination = !children && pagination;
|
||||
|
||||
const { leftDataSource, rightDataSource } = this.separateDataSource();
|
||||
const leftActive = targetSelectedKeys.length > 0;
|
||||
const rightActive = sourceSelectedKeys.length > 0;
|
||||
const { leftDataSource, rightDataSource } = this.separateDataSource();
|
||||
const leftActive = targetSelectedKeys.length > 0;
|
||||
const rightActive = sourceSelectedKeys.length > 0;
|
||||
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
[`${prefixCls}-customize-list`]: !!children,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
className,
|
||||
);
|
||||
const cls = classNames(
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
[`${prefixCls}-customize-list`]: !!children,
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
},
|
||||
getStatusClassNames(prefixCls, mergedStatus, hasFeedback),
|
||||
className,
|
||||
);
|
||||
|
||||
const titles = this.getTitles(locale);
|
||||
const selectAllLabels = this.props.selectAllLabels || [];
|
||||
return (
|
||||
<div className={cls} style={style}>
|
||||
<List<KeyWise<RecordType>>
|
||||
prefixCls={`${prefixCls}-list`}
|
||||
titleText={titles[0]}
|
||||
dataSource={leftDataSource}
|
||||
filterOption={filterOption}
|
||||
style={this.handleListStyle(listStyle, 'left')}
|
||||
checkedKeys={sourceSelectedKeys}
|
||||
handleFilter={this.handleLeftFilter}
|
||||
handleClear={this.handleLeftClear}
|
||||
onItemSelect={this.onLeftItemSelect}
|
||||
onItemSelectAll={this.onLeftItemSelectAll}
|
||||
render={render}
|
||||
showSearch={showSearch}
|
||||
renderList={children}
|
||||
footer={footer}
|
||||
onScroll={this.handleLeftScroll}
|
||||
disabled={disabled}
|
||||
direction={direction === 'rtl' ? 'right' : 'left'}
|
||||
showSelectAll={showSelectAll}
|
||||
selectAllLabel={selectAllLabels[0]}
|
||||
pagination={mergedPagination}
|
||||
{...locale}
|
||||
/>
|
||||
<Operation
|
||||
className={`${prefixCls}-operation`}
|
||||
rightActive={rightActive}
|
||||
rightArrowText={operations[0]}
|
||||
moveToRight={this.moveToRight}
|
||||
leftActive={leftActive}
|
||||
leftArrowText={operations[1]}
|
||||
moveToLeft={this.moveToLeft}
|
||||
style={operationStyle}
|
||||
disabled={disabled}
|
||||
direction={direction}
|
||||
oneWay={oneWay}
|
||||
/>
|
||||
<List<KeyWise<RecordType>>
|
||||
prefixCls={`${prefixCls}-list`}
|
||||
titleText={titles[1]}
|
||||
dataSource={rightDataSource}
|
||||
filterOption={filterOption}
|
||||
style={this.handleListStyle(listStyle, 'right')}
|
||||
checkedKeys={targetSelectedKeys}
|
||||
handleFilter={this.handleRightFilter}
|
||||
handleClear={this.handleRightClear}
|
||||
onItemSelect={this.onRightItemSelect}
|
||||
onItemSelectAll={this.onRightItemSelectAll}
|
||||
onItemRemove={this.onRightItemRemove}
|
||||
render={render}
|
||||
showSearch={showSearch}
|
||||
renderList={children}
|
||||
footer={footer}
|
||||
onScroll={this.handleRightScroll}
|
||||
disabled={disabled}
|
||||
direction={direction === 'rtl' ? 'left' : 'right'}
|
||||
showSelectAll={showSelectAll}
|
||||
selectAllLabel={selectAllLabels[1]}
|
||||
showRemove={oneWay}
|
||||
pagination={mergedPagination}
|
||||
{...locale}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
const titles = this.getTitles(locale);
|
||||
const selectAllLabels = this.props.selectAllLabels || [];
|
||||
return (
|
||||
<div className={cls} style={style}>
|
||||
<List<KeyWise<RecordType>>
|
||||
prefixCls={`${prefixCls}-list`}
|
||||
titleText={titles[0]}
|
||||
dataSource={leftDataSource}
|
||||
filterOption={filterOption}
|
||||
style={this.handleListStyle(listStyle, 'left')}
|
||||
checkedKeys={sourceSelectedKeys}
|
||||
handleFilter={this.handleLeftFilter}
|
||||
handleClear={this.handleLeftClear}
|
||||
onItemSelect={this.onLeftItemSelect}
|
||||
onItemSelectAll={this.onLeftItemSelectAll}
|
||||
render={render}
|
||||
showSearch={showSearch}
|
||||
renderList={children}
|
||||
footer={footer}
|
||||
onScroll={this.handleLeftScroll}
|
||||
disabled={disabled}
|
||||
direction={direction === 'rtl' ? 'right' : 'left'}
|
||||
showSelectAll={showSelectAll}
|
||||
selectAllLabel={selectAllLabels[0]}
|
||||
pagination={mergedPagination}
|
||||
{...locale}
|
||||
/>
|
||||
<Operation
|
||||
className={`${prefixCls}-operation`}
|
||||
rightActive={rightActive}
|
||||
rightArrowText={operations[0]}
|
||||
moveToRight={this.moveToRight}
|
||||
leftActive={leftActive}
|
||||
leftArrowText={operations[1]}
|
||||
moveToLeft={this.moveToLeft}
|
||||
style={operationStyle}
|
||||
disabled={disabled}
|
||||
direction={direction}
|
||||
oneWay={oneWay}
|
||||
/>
|
||||
<List<KeyWise<RecordType>>
|
||||
prefixCls={`${prefixCls}-list`}
|
||||
titleText={titles[1]}
|
||||
dataSource={rightDataSource}
|
||||
filterOption={filterOption}
|
||||
style={this.handleListStyle(listStyle, 'right')}
|
||||
checkedKeys={targetSelectedKeys}
|
||||
handleFilter={this.handleRightFilter}
|
||||
handleClear={this.handleRightClear}
|
||||
onItemSelect={this.onRightItemSelect}
|
||||
onItemSelectAll={this.onRightItemSelectAll}
|
||||
onItemRemove={this.onRightItemRemove}
|
||||
render={render}
|
||||
showSearch={showSearch}
|
||||
renderList={children}
|
||||
footer={footer}
|
||||
onScroll={this.handleRightScroll}
|
||||
disabled={disabled}
|
||||
direction={direction === 'rtl' ? 'left' : 'right'}
|
||||
showSelectAll={showSelectAll}
|
||||
selectAllLabel={selectAllLabels[1]}
|
||||
showRemove={oneWay}
|
||||
pagination={mergedPagination}
|
||||
{...locale}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</FormItemStatusContext.Consumer>
|
||||
)}
|
||||
</ConfigConsumer>
|
||||
);
|
||||
|
||||
|
||||
@ -39,6 +39,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
|
||||
| selectedKeys | 设置哪些项应该被选中 | string\[] | \[] | |
|
||||
| showSearch | 是否显示搜索框 | boolean | false | |
|
||||
| showSelectAll | 是否展示全选勾选框 | boolean | true | |
|
||||
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
||||
| targetKeys | 显示在右侧框数据的 key 集合 | string\[] | \[] | |
|
||||
| titles | 标题集合，顺序从左至右 | ReactNode\[] | - | |
|
||||
| onChange | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void | - | |
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../checkbox/style/mixin';
|
||||
@import './customize';
|
||||
@import './status';
|
||||
|
||||
@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
|
||||
|
||||
@ -9,3 +9,5 @@ import '../../input/style';
|
||||
import '../../menu/style';
|
||||
import '../../dropdown/style';
|
||||
import '../../pagination/style';
|
||||
|
||||
// deps-lint-skip: form
|
||||
|
||||
31
components/transfer/style/status.less
Normal file
31
components/transfer/style/status.less
Normal file
@ -0,0 +1,31 @@
|
||||
@import '../../input/style/mixin';
|
||||
|
||||
@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
|
||||
.status-color(@color) {
|
||||
.@{transfer-prefix-cls}-list {
|
||||
border-color: @color;
|
||||
|
||||
&-search:not([disabled]) {
|
||||
border-color: @input-border-color;
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.active();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{transfer-prefix-cls} {
|
||||
&-status-error {
|
||||
.status-color(@error-color);
|
||||
}
|
||||
|
||||
&-status-warning {
|
||||
.status-color(@warning-color);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user