diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx index a1c553bc6a12..dab6ec2015af 100644 --- a/components/anchor/AnchorLink.tsx +++ b/components/anchor/AnchorLink.tsx @@ -8,6 +8,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; export interface AnchorLinkProps { prefixCls?: string; href: string; + target: string; title: React.ReactNode; children?: React.ReactNode; className?: string; @@ -52,7 +53,7 @@ class AnchorLink extends React.Component { }; renderAnchorLink = ({ getPrefixCls }: ConfigConsumerProps) => { - const { prefixCls: customizePrefixCls, href, title, children, className } = this.props; + const { prefixCls: customizePrefixCls, href, title, children, className, target } = this.props; const prefixCls = getPrefixCls('anchor', customizePrefixCls); const active = this.context.antAnchor.activeLink === href; const wrapperClassName = classNames(className, `${prefixCls}-link`, { @@ -67,6 +68,7 @@ class AnchorLink extends React.Component { className={titleClassName} href={href} title={typeof title === 'string' ? title : ''} + target={target} onClick={this.handleClick} > {title} diff --git a/components/anchor/__tests__/__snapshots__/demo.test.js.snap b/components/anchor/__tests__/__snapshots__/demo.test.js.snap index 4f5e30d5aedb..d1cce5bd52e1 100644 --- a/components/anchor/__tests__/__snapshots__/demo.test.js.snap +++ b/components/anchor/__tests__/__snapshots__/demo.test.js.snap @@ -41,6 +41,18 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = ` Static demo +
+ + Basic demo with Target + +
diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md index 33cb4b3cd942..ce559a4ae17b 100644 --- a/components/anchor/demo/basic.md +++ b/components/anchor/demo/basic.md @@ -22,6 +22,7 @@ ReactDOM.render( + diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index 10fd0b4a67cf..92ff201f7e37 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -29,7 +29,8 @@ For displaying anchor hyperlinks on page and jumping between them. ### Link Props -| Property | Description | Type | Default | Version | -| -------- | -------------------- | ----------------- | ------- | ------- | -| href | target of hyperlink | string | | | -| title | content of hyperlink | string\|ReactNode | | | +| Property | Description | Type | Default | Version | +| -------- | ----------------------------------------- | ----------------- | ------- | ------- | +| href | target of hyperlink | string | | | +| title | content of hyperlink | string\|ReactNode | | | +| target | Specifies where to display the linked URL | string | | | diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index 1d49fd1c70c6..2b1b385cc993 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -30,7 +30,8 @@ title: Anchor ### Link Props -| 成员 | 说明 | 类型 | 默认值 | 版本 | -| ----- | -------- | ----------------- | ------ | ---- | -| href | 锚点链接 | string | | | -| title | 文字内容 | string\|ReactNode | | | +| 成员 | 说明 | 类型 | 默认值 | 版本 | +| ------ | -------------------------------- | ----------------- | ------ | ---- | +| href | 锚点链接 | string | | | +| title | 文字内容 | string\|ReactNode | | | +| target | 该属性指定在何处显示链接的资源。 | string | | | diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index dc68a374759b..7e16436b9035 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import * as PropTypes from 'prop-types'; import classNames from 'classnames'; +import toArray from 'rc-util/lib/Children/toArray'; import BreadcrumbItem from './BreadcrumbItem'; import BreadcrumbSeparator from './BreadcrumbSeparator'; import Menu from '../menu'; @@ -47,6 +48,16 @@ function defaultItemRender(route: Route, params: any, routes: Route[], paths: st return isLastItem ? {name} : {name}; } +function filterFragment(children: any) { + return toArray(children).map((element: any) => { + if (React.isValidElement(element) && element.type === React.Fragment) { + const props: any = element.props; + return props.children; + } + return element; + }); +} + export default class Breadcrumb extends React.Component { static Item: typeof BreadcrumbItem; @@ -139,7 +150,7 @@ export default class Breadcrumb extends React.Component { // generated by route crumbs = this.genForRoutes(this.props); } else if (children) { - crumbs = React.Children.map(children, (element: any, index) => { + crumbs = React.Children.map(filterFragment(children), (element: any, index) => { if (!element) { return element; } diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.js b/components/breadcrumb/__tests__/Breadcrumb.test.js index 7275530ab215..e70a53b99b1d 100644 --- a/components/breadcrumb/__tests__/Breadcrumb.test.js +++ b/components/breadcrumb/__tests__/Breadcrumb.test.js @@ -55,6 +55,21 @@ describe('Breadcrumb', () => { expect(wrapper).toMatchSnapshot(); }); + // https://github.com/ant-design/ant-design/issues/18260 + it('filter React.Fragment', () => { + const wrapper = render( + + Location + : + <> + Application Center + + + , + ); + expect(wrapper).toMatchSnapshot(); + }); + it('should render a menu', () => { const routes = [ { diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap index c5cb3931ccbd..ae829f58a4dd 100644 --- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap +++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap @@ -1,5 +1,37 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Breadcrumb filter React.Fragment 1`] = ` +
+ + + Location + + + + : + + + + Application Center + + + + / + +
+`; + exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
+
+ + More + +
diff --git a/components/card/demo/tabs.md b/components/card/demo/tabs.md index d35f025e2ca0..1fb4a5dd3f12 100644 --- a/components/card/demo/tabs.md +++ b/components/card/demo/tabs.md @@ -85,6 +85,7 @@ class TabsCard extends React.Component { style={{ width: '100%' }} tabList={tabListNoTitle} activeTabKey={this.state.noTitleKey} + tabBarExtraContent={More} onTabChange={key => { this.onTabChange(key, 'noTitleKey'); }} diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md index 85f69a50d17a..732c2f3c9525 100644 --- a/components/card/index.en-US.md +++ b/components/card/index.en-US.md @@ -32,6 +32,7 @@ A card can be used to display content related to a single subject. The content c | hoverable | Lift up when hovering card | boolean | false | | | loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | | | tabList | List of TabPane's head. | Array<{key: string, tab: ReactNode}> | - | | +| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - | | | size | Size of card | `default` \| `small` | `default` | 3.12.0 | | title | Card title | string\|ReactNode | - | | | type | Card style type, can be set to `inner` or not set | string | - | | diff --git a/components/card/index.tsx b/components/card/index.tsx index 9e03ef75c728..38718f839d50 100644 --- a/components/card/index.tsx +++ b/components/card/index.tsx @@ -51,6 +51,7 @@ export interface CardProps extends Omit, 't cover?: React.ReactNode; actions?: React.ReactNode[]; tabList?: CardTabListType[]; + tabBarExtraContent?: React.ReactNode | null; onTabChange?: (key: string) => void; activeTabKey?: string; defaultActiveTabKey?: string; @@ -119,6 +120,7 @@ export default class Card extends React.Component { children, activeTabKey, defaultActiveTabKey, + tabBarExtraContent, ...others } = this.props; @@ -186,6 +188,7 @@ export default class Card extends React.Component { [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey ? activeTabKey : defaultActiveTabKey, + tabBarExtraContent, }; let head; diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 340472b1978f..73e8b4c1ac77 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -33,6 +33,7 @@ cols: 1 | hoverable | 鼠标移过时可浮起 | boolean | false | | | loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | | | tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - | | +| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 | | | size | card 的尺寸 | `default` \| `small` | `default` | 3.12.0 | | title | 卡片标题 | string\|ReactNode | - | | | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - | | @@ -40,17 +41,17 @@ cols: 1 ### Card.Grid -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | ---------------------- | ------ | ------- | ---- | -| className | 网格容器类名 | string | - | | -| style | 定义网格容器类名的样式 | object | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --------- | ---------------------- | ------ | ------ | ---- | +| className | 网格容器类名 | string | - | | +| style | 定义网格容器类名的样式 | object | - | | ### Card.Meta -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | ------------------ | --------- | ------- | ---- | -| avatar | 头像/图标 | ReactNode | - | | -| className | 容器类名 | string | - | | -| description | 描述内容 | ReactNode | - | | -| style | 定义容器类名的样式 | object | - | | -| title | 标题内容 | ReactNode | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ----------- | ------------------ | --------- | ------ | ---- | +| avatar | 头像/图标 | ReactNode | - | | +| className | 容器类名 | string | - | | +| description | 描述内容 | ReactNode | - | | +| style | 定义容器类名的样式 | object | - | | +| title | 标题内容 | ReactNode | - | | diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap index c5a1285f3924..5be03a6d61a3 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap @@ -17339,30 +17339,61 @@ exports[`ConfigProvider components Upload configProvider 1`] = ` title="xxx.png" > xxx.png + + + + + + + + + + + +
- - -
@@ -17409,30 +17440,61 @@ exports[`ConfigProvider components Upload normal 1`] = ` title="xxx.png" > xxx.png + + + + + + + + + + + + - - - @@ -17479,30 +17541,61 @@ exports[`ConfigProvider components Upload prefixCls 1`] = ` title="xxx.png" > xxx.png + + + + + + + + + + + + - - - diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md index 7b956e683b9f..290768899631 100644 --- a/components/input-number/index.en-US.md +++ b/components/input-number/index.en-US.md @@ -27,6 +27,7 @@ When a numeric value needs to be provided. | step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 | | | value | current value | number | | | | onChange | The callback triggered when the value is changed. | function(value: number \| string) | | | +| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | | | ## Methods diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 358aaf569f7a..2cfc45099912 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -29,6 +29,7 @@ export interface InputNumberProps name?: string; id?: string; precision?: number; + onPressEnter?: React.KeyboardEventHandler; } export default class InputNumber extends React.Component { diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index 238971aca957..babb3d3f29d0 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -30,6 +30,7 @@ title: InputNumber | step | 每次改变步数，可以为小数 | number\|string | 1 | | | value | 当前值 | number | | | | onChange | 变化回调 | Function(value: number \| string) | | | +| onPressEnter | 按下回车的回调 | function(e) | | | ## 方法 diff --git a/components/locale/default.tsx b/components/locale/default.tsx index eabf51c069f4..012f9b4643cc 100644 --- a/components/locale/default.tsx +++ b/components/locale/default.tsx @@ -42,6 +42,7 @@ export default { removeFile: 'Remove file', uploadError: 'Upload error', previewFile: 'Preview file', + downloadFile: 'Download file', }, Empty: { description: 'No Data', diff --git a/components/locale/zh_CN.tsx b/components/locale/zh_CN.tsx index 6dd924069e3f..67534a324a1f 100644 --- a/components/locale/zh_CN.tsx +++ b/components/locale/zh_CN.tsx @@ -42,6 +42,7 @@ export default { removeFile: '删除文件', uploadError: '上传错误', previewFile: '预览文件', + downloadFile: '下载文件', }, Empty: { description: '暂无数据', diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap index d61840b8916f..680e2981ba72 100644 --- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap +++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap @@ -1,410 +1,361 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/page-header/demo/actions.md correctly 1`] = ` -
+
- -
- - - -
- -
- - Title - - - This is a subtitle - - + + + +
+
- Warning + Title - - - - - - -
-
+ + + + +
-
-
-
- Created -
-
- Lili Qu -
-
-
-
-
-
- Association -
-
- - 421421 - -
-
-
-
-
-
- Creation Time -
-
+ + - 2017-01-10 -
-
-
-
-
-
- Effective Time -
-
- 2017-10-10 -
-
-
-
-
-
- Remarks -
-
- Gonghu Road, Xihu District, Hangzhou, Zhejiang, China -
-
-
-
-
-
-
-
-
-
- Status -
-
- - Pending - -
-
-
-
-
-
- Price -
-
+ Created + + + Lili Qu + + + + + Association + + + + 421421 + + + + + + Creation Time + + + 2017-01-10 + + + + - - $ - - + Effective Time + + + 2017-10-10 + + + - 568 + Remarks - .08 + Gonghu Road, Xihu District, Hangzhou, Zhejiang, China - -
-
-
+ + + +
+
- - + + + +
+
+ + Title + + + This is a subtitle + + + + Running + + + + + + +
+
+
+
+
+ Status +
+
- - - + Pending - +
+
+
-
+
+ -
+ + -
- - -
-
-
-
-
-
-
-
-
+ 568 + + + .08 + + +
+
+ class="ant-statistic-title" + > + Balance +
+ class="ant-statistic-content" + > + + $ + + + + 3,345 + + + .08 + + +
- -
@@ -415,43 +366,39 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = ` class="ant-page-header" >
- - - - - + + +
- -
@@ -468,7 +415,7 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = ` exports[`renders ./components/page-header/demo/breadcrumb.md correctly 1`] = `
Title + + This is a subtitle +
`; exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
+ + + Title + + This is a subtitle + + + + Running + + + + + + + +
Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
-

- + start Quick Start - + info - Product Info + Product Info - + doc Product Doc -

+
content
`; + +exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = ` +
+
+
+
+
+ + + +
+
+ + Title + + + This is a subtitle + + + + + + +
+
+
+
+
+
+ + + + + + + + + + + + + + +
+ + Created + + + Lili Qu + + + + Association + + + + 421421 + + +
+ + Creation Time + + + 2017-01-10 + + + + Effective Time + + + 2017-10-10 + +
+ + Remarks + + + Gonghu Road, Xihu District, Hangzhou, Zhejiang, China + +
+
+
+
+
+
+
+
+ Status +
+
+ + Pending + +
+
+
+
+ Price +
+
+ + $ + + + + 568 + + + .08 + + +
+
+
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + +
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+`; diff --git a/components/page-header/__tests__/index.test.js b/components/page-header/__tests__/index.test.js index daf030a1ba67..8484c7ef2111 100644 --- a/components/page-header/__tests__/index.test.js +++ b/components/page-header/__tests__/index.test.js @@ -66,4 +66,26 @@ describe('PageHeader', () => { const wrapper = render(); expect(wrapper).toMatchSnapshot(); }); + + it('breadcrumbs and back icon can only have one', () => { + const routes = [ + { + path: 'index', + breadcrumbName: 'First-level Menu', + }, + { + path: 'first', + breadcrumbName: 'Second-level Menu', + }, + { + path: 'second', + breadcrumbName: 'Third-level Menu', + }, + ]; + const wrapper = mount( true} breadcrumb={{ routes }} />); + expect(wrapper.find('.ant-breadcrumb')).toHaveLength(0); + + wrapper.setProps({ onBack: undefined }); + expect(wrapper.find('.ant-breadcrumb')).toHaveLength(1); + }); }); diff --git a/components/page-header/demo/actions.md b/components/page-header/demo/actions.md index b0cf6641ce2f..a1d6087fd371 100644 --- a/components/page-header/demo/actions.md +++ b/components/page-header/demo/actions.md @@ -1,8 +1,8 @@ --- -order: 5 +order: 4 title: - zh-CN: 复杂的例子 - en-US: Complex example + zh-CN: 多种形态的 PageHeader + en-US: Various forms of PageHeader --- ## zh-CN @@ -14,107 +14,68 @@ title: Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page. ```jsx -import { PageHeader, Tag, Tabs, Button, Statistic, Row, Col } from 'antd'; - -const { TabPane } = Tabs; - -const Description = ({ term, children, span = 12 }) => ( - -
-
{term}
-
{children}
-
- -); - -const content = ( - - Lili Qu - - 421421 - - 2017-01-10 - 2017-10-10 - - Gonghu Road, Xihu District, Hangzhou, Zhejiang, China - - -); - -const extraContent = ( - - - - - - - - -); +import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd'; ReactDOM.render( - window.history.back()} - title="Title" - subTitle="This is a subtitle" - tags={Warning} - extra={[ - , - , - , - ]} - footer={ - - - - - } - > -
-
{content}
-
{extraContent}
-
- , +
+ window.history.back()} + title="Title" + subTitle="This is a subtitle" + extra={[ + , + , + , + ]} + > + + Lili Qu + + 421421 + + 2017-01-10 + 2017-10-10 + + Gonghu Road, Xihu District, Hangzhou, Zhejiang, China + + + +
+ window.history.back()} + title="Title" + tags={Running} + subTitle="This is a subtitle" + extra={[ + , + , + , + ]} + > + + + + + + +
, mountNode, ); ``` diff --git a/components/page-header/demo/breadcrumb.md b/components/page-header/demo/breadcrumb.md index 75ee348eebc8..ffa32e2a8e3d 100644 --- a/components/page-header/demo/breadcrumb.md +++ b/components/page-header/demo/breadcrumb.md @@ -31,5 +31,8 @@ const routes = [ }, ]; -ReactDOM.render(, mountNode); +ReactDOM.render( + , + mountNode, +); ``` diff --git a/components/page-header/demo/content.md b/components/page-header/demo/content.md index d6660396b024..f00377604fa2 100644 --- a/components/page-header/demo/content.md +++ b/components/page-header/demo/content.md @@ -1,23 +1,64 @@ --- order: 3 title: - zh-CN: 带内容的例子 - en-US: Example with content + zh-CN: 组合示例 + en-US: Complete example --- ## zh-CN -带内容的例子,可以优先展示页面的主要信息。 +使用了 pageHeader 提供的所有能力。 ## en-US -An example with content that gives priority to the main information of the page. +Show all props.Used all the capabilities provided by pageHeader. ```jsx -import { PageHeader, Typography } from 'antd'; +import { PageHeader, Menu, Dropdown, Icon, Button, Tag, Typography, Row } from 'antd'; const { Paragraph } = Typography; +const menu = ( + + + + 1st menu item + + + + + 2nd menu item + + + + + 3rd menu item + + + +); + +const DropdownMenu = () => { + return ( + + + + ); +}; + const routes = [ { path: 'index', @@ -33,6 +74,25 @@ const routes = [ }, ]; +const IconLink = ({ src, text }) => ( + + start + {text} + +); + const content = (
@@ -44,64 +104,74 @@ const content = ( easier for designers to have a clear psychological expectation of color when adjusting colors, as well as facilitate communication in teams. -

- - start - Quick Start - - - info - Product Info - - - doc - Product Doc - -

+ + + + +
); -const extraContent = ( - content -); +const Content = ({ children, extraContent }) => { + return ( + +
+ {children} +
+
+ {extraContent} +
+ + ); +}; ReactDOM.render( - -
-
{content}
-
{extraContent}
-
+ Running} + extra={[ + , + , + , + , + ]} + avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }} + breadcrumb={{ routes }} + > + + } + > + {content} + , mountNode, ); ``` + diff --git a/components/page-header/index.en-US.md b/components/page-header/index.en-US.md index 1f8e51c7eb32..20bccfc6c62c 100644 --- a/components/page-header/index.en-US.md +++ b/components/page-header/index.en-US.md @@ -18,9 +18,12 @@ It can also be used as inter-page navigation when it is needed to make the user | --- | --- | --- | --- | --- | | title | custom title text | ReactNode | - | 3.14.0 | | subTitle | custom subTitle text | ReactNode | - | 3.14.0 | +| avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 | | backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `` | 3.14.0 | | tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | | extra | Operating area, at the end of the line of the title line | ReactNode | - | 3.14.0 | | breadcrumb | breadcrumb config | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 | | footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | 3.14.0 | | onBack | back icon click event | `()=>void` | `()=>history.back()` | 3.14.0 | + +> breadcrumbs will automatically disappear when configuring back icon. diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx index a560b02fa499..346043f0d469 100644 --- a/components/page-header/index.tsx +++ b/components/page-header/index.tsx @@ -3,11 +3,12 @@ import classnames from 'classnames'; import { ConfigConsumer, ConfigConsumerProps } from '../config-provider'; import Icon from '../icon'; -import Divider from '../divider'; import Tag from '../tag'; import Breadcrumb, { BreadcrumbProps } from '../breadcrumb'; +import Avatar, { AvatarProps } from '../avatar'; import TransButton from '../_util/transButton'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; +import warning from '../_util/warning'; export interface PageHeaderProps { backIcon?: React.ReactNode; @@ -19,6 +20,7 @@ export interface PageHeaderProps { tags?: React.ReactElement | React.ReactElement[]; footer?: React.ReactNode; extra?: React.ReactNode; + avatar?: AvatarProps; onBack?: (e: React.MouseEvent) => void; className?: string; } @@ -46,7 +48,6 @@ const renderBack = ( > {backIcon} -
)} @@ -57,20 +58,32 @@ const renderBreadcrumb = (breadcrumb: BreadcrumbProps) => { return ; }; -const renderHeader = (prefixCls: string, props: PageHeaderProps) => { - const { breadcrumb, backIcon, onBack } = props; +const renderHeader = ( + breadcrumb: PageHeaderProps['breadcrumb'], + { backIcon, onBack }: PageHeaderProps, +) => { + // by design,Bread crumbs and back icon can only have one + if (backIcon && onBack) { + if (breadcrumb && breadcrumb.routes) { + warning(false, 'page-header', 'breadcrumbs and back icon can only have one'); + } + return null; + } if (breadcrumb && breadcrumb.routes) { return renderBreadcrumb(breadcrumb); } - return renderBack(prefixCls, backIcon, onBack); + return null; }; const renderTitle = (prefixCls: string, props: PageHeaderProps) => { - const { title, subTitle, tags, extra } = props; + const { title, avatar, subTitle, tags, extra, backIcon, onBack } = props; const headingPrefixCls = `${prefixCls}-heading`; if (title || subTitle || tags || extra) { + const backIconDom = renderBack(prefixCls, backIcon, onBack); return (
+ {backIconDom} + {avatar && } {title && {title}} {subTitle && {subTitle}} {tags && {tags}} @@ -88,6 +101,10 @@ const renderFooter = (prefixCls: string, footer: React.ReactNode) => { return null; }; +const renderChildren = (prefixCls: string, children: React.ReactNode) => { + return
{children}
; +}; + const PageHeader: React.SFC = props => ( {({ getPrefixCls }: ConfigConsumerProps) => { @@ -96,23 +113,22 @@ const PageHeader: React.SFC = props => ( style, footer, children, + breadcrumb, className: customizeClassName, } = props; const prefixCls = getPrefixCls('page-header', customizePrefixCls); - const className = classnames( - prefixCls, - { - [`${prefixCls}-has-footer`]: footer, - }, - customizeClassName, - ); + const breadcrumbDom = renderHeader(breadcrumb, props); + const className = classnames(prefixCls, customizeClassName, { + 'has-breadcrumb': breadcrumbDom, + 'has-footer': footer, + }); return (
- {renderHeader(prefixCls, props)} + {breadcrumbDom} {renderTitle(prefixCls, props)} - {children &&
{children}
} + {children && renderChildren(prefixCls, children)} {renderFooter(prefixCls, footer)}
); diff --git a/components/page-header/index.zh-CN.md b/components/page-header/index.zh-CN.md index 2bdd95ad82a8..6ccb625d6c71 100644 --- a/components/page-header/index.zh-CN.md +++ b/components/page-header/index.zh-CN.md @@ -6,7 +6,7 @@ cols: 1 subtitle: 页头 --- -页头可用于声明页面主题、展示用户所关注的页面重要信息，以及承载与当前页相关的操作项（包含页面级操作，页面间导航等） +页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。 ## 何时使用 @@ -18,9 +18,12 @@ subtitle: 页头 | --- | --- | --- | --- | --- | | title | 自定义标题文字 | ReactNode | - | 3.14.0 | | subTitle | 自定义的二级标题文字 | ReactNode | - | 3.14.0 | +| avatar | 标题栏旁的头像 | [avatar props](/components/avatar-cn/) | - | 3.22.0 | | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode | `` | 3.14.0 | | tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 | | extra | 操作区，位于 title 行的行尾 | ReactNode | - | 3.14.0 | | breadcrumb | 面包屑的配置 | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 | | footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - | 3.14.0 | | onBack | 返回按钮的点击事件 | `()=>void` | `()=>history.back()` | 3.14.0 | + +> 配置返回按钮时，breadcrumb 会自动隐藏。 diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less index 0bcd081fa7d7..ab5c1dd5274d 100644 --- a/components/page-header/style/index.less +++ b/components/page-header/style/index.less @@ -7,21 +7,25 @@ .reset-component; position: relative; - padding: @page-header-padding-vertical @page-header-padding-horizontal; - background: @component-background; + padding: @page-header-padding; - &.@{pageheader-prefix-cls}-has-footer { - padding-bottom: 0; + &.has-breadcrumb { + padding-top: @page-header-padding-breadcrumb; + } + + &.has-footer { + padding-bottom: @page-header-padding-vertical; } &-back { - display: inline-block; - padding: 4px 0; - font-size: 16px; - line-height: 100%; + float: left; + margin: 6px 0; + margin-right: 16px; + font-size: 20px; + line-height: 1; &-button { .operation-unit(); - color: @text-color; + color: #000; cursor: pointer; } } @@ -29,40 +33,48 @@ .@{ant-prefix}-divider-vertical { height: 14px; margin: 0 12px; + vertical-align: middle; } .@{ant-prefix}-breadcrumb + &-heading { - margin-top: 12px; + margin-top: 8px; } &-heading { - display: inline-block; + width: 100%; + overflow: hidden; &-title { - display: inline-block; + display: block; + float: left; + margin-bottom: 0; padding-right: 12px; color: @heading-color; - font-weight: bold; - font-size: 16px; - line-height: 1.4; + font-weight: 600; + font-size: @heading-3-size; + line-height: 32px; + } + + .@{ant-prefix}-avatar { + float: left; + margin-right: 12px; } &-sub-title { - display: inline-block; - padding-right: 12px; + float: left; + margin: 5px 0; + margin-right: 12px; color: @text-color-secondary; font-size: 14px; - line-height: 1.8; + line-height: 22px; } &-tags { - display: inline-block; - vertical-align: top; + float: left; + margin: 4px 0; } &-extra { - position: absolute; - top: 16px; - right: @page-header-padding-horizontal; + float: right; > * { margin-left: 8px; } @@ -73,18 +85,30 @@ } &-content { - padding-top: 12px; + padding-top: 16px; + overflow: hidden; } &-footer { - margin: 0 -8px; - padding-top: 24px; + margin-top: 16px; .@{ant-prefix}-tabs-bar { margin-bottom: 1px; border-bottom: 0; .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab { - padding: 12px 8px; - padding-top: 0; + padding: 8px; + font-size: 16px; + } + } + } + + @media (max-width: @screen-sm) { + &-heading { + &-extra { + display: block; + float: unset; + width: 100%; + padding-top: 12px; + overflow: hidden; } } } diff --git a/components/page-header/style/index.tsx b/components/page-header/style/index.tsx index abbb262478df..8ca5d47ad6ac 100644 --- a/components/page-header/style/index.tsx +++ b/components/page-header/style/index.tsx @@ -1,5 +1,5 @@ import './index.less'; // style dependencies -import '../../divider/style'; import '../../breadcrumb/style'; +import '../../avatar/style'; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 6d534c8bd538..692d065793fc 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -558,8 +558,9 @@ // PageHeader // --- -@page-header-padding-horizontal: 24px; +@page-header-padding: 24px; @page-header-padding-vertical: 16px; +@page-header-padding-breadcrumb: 12px; // Breadcrumb // --- @@ -669,3 +670,7 @@ @timeline-dot-border-width: 2px; @timeline-dot-color: @primary-color; @timeline-dot-bg: @component-background; + +// Typography +// --- +@typography-title-font-weight: 600; diff --git a/components/typography/style/index.less b/components/typography/style/index.less index 47c691b9b912..89c01139b97f 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -12,7 +12,7 @@ .typography-title(@fontSize; @lineHeight) { margin-bottom: 0.5em; color: @heading-color; - font-weight: 600; + font-weight: @typography-title-font-weight; font-size: @fontSize; line-height: @lineHeight; } diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index fa4a6ba59b71..8e024c8e4c3c 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -253,11 +253,12 @@ class Upload extends React.Component { showUploadList, listType, onPreview, + onDownload, previewFile, disabled, locale: propLocale, } = this.props; - const { showRemoveIcon, showPreviewIcon } = showUploadList as any; + const { showRemoveIcon, showPreviewIcon, showDownloadIcon } = showUploadList as any; const { fileList } = this.state; return ( { items={fileList} previewFile={previewFile} onPreview={onPreview} + onDownload={onDownload} onRemove={this.handleManualRemove} showRemoveIcon={!disabled && showRemoveIcon} showPreviewIcon={showPreviewIcon} + showDownloadIcon={showDownloadIcon} locale={{ ...locale, ...propLocale }} /> ); diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx index 5ffcf7e0868b..29fa839ea0d2 100644 --- a/components/upload/UploadList.tsx +++ b/components/upload/UploadList.tsx @@ -16,6 +16,7 @@ export default class UploadList extends React.Component { showInfo: false, }, showRemoveIcon: true, + showDownloadIcon: true, showPreviewIcon: true, previewFile: previewImage, }; @@ -56,6 +57,15 @@ export default class UploadList extends React.Component { 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) => { const { onRemove } = this.props; if (onRemove) { @@ -70,6 +80,7 @@ export default class UploadList extends React.Component { listType, showPreviewIcon, showRemoveIcon, + showDownloadIcon, locale, progressAttr, } = this.props; @@ -128,18 +139,36 @@ export default class UploadList extends React.Component { }); const linkProps = typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps; - const preview = file.url ? ( - this.handlePreview(file, e)} + const downloadOrDelete = listType !== 'picture-card' && ( + - {file.name} - + {file.status === 'done' && ( + + this.handleDownload(file)} /> + + )} + + this.handleClose(file)} /> + + + ); + const preview = file.url ? ( + + this.handlePreview(file, e)} + > + {file.name} + + {downloadOrDelete} + ) : ( { title={file.name} > {file.name} + {downloadOrDelete} ); const style: React.CSSProperties = { @@ -168,18 +198,20 @@ export default class UploadList extends React.Component { const removeIcon = showRemoveIcon ? ( this.handleClose(file)} /> ) : null; - const removeIconClose = showRemoveIcon ? ( - this.handleClose(file)} /> + const downloadIcon = showDownloadIcon ? ( + this.handleDownload(file)} + /> ) : null; - const actions = - listType === 'picture-card' && file.status !== 'uploading' ? ( - - {previewIcon} - {removeIcon} - - ) : ( - removeIconClose - ); + const actions = listType === 'picture-card' && file.status !== 'uploading' && ( + + {previewIcon} + {file.status === 'done' && downloadIcon} + {removeIcon} + + ); let message; if (file.response && typeof file.response === 'string') { message = file.response; diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap index d681b37ab3a0..f52be7e7f9f7 100644 --- a/components/upload/__tests__/__snapshots__/demo.test.js.snap +++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap @@ -59,38 +59,72 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = ` /> - - xxx.png - + + xxx.png + + + + + + + + + + + + + +
- - -
- - yyy.png - + + yyy.png + + + + + + + + + + + + + +
- - -
- - zzz.png - + + zzz.png + + + + + + + + +
- - -
@@ -276,38 +354,72 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = ` /> - - xxx.png - + + xxx.png + + + + + + + + + + + + + +
- - -
@@ -342,15 +454,18 @@ exports[`renders ./components/upload/demo/picture-card.md correctly 1`] = ` src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /> - - image.png - + + image.png + +
+ + + - - image.png - + + image.png + +
+ + + - - image.png - + + image.png + +
+ + + - - image.png - + + image.png + + + + + - - image.png - + + image.png + + + + + - - xxx.png - + + xxx.png + + + + + + + + + + + + + + - - -
- - yyy.png - + + yyy.png + + + + + + + + + + + + + +
- - - @@ -888,38 +1188,72 @@ exports[`renders ./components/upload/demo/picture-style.md correctly 1`] = ` src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /> - - xxx.png - + + xxx.png + + + + + + + + + + + + + + - - -
- - yyy.png - + + yyy.png + + + + + + + + + + + + + +
- - - diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap index 20a9c1020284..d609ca8a535c 100644 --- a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap +++ b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap @@ -58,30 +58,37 @@ exports[`Upload List handle error 1`] = ` title="foo.png" > foo.png + + + + + + + - - -
@@ -167,30 +174,37 @@ exports[`Upload List should be uploading when upload a file 1`] = ` title="foo.png" > foo.png + + + + + + +
- - -
@@ -276,30 +290,61 @@ exports[`Upload List should be uploading when upload a file 2`] = ` title="foo.png" > foo.png + + + + + + + + + + + +
- - -
@@ -392,38 +437,72 @@ exports[`Upload List should non-image format file preview 1`] = ` - - not-image - + + not-image + + + + + + + + + + + + + +
- - -
- - image - + + image + + + + + + + + + + + + + +
- - -
- - not-image - + + not-image + + + + + + + + + + + + + +
- - -
- - not-image - + + not-image + + + + + + + + + + + + + +
- - -
- - image - + + image + + + + + + + + + + + + + +
- - -
- - image - + + image + + + + + + + + + + + + + +
- - -
- - image - + + image + + + + + + + + + + + + + +
- - -
- - image - + + image + + + + + + + + + + + + + +
- - -
- - image - + + image + + + + + + + + + + + + + +
- - -
- - image - + + image + + + + + + + + + + + + + +
- - - diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js index 483df225950b..3c59cf38328a 100644 --- a/components/upload/__tests__/upload.test.js +++ b/components/upload/__tests__/upload.test.js @@ -376,7 +376,7 @@ describe('Upload', () => { }, ]; const wrapper = mount(); - const linkNode = wrapper.find('a.ant-upload-list-item-name'); + const linkNode = wrapper.find('span.ant-upload-list-item-name > a'); expect(linkNode.props().download).toBe('image'); expect(linkNode.props().rel).toBe('noopener'); }); @@ -396,7 +396,7 @@ describe('Upload', () => { }, ]; const wrapper = mount(); - const linkNode = wrapper.find('a.ant-upload-list-item-name'); + const linkNode = wrapper.find('span.ant-upload-list-item-name > a'); expect(linkNode.props().download).toBe('image'); expect(linkNode.props().rel).toBe('noopener'); }); @@ -417,7 +417,7 @@ describe('Upload', () => { const wrapper = mount(); - 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(() => { 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( {}} />); + + 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 it('should allow call abort function through upload instance', () => { const wrapper = mount( diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js index 0f0b73c968e1..e81e583255a4 100644 --- a/components/upload/__tests__/uploadlist.test.js +++ b/components/upload/__tests__/uploadlist.test.js @@ -121,7 +121,7 @@ describe('Upload List', () => { wrapper .find('.ant-upload-list-item') .at(0) - .find('.anticon-close') + .find('.anticon-delete') .simulate('click'); await sleep(400); wrapper.update(); @@ -202,6 +202,36 @@ describe('Upload List', () => { 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( + + + , + ); + 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( + + + , + ); + 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( + + + , + ); + expect(wrapper.find('div.ant-upload-list-item i.anticon-download').length).toBe(0); + }); + it('should support onPreview', () => { const handlePreview = jest.fn(); const wrapper = mount( @@ -248,6 +278,52 @@ describe('Upload List', () => { expect(handleChange.mock.calls.length).toBe(2); }); + it('should support onDownload', async () => { + const handleDownload = jest.fn(); + const wrapper = mount( + + + , + ); + wrapper + .find('.anticon-download') + .at(0) + .simulate('click'); + }); + + it('should support no onDownload', async () => { + const wrapper = mount( + + + , + ); + wrapper + .find('.anticon-download') + .at(0) + .simulate('click'); + }); + describe('should generate thumbUrl from file', () => { [ { width: 100, height: 200, name: 'height large than width' }, @@ -431,6 +507,13 @@ describe('Upload List', () => { 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().instance(); + expect(wrapper.handleDownload(file)).toBe(undefined); + }); + it('previewFile should work correctly', async () => { const file = new File([''], 'test.txt', { type: 'text/plain' }); const items = [{ uid: 'upload-list-item', url: '' }]; @@ -440,6 +523,28 @@ describe('Upload List', () => { 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( + {}} + locale={{ downloadFile: '' }} + />, + ).instance(); + return wrapper.props.onDownload(file); + }); + + it('downloadFile is true should work correctly', async () => { + const items = [{ uid: 'upload-list-item', url: '' }]; + const wrapper = mount( + , + ).instance(); + return expect(wrapper.props.onDownload).toBe(true); + }); + it('extname should work correctly when url not exists', () => { const items = [{ uid: 'upload-list-item', url: '' }]; const wrapper = mount( @@ -448,6 +553,21 @@ describe('Upload List', () => { 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( + { + 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', () => { const items = [{ status: 'uploading', uid: 'upload-list-item' }]; const wrapper = mount( diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index c0b1e33e1223..1c8dbc066a74 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -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 | | | name | The name of uploading file | string | 'file' | | | previewFile | Customize preview file logic | (file: File \| Blob) => Promise | - | 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, showRemoveIcon?: boolean } | true | | | supportServerRender | Need to be turned on while the server side is rendering | boolean | false | | | withCredentials | ajax upload with cookie sent | boolean | false | | | 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 | - | | | 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` | - | | +| 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` | - | 3.21.0 | ### onChange diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 3a1d5f5b528e..73fd5c5eb6bc 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -33,13 +33,14 @@ title: Upload | multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false | | | name | 发到后台的文件参数名 | string | 'file' | | | previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise | 无 | 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 | | | withCredentials | 上传请求时是否携带 cookie | boolean | false | | | openFileDialogOnClick | 点击打开文件对话框 | boolean | true | 3.10.0 | | onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | Function | 无 | | | onPreview | 点击文件链接或预览图标时的回调 | Function(file) | 无 | | | onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。               | Function(file): `boolean | Promise` | 无   | | +| onDownload   | 点击下载文件时的方法，传方法择执行方法逻辑，不传则默认跳转新标签页。               | Function(file): void | 跳转新标签页   | | | transformFile   | 在上传之前转换文件。支持返回一个 Promise 对象   | Function(file): `string | Blob | File | Promise` | 无   | 3.21.0 | ### onChange diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx index f24b2ff8435d..b5326ead3c4d 100755 --- a/components/upload/interface.tsx +++ b/components/upload/interface.tsx @@ -40,11 +40,13 @@ export interface UploadChangeParam { export interface ShowUploadListInterface { showRemoveIcon?: boolean; showPreviewIcon?: boolean; + showDownloadIcon?: boolean; } export interface UploadLocale { uploading?: string; removeFile?: string; + downloadFile?: string; uploadError?: string; previewFile?: string; } @@ -53,7 +55,9 @@ export type UploadType = 'drag' | 'select'; export type UploadListType = 'text' | 'picture' | 'picture-card'; type PreviewFileHandler = (file: File | Blob) => PromiseLike; -type TransformFileHandler = (file: UploadFile) => string | Blob | File | PromiseLike; +type TransformFileHandler = ( + file: UploadFile, +) => string | Blob | File | PromiseLike; export interface UploadProps { type?: UploadType; @@ -72,6 +76,7 @@ export interface UploadProps { listType?: UploadListType; className?: string; onPreview?: (file: UploadFile) => void; + onDownload?: (file: UploadFile) => void; onRemove?: (file: UploadFile) => void | boolean | Promise; supportServerRender?: boolean; style?: React.CSSProperties; @@ -94,11 +99,13 @@ export interface UploadState { export interface UploadListProps { listType?: UploadListType; onPreview?: (file: UploadFile) => void; + onDownload?: (file: UploadFile) => void; onRemove?: (file: UploadFile) => void | boolean; items?: Array; progressAttr?: Object; prefixCls?: string; showRemoveIcon?: boolean; + showDownloadIcon?: boolean; showPreviewIcon?: boolean; locale: UploadLocale; previewFile?: PreviewFileHandler; diff --git a/components/upload/style/index.less b/components/upload/style/index.less index 328278335903..fc027122a0b4 100644 --- a/components/upload/style/index.less +++ b/components/upload/style/index.less @@ -147,13 +147,27 @@ font-size: @font-size-base; &-name { display: inline-block; - width: 100%; padding-left: @font-size-base + 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } + &-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 { height: 100%; padding: 0 12px 0 4px; @@ -196,14 +210,21 @@ opacity: 1; } + &:hover &-card-actions { + opacity: 1; + } + &-error, &-error .@{iconfont-css-prefix}-paper-clip, &-error &-name { color: @error-color; } - &-error .@{iconfont-css-prefix}-close { - color: @error-color !important; + &-error &-card-actions { + .anticon { + padding-right: 5px; + color: @error-color; + } opacity: 1; } @@ -281,7 +302,7 @@ box-sizing: border-box; max-width: 100%; margin: 0 0 0 8px; - padding-right: 8px; + padding-right: 48px; padding-left: 48px; overflow: hidden; line-height: 44px; @@ -353,6 +374,7 @@ transition: all 0.3s; .@{iconfont-css-prefix}-eye-o, + .@{iconfont-css-prefix}-download, .@{iconfont-css-prefix}-delete { z-index: 10; width: 16px; diff --git a/package.json b/package.json index 701910655f65..e04bf3713d60 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "rc-dropdown": "~2.4.1", "rc-editor-mention": "^1.1.13", "rc-form": "^2.4.5", - "rc-input-number": "~4.4.5", + "rc-input-number": "~4.5.0", "rc-mentions": "~0.4.0", "rc-menu": "~7.4.23", "rc-notification": "~3.3.1",