mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

Merge branch 'feature' into master-to-merge

Browse Source
This commit is contained in:
偏右 2019-09-14 15:40:33 +08:00 committed by GitHub
commit 1200f7fe00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
49 changed files with 4140 additions and 1928 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/anchor/Anchor.tsx
View File

@ -62,6 +62,8 @@ export interface AnchorProps {
) => void; ) => void;
/** Scroll to target offset value, if none, it's offsetTop prop value or 0. */ /** Scroll to target offset value, if none, it's offsetTop prop value or 0. */
targetOffset?: number; targetOffset?: number;
/** Listening event when scrolling change active link */
onChange?: (currentActiveLink: string) => void;
} }
export interface AnchorState { export interface AnchorState {
@ -205,7 +207,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
handleScrollTo = (link: string) => { handleScrollTo = (link: string) => {
const { offsetTop, getContainer, targetOffset } = this.props as AnchorDefaultProps; const { offsetTop, getContainer, targetOffset } = this.props as AnchorDefaultProps;
this.setState({ activeLink: link }); this.setCurrentActiveLink(link);
const container = getContainer(); const container = getContainer();
const scrollTop = getScroll(container, true); const scrollTop = getScroll(container, true);
const sharpLinkMatch = sharpMatcherRegx.exec(link); const sharpLinkMatch = sharpMatcherRegx.exec(link);
@ -234,21 +236,30 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
this.inkNode = node; this.inkNode = node;
}; };
setCurrentActiveLink = (link: string) => {
const { activeLink } = this.state;
const { onChange } = this.props;
if (activeLink !== link) {
this.setState({
activeLink: link,
});
if (onChange) {
onChange(link);
}
}
};
handleScroll = () => { handleScroll = () => {
if (this.animating) { if (this.animating) {
return; return;
} }
const { activeLink } = this.state;
const { offsetTop, bounds, targetOffset } = this.props; const { offsetTop, bounds, targetOffset } = this.props;
const currentActiveLink = this.getCurrentAnchor( const currentActiveLink = this.getCurrentAnchor(
targetOffset !== undefined ? targetOffset : offsetTop || 0, targetOffset !== undefined ? targetOffset : offsetTop || 0,
bounds, bounds,
); );
if (activeLink !== currentActiveLink) { this.setCurrentActiveLink(currentActiveLink);
this.setState({
activeLink: currentActiveLink,
});
}
}; };
updateInk = () => { updateInk = () => {

14
components/anchor/__tests__/Anchor.test.js
View File

@ -322,4 +322,18 @@ describe('Anchor Render', () => {
dateNowMock.mockRestore(); dateNowMock.mockRestore();
jest.useRealTimers(); jest.useRealTimers();
}); });
it('Anchor onChange prop', async () => {
const onChange = jest.fn();
const wrapper = mount(
<Anchor onChange={onChange}>
<Link href="#API1" title="API1" />
<Link href="#API2" title="API2" />
</Anchor>,
);
expect(onChange).toHaveBeenCalledTimes(1);
wrapper.instance().handleScrollTo('#API2');
expect(onChange).toHaveBeenCalledTimes(2);
expect(onChange).toHaveBeenCalledWith('#API2');
});
}); });

74
components/anchor/__tests__/__snapshots__/demo.test.js.snap
View File

@ -166,6 +166,80 @@ exports[`renders ./components/anchor/demo/customizeHighlight.md correctly 1`] =
</div> </div>
`; `;
exports[`renders ./components/anchor/demo/onChange.md correctly 1`] = `
<div
class="ant-anchor-wrapper"
style="max-height:100vh"
>
<div
class="ant-anchor fixed"
>
<div
class="ant-anchor-ink"
>
<span
class="ant-anchor-ink-ball"
/>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-basic"
title="Basic demo"
>
Basic demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#components-anchor-demo-static"
title="Static demo"
>
Static demo
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#API"
title="API"
>
API
</a>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#Anchor-Props"
title="Anchor Props"
>
Anchor Props
</a>
</div>
<div
class="ant-anchor-link"
>
<a
class="ant-anchor-link-title"
href="#Link-Props"
title="Link Props"
>
Link Props
</a>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = ` exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = `
<div <div
class="ant-anchor-wrapper" class="ant-anchor-wrapper"

36
components/anchor/demo/onChange.md Normal file
View File

@ -0,0 +1,36 @@
---
order: 6
title:
zh-CN: 监听锚点链接改变
en-US: Listening for anchor link change
---
## zh-CN
监听锚点链接改变
## en-US
Listening for anchor link change.
```jsx
import { Anchor } from 'antd';
const { Link } = Anchor;
const onChange = link => {
console.log('Anchor:OnChange', link);
};
ReactDOM.render(
<Anchor affix={false} onChange={onChange}>
<Link href="#components-anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" />
<Link href="#API" title="API">
<Link href="#Anchor-Props" title="Anchor Props" />
<Link href="#Link-Props" title="Link Props" />
</Link>
</Anchor>,
mountNode,
);
```

2
components/anchor/demo/targetOffset.md
View File

@ -1,5 +1,5 @@
--- ---
order: 4 order: 5
title: title:
zh-CN: 设置锚点滚动偏移量 zh-CN: 设置锚点滚动偏移量
en-US: Set Anchor scroll offset en-US: Set Anchor scroll offset

1
components/anchor/index.en-US.md
View File

@ -26,6 +26,7 @@ For displaying anchor hyperlinks on page and jumping between them.
| onClick | set the handler to handle `click` event | Function(e: Event, link: Object) | - | 3.9.0 | | onClick | set the handler to handle `click` event | Function(e: Event, link: Object) | - | 3.9.0 |
| getCurrentAnchor | Customize the anchor highlight | () => string | - | 3.22.0 | | getCurrentAnchor | Customize the anchor highlight | () => string | - | 3.22.0 |
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 3.22.0 | | targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 3.22.0 |
| onChange | Listening for anchor link change | (currentActiveLink: string) => void | | 3.24.0 |
### Link Props ### Link Props

1
components/anchor/index.zh-CN.md
View File

@ -27,6 +27,7 @@ title: Anchor
| onClick | `click` 事件的 handler | Function(e: Event, link: Object) | - | 3.9.0 | | onClick | `click` 事件的 handler | Function(e: Event, link: Object) | - | 3.9.0 |
| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 3.22.0 | | getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 3.22.0 |
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 3.22.0 | | targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 3.22.0 |
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | | 3.24.0 |
### Link Props ### Link Props

249
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -11085,7 +11085,7 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
/> />
<div <div
class="config-slider-track" class="config-slider-track"
style="left:0%;width:0%" style="left:0%;right:auto;width:0%"
/> />
<div <div
class="config-slider-step" class="config-slider-step"
@ -11097,7 +11097,7 @@ exports[`ConfigProvider components Slider configProvider 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="config-slider-handle config-tooltip-open" class="config-slider-handle config-tooltip-open"
role="slider" role="slider"
style="left:0%" style="left:0%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -11134,7 +11134,7 @@ exports[`ConfigProvider components Slider normal 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:0%" style="left:0%;right:auto;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -11146,7 +11146,7 @@ exports[`ConfigProvider components Slider normal 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle ant-tooltip-open" class="ant-slider-handle ant-tooltip-open"
role="slider" role="slider"
style="left:0%" style="left:0%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -11183,7 +11183,7 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
/> />
<div <div
class="prefix-Slider-track" class="prefix-Slider-track"
style="left:0%;width:0%" style="left:0%;right:auto;width:0%"
/> />
<div <div
class="prefix-Slider-step" class="prefix-Slider-step"
@ -11195,7 +11195,7 @@ exports[`ConfigProvider components Slider prefixCls 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="prefix-Slider-handle prefix-Slider-tooltip-open" class="prefix-Slider-handle prefix-Slider-tooltip-open"
role="slider" role="slider"
style="left:0%" style="left:0%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -17309,7 +17309,7 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
class="config-upload-list config-upload-list-text" class="config-upload-list config-upload-list-text"
> >
<div <div
class="config-upload-list-item config-upload-list-item-done" class="config-upload-list-item config-upload-list-item-done config-upload-list-item-list-type-text"
> >
<div <div
class="config-upload-list-item-info" class="config-upload-list-item-info"
@ -17335,34 +17335,67 @@ exports[`ConfigProvider components Upload configProvider 1`] = `
</svg> </svg>
</i> </i>
<span <span
class="config-upload-list-item-name" class="config-upload-list-item-name config-upload-list-item-name-icon-count-2"
title="xxx.png" title="xxx.png"
> >
xxx.png xxx.png
<span
class="config-upload-list-item-card-actions "
>
<a
title="Download file"
>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
</a>
<a
title="Remove file"
>
<i
aria-label="icon: delete"
class="anticon anticon-delete"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</i>
</a>
</span>
</span> </span>
</span> </span>
</div> </div>
<i
aria-label="icon: close"
class="anticon anticon-close"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</div> </div>
</div> </div>
</span> </span>
@ -17379,7 +17412,7 @@ exports[`ConfigProvider components Upload normal 1`] = `
class="ant-upload-list ant-upload-list-text" class="ant-upload-list ant-upload-list-text"
> >
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -17405,34 +17438,67 @@ exports[`ConfigProvider components Upload normal 1`] = `
</svg> </svg>
</i> </i>
<span <span
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
title="xxx.png" title="xxx.png"
> >
xxx.png xxx.png
<span
class="ant-upload-list-item-card-actions "
>
<a
title="Download file"
>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
</a>
<a
title="Remove file"
>
<i
aria-label="icon: delete"
class="anticon anticon-delete"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</i>
</a>
</span>
</span> </span>
</span> </span>
</div> </div>
<i
aria-label="icon: close"
class="anticon anticon-close"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</div> </div>
</div> </div>
</span> </span>
@ -17449,7 +17515,7 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
class="ant-upload-list ant-upload-list-text" class="ant-upload-list ant-upload-list-text"
> >
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -17475,34 +17541,67 @@ exports[`ConfigProvider components Upload prefixCls 1`] = `
</svg> </svg>
</i> </i>
<span <span
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
title="xxx.png" title="xxx.png"
> >
xxx.png xxx.png
<span
class="ant-upload-list-item-card-actions "
>
<a
title="Download file"
>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
</a>
<a
title="Remove file"
>
<i
aria-label="icon: delete"
class="anticon anticon-delete"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</i>
</a>
</span>
</span> </span>
</span> </span>
</div> </div>
<i
aria-label="icon: close"
class="anticon anticon-close"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</div> </div>
</div> </div>
</span> </span>

16
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3343,7 +3343,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:0%" style="left:0%;right:auto;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -3380,7 +3380,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%" style="left:0%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -3388,37 +3388,37 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
> >
A A
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:20%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
> >
B B
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:40%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
> >
C C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:60%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
> >
D D
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:80%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
> >
E E
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
> >
F F
</span> </span>

32
components/grid/__tests__/__snapshots__/demo.test.js.snap
View File

@ -480,7 +480,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:20%" style="left:0%;right:auto;width:20%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -517,7 +517,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
aria-valuenow="1" aria-valuenow="1"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:20%" style="left:20%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -525,37 +525,37 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
> >
8 8
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:20%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
> >
16 16
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:40%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
> >
24 24
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:60%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
> >
32 32
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:80%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
> >
40 40
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
> >
48 48
</span> </span>
@ -578,7 +578,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:40%" style="left:0%;right:auto;width:40%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -615,7 +615,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
aria-valuenow="2" aria-valuenow="2"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:40%" style="left:40%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -623,37 +623,37 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
> >
2 2
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:20%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
> >
3 3
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:40%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
> >
4 4
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:60%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
> >
6 6
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:80%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
> >
8 8
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
> >
12 12
</span> </span>

37
components/input/Search.tsx
View File

@ -14,7 +14,8 @@ export interface SearchProps extends InputProps {
| React.MouseEvent<HTMLElement> | React.MouseEvent<HTMLElement>
| React.KeyboardEvent<HTMLInputElement>, | React.KeyboardEvent<HTMLInputElement>,
) => void; ) => void;
enterButton?: boolean | React.ReactNode; enterButton?: React.ReactNode;
loading?: boolean;
} }
export default class Search extends React.Component<SearchProps, any> { export default class Search extends React.Component<SearchProps, any> {
@ -39,7 +40,10 @@ export default class Search extends React.Component<SearchProps, any> {
}; };
onSearch = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>) => { onSearch = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLInputElement>) => {
const { onSearch } = this.props; const { onSearch, loading } = this.props;
if (loading) return;
if (onSearch) { if (onSearch) {
onSearch(this.input.input.value, e); onSearch(this.input.input.value, e);
} }
@ -54,8 +58,26 @@ export default class Search extends React.Component<SearchProps, any> {
this.input.blur(); this.input.blur();
} }
renderLoading = (prefixCls: string) => {
const { enterButton, size } = this.props;
if (enterButton) {
return (
<Button className={`${prefixCls}-button`} type="primary" size={size} key="enterButton">
<Icon type="loading" />
</Button>
);
}
return <Icon className={`${prefixCls}-icon`} type="loading" />;
};
renderSuffix = (prefixCls: string) => { renderSuffix = (prefixCls: string) => {
const { suffix, enterButton } = this.props; const { suffix, enterButton, loading } = this.props;
if (loading && !enterButton) {
return [suffix, this.renderLoading(prefixCls)];
}
if (enterButton) return suffix; if (enterButton) return suffix;
const node = ( const node = (
@ -81,10 +103,15 @@ export default class Search extends React.Component<SearchProps, any> {
}; };
renderAddonAfter = (prefixCls: string) => { renderAddonAfter = (prefixCls: string) => {
const { enterButton, size, disabled, addonAfter } = this.props; const { enterButton, size, disabled, addonAfter, loading } = this.props;
if (!enterButton) return addonAfter;
const btnClassName = `${prefixCls}-button`; const btnClassName = `${prefixCls}-button`;
if (loading && enterButton) {
return [this.renderLoading(prefixCls), addonAfter];
}
if (!enterButton) return addonAfter;
let button: React.ReactNode; let button: React.ReactNode;
const enterButtonAsElement = enterButton as React.ReactElement<any>; const enterButtonAsElement = enterButton as React.ReactElement<any>;
if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') { if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') {

7
components/input/__tests__/Search.test.js
View File

@ -152,4 +152,11 @@ describe('Input.Search', () => {
expect(onSearch).toHaveBeenLastCalledWith('', expect.anything()); expect(onSearch).toHaveBeenLastCalledWith('', expect.anything());
expect(onChange).toHaveBeenCalled(); expect(onChange).toHaveBeenCalled();
}); });
it('should support loading', () => {
const wrapper = mount(<Search loading />);
const wrapperWithEnterButton = mount(<Search loading enterButton />);
expect(wrapper.render()).toMatchSnapshot();
expect(wrapperWithEnterButton.render()).toMatchSnapshot();
});
}); });

79
components/input/__tests__/__snapshots__/Search.test.js.snap
View File

@ -150,3 +150,82 @@ exports[`Input.Search should support custom button 1`] = `
</span> </span>
</span> </span>
`; `;
exports[`Input.Search should support loading 1`] = `
<span
class="ant-input-search ant-input-affix-wrapper"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
<i
aria-label="icon: loading"
class="anticon anticon-loading ant-input-search-icon"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</i>
</span>
</span>
`;
exports[`Input.Search should support loading 2`] = `
<span
class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
>
<span
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
type="text"
value=""
/>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn ant-input-search-button ant-btn-primary"
type="button"
>
<i
aria-label="icon: loading"
class="anticon anticon-loading"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</i>
</button>
</span>
</span>
</span>
`;

163
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1811,6 +1811,169 @@ exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
</div> </div>
`; `;
exports[`renders ./components/input/demo/search-input-loading.md correctly 1`] = `
<div>
<span
class="ant-input-search ant-input-affix-wrapper"
>
<input
class="ant-input"
placeholder="input search loading deault"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
<i
aria-label="icon: loading"
class="anticon anticon-loading ant-input-search-icon"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</i>
</span>
</span>
<br />
<br />
<span
class="ant-input-search ant-input-affix-wrapper"
>
<input
class="ant-input"
placeholder="input search loading with suffix"
type="text"
value=""
/>
<span
class="ant-input-suffix"
>
suffix
<i
aria-label="icon: loading"
class="anticon anticon-loading ant-input-search-icon"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</i>
</span>
</span>
<br />
<br />
<span
class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
>
<span
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
placeholder="input search loading with enterButton"
type="text"
value=""
/>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn ant-input-search-button ant-btn-primary"
type="button"
>
<i
aria-label="icon: loading"
class="anticon anticon-loading"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</i>
</button>
</span>
</span>
</span>
<br />
<br />
<span
class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
>
<span
class="ant-input-wrapper ant-input-group"
>
<input
class="ant-input"
placeholder="input search loading with enterButton and addonAfter"
type="text"
value=""
/>
<span
class="ant-input-group-addon"
>
<button
class="ant-btn ant-input-search-button ant-btn-primary"
type="button"
>
<i
aria-label="icon: loading"
class="anticon anticon-loading"
>
<svg
aria-hidden="true"
class="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</i>
</button>
addonAfter
</span>
</span>
</span>
</div>
`;
exports[`renders ./components/input/demo/size.md correctly 1`] = ` exports[`renders ./components/input/demo/size.md correctly 1`] = `
<div <div
class="example-input" class="example-input"

41
components/input/demo/search-input-loading.md Normal file
View File

@ -0,0 +1,41 @@
---
order: 5
title:
zh-CN: 搜索框 loading
en-US: Search box with loading
---
## zh-CN
用于 `onSearch` 的时候展示 `loading`。
## en-US
Search loading when onSearch.
```jsx
import { Input } from 'antd';
const { Search } = Input;
ReactDOM.render(
<div>
<Search placeholder="input search loading deault" loading />
<br />
<br />
<Search placeholder="input search loading with suffix" loading suffix="suffix" />
<br />
<br />
<Search placeholder="input search loading with enterButton" loading enterButton />
<br />
<br />
<Search
placeholder="input search loading with enterButton and addonAfter"
loading
enterButton
addonAfter="addonAfter"
/>
</div>,
mountNode,
);
```

1
components/input/index.en-US.md
View File

@ -56,6 +56,7 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| enterButton | to show an enter button after input. This prop is conflict with addon. | boolean\|ReactNode | false | | | enterButton | to show an enter button after input. This prop is conflict with addon. | boolean\|ReactNode | false | |
| onSearch | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value, event) | | | | onSearch | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value, event) | | |
| loading | Search box with loading. | boolean | | |
Supports all props of `Input`. Supports all props of `Input`.

1
components/input/index.zh-CN.md
View File

@ -55,6 +55,7 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 addon 冲突。 | boolean\|ReactNode | false | | | enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 addon 冲突。 | boolean\|ReactNode | false | |
| onSearch | 点击搜索或按下回车键时的回调 | function(value, event) | | | | onSearch | 点击搜索或按下回车键时的回调 | function(value, event) | | |
| loading | 搜索 loading | boolean | | |
其余属性和 Input 一致。 其余属性和 Input 一致。

1
components/input/style/search-input.less
View File

@ -26,7 +26,6 @@
border: 0; border: 0;
.@{search-prefix}-button { .@{search-prefix}-button {
width: 100%;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }

1
components/locale/default.tsx
View File

@ -42,6 +42,7 @@ export default {
removeFile: 'Remove file', removeFile: 'Remove file',
uploadError: 'Upload error', uploadError: 'Upload error',
previewFile: 'Preview file', previewFile: 'Preview file',
downloadFile: 'Download file',
}, },
Empty: { Empty: {
description: 'No Data', description: 'No Data',

1
components/locale/zh_CN.tsx
View File

@ -42,6 +42,7 @@ export default {
removeFile: '删除文件', removeFile: '删除文件',
uploadError: '上传错误', uploadError: '上传错误',
previewFile: '预览文件', previewFile: '预览文件',
downloadFile: '下载文件',
}, },
Empty: { Empty: {
description: '暂无数据', description: '暂无数据',

201
components/slider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -10,7 +10,7 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:30%" style="left:0%;right:auto;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -22,7 +22,7 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:30%" style="left:30%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -37,7 +37,7 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="left:20%;width:30%" style="left:20%;right:auto;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -49,7 +49,7 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="left:20%" style="left:20%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -59,7 +59,7 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="left:50%" style="left:50%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -90,7 +90,7 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:30%" style="left:0%;right:auto;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -102,7 +102,7 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:30%" style="left:30%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -117,7 +117,7 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="left:20%;width:30%" style="left:20%;right:auto;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -129,7 +129,7 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="left:20%" style="left:20%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -139,7 +139,7 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="left:50%" style="left:50%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -181,7 +181,7 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:0%" style="left:0%;right:auto;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -193,7 +193,7 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%" style="left:0%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -239,7 +239,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:0%" style="left:0%;right:auto;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -251,7 +251,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
aria-valuenow="1" aria-valuenow="1"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%" style="left:0%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -357,7 +357,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:0%" style="left:0%;right:auto;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -369,7 +369,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%" style="left:0%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -477,7 +477,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:37%" style="left:0%;right:auto;width:37%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -506,7 +506,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%" style="left:37%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -514,25 +514,25 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
> >
0°C 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:26%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
> >
26°C 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:37%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
> >
37°C 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%);color:#f50" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
> >
<strong> <strong>
100°C 100°C
@ -548,7 +548,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="left:26%;width:11%" style="left:26%;right:auto;width:11%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -577,7 +577,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
aria-valuenow="26" aria-valuenow="26"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="left:26%" style="left:26%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -587,7 +587,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="left:37%" style="left:37%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -595,25 +595,25 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
> >
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
> >
0°C 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:26%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
> >
26°C 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:37%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
> >
37°C 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%);color:#f50" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
> >
<strong> <strong>
100°C 100°C
@ -657,7 +657,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%" style="left:37%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -665,25 +665,25 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
> >
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
> >
0°C 0°C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:26%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
> >
26°C 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:37%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
> >
37°C 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%);color:#f50" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
> >
<strong> <strong>
100°C 100°C
@ -702,7 +702,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:37%" style="left:0%;right:auto;width:37%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -731,7 +731,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%" style="left:37%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -739,25 +739,25 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
> >
0°C 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:26%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
> >
26°C 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:37%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
> >
37°C 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%);color:#f50" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
> >
<strong> <strong>
100°C 100°C
@ -776,7 +776,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:37%" style="left:0%;right:auto;width:37%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -805,7 +805,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:37%" style="left:37%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -813,25 +813,25 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
> >
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:0%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
> >
0°C 0°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:26%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:26%"
> >
26°C 26°C
</span> </span>
<span <span
class="ant-slider-mark-text ant-slider-mark-text-active" class="ant-slider-mark-text ant-slider-mark-text-active"
style="left:37%;transform:translateX(-50%);-ms-transform:translateX(-50%)" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:37%"
> >
37°C 37°C
</span> </span>
<span <span
class="ant-slider-mark-text" class="ant-slider-mark-text"
style="left:100%;transform:translateX(-50%);-ms-transform:translateX(-50%);color:#f50" style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%;color:#f50"
> >
<strong> <strong>
100°C 100°C
@ -842,6 +842,87 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
</div> </div>
`; `;
exports[`renders ./components/slider/demo/reverse.md correctly 1`] = `
<div>
<div
class="ant-slider"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track"
style="right:0%;left:auto;width:30%"
/>
<div
class="ant-slider-step"
/>
<div
aria-disabled="false"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="30"
class="ant-slider-handle"
role="slider"
style="right:30%;left:auto;transform:translateX(+50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>
<div
class="ant-slider"
>
<div
class="ant-slider-rail"
/>
<div
class="ant-slider-track ant-slider-track-1"
style="right:20%;left:auto;width:30%"
/>
<div
class="ant-slider-step"
/>
<div
aria-disabled="false"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1"
role="slider"
style="right:20%;left:auto;transform:translateX(+50%)"
tabindex="0"
/>
<div
aria-disabled="false"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2"
role="slider"
style="right:50%;left:auto;transform:translateX(+50%)"
tabindex="0"
/>
<div
class="ant-slider-mark"
/>
</div>
Reversed:
<button
aria-checked="true"
checked=""
class="ant-switch-small ant-switch ant-switch-checked"
role="switch"
type="button"
>
<span
class="ant-switch-inner"
/>
</button>
</div>
`;
exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = ` exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = `
<div <div
class="ant-slider" class="ant-slider"
@ -851,7 +932,7 @@ exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:30%" style="left:0%;right:auto;width:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -863,7 +944,7 @@ exports[`renders ./components/slider/demo/show-tooltip.md correctly 1`] = `
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle ant-tooltip-open" class="ant-slider-handle ant-tooltip-open"
role="slider" role="slider"
style="left:30%" style="left:30%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div> <div>
@ -901,7 +982,7 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:0%" style="left:0%;right:auto;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -913,7 +994,7 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%" style="left:0%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -928,7 +1009,7 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:0%" style="left:0%;right:auto;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -940,7 +1021,7 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
aria-valuenow="0" aria-valuenow="0"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%" style="left:0%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -965,7 +1046,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="bottom:0%;height:30%" style="bottom:0%;top:auto;height:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -977,7 +1058,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
aria-valuenow="30" aria-valuenow="30"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="bottom:30%" style="bottom:30%;top:auto;transform:translateY(+50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -996,7 +1077,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="bottom:20%;height:30%" style="bottom:20%;top:auto;height:30%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1008,7 +1089,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
aria-valuenow="20" aria-valuenow="20"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="bottom:20%" style="bottom:20%;top:auto;transform:translateY(+50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -1018,7 +1099,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
aria-valuenow="50" aria-valuenow="50"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="bottom:50%" style="bottom:50%;top:auto;transform:translateY(+50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -1037,7 +1118,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
/> />
<div <div
class="ant-slider-track ant-slider-track-1" class="ant-slider-track ant-slider-track-1"
style="bottom:26%;height:11%" style="bottom:26%;top:auto;height:11%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -1066,7 +1147,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
aria-valuenow="26" aria-valuenow="26"
class="ant-slider-handle ant-slider-handle-1" class="ant-slider-handle ant-slider-handle-1"
role="slider" role="slider"
style="bottom:26%" style="bottom:26%;top:auto;transform:translateY(+50%)"
tabindex="0" tabindex="0"
/> />
<div <div
@ -1076,7 +1157,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
aria-valuenow="37" aria-valuenow="37"
class="ant-slider-handle ant-slider-handle-2" class="ant-slider-handle ant-slider-handle-2"
role="slider" role="slider"
style="bottom:37%" style="bottom:37%;top:auto;transform:translateY(+50%)"
tabindex="0" tabindex="0"
/> />
<div <div

41
components/slider/demo/reverse.md Normal file
View File

@ -0,0 +1,41 @@
---
order: 8
title:
zh-CN: 反向
en-US: Reverse
---
## zh-CN
设置 `reverse` 可以将滑动条置反。
## en-US
Using `reverse` to render slider reversely.
```jsx
import { Slider, Switch } from 'antd';
class Demo extends React.Component {
state = {
reverse: true,
};
handleReverseChange = reverse => {
this.setState({ reverse });
};
render() {
const { reverse } = this.state;
return (
<div>
<Slider defaultValue={30} reverse={reverse} />
<Slider range defaultValue={[20, 50]} reverse={reverse} />
Reversed: <Switch size="small" checked={reverse} onChange={this.handleReverseChange} />
</div>
);
}
}
ReactDOM.render(<Demo />, mountNode);
```

1
components/slider/index.en-US.md
View File

@ -23,6 +23,7 @@ To input a value in a range.
| max | The maximum value the slider can slide to | number | 100 | | | max | The maximum value the slider can slide to | number | 100 | |
| min | The minimum value the slider can slide to. | number | 0 | | | min | The minimum value the slider can slide to. | number | 0 | |
| range | dual thumb mode | boolean | false | | | range | dual thumb mode | boolean | false | |
| reverse | reverse the component | boolean | false | 3.24.0 |
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 | | | step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 | |
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY | | | tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY | |
| value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | | | value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | |

1
components/slider/index.zh-CN.md
View File

@ -24,6 +24,7 @@ title: Slider
| max | 最大值 | number | 100 | | | max | 最大值 | number | 100 | |
| min | 最小值 | number | 0 | | | min | 最小值 | number | 0 | |
| range | 双滑块模式 | boolean | false | | | range | 双滑块模式 | boolean | false | |
| reverse | 反向坐标轴 | boolean | false | 3.24.0 |
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 | | | step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 | |
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY | | | tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY | |
| value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | | | | value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | | |

3
components/table/Table.tsx
View File

@ -1228,8 +1228,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
mergedLocale.emptyText = renderEmpty('Table'); mergedLocale.emptyText = renderEmpty('Table');
} }
const classString = classNames({ const classString = classNames(`${prefixCls}-${this.props.size}`, {
[`${prefixCls}-${this.props.size}`]: true,
[`${prefixCls}-bordered`]: this.props.bordered, [`${prefixCls}-bordered`]: this.props.bordered,
[`${prefixCls}-empty`]: !data.length, [`${prefixCls}-empty`]: !data.length,
[`${prefixCls}-without-column-header`]: !showHeader, [`${prefixCls}-without-column-header`]: !showHeader,

2
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -11,7 +11,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
class="ant-spin-container" class="ant-spin-container"
> >
<div <div
class="ant-table ant-table-default ant-table-scroll-position-left" class="ant-table ant-table-default ant-table-scroll-position-left ant-table-layout-fixed"
> >
<div <div
class="ant-table-content" class="ant-table-content"

2741
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

14
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

@ -453,7 +453,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-spin-container" class="ant-spin-container"
> >
<div <div
class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left" class="ant-table ant-table-default ant-table-empty ant-table-scroll-position-left ant-table-layout-fixed"
> >
<div <div
class="ant-table-content" class="ant-table-content"
@ -491,7 +491,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
> >
<tr> <tr>
<th <th
class="ant-table-fixed-columns-in-body" class="ant-table-fixed-columns-in-body ant-table-row-cell-break-word"
> >
<span <span
class="ant-table-header-column" class="ant-table-header-column"
@ -509,7 +509,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
</span> </span>
</th> </th>
<th <th
class="ant-table-fixed-columns-in-body" class="ant-table-fixed-columns-in-body ant-table-row-cell-break-word"
> >
<span <span
class="ant-table-header-column" class="ant-table-header-column"
@ -671,7 +671,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
</span> </span>
</th> </th>
<th <th
class="ant-table-fixed-columns-in-body" class="ant-table-fixed-columns-in-body ant-table-row-cell-break-word"
> >
<span <span
class="ant-table-header-column" class="ant-table-header-column"
@ -771,7 +771,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
> >
<tr> <tr>
<th <th
class="" class="ant-table-row-cell-break-word"
> >
<span <span
class="ant-table-header-column" class="ant-table-header-column"
@ -789,7 +789,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
</span> </span>
</th> </th>
<th <th
class="" class="ant-table-row-cell-break-word"
> >
<span <span
class="ant-table-header-column" class="ant-table-header-column"
@ -838,7 +838,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
> >
<tr> <tr>
<th <th
class="" class="ant-table-row-cell-break-word"
> >
<span <span
class="ant-table-header-column" class="ant-table-header-column"

134
components/table/demo/dynamic-settings.md
View File

@ -1,5 +1,5 @@
--- ---
order: 27 order: 100
title: title:
en-US: Dynamic Settings en-US: Dynamic Settings
zh-CN: 动态控制表格属性 zh-CN: 动态控制表格属性
@ -16,21 +16,17 @@ Select different settings to see the result.
```jsx ```jsx
import { Table, Icon, Switch, Radio, Form, Divider } from 'antd'; import { Table, Icon, Switch, Radio, Form, Divider } from 'antd';
const FormItem = Form.Item;
const columns = [ const columns = [
{ {
title: 'Name', title: 'Name',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: 150,
render: text => <a>{text}</a>, render: text => <a>{text}</a>,
}, },
{ {
title: 'Age', title: 'Age',
dataIndex: 'age', dataIndex: 'age',
key: 'age', key: 'age',
width: 70,
}, },
{ {
title: 'Address', title: 'Address',
@ -40,7 +36,6 @@ const columns = [
{ {
title: 'Action', title: 'Action',
key: 'action', key: 'action',
width: 360,
render: (text, record) => ( render: (text, record) => (
<span> <span>
<a>Action 一 {record.name}</a> <a>Action 一 {record.name}</a>
@ -86,6 +81,7 @@ class Demo extends React.Component {
rowSelection: {}, rowSelection: {},
scroll: undefined, scroll: undefined,
hasData: true, hasData: true,
tableLayout: undefined,
}; };
handleToggle = prop => enable => { handleToggle = prop => enable => {
@ -96,10 +92,18 @@ class Demo extends React.Component {
this.setState({ size: e.target.value }); this.setState({ size: e.target.value });
}; };
handleTableLayoutChange = e => {
this.setState({ tableLayout: e.target.value });
};
handleExpandChange = enable => { handleExpandChange = enable => {
this.setState({ expandedRowRender: enable ? expandedRowRender : undefined }); this.setState({ expandedRowRender: enable ? expandedRowRender : undefined });
}; };
handleEllipsisChange = enable => {
this.setState({ ellipsis: enable });
};
handleTitleChange = enable => { handleTitleChange = enable => {
this.setState({ title: enable ? title : undefined }); this.setState({ title: enable ? title : undefined });
}; };
@ -135,56 +139,71 @@ class Demo extends React.Component {
const { state } = this; const { state } = this;
return ( return (
<div> <div>
<div className="components-table-demo-control-bar"> <Form
<Form layout="inline"> layout="inline"
<FormItem label="Bordered"> className="components-table-demo-control-bar"
<Switch checked={state.bordered} onChange={this.handleToggle('bordered')} /> style={{ marginBottom: 16 }}
</FormItem> >
<FormItem label="loading"> <Form.Item label="Bordered">
<Switch checked={state.loading} onChange={this.handleToggle('loading')} /> <Switch checked={state.bordered} onChange={this.handleToggle('bordered')} />
</FormItem> </Form.Item>
<FormItem label="Title"> <Form.Item label="loading">
<Switch checked={!!state.title} onChange={this.handleTitleChange} /> <Switch checked={state.loading} onChange={this.handleToggle('loading')} />
</FormItem> </Form.Item>
<FormItem label="Column Header"> <Form.Item label="Title">
<Switch checked={!!state.showHeader} onChange={this.handleHeaderChange} /> <Switch checked={!!state.title} onChange={this.handleTitleChange} />
</FormItem> </Form.Item>
<FormItem label="Footer"> <Form.Item label="Column Header">
<Switch checked={!!state.footer} onChange={this.handleFooterChange} /> <Switch checked={!!state.showHeader} onChange={this.handleHeaderChange} />
</FormItem> </Form.Item>
<FormItem label="Expandable"> <Form.Item label="Footer">
<Switch checked={!!state.expandedRowRender} onChange={this.handleExpandChange} /> <Switch checked={!!state.footer} onChange={this.handleFooterChange} />
</FormItem> </Form.Item>
<FormItem label="Checkbox"> <Form.Item label="Expandable">
<Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange} /> <Switch checked={!!state.expandedRowRender} onChange={this.handleExpandChange} />
</FormItem> </Form.Item>
<FormItem label="Fixed Header"> <Form.Item label="Checkbox">
<Switch checked={!!state.scroll} onChange={this.handleScollChange} /> <Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange} />
</FormItem> </Form.Item>
<FormItem label="Has Data"> <Form.Item label="Fixed Header">
<Switch checked={!!state.hasData} onChange={this.handleDataChange} /> <Switch checked={!!state.scroll} onChange={this.handleScollChange} />
</FormItem> </Form.Item>
<FormItem label="Size"> <Form.Item label="Has Data">
<Radio.Group size="default" value={state.size} onChange={this.handleSizeChange}> <Switch checked={!!state.hasData} onChange={this.handleDataChange} />
<Radio.Button value="default">Default</Radio.Button> </Form.Item>
<Radio.Button value="middle">Middle</Radio.Button> <Form.Item label="Ellipsis">
<Radio.Button value="small">Small</Radio.Button> <Switch checked={!!state.ellipsis} onChange={this.handleEllipsisChange} />
</Radio.Group> </Form.Item>
</FormItem> <Form.Item label="Size">
<FormItem label="Pagination"> <Radio.Group value={state.size} onChange={this.handleSizeChange}>
<Radio.Group <Radio.Button value="default">Default</Radio.Button>
value={state.pagination ? state.pagination.position : 'none'} <Radio.Button value="middle">Middle</Radio.Button>
onChange={this.handlePaginationChange} <Radio.Button value="small">Small</Radio.Button>
> </Radio.Group>
<Radio.Button value="top">Top</Radio.Button> </Form.Item>
<Radio.Button value="bottom">Bottom</Radio.Button> <Form.Item label="Table Layout">
<Radio.Button value="both">Both</Radio.Button> <Radio.Group value={state.tableLayout} onChange={this.handleTableLayoutChange}>
<Radio.Button value="none">None</Radio.Button> <Radio.Button value={undefined}>Unset</Radio.Button>
</Radio.Group> <Radio.Button value="fixed">Fixed</Radio.Button>
</FormItem> </Radio.Group>
</Form> </Form.Item>
</div> <Form.Item label="Pagination">
<Table {...this.state} columns={columns} dataSource={state.hasData ? data : null} /> <Radio.Group
value={state.pagination ? state.pagination.position : 'none'}
onChange={this.handlePaginationChange}
>
<Radio.Button value="top">Top</Radio.Button>
<Radio.Button value="bottom">Bottom</Radio.Button>
<Radio.Button value="both">Both</Radio.Button>
<Radio.Button value="none">None</Radio.Button>
</Radio.Group>
</Form.Item>
</Form>
<Table
{...this.state}
columns={columns.map(item => ({ ...item, ellipsis: state. ellipsis }))}
dataSource={state.hasData ? data : null}
/>
</div> </div>
); );
} }
@ -194,9 +213,6 @@ ReactDOM.render(<Demo />, mountNode);
``` ```
<style> <style>
.components-table-demo-control-bar {
margin-bottom: 10px;
}
.components-table-demo-control-bar .ant-form-item { .components-table-demo-control-bar .ant-form-item {
margin-right: 16px; margin-right: 16px;
margin-bottom: 8px; margin-bottom: 8px;

88
components/table/demo/ellipsis.md Normal file
View File

@ -0,0 +1,88 @@
---
order: 27
title:
en-US: ellipsis column
zh-CN: 单元格自动省略
---
## zh-CN
设置 `column.ellipsis` 可以让单元格内容根据宽度自动省略。
> 列头缩略暂不支持和排序筛选一起使用。
## en-US
Ellipsize cell content via setting `column.ellipsis`.
> Cannot ellipsize table header with sorters and filters for now.
```jsx
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a>{text}</a>,
width: 150,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: 80,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address 1',
ellipsis: true,
},
{
title: 'Long Column Long Column Long Column',
dataIndex: 'address',
key: 'address 2',
ellipsis: true,
},
{
title: 'Long Column Long Column',
dataIndex: 'address',
key: 'address 3',
ellipsis: true,
},
{
title: 'Long Column',
dataIndex: 'address',
key: 'address 4',
ellipsis: true,
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park, London No. 2 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
```

3
components/table/demo/reset-filter.md
View File

@ -99,6 +99,7 @@ class App extends React.Component {
onFilter: (value, record) => record.name.includes(value), onFilter: (value, record) => record.name.includes(value),
sorter: (a, b) => a.name.length - b.name.length, sorter: (a, b) => a.name.length - b.name.length,
sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order, sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
ellipsis: true,
}, },
{ {
title: 'Age', title: 'Age',
@ -106,6 +107,7 @@ class App extends React.Component {
key: 'age', key: 'age',
sorter: (a, b) => a.age - b.age, sorter: (a, b) => a.age - b.age,
sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order, sortOrder: sortedInfo.columnKey === 'age' && sortedInfo.order,
ellipsis: true,
}, },
{ {
title: 'Address', title: 'Address',
@ -116,6 +118,7 @@ class App extends React.Component {
onFilter: (value, record) => record.address.includes(value), onFilter: (value, record) => record.address.includes(value),
sorter: (a, b) => a.address.length - b.address.length, sorter: (a, b) => a.address.length - b.address.length,
sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order, sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
ellipsis: true,
}, },
]; ];
return ( return (

4
components/table/demo/resizable-column.md
View File

@ -7,11 +7,11 @@ title:
## zh-CN ## zh-CN
集成 react-resizable 来实现可伸缩列。 集成 [react-resizable](https://github.com/STRML/react-resizable) 来实现可伸缩列。
## en-US ## en-US
Implement resizable column by integrate with react-resizable. Implement resizable column by integrate with [react-resizable](https://github.com/STRML/react-resizable).
```jsx ```jsx
import { Table } from 'antd'; import { Table } from 'antd';

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

@ -59,6 +59,7 @@ const columns = [
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| tableLayout | [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| 'auto' \| 'fixed' | -<hr />`fixed` when header/columns are fixed, or using `column.ellipsis` | 3.24.0 |
| bordered | Whether to show all table borders | boolean | `false` | | | bordered | Whether to show all table borders | boolean | `false` | |
| childrenColumnName | The column contains children to display | string\[] | children | 3.4.2 | | childrenColumnName | The column contains children to display | string\[] | children | 3.4.2 |
| columns | Columns of table | [ColumnProps](https://git.io/vMMXC)\[] | - | | | columns | Columns of table | [ColumnProps](https://git.io/vMMXC)\[] | - | |
@ -119,6 +120,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| align | specify which way that column is aligned | 'left' \| 'right' \| 'center' | 'left' | 3.3.2 | | align | specify which way that column is aligned | 'left' \| 'right' \| 'center' | 'left' | 3.3.2 |
| ellipsis | ellipsize cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is true. | boolean | false | 3.24.0 |
| className | className of this column | string | - | | | className | className of this column | string | - | |
| colSpan | Span of this column's title | number | | | | colSpan | Span of this column's title | number | | |
| dataIndex | Display field of the data record, could be set like `a.b.c`, `a[0].b.c[1]` | string | - | | | dataIndex | Display field of the data record, could be set like `a.b.c`, `a[0].b.c[1]` | string | - | |

2
components/table/index.zh-CN.md
View File

@ -64,6 +64,7 @@ const columns = [
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \| 'auto' \| 'fixed' | 无<hr />固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` | 3.24.0 |
| bordered | 是否展示外边框和列边框 | boolean | false | | | bordered | 是否展示外边框和列边框 | boolean | false | |
| childrenColumnName | 指定树形结构的列名 | string\[] | children | 3.4.2 | | childrenColumnName | 指定树形结构的列名 | string\[] | children | 3.4.2 |
| columns | 表格列的配置描述，具体项见下表 | [ColumnProps](https://git.io/vMMXC)\[] | - | | | columns | 表格列的配置描述，具体项见下表 | [ColumnProps](https://git.io/vMMXC)\[] | - | |
@ -124,6 +125,7 @@ const columns = [
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| align | 设置列的对齐方式 | 'left' \| 'right' \| 'center' | 'left' | 3.3.2 | | align | 设置列的对齐方式 | 'left' \| 'right' \| 'center' | 'left' | 3.3.2 |
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean | false | 3.24.0 |
| className | 列样式类名 | string | - | | | className | 列样式类名 | string | - | |
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | | | | colSpan | 表头列合并,设置为 0 时，不渲染 | number | | |
| dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c`、`a[0].b.c[1]` 的嵌套写法 | string | - | | | dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c`、`a[0].b.c[1]` 的嵌套写法 | string | - | |

2
components/table/interface.tsx
View File

@ -33,6 +33,7 @@ export interface ColumnProps<T> {
dataIndex?: string; // Note: We can not use generic type here, since we need to support nested key, see #9393 dataIndex?: string; // Note: We can not use generic type here, since we need to support nested key, see #9393
render?: (text: any, record: T, index: number) => React.ReactNode; render?: (text: any, record: T, index: number) => React.ReactNode;
align?: 'left' | 'right' | 'center'; align?: 'left' | 'right' | 'center';
ellipsis?: boolean;
filters?: ColumnFilterItem[]; filters?: ColumnFilterItem[];
onFilter?: (value: any, record: T) => boolean; onFilter?: (value: any, record: T) => boolean;
filterMultiple?: boolean; filterMultiple?: boolean;
@ -190,6 +191,7 @@ export interface TableProps<T> {
bodyStyle?: React.CSSProperties; bodyStyle?: React.CSSProperties;
className?: string; className?: string;
style?: React.CSSProperties; style?: React.CSSProperties;
tableLayout?: React.CSSProperties['tableLayout'];
children?: React.ReactNode; children?: React.ReactNode;
sortDirections?: SortOrder[]; sortDirections?: SortOrder[];
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;

23
components/table/style/index.less
View File

@ -37,6 +37,10 @@
border-spacing: 0; border-spacing: 0;
} }
&-layout-fixed table {
table-layout: fixed;
}
&-thead > tr > th { &-thead > tr > th {
color: @table-header-color; color: @table-header-color;
font-weight: 500; font-weight: 500;
@ -169,6 +173,7 @@
.@{table-prefix-cls}-header-column { .@{table-prefix-cls}-header-column {
display: inline-block; display: inline-block;
max-width: 100%;
vertical-align: top; vertical-align: top;
.@{table-prefix-cls}-column-sorters { .@{table-prefix-cls}-column-sorters {
@ -328,6 +333,7 @@
&-thead > tr > th, &-thead > tr > th,
&-tbody > tr > td { &-tbody > tr > td {
padding: @table-padding-vertical @table-padding-horizontal; padding: @table-padding-vertical @table-padding-horizontal;
overflow-wrap: break-word;
} }
&-expand-icon-th, &-expand-icon-th,
@ -579,6 +585,22 @@
content: '.'; content: '.';
} }
} }
&-cell-ellipsis,
&-cell-ellipsis .@{table-prefix-cls}-column-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-cell-ellipsis .@{table-prefix-cls}-column-title {
display: block;
}
&-cell-break-word {
word-wrap: break-word;
word-break: break-word;
}
} }
tr&-expanded-row { tr&-expanded-row {
@ -600,7 +622,6 @@
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
table { table {
width: auto;
min-width: 100%; min-width: 100%;
// https://github.com/ant-design/ant-design/issues/14545 // https://github.com/ant-design/ant-design/issues/14545

4
components/typography/__tests__/__snapshots__/demo.test.js.snap
View File

@ -239,7 +239,7 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
/> />
<div <div
class="ant-slider-track" class="ant-slider-track"
style="left:0%;width:0%" style="left:0%;right:auto;width:0%"
/> />
<div <div
class="ant-slider-step" class="ant-slider-step"
@ -251,7 +251,7 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
aria-valuenow="1" aria-valuenow="1"
class="ant-slider-handle" class="ant-slider-handle"
role="slider" role="slider"
style="left:0%" style="left:0%;right:auto;transform:translateX(-50%)"
tabindex="0" tabindex="0"
/> />
<div <div

5
components/upload/Upload.tsx
View File

@ -253,11 +253,12 @@ class Upload extends React.Component<UploadProps, UploadState> {
showUploadList, showUploadList,
listType, listType,
onPreview, onPreview,
onDownload,
previewFile, previewFile,
disabled, disabled,
locale: propLocale, locale: propLocale,
} = this.props; } = this.props;
const { showRemoveIcon, showPreviewIcon } = showUploadList as any; const { showRemoveIcon, showPreviewIcon, showDownloadIcon } = showUploadList as any;
const { fileList } = this.state; const { fileList } = this.state;
return ( return (
<UploadList <UploadList
@ -265,9 +266,11 @@ class Upload extends React.Component<UploadProps, UploadState> {
items={fileList} items={fileList}
previewFile={previewFile} previewFile={previewFile}
onPreview={onPreview} onPreview={onPreview}
onDownload={onDownload}
onRemove={this.handleManualRemove} onRemove={this.handleManualRemove}
showRemoveIcon={!disabled && showRemoveIcon} showRemoveIcon={!disabled && showRemoveIcon}
showPreviewIcon={showPreviewIcon} showPreviewIcon={showPreviewIcon}
showDownloadIcon={showDownloadIcon}
locale={{ ...locale, ...propLocale }} locale={{ ...locale, ...propLocale }}
/> />
); );

93
components/upload/UploadList.tsx
View File

@ -16,6 +16,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
showInfo: false, showInfo: false,
}, },
showRemoveIcon: true, showRemoveIcon: true,
showDownloadIcon: true,
showPreviewIcon: true, showPreviewIcon: true,
previewFile: previewImage, previewFile: previewImage,
}; };
@ -56,6 +57,15 @@ export default class UploadList extends React.Component<UploadListProps, any> {
return onPreview(file); return onPreview(file);
}; };
handleDownload = (file: UploadFile) => {
const { onDownload } = this.props;
if (typeof onDownload === 'function') {
onDownload(file);
} else if (file.url) {
window.open(file.url);
}
};
handleClose = (file: UploadFile) => { handleClose = (file: UploadFile) => {
const { onRemove } = this.props; const { onRemove } = this.props;
if (onRemove) { if (onRemove) {
@ -70,6 +80,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
listType, listType,
showPreviewIcon, showPreviewIcon,
showRemoveIcon, showRemoveIcon,
showDownloadIcon,
locale, locale,
progressAttr, progressAttr,
} = this.props; } = this.props;
@ -125,28 +136,63 @@ export default class UploadList extends React.Component<UploadListProps, any> {
const infoUploadingClass = classNames({ const infoUploadingClass = classNames({
[`${prefixCls}-list-item`]: true, [`${prefixCls}-list-item`]: true,
[`${prefixCls}-list-item-${file.status}`]: true, [`${prefixCls}-list-item-${file.status}`]: true,
[`${prefixCls}-list-item-list-type-${listType}`]: true,
}); });
const linkProps = const linkProps =
typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps; typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
const preview = file.url ? (
<a const removeIcon = showRemoveIcon ? (
target="_blank" <Icon type="delete" title={locale.removeFile} onClick={() => this.handleClose(file)} />
rel="noopener noreferrer" ) : null;
className={`${prefixCls}-list-item-name`} const downloadIcon =
title={file.name} showDownloadIcon && file.status === 'done' ? (
{...linkProps} <Icon
href={file.url} type="download"
onClick={e => this.handlePreview(file, e)} title={locale.downloadFile}
onClick={() => this.handleDownload(file)}
/>
) : null;
const downloadOrDelete = listType !== 'picture-card' && (
<span
key="download-delete"
className={`${prefixCls}-list-item-card-actions ${
listType === 'picture' ? 'picture' : ''
}`}
> >
{file.name} {downloadIcon && <a title={locale.downloadFile}>{downloadIcon}</a>}
</a> {removeIcon && <a title={locale.removeFile}>{removeIcon}</a>}
</span>
);
const listItemNameClass = classNames({
[`${prefixCls}-list-item-name`]: true,
[`${prefixCls}-list-item-name-icon-count-${
[downloadIcon, removeIcon].filter(x => x).length
}`]: true,
});
const preview = file.url ? (
[
<a
key="view"
target="_blank"
rel="noopener noreferrer"
className={listItemNameClass}
title={file.name}
{...linkProps}
href={file.url}
onClick={e => this.handlePreview(file, e)}
>
{file.name}
</a>,
downloadOrDelete,
]
) : ( ) : (
<span <span
className={`${prefixCls}-list-item-name`} className={listItemNameClass}
onClick={e => this.handlePreview(file, e)} onClick={e => this.handlePreview(file, e)}
title={file.name} title={file.name}
> >
{file.name} {file.name}
{downloadOrDelete}
</span> </span>
); );
const style: React.CSSProperties = { const style: React.CSSProperties = {
@ -165,21 +211,14 @@ export default class UploadList extends React.Component<UploadListProps, any> {
<Icon type="eye-o" /> <Icon type="eye-o" />
</a> </a>
) : null; ) : null;
const removeIcon = showRemoveIcon ? (
<Icon type="delete" title={locale.removeFile} onClick={() => this.handleClose(file)} /> const actions = listType === 'picture-card' && file.status !== 'uploading' && (
) : null; <span className={`${prefixCls}-list-item-actions`}>
const removeIconClose = showRemoveIcon ? ( {previewIcon}
<Icon type="close" title={locale.removeFile} onClick={() => this.handleClose(file)} /> {file.status === 'done' && downloadIcon}
) : null; {removeIcon}
const actions = </span>
listType === 'picture-card' && file.status !== 'uploading' ? ( );
<span className={`${prefixCls}-list-item-actions`}>
{previewIcon}
{removeIcon}
</span>
) : (
removeIconClose
);
let message; let message;
if (file.response && typeof file.response === 'string') { if (file.response && typeof file.response === 'string') {
message = file.response; message = file.response;

732
components/upload/__tests__/__snapshots__/demo.test.js.snap
View File

@ -34,7 +34,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
class="ant-upload-list ant-upload-list-text" class="ant-upload-list ant-upload-list-text"
> >
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -60,7 +60,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
</svg> </svg>
</i> </i>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="http://www.baidu.com/xxx.png" href="http://www.baidu.com/xxx.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -68,32 +68,65 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
> >
xxx.png xxx.png
</a> </a>
<span
class="ant-upload-list-item-card-actions "
>
<a
title="Download file"
>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
</a>
<a
title="Remove file"
>
<i
aria-label="icon: delete"
class="anticon anticon-delete"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</i>
</a>
</span>
</span> </span>
</div> </div>
<i
aria-label="icon: close"
class="anticon anticon-close"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</div> </div>
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -119,7 +152,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
</svg> </svg>
</i> </i>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="http://www.baidu.com/yyy.png" href="http://www.baidu.com/yyy.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -127,32 +160,65 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
> >
yyy.png yyy.png
</a> </a>
<span
class="ant-upload-list-item-card-actions "
>
<a
title="Download file"
>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
</a>
<a
title="Remove file"
>
<i
aria-label="icon: delete"
class="anticon anticon-delete"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</i>
</a>
</span>
</span> </span>
</div> </div>
<i
aria-label="icon: close"
class="anticon anticon-close"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</div> </div>
<div <div
class="ant-upload-list-item ant-upload-list-item-error" class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -178,7 +244,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
</svg> </svg>
</i> </i>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
href="http://www.baidu.com/zzz.png" href="http://www.baidu.com/zzz.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -186,29 +252,37 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
> >
zzz.png zzz.png
</a> </a>
<span
class="ant-upload-list-item-card-actions "
>
<a
title="Remove file"
>
<i
aria-label="icon: delete"
class="anticon anticon-delete"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</i>
</a>
</span>
</span> </span>
</div> </div>
<i
aria-label="icon: close"
class="anticon anticon-close"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</div> </div>
</div> </div>
</span> </span>
@ -251,7 +325,7 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
class="ant-upload-list ant-upload-list-text" class="ant-upload-list ant-upload-list-text"
> >
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -277,7 +351,7 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
</svg> </svg>
</i> </i>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="http://www.baidu.com/xxx.png" href="http://www.baidu.com/xxx.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -285,29 +359,62 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
> >
xxx.png xxx.png
</a> </a>
<span
class="ant-upload-list-item-card-actions "
>
<a
title="Download file"
>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
</a>
<a
title="Remove file"
>
<i
aria-label="icon: delete"
class="anticon anticon-delete"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</i>
</a>
</span>
</span> </span>
</div> </div>
<i
aria-label="icon: close"
class="anticon anticon-close"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</div> </div>
</div> </div>
</span> </span>
@ -324,7 +431,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
class="ant-upload-list ant-upload-list-picture-card" class="ant-upload-list ant-upload-list-picture-card"
> >
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -343,7 +450,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
/> />
</a> </a>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -382,6 +489,27 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</svg> </svg>
</i> </i>
</a> </a>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
<i <i
aria-label="icon: delete" aria-label="icon: delete"
class="anticon anticon-delete" class="anticon anticon-delete"
@ -406,7 +534,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</span> </span>
</div> </div>
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -425,7 +553,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
/> />
</a> </a>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -464,6 +592,27 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</svg> </svg>
</i> </i>
</a> </a>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
<i <i
aria-label="icon: delete" aria-label="icon: delete"
class="anticon anticon-delete" class="anticon anticon-delete"
@ -488,7 +637,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</span> </span>
</div> </div>
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -507,7 +656,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
/> />
</a> </a>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -546,6 +695,27 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</svg> </svg>
</i> </i>
</a> </a>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
<i <i
aria-label="icon: delete" aria-label="icon: delete"
class="anticon anticon-delete" class="anticon anticon-delete"
@ -570,7 +740,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</span> </span>
</div> </div>
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -589,7 +759,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
/> />
</a> </a>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -628,6 +798,27 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</svg> </svg>
</i> </i>
</a> </a>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
<i <i
aria-label="icon: delete" aria-label="icon: delete"
class="anticon anticon-delete" class="anticon anticon-delete"
@ -652,7 +843,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</span> </span>
</div> </div>
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -671,7 +862,7 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
/> />
</a> </a>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -710,6 +901,27 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = `
</svg> </svg>
</i> </i>
</a> </a>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
<i <i
aria-label="icon: delete" aria-label="icon: delete"
class="anticon anticon-delete" class="anticon anticon-delete"
@ -753,7 +965,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
class="ant-upload-list ant-upload-list-picture" class="ant-upload-list ant-upload-list-picture"
> >
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -772,7 +984,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
/> />
</a> </a>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -780,32 +992,65 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
> >
xxx.png xxx.png
</a> </a>
<span
class="ant-upload-list-item-card-actions picture"
>
<a
title="Download file"
>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
</a>
<a
title="Remove file"
>
<i
aria-label="icon: delete"
class="anticon anticon-delete"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</i>
</a>
</span>
</span> </span>
</div> </div>
<i
aria-label="icon: close"
class="anticon anticon-close"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</div> </div>
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -824,7 +1069,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
/> />
</a> </a>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -832,29 +1077,62 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
> >
yyy.png yyy.png
</a> </a>
<span
class="ant-upload-list-item-card-actions picture"
>
<a
title="Download file"
>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
</a>
<a
title="Remove file"
>
<i
aria-label="icon: delete"
class="anticon anticon-delete"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</i>
</a>
</span>
</span> </span>
</div> </div>
<i
aria-label="icon: close"
class="anticon anticon-close"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</div> </div>
</div> </div>
</span> </span>
@ -870,7 +1148,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
class="ant-upload-list ant-upload-list-picture" class="ant-upload-list ant-upload-list-picture"
> >
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -889,7 +1167,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
/> />
</a> </a>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -897,32 +1175,65 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
> >
xxx.png xxx.png
</a> </a>
<span
class="ant-upload-list-item-card-actions picture"
>
<a
title="Download file"
>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
</a>
<a
title="Remove file"
>
<i
aria-label="icon: delete"
class="anticon anticon-delete"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</i>
</a>
</span>
</span> </span>
</div> </div>
<i
aria-label="icon: close"
class="anticon anticon-close"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</div> </div>
<div <div
class="ant-upload-list-item ant-upload-list-item-done" class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture"
> >
<div <div
class="ant-upload-list-item-info" class="ant-upload-list-item-info"
@ -941,7 +1252,7 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
/> />
</a> </a>
<a <a
class="ant-upload-list-item-name" class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-2"
href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
rel="noopener noreferrer" rel="noopener noreferrer"
target="_blank" target="_blank"
@ -949,29 +1260,62 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = `
> >
yyy.png yyy.png
</a> </a>
<span
class="ant-upload-list-item-card-actions picture"
>
<a
title="Download file"
>
<i
aria-label="icon: download"
class="anticon anticon-download"
tabindex="-1"
title="Download file"
>
<svg
aria-hidden="true"
class=""
data-icon="download"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 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>
</i>
</a>
<a
title="Remove file"
>
<i
aria-label="icon: delete"
class="anticon anticon-delete"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="delete"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
/>
</svg>
</i>
</a>
</span>
</span> </span>
</div> </div>
<i
aria-label="icon: close"
class="anticon anticon-close"
tabindex="-1"
title="Remove file"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</i>
</div> </div>
</div> </div>
</span> </span>

977
components/upload/__tests__/__snapshots__/uploadlist.test.js.snap
View File

File diff suppressed because it is too large Load Diff

29
components/upload/__tests__/upload.test.js
View File

@ -417,7 +417,7 @@ describe('Upload', () => {
const wrapper = mount(<Upload {...props} />); const wrapper = mount(<Upload {...props} />);
wrapper.find('div.ant-upload-list-item i.anticon-close').simulate('click'); wrapper.find('div.ant-upload-list-item i.anticon-delete').simulate('click');
setImmediate(() => { setImmediate(() => {
wrapper.update(); wrapper.update();
@ -429,6 +429,33 @@ describe('Upload', () => {
}); });
}); });
it('should not stop download when return use onDownload', done => {
const mockRemove = jest.fn(() => false);
const props = {
onRemove: mockRemove,
fileList: [
{
uid: '-1',
name: 'foo.png',
status: 'done',
url: 'http://www.baidu.com/xxx.png',
},
],
};
const wrapper = mount(<Upload {...props} onDownload={() => {}} />);
wrapper.find('div.ant-upload-list-item i.anticon-download').simulate('click');
setImmediate(() => {
wrapper.update();
expect(props.fileList).toHaveLength(1);
expect(props.fileList[0].status).toBe('done');
done();
});
});
// https://github.com/ant-design/ant-design/issues/14439 // https://github.com/ant-design/ant-design/issues/14439
it('should allow call abort function through upload instance', () => { it('should allow call abort function through upload instance', () => {
const wrapper = mount( const wrapper = mount(

114
components/upload/__tests__/uploadlist.test.js
View File

@ -121,7 +121,7 @@ describe('Upload List', () => {
wrapper wrapper
.find('.ant-upload-list-item') .find('.ant-upload-list-item')
.at(0) .at(0)
.find('.anticon-close') .find('.anticon-delete')
.simulate('click'); .simulate('click');
await sleep(400); await sleep(400);
wrapper.update(); wrapper.update();
@ -202,6 +202,36 @@ describe('Upload List', () => {
expect(handleChange.mock.calls[0][0].fileList).toHaveLength(3); expect(handleChange.mock.calls[0][0].fileList).toHaveLength(3);
}); });
it('In the case of listType=picture, the error status does not show the download.', () => {
const file = { status: 'error', uid: 'file' };
const wrapper = mount(
<Upload listType="picture" fileList={[file]}>
<button type="button">upload</button>
</Upload>,
);
expect(wrapper.find('div.ant-upload-list-item i.anticon-download').length).toBe(0);
});
it('In the case of listType=picture-card, the error status does not show the download.', () => {
const file = { status: 'error', uid: 'file' };
const wrapper = mount(
<Upload listType="picture-card" fileList={[file]}>
<button type="button">upload</button>
</Upload>,
);
expect(wrapper.find('div.ant-upload-list-item i.anticon-download').length).toBe(0);
});
it('In the case of listType=text, the error status does not show the download.', () => {
const file = { status: 'error', uid: 'file' };
const wrapper = mount(
<Upload listType="text" fileList={[file]}>
<button type="button">upload</button>
</Upload>,
);
expect(wrapper.find('div.ant-upload-list-item i.anticon-download').length).toBe(0);
});
it('should support onPreview', () => { it('should support onPreview', () => {
const handlePreview = jest.fn(); const handlePreview = jest.fn();
const wrapper = mount( const wrapper = mount(
@ -248,6 +278,52 @@ describe('Upload List', () => {
expect(handleChange.mock.calls.length).toBe(2); expect(handleChange.mock.calls.length).toBe(2);
}); });
it('should support onDownload', async () => {
const handleDownload = jest.fn();
const wrapper = mount(
<Upload
listType="picture-card"
defaultFileList={[
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
]}
onDownload={handleDownload}
>
<button type="button">upload</button>
</Upload>,
);
wrapper
.find('.anticon-download')
.at(0)
.simulate('click');
});
it('should support no onDownload', async () => {
const wrapper = mount(
<Upload
listType="picture-card"
defaultFileList={[
{
uid: '0',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
},
]}
>
<button type="button">upload</button>
</Upload>,
);
wrapper
.find('.anticon-download')
.at(0)
.simulate('click');
});
describe('should generate thumbUrl from file', () => { describe('should generate thumbUrl from file', () => {
[ [
{ width: 100, height: 200, name: 'height large than width' }, { width: 100, height: 200, name: 'height large than width' },
@ -431,6 +507,13 @@ describe('Upload List', () => {
expect(wrapper.handlePreview()).toBe(undefined); expect(wrapper.handlePreview()).toBe(undefined);
}); });
it('return when prop onDownload not exists', () => {
const file = new File([''], 'test.txt', { type: 'text/plain' });
const items = [{ uid: 'upload-list-item', url: '' }];
const wrapper = mount(<UploadList items={items} locale={{ downloadFile: '' }} />).instance();
expect(wrapper.handleDownload(file)).toBe(undefined);
});
it('previewFile should work correctly', async () => { it('previewFile should work correctly', async () => {
const file = new File([''], 'test.txt', { type: 'text/plain' }); const file = new File([''], 'test.txt', { type: 'text/plain' });
const items = [{ uid: 'upload-list-item', url: '' }]; const items = [{ uid: 'upload-list-item', url: '' }];
@ -440,6 +523,20 @@ describe('Upload List', () => {
return wrapper.props.previewFile(file); return wrapper.props.previewFile(file);
}); });
it('downloadFile should work correctly', async () => {
const file = new File([''], 'test.txt', { type: 'text/plain' });
const items = [{ uid: 'upload-list-item', url: '' }];
const wrapper = mount(
<UploadList
listType="picture-card"
items={items}
onDownload={() => {}}
locale={{ downloadFile: '' }}
/>,
).instance();
return wrapper.props.onDownload(file);
});
it('extname should work correctly when url not exists', () => { it('extname should work correctly when url not exists', () => {
const items = [{ uid: 'upload-list-item', url: '' }]; const items = [{ uid: 'upload-list-item', url: '' }];
const wrapper = mount( const wrapper = mount(
@ -448,6 +545,21 @@ describe('Upload List', () => {
expect(wrapper.find('.ant-upload-list-item-thumbnail').length).toBe(2); expect(wrapper.find('.ant-upload-list-item-thumbnail').length).toBe(2);
}); });
it('extname should work correctly when url exists', () => {
const items = [{ status: 'done', uid: 'upload-list-item', url: '/example' }];
const wrapper = mount(
<UploadList
listType="picture"
onDownload={file => {
expect(file.url).toBe('/example');
}}
items={items}
locale={{ downloadFile: '' }}
/>,
);
wrapper.find('div.ant-upload-list-item i.anticon-download').simulate('click');
});
it('when picture-card is loading, icon should render correctly', () => { it('when picture-card is loading, icon should render correctly', () => {
const items = [{ status: 'uploading', uid: 'upload-list-item' }]; const items = [{ status: 'uploading', uid: 'upload-list-item' }];
const wrapper = mount( const wrapper = mount(

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

@ -32,13 +32,14 @@ Uploading is the process of publishing information (web pages, text, pictures, v
| multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false | | | multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false | |
| name | The name of uploading file | string | 'file' | | | name | The name of uploading file | string | 'file' | |
| previewFile | Customize preview file logic | (file: File \| Blob) => Promise<dataURL: string> | - | 3.17.0 | | previewFile | Customize preview file logic | (file: File \| Blob) => Promise<dataURL: string> | - | 3.17.0 |
| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon` and `showRemoveIcon` individually | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true | | | showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon` and `showDownloadIcon` individually | Boolean or { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean } | true | |
| supportServerRender | Need to be turned on while the server side is rendering | boolean | false | | | supportServerRender | Need to be turned on while the server side is rendering | boolean | false | |
| withCredentials | ajax upload with cookie sent | boolean | false | | | withCredentials | ajax upload with cookie sent | boolean | false | |
| openFileDialogOnClick | click open file dialog | boolean | true | 3.10.0 | | openFileDialogOnClick | click open file dialog | boolean | true | 3.10.0 |
| onChange | A callback function, can be executed when uploading state is changing, see [onChange](#onChange) | Function | - | | | onChange | A callback function, can be executed when uploading state is changing, see [onChange](#onChange) | Function | - | |
| onPreview | A callback function, will be executed when file link or preview icon is clicked | Function(file) | - | | | onPreview | A callback function, will be executed when file link or preview icon is clicked | Function(file) | - | |
| onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is `false` or a Promise which resolve(false) or reject | Function(file): `boolean | Promise` | - | | | onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is `false` or a Promise which resolve(false) or reject | Function(file): `boolean | Promise` | - | |
| onDownload | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB. | Function(file): void | Jump to new TAB | |
| transformFile   | Customize transform file before request | Function(file): `string | Blob | File | Promise<string | Blob | File>` | - | 3.21.0 | | transformFile   | Customize transform file before request | Function(file): `string | Blob | File | Promise<string | Blob | File>` | - | 3.21.0 |
### onChange ### onChange

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

@ -33,13 +33,14 @@ title: Upload
| multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false | | | multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false | |
| name | 发到后台的文件参数名 | string | 'file' | | | name | 发到后台的文件参数名 | string | 'file' | |
| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | 无 | 3.17.0 | | previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | 无 | 3.17.0 |
| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon` 和 `showRemoveIcon` | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true | | | showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon` 和 `showDownloadIcon` | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean } | true | |
| supportServerRender | 服务端渲染时需要打开这个 | boolean | false | | | supportServerRender | 服务端渲染时需要打开这个 | boolean | false | |
| withCredentials | 上传请求时是否携带 cookie | boolean | false | | | withCredentials | 上传请求时是否携带 cookie | boolean | false | |
| openFileDialogOnClick | 点击打开文件对话框 | boolean | true | 3.10.0 | | openFileDialogOnClick | 点击打开文件对话框 | boolean | true | 3.10.0 |
| onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | Function | 无 | | | onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | Function | 无 | |
| onPreview | 点击文件链接或预览图标时的回调 | Function(file) | 无 | | | onPreview | 点击文件链接或预览图标时的回调 | Function(file) | 无 | |
| onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。               | Function(file): `boolean | Promise` | 无   | | | onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。               | Function(file): `boolean | Promise` | 无   | |
| onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页。 | Function(file): void | 跳转新标签页 | |
| transformFile   | 在上传之前转换文件。支持返回一个 Promise 对象   | Function(file): `string | Blob | File | Promise<string | Blob | File>` | 无   | 3.21.0 | | transformFile   | 在上传之前转换文件。支持返回一个 Promise 对象   | Function(file): `string | Blob | File | Promise<string | Blob | File>` | 无   | 3.21.0 |
### onChange ### onChange

5
components/upload/interface.tsx
View File

@ -40,11 +40,13 @@ export interface UploadChangeParam<T extends object = UploadFile> {
export interface ShowUploadListInterface { export interface ShowUploadListInterface {
showRemoveIcon?: boolean; showRemoveIcon?: boolean;
showPreviewIcon?: boolean; showPreviewIcon?: boolean;
showDownloadIcon?: boolean;
} }
export interface UploadLocale { export interface UploadLocale {
uploading?: string; uploading?: string;
removeFile?: string; removeFile?: string;
downloadFile?: string;
uploadError?: string; uploadError?: string;
previewFile?: string; previewFile?: string;
} }
@ -74,6 +76,7 @@ export interface UploadProps {
listType?: UploadListType; listType?: UploadListType;
className?: string; className?: string;
onPreview?: (file: UploadFile) => void; onPreview?: (file: UploadFile) => void;
onDownload?: (file: UploadFile) => void;
onRemove?: (file: UploadFile) => void | boolean | Promise<void | boolean>; onRemove?: (file: UploadFile) => void | boolean | Promise<void | boolean>;
supportServerRender?: boolean; supportServerRender?: boolean;
style?: React.CSSProperties; style?: React.CSSProperties;
@ -96,11 +99,13 @@ export interface UploadState {
export interface UploadListProps { export interface UploadListProps {
listType?: UploadListType; listType?: UploadListType;
onPreview?: (file: UploadFile) => void; onPreview?: (file: UploadFile) => void;
onDownload?: (file: UploadFile) => void;
onRemove?: (file: UploadFile) => void | boolean; onRemove?: (file: UploadFile) => void | boolean;
items?: Array<UploadFile>; items?: Array<UploadFile>;
progressAttr?: Object; progressAttr?: Object;
prefixCls?: string; prefixCls?: string;
showRemoveIcon?: boolean; showRemoveIcon?: boolean;
showDownloadIcon?: boolean;
showPreviewIcon?: boolean; showPreviewIcon?: boolean;
locale: UploadLocale; locale: UploadLocale;
previewFile?: PreviewFileHandler; previewFile?: PreviewFileHandler;

49
components/upload/style/index.less
View File

@ -140,6 +140,16 @@
.@{upload-prefix-cls}-list { .@{upload-prefix-cls}-list {
.reset-component; .reset-component;
.clearfix; .clearfix;
&-item-list-type-text {
&:hover {
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
padding-right: 14px;
}
.@{upload-prefix-cls}-list-item-name-icon-count-2 {
padding-right: 28px;
}
}
}
&-item { &-item {
position: relative; position: relative;
height: 22px; height: 22px;
@ -154,6 +164,25 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&-name-icon-count-1 {
padding-right: 14px;
}
&-card-actions {
position: absolute;
right: 0;
opacity: 0;
&.picture {
top: 25px;
line-height: 1;
opacity: 1;
}
.anticon {
padding-right: 5px;
color: rgba(0, 0, 0, 0.45);
}
}
&-info { &-info {
height: 100%; height: 100%;
padding: 0 12px 0 4px; padding: 0 12px 0 4px;
@ -196,14 +225,21 @@
opacity: 1; opacity: 1;
} }
&:hover &-card-actions {
opacity: 1;
}
&-error, &-error,
&-error .@{iconfont-css-prefix}-paper-clip, &-error .@{iconfont-css-prefix}-paper-clip,
&-error &-name { &-error &-name {
color: @error-color; color: @error-color;
} }
&-error .@{iconfont-css-prefix}-close { &-error &-card-actions {
color: @error-color !important; .anticon {
padding-right: 5px;
color: @error-color;
}
opacity: 1; opacity: 1;
} }
@ -290,6 +326,14 @@
transition: all 0.3s; transition: all 0.3s;
} }
.@{upload-item}-name-icon-count-1 {
padding-right: 18px;
}
.@{upload-item}-name-icon-count-2 {
padding-right: 36px;
}
.@{upload-item}-uploading .@{upload-item}-name { .@{upload-item}-uploading .@{upload-item}-name {
line-height: 28px; line-height: 28px;
} }
@ -353,6 +397,7 @@
transition: all 0.3s; transition: all 0.3s;
.@{iconfont-css-prefix}-eye-o, .@{iconfont-css-prefix}-eye-o,
.@{iconfont-css-prefix}-download,
.@{iconfont-css-prefix}-delete { .@{iconfont-css-prefix}-delete {
z-index: 10; z-index: 10;
width: 16px; width: 16px;

4
package.json
View File

@ -121,10 +121,10 @@
"rc-progress": "~2.5.0", "rc-progress": "~2.5.0",
"rc-rate": "~2.5.0", "rc-rate": "~2.5.0",
"rc-select": "~9.2.0", "rc-select": "~9.2.0",
"rc-slider": "~8.6.11", "rc-slider": "~8.7.1",
"rc-steps": "~3.5.0", "rc-steps": "~3.5.0",
"rc-switch": "~1.9.0", "rc-switch": "~1.9.0",
"rc-table": "~6.7.0", "rc-table": "~6.8.6",
"rc-tabs": "~9.6.4", "rc-tabs": "~9.6.4",
"rc-time-picker": "~3.7.1", "rc-time-picker": "~3.7.1",
"rc-tooltip": "~3.7.3", "rc-tooltip": "~3.7.3",

6
site/theme/static/markdown.less
View File

@ -252,11 +252,15 @@
word-break: break-all; word-break: break-all;
} }
&:nth-child(4) { &:nth-child(4) {
width: 13%; width: 16%;
font-size: @font-size-base - 1px; font-size: @font-size-base - 1px;
} }
} }
} }
hr {
margin: 12px 0;
}
} }
.grid-demo, .grid-demo,