mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

Merge branch 'master' into feature-merge-master

Browse Source
This commit is contained in:
MadCcc 2023-11-09 10:27:56 +08:00
commit 85eea4ff06
15 changed files with 1623 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,7 +49,7 @@ Common props ref：[Common props](/docs/react/common-props)
| afterOpenChange | Callback after the animation ends when switching drawers | function(open) | - | |
| className | Config Drawer Panel className. Use `rootClassName` if want to config top dom style | string | - | |
| classNames | Config Drawer build-in module's className | `header?: string; body?: string; footer?: string; mask?: string; wrapper?: string;` | - | |
| styles | onfig Drawer build-in module's style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
| styles | Config Drawer build-in module's style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | <CloseOutlined /> | |
| contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - | |
| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false | |

30
components/message/__tests__/hooks.test.tsx
View File

@ -1,5 +1,5 @@
/* eslint-disable jsx-a11y/control-has-associated-label */
import React from 'react';
import React, { useEffect } from 'react';
import { act } from 'react-dom/test-utils';
import { StyleProvider, createCache, extractStyle } from '@ant-design/cssinjs';
import message from '..';
@ -271,4 +271,32 @@ describe('message.hooks', () => {
const styleText = extractStyle(cache, true);
expect(styleText).not.toContain('.ant-message');
});
it('component fontSize should work', () => {
const Demo = () => {
const [api, holder] = message.useMessage();
useEffect(() => {
api.info({
content: <div />,
className: 'fontSize',
});
}, []);
return (
<ConfigProvider theme={{ components: { Message: { fontSize: 20 } } }}>
{holder}
</ConfigProvider>
);
};
render(<Demo />);
const msg = document.querySelector('.fontSize');
expect(msg).toBeTruthy();
expect(msg).toHaveStyle({
fontSize: '20px',
});
});
});

32
components/popconfirm/__tests__/index.test.tsx
View File

@ -128,6 +128,38 @@ describe('Popconfirm', () => {
jest.useRealTimers();
});
it('should be controlled by visible', () => {
jest.useFakeTimers();
const popconfirm = render(
<Popconfirm title="code">
<span>show me your code</span>
</Popconfirm>,
);
expect(popconfirm.container.querySelector('.ant-popover')).toBe(null);
popconfirm.rerender(
<Popconfirm title="code" visible>
<span>show me your code</span>
</Popconfirm>,
);
expect(popconfirm.container.querySelector('.ant-popover')).not.toBe(null);
expect(popconfirm.container.querySelector('.ant-popover')?.className).not.toContain(
'ant-popover-hidden',
);
popconfirm.rerender(
<Popconfirm title="code" visible={false}>
<span>show me your code</span>
</Popconfirm>,
);
act(() => {
jest.runAllTimers();
});
expect(popconfirm.container.querySelector('.ant-popover')).not.toBe(null);
jest.useRealTimers();
});
it('should trigger onConfirm and onCancel', async () => {
const confirm = jest.fn();
const cancel = jest.fn();

4
components/popconfirm/index.tsx
View File

@ -54,8 +54,8 @@ const Popconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props, ref) =>
const { getPrefixCls } = React.useContext(ConfigContext);
const [open, setOpen] = useMergedState(false, {
value: props.open,
defaultValue: props.defaultOpen,
value: props.open ?? props.visible,
defaultValue: props.defaultOpen ?? props.defaultVisible,
});
const settingOpen = (

2
components/theme/util/genComponentStyleHook.tsx
View File

@ -235,7 +235,7 @@ export default function genComponentStyleHook<C extends OverrideComponent>(
});
flush(component, componentToken);
return [
options.resetStyle === false ? null : genCommonStyle(token, prefixCls),
options.resetStyle === false ? null : genCommonStyle(mergedToken, prefixCls),
styleInterpolation,
];
},

2
components/tree-select/demo/checkable.tsx
View File

@ -44,7 +44,7 @@ const App: React.FC = () => {
const [value, setValue] = useState(['0-0-0']);
const onChange = (newValue: string[]) => {
console.log('onChange ', value);
console.log('onChange ', newValue);
setValue(newValue);
};

6
components/tree/index.en-US.md
View File

@ -71,17 +71,17 @@ Common props ref：[Common props](/docs/react/common-props)
| titleRender | Customize tree node title render | (nodeData) => ReactNode | - | 4.5.0 |
| treeData | The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array&lt;{ key, title, children, \[disabled, selectable] }> | - | |
| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - | |
| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys}) | - | |
| onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - | |
| onDragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | - | |
| onDragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - | |
| onDragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - | |
| onDragStart | Callback function for when the onDragStart event occurs | function({event, node}) | - | |
| onDrop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - | |
| onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - | |
| onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: boolean, node}) | - | |
| onLoad | Callback function for when a treeNode is loaded | function(loadedKeys, {event, node}) | - | |
| onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - | |
| onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | |
| onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: boolean, selectedNodes, node, event}) | - | |
### TreeNode props

6
components/tree/index.zh-CN.md
View File

@ -73,17 +73,17 @@ demo:
| titleRender | 自定义渲染节点 | (nodeData) => ReactNode | - | 4.5.0 |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | array&lt;{key, title, children, \[disabled, selectable]}> | - | |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - | |
| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: boolean, checkedNodes, node, event, halfCheckedKeys}) | - | |
| onDragEnd | dragend 触发时调用 | function({event, node}) | - | |
| onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - | |
| onDragLeave | dragleave 触发时调用 | function({event, node}) | - | |
| onDragOver | dragover 触发时调用 | function({event, node}) | - | |
| onDragStart | 开始拖拽时调用 | function({event, node}) | - | |
| onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - | |
| onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - | |
| onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: boolean, node}) | - | |
| onLoad | 节点加载完毕时触发 | function(loadedKeys, {event, node}) | - | |
| onRightClick | 响应右键点击 | function({event, node}) | - | |
| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | |
| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: boolean, selectedNodes, node, event}) | - | |
### TreeNode props

754
components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -519,6 +519,760 @@ exports[`renders components/upload/demo/customize-progress-bar.tsx extend contex
exports[`renders components/upload/demo/customize-progress-bar.tsx extend context correctly 2`] = `[]`;
exports[`renders components/upload/demo/debug-disabled.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
<span
class="ant-upload-wrapper"
>
<div
class="ant-upload ant-upload-select ant-upload-disabled"
>
<span
class="ant-upload ant-upload-disabled"
role="button"
>
<input
accept=""
disabled=""
style="display: none;"
type="file"
/>
Click Text to Upload
</span>
</div>
<div
class="ant-upload-list ant-upload-list-text"
/>
</span>
</div>
<div
class="ant-space-item"
>
<span
class="ant-upload-wrapper"
>
<div
class="ant-upload ant-upload-select ant-upload-disabled"
>
<span
class="ant-upload ant-upload-disabled"
role="button"
>
<input
accept=""
disabled=""
style="display: none;"
type="file"
/>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="upload"
class="anticon anticon-upload"
role="img"
>
<svg
aria-hidden="true"
data-icon="upload"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
/>
</svg>
</span>
</span>
<span>
Click to Upload
</span>
</button>
</span>
</div>
<div
class="ant-upload-list ant-upload-list-text"
/>
</span>
</div>
<div
class="ant-space-item"
>
<span
class="ant-upload-wrapper ant-upload-picture-card-wrapper"
>
<div
class="ant-upload-list ant-upload-list-picture-card"
>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-done"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="image.png"
class="ant-upload-list-item-image"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
<span
class="ant-upload-list-item-actions"
>
<a
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-done"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="image.png"
class="ant-upload-list-item-image"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
<span
class="ant-upload-list-item-actions"
>
<a
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-uploading"
>
<div
class="ant-upload-list-item-thumbnail"
>
Uploading...
</div>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-error"
>
<div
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
>
<span
aria-label="picture"
class="anticon anticon-picture"
role="img"
>
<svg
aria-hidden="true"
data-icon="picture"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
fill="#1677ff"
/>
<path
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
fill="#e6f4ff"
/>
<path
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
fill="#e6f4ff"
/>
<path
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
fill="#e6f4ff"
/>
<path
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
fill="#1677ff"
/>
</svg>
</span>
</div>
<span
class="ant-upload-list-item-name"
title="image.png"
>
image.png
</span>
<span
class="ant-upload-list-item-actions"
>
<a
rel="noopener noreferrer"
style="pointer-events: none; opacity: 0.5;"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Upload error
</div>
</div>
</div>
</div>
<div
class="ant-upload ant-upload-select ant-upload-disabled"
>
<span
class="ant-upload ant-upload-disabled"
role="button"
>
<input
accept=""
disabled=""
style="display: none;"
type="file"
/>
<div>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<svg
aria-hidden="true"
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
<div
style="margin-top: 8px;"
>
Upload
</div>
</div>
</span>
</div>
</div>
</span>
</div>
<div
class="ant-space-item"
>
<span
class="ant-upload-wrapper ant-upload-picture-circle-wrapper"
>
<div
class="ant-upload-list ant-upload-list-picture-circle"
>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-done"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="image.png"
class="ant-upload-list-item-image"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
<span
class="ant-upload-list-item-actions"
>
<a
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-done"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="image.png"
class="ant-upload-list-item-image"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
<span
class="ant-upload-list-item-actions"
>
<a
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-uploading"
>
<div
class="ant-upload-list-item-thumbnail"
>
Uploading...
</div>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-error"
>
<div
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
>
<span
aria-label="picture"
class="anticon anticon-picture"
role="img"
>
<svg
aria-hidden="true"
data-icon="picture"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
fill="#1677ff"
/>
<path
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
fill="#e6f4ff"
/>
<path
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
fill="#e6f4ff"
/>
<path
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
fill="#e6f4ff"
/>
<path
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
fill="#1677ff"
/>
</svg>
</span>
</div>
<span
class="ant-upload-list-item-name"
title="image.png"
>
image.png
</span>
<span
class="ant-upload-list-item-actions"
>
<a
rel="noopener noreferrer"
style="pointer-events: none; opacity: 0.5;"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Upload error
</div>
</div>
</div>
</div>
<div
class="ant-upload ant-upload-select ant-upload-disabled"
>
<span
class="ant-upload ant-upload-disabled"
role="button"
>
<input
accept=""
disabled=""
style="display: none;"
type="file"
/>
<div>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<svg
aria-hidden="true"
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
<div
style="margin-top: 8px;"
>
Upload
</div>
</div>
</span>
</div>
</div>
</span>
</div>
<div
class="ant-space-item"
>
<span
class="ant-upload-wrapper"
>
<div
class="ant-upload ant-upload-drag ant-upload-disabled"
>
<span
class="ant-upload ant-upload-disabled ant-upload-btn"
role="button"
>
<input
accept=""
disabled=""
style="display: none;"
type="file"
/>
<div
class="ant-upload-drag-container"
>
<p
class="ant-upload-drag-icon"
>
<span
aria-label="inbox"
class="anticon anticon-inbox"
role="img"
>
<svg
aria-hidden="true"
data-icon="inbox"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
/>
</svg>
</span>
</p>
<p
class="ant-upload-text"
>
Click or drag file to this area to upload
</p>
<p
class="ant-upload-hint"
>
Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.
</p>
</div>
</span>
</div>
<div
class="ant-upload-list ant-upload-list-text"
/>
</span>
</div>
</div>
`;
exports[`renders components/upload/demo/debug-disabled.tsx extend context correctly 2`] = `[]`;
exports[`renders components/upload/demo/defaultFileList.tsx extend context correctly 1`] = `
<span
class="ant-upload-wrapper"

714
components/upload/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -492,6 +492,720 @@ exports[`renders components/upload/demo/customize-progress-bar.tsx correctly 1`]
</span>
`;
exports[`renders components/upload/demo/debug-disabled.tsx correctly 1`] = `
<div
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
<span
class="ant-upload-wrapper"
>
<div
class="ant-upload ant-upload-select ant-upload-disabled"
>
<span
class="ant-upload ant-upload-disabled"
role="button"
>
<input
accept=""
disabled=""
style="display:none"
type="file"
/>
Click Text to Upload
</span>
</div>
<div
class="ant-upload-list ant-upload-list-text"
/>
</span>
</div>
<div
class="ant-space-item"
>
<span
class="ant-upload-wrapper"
>
<div
class="ant-upload ant-upload-select ant-upload-disabled"
>
<span
class="ant-upload ant-upload-disabled"
role="button"
>
<input
accept=""
disabled=""
style="display:none"
type="file"
/>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="upload"
class="anticon anticon-upload"
role="img"
>
<svg
aria-hidden="true"
data-icon="upload"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
/>
</svg>
</span>
</span>
<span>
Click to Upload
</span>
</button>
</span>
</div>
<div
class="ant-upload-list ant-upload-list-text"
/>
</span>
</div>
<div
class="ant-space-item"
>
<span
class="ant-upload-wrapper ant-upload-picture-card-wrapper"
>
<div
class="ant-upload-list ant-upload-list-picture-card"
>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-done"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="image.png"
class="ant-upload-list-item-image"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
<span
class="ant-upload-list-item-actions"
>
<a
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-done"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="image.png"
class="ant-upload-list-item-image"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
<span
class="ant-upload-list-item-actions"
>
<a
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-uploading"
>
<div
class="ant-upload-list-item-thumbnail"
>
Uploading...
</div>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-error"
>
<div
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
>
<span
aria-label="picture"
class="anticon anticon-picture"
role="img"
>
<svg
aria-hidden="true"
data-icon="picture"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
fill="#1677ff"
/>
<path
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
fill="#e6f4ff"
/>
<path
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
fill="#e6f4ff"
/>
<path
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
fill="#e6f4ff"
/>
<path
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
fill="#1677ff"
/>
</svg>
</span>
</div>
<span
class="ant-upload-list-item-name"
title="image.png"
>
image.png
</span>
<span
class="ant-upload-list-item-actions"
>
<a
rel="noopener noreferrer"
style="pointer-events:none;opacity:0.5"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
</div>
<div
class="ant-upload ant-upload-select ant-upload-disabled"
>
<span
class="ant-upload ant-upload-disabled"
role="button"
>
<input
accept=""
disabled=""
style="display:none"
type="file"
/>
<div>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<svg
aria-hidden="true"
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
<div
style="margin-top:8px"
>
Upload
</div>
</div>
</span>
</div>
</div>
</span>
</div>
<div
class="ant-space-item"
>
<span
class="ant-upload-wrapper ant-upload-picture-circle-wrapper"
>
<div
class="ant-upload-list ant-upload-list-picture-circle"
>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-done"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="image.png"
class="ant-upload-list-item-image"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
<span
class="ant-upload-list-item-actions"
>
<a
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-done"
>
<a
class="ant-upload-list-item-thumbnail"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="image.png"
class="ant-upload-list-item-image"
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
</a>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
<span
class="ant-upload-list-item-actions"
>
<a
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-uploading"
>
<div
class="ant-upload-list-item-thumbnail"
>
Uploading...
</div>
<a
class="ant-upload-list-item-name"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer"
target="_blank"
title="image.png"
>
image.png
</a>
</div>
</div>
<div
class="ant-upload-list-item-container"
>
<div
class="ant-upload-list-item ant-upload-list-item-error"
>
<div
class="ant-upload-list-item-thumbnail ant-upload-list-item-file"
>
<span
aria-label="picture"
class="anticon anticon-picture"
role="img"
>
<svg
aria-hidden="true"
data-icon="picture"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792zm0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
fill="#1677ff"
/>
<path
d="M424.6 765.8l-150.1-178L136 752.1V792h752v-30.4L658.1 489z"
fill="#e6f4ff"
/>
<path
d="M136 652.7l132.4-157c3.2-3.8 9-3.8 12.2 0l144 170.7L652 396.8c3.2-3.8 9-3.8 12.2 0L888 662.2V232H136v420.7zM304 280a88 88 0 110 176 88 88 0 010-176z"
fill="#e6f4ff"
/>
<path
d="M276 368a28 28 0 1056 0 28 28 0 10-56 0z"
fill="#e6f4ff"
/>
<path
d="M304 456a88 88 0 100-176 88 88 0 000 176zm0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
fill="#1677ff"
/>
</svg>
</span>
</div>
<span
class="ant-upload-list-item-name"
title="image.png"
>
image.png
</span>
<span
class="ant-upload-list-item-actions"
>
<a
rel="noopener noreferrer"
style="pointer-events:none;opacity:0.5"
target="_blank"
title="Preview file"
>
<span
aria-label="eye"
class="anticon anticon-eye"
role="img"
>
<svg
aria-hidden="true"
data-icon="eye"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
/>
</svg>
</span>
</a>
</span>
</div>
</div>
<div
class="ant-upload ant-upload-select ant-upload-disabled"
>
<span
class="ant-upload ant-upload-disabled"
role="button"
>
<input
accept=""
disabled=""
style="display:none"
type="file"
/>
<div>
<span
aria-label="plus"
class="anticon anticon-plus"
role="img"
>
<svg
aria-hidden="true"
data-icon="plus"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
/>
<path
d="M192 474h672q8 0 8 8v60q0 8-8 8H160q-8 0-8-8v-60q0-8 8-8z"
/>
</svg>
</span>
<div
style="margin-top:8px"
>
Upload
</div>
</div>
</span>
</div>
</div>
</span>
</div>
<div
class="ant-space-item"
>
<span
class="ant-upload-wrapper"
>
<div
class="ant-upload ant-upload-drag ant-upload-disabled"
>
<span
class="ant-upload ant-upload-disabled ant-upload-btn"
role="button"
>
<input
accept=""
disabled=""
style="display:none"
type="file"
/>
<div
class="ant-upload-drag-container"
>
<p
class="ant-upload-drag-icon"
>
<span
aria-label="inbox"
class="anticon anticon-inbox"
role="img"
>
<svg
aria-hidden="true"
data-icon="inbox"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"
/>
</svg>
</span>
</p>
<p
class="ant-upload-text"
>
Click or drag file to this area to upload
</p>
<p
class="ant-upload-hint"
>
Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.
</p>
</div>
</span>
</div>
<div
class="ant-upload-list ant-upload-list-text"
/>
</span>
</div>
</div>
`;
exports[`renders components/upload/demo/defaultFileList.tsx correctly 1`] = `
<span
class="ant-upload-wrapper"

7
components/upload/demo/debug-disabled.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
Disabled Style Debug.
## en-US
Disabled Style Debug.

69
components/upload/demo/debug-disabled.tsx Normal file
View File

@ -0,0 +1,69 @@
import React from 'react';
import { InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, Space, Upload } from 'antd';
import type { UploadFile } from 'antd/es/upload/interface';
const { Dragger } = Upload;
const fileList: UploadFile[] = [
{
uid: '-1',
name: 'image.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
{
uid: '-2',
name: 'image.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
{
uid: '-xxx',
percent: 50,
name: 'image.png',
status: 'uploading',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
{
uid: '-5',
name: 'image.png',
status: 'error',
},
];
const App: React.FC = () => {
const uploadButton = (
<div>
<PlusOutlined />
<div style={{ marginTop: 8 }}>Upload</div>
</div>
);
return (
<Space direction="vertical">
<Upload disabled>Click Text to Upload</Upload>
<Upload disabled>
<Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>
<Upload name="avatar" listType="picture-card" fileList={fileList} disabled>
{uploadButton}
</Upload>
<Upload name="avatar" listType="picture-circle" fileList={fileList} disabled>
{uploadButton}
</Upload>
<Dragger disabled>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibited from uploading company data or
other banned files.
</p>
</Dragger>
</Space>
);
};
export default App;

3
components/upload/index.en-US.md
View File

@ -42,6 +42,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
<code src="./demo/crop-image.tsx">Crop image before uploading</code>
<code src="./demo/customize-progress-bar.tsx">Customize Progress Bar</code>
<code src="./demo/component-token.tsx" debug>Component Token</code>
<code src="./demo/debug-disabled.tsx" debug>Debug Disabled Styles</code>
## API
@ -56,7 +57,7 @@ Common props ref：[Common props](/docs/react/common-props)
| data | Uploading extra params or function which can return uploading extra params | object \| (file) => object \| Promise&lt;object> | - | |
| defaultFileList | Default list of files that have been uploaded | object\[] | - | |
| directory | Support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false | |
| disabled | Disable upload button | boolean | false | |
| disabled | Disable upload button | boolean | false | When customizing Upload children, please pass the disabled attribute to the child node at the same time to ensure the disabled rendering effect is consistent. |
| fileList | List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it | [UploadFile](#uploadfile)\[] | - | |
| headers | Set request headers, valid above IE10 | object | - | |
| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |

3
components/upload/index.zh-CN.md
View File

@ -43,6 +43,7 @@ demo:
<code src="./demo/crop-image.tsx">上传前裁切图片</code>
<code src="./demo/customize-progress-bar.tsx">自定义进度条样式</code>
<code src="./demo/component-token.tsx" debug>组件 Token</code>
<code src="./demo/debug-disabled.tsx" debug>Debug Disabled Styles</code>
## API
@ -57,7 +58,7 @@ demo:
| data | 上传所需额外参数或返回上传额外参数的方法 | object\|(file) => object \| Promise&lt;object> | - | |
| defaultFileList | 默认已经上传的文件列表 | object\[] | - | |
| directory | 支持上传文件夹（[caniuse](https://caniuse.com/#feat=input-file-directory)） | boolean | false | |
| disabled | 是否禁用 | boolean | false | |
| disabled | 是否禁用 | boolean | false | 对于自定义 Upload children 时请将 disabled 属性同时传给 child node 确保 disabled 渲染效果保持一致 |
| fileList | 已经上传的文件列表（受控），使用此参数时，如果遇到 `onChange` 只调用一次的问题，请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | [UploadFile](#uploadfile)\[] | - | |
| headers | 设置上传的请求头部，IE10 以上有效 | object | - | |
| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |

6
package.json
View File

@ -171,8 +171,8 @@
"@biomejs/biome": "^1.0.0",
"@codesandbox/sandpack-react": "^2.9.0",
"@dnd-kit/core": "^6.0.7",
"@dnd-kit/modifiers": "^6.0.1",
"@dnd-kit/sortable": "^7.0.2",
"@dnd-kit/modifiers": "^7.0.0",
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.1",
"@emotion/react": "^11.10.4",
"@emotion/server": "^11.4.0",
@ -188,7 +188,7 @@
"@types/gtag.js": "^0.0.17",
"@types/http-server": "^0.12.1",
"@types/inquirer": "^9.0.3",
"@types/isomorphic-fetch": "^0.0.38",
"@types/isomorphic-fetch": "^0.0.39",
"@types/jest": "^29.0.0",
"@types/jest-axe": "^3.5.3",
"@types/jest-environment-puppeteer": "^5.0.0",