feat: Upload add download

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<AnchorLinkProps, any> {
   };
 
   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<AnchorLinkProps, any> {
           className={titleClassName}
           href={href}
           title={typeof title === 'string' ? title : ''}
+          target={target}
           onClick={this.handleClick}
         >
           {title}

components/anchor/__tests__/__snapshots__/demo.test.js.snap

@@ -41,6 +41,18 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
             Static demo
           </a>
         </div>
+        <div
+          class="ant-anchor-link"
+        >
+          <a
+            class="ant-anchor-link-title"
+            href="#components-anchor-demo-basic"
+            target="_blank"
+            title="Basic demo with Target"
+          >
+            Basic demo with Target
+          </a>
+        </div>
         <div
           class="ant-anchor-link"
         >

components/anchor/demo/basic.md

@@ -22,6 +22,7 @@ ReactDOM.render(
   <Anchor>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
+    <Link href="#components-anchor-demo-basic" title="Basic demo with Target" target="_blank" />
     <Link href="#API" title="API">
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />

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            |         |         |

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            |        |      |

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 ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>;
 }
 
+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<BreadcrumbProps, any> {
   static Item: typeof BreadcrumbItem;
 
@@ -139,7 +150,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
       // 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;
         }

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(
+      <Breadcrumb separator="">
+        <Breadcrumb.Item>Location</Breadcrumb.Item>
+        <Breadcrumb.Separator>:</Breadcrumb.Separator>
+        <>
+          <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
+          <Breadcrumb.Separator />
+        </>
+      </Breadcrumb>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it('should render a menu', () => {
     const routes = [
       {

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`] = `
+<div
+  class="ant-breadcrumb"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Location
+    </span>
+  </span>
+  <span
+    class="ant-breadcrumb-separator"
+  >
+    :
+  </span>
+  <span>
+    <a
+      class="ant-breadcrumb-link"
+      href=""
+    >
+      Application Center
+    </a>
+  </span>
+  <span
+    class="ant-breadcrumb-separator"
+  >
+    /
+  </span>
+</div>
+`;
+
 exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
 <div
   class="ant-breadcrumb"

components/card/__tests__/__snapshots__/demo.test.js.snap

@@ -1002,6 +1002,16 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
           role="tablist"
           tabindex="0"
         >
+          <div
+            class="ant-tabs-extra-content"
+            style="float:right"
+          >
+            <a
+              href="#"
+            >
+              More
+            </a>
+          </div>
           <div
             class="ant-tabs-nav-container"
           >

components/card/demo/tabs.md

@@ -85,6 +85,7 @@ class TabsCard extends React.Component {
           style={{ width: '100%' }}
           tabList={tabListNoTitle}
           activeTabKey={this.state.noTitleKey}
+          tabBarExtraContent={<a href="#">More</a>}
           onTabChange={key => {
             this.onTabChange(key, 'noTitleKey');
           }}

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 | - |  |

components/card/index.tsx

@@ -51,6 +51,7 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '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<CardProps, {}> {
       children,
       activeTabKey,
       defaultActiveTabKey,
+      tabBarExtraContent,
       ...others
     } = this.props;
 
@@ -186,6 +188,7 @@ export default class Card extends React.Component<CardProps, {}> {
       [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
         ? activeTabKey
         : defaultActiveTabKey,
+      tabBarExtraContent,
     };
 
     let head;

components/card/index.zh-CN.md

@@ -33,24 +33,25 @@ 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 | - |  |
 | onTabChange | 页签切换的回调 | (key) => void | - |  |
 
 ### 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 | -      |      |