Merge pull request #20915 from ant-design/master

chore: Feature merge master

azure-pipelines.yml

@@ -26,6 +26,9 @@ stages:
             versionSpec: '12.13.1'
         - script: npm install
           displayName: 'Install modules'
+        - script: |
+            node ./scripts/azure-github-comment.js '![Prepare preview](https://user-images.githubusercontent.com/5378891/72351368-2c979e00-371b-11ea-9652-eb4e825d745e.gif)'
+          displayName: 'Comment on github'
         - script: npm run site
           displayName: 'Build sites'
         - script: ls -al _site/
@@ -34,5 +37,8 @@ stages:
             export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh
             echo "Deploy to $DEPLOY_DOMAIN"
             npx surge --project ./_site --domain $DEPLOY_DOMAIN
-            curl -X POST -u ${ACCESS_TOKEN} -H "Accept: application/json" -H "Content-Type:application/json" https://api.github.com/repos/ant-design/ant-design/issues/${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}/comments -d '{ "body": "Preview deploy to '${DEPLOY_DOMAIN}'" }'
-          displayName: 'Deploy Site'
+          displayName: 'Deploy Site'
+        - script: |
+            export DEPLOY_DOMAIN=https://preview-${SYSTEM_PULLREQUEST_PULLREQUESTNUMBER}-ant-design.surge.sh
+            node ./scripts/azure-github-comment.js "[<img width="306" src="https://user-images.githubusercontent.com/5378891/72400743-23dbb200-3785-11ea-9d13-1a2d92743846.png">]($DEPLOY_DOMAIN)"
+          displayName: 'Update comment on github'

components/date-picker/index.tsx

@@ -1,6 +1,15 @@
 import { Moment } from 'moment';
 import momentGenerateConfig from 'rc-picker/lib/generate/moment';
-import generatePicker from './generatePicker';
+import generatePicker, {
+  PickerProps,
+  PickerDateProps,
+  RangePickerProps as BaseRangePickerProps,
+} from './generatePicker';
+
+export type DatePickerProps = PickerProps<Moment>;
+export type MonthPickerProps = Omit<PickerDateProps<Moment>, 'picker'>;
+export type WeekPickerProps = Omit<PickerDateProps<Moment>, 'picker'>;
+export type RangePickerProps = BaseRangePickerProps<Moment>;
 
 const DatePicker = generatePicker<Moment>(momentGenerateConfig);
 

components/icon/index.en-US.md

@@ -75,9 +75,7 @@ All the icons will render to `<svg>`. You can still set `style` and `className`
 
 ### Set TwoTone Color
 
-<<<<<<< HEAD When using the two-tone icons, you can use the static methods `getTwoToneColor()` and `setTwoToneColor(colorString)` to spicify the primary color. ======= When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to specify the primary color.
-
-> > > > > > > origin/master
+When using the two-tone icons, you can use the static methods `getTwoToneColor()` and `setTwoToneColor(colorString)` to specify the primary color.
 
 ```jsx
 import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';

components/list/Item.tsx

@@ -72,7 +72,7 @@ export default class Item extends React.Component<ListItemProps, any> {
 
   context: any;
 
-  isItemContainsTextNode() {
+  isItemContainsTextNodeAndNotSingular() {
     const { children } = this.props;
     let result;
     React.Children.forEach(children, (element: React.ReactElement<any>) => {
@@ -80,7 +80,7 @@ export default class Item extends React.Component<ListItemProps, any> {
         result = true;
       }
     });
-    return result;
+    return result && React.Children.count(children) > 1;
   }
 
   isFlexMode() {
@@ -89,7 +89,7 @@ export default class Item extends React.Component<ListItemProps, any> {
     if (itemLayout === 'vertical') {
       return !!extra;
     }
-    return !this.isItemContainsTextNode();
+    return !this.isItemContainsTextNodeAndNotSingular();
   }
 
   renderItem = ({ getPrefixCls }: ConfigConsumerProps) => {

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

@@ -764,27 +764,27 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
           class="ant-list-items"
         >
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Racing car sprays burning fuel into crowd.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Japanese princess to wed commoner.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Australian walks 100km after outback crash.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Man charged over missing wedding girl.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Los Angeles battles huge wildfires.
           </li>
@@ -824,27 +824,27 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
           class="ant-list-items"
         >
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Racing car sprays burning fuel into crowd.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Japanese princess to wed commoner.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Australian walks 100km after outback crash.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Man charged over missing wedding girl.
           </li>
           <li
-            class="ant-list-item ant-list-item-no-flex"
+            class="ant-list-item"
           >
             Los Angeles battles huge wildfires.
           </li>

components/list/style/index.less

@@ -66,6 +66,7 @@
   &-item {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     padding: @list-item-padding;
 
     &-content {

components/select/index.en-US.md

@@ -41,7 +41,7 @@ Select component to select value from options.
 | maxTagCount | Max tag count to show | number | - |  |
 | maxTagTextLength | Max tag text length to show | number | - |  |
 | maxTagPlaceholder | Placeholder for not showing tags | ReactNode/function(omittedValues) | - |  |
-| mode | Set mode of Select | 'default' \| 'multiple' \| 'tags' | 'default' |  |
+| mode | Set mode of Select | `multiple` \| `tags` | - |  |
 | notFoundContent | Specify content to show when no result matches.. | string | 'Not Found' |  |
 | optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |  |
 | optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` for `combobox`, `children` for other modes |  |

components/select/index.zh-CN.md

@@ -42,7 +42,7 @@ title: Select
 | maxTagCount | 最多显示多少个 tag | number | - |  |
 | maxTagTextLength | 最大显示的 tag 文本长度 | number | - |  |
 | maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode/function(omittedValues) | - |  |
-| mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' | - |  |
+| mode | 设置 Select 的模式为多选或标签 | `multiple` \| `tags` | - |  |
 | notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |  |
 | optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | value |  |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |  |

components/select/style/multiple.less

@@ -125,11 +125,10 @@
   // ======================= Placeholder =======================
   .@{select-prefix-cls}-selection-placeholder {
     position: absolute;
-    top: 0;
+    top: 50%;
     right: @input-padding-horizontal;
     left: @input-padding-horizontal;
-    height: @select-height-without-border;
-    line-height: @select-height-without-border;
+    transform: translateY(-50%);
     transition: all 0.3s;
 
     .@{select-prefix-cls}-rtl& {
@@ -161,11 +160,6 @@
           line-height: @select-selection-height - @border-width-base * 2;
         }
       }
-
-      .@{select-prefix-cls}-selection-placeholder {
-        height: @select-height-without-border;
-        line-height: @select-height-without-border;
-      }
     }
   }
 

components/tree/DirectoryTree.tsx

@@ -3,17 +3,12 @@ import classNames from 'classnames';
 import omit from 'omit.js';
 import debounce from 'lodash/debounce';
 import { conductExpandParent } from 'rc-tree/lib/util';
+import { EventDataNode, DataNode } from 'rc-tree/lib/interface';
 import { convertDataToEntities, convertTreeToData } from 'rc-tree/lib/utils/treeUtil';
 import { FileOutlined, FolderOpenOutlined, FolderOutlined } from '@ant-design/icons';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
-import Tree, {
-  TreeProps,
-  AntdTreeNodeAttribute,
-  AntTreeNodeExpandedEvent,
-  AntTreeNodeSelectedEvent,
-  AntTreeNode,
-} from './Tree';
+import Tree, { TreeProps, AntdTreeNodeAttribute } from './Tree';
 import { calcRangeKeys, convertDirectoryKeysToNodes } from './utils/dictUtil';
 
 export type ExpandAction = false | 'click' | 'doubleClick';
@@ -60,7 +55,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
 
   tree: Tree;
 
-  onDebounceExpand: (event: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void;
+  onDebounceExpand: (event: React.MouseEvent<HTMLElement>, node: EventDataNode) => void;
 
   // Shift click usage
   lastSelectedKey?: string;
@@ -95,7 +90,14 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
     });
   }
 
-  onExpand = (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => {
+  onExpand = (
+    expandedKeys: string[],
+    info: {
+      node: EventDataNode;
+      expanded: boolean;
+      nativeEvent: MouseEvent;
+    },
+  ) => {
     const { onExpand } = this.props;
 
     this.setUncontrolledState({ expandedKeys });
@@ -108,7 +110,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
     return undefined;
   };
 
-  onClick = (event: React.MouseEvent<HTMLElement>, node: AntTreeNode) => {
+  onClick = (event: React.MouseEvent<HTMLElement>, node: EventDataNode) => {
     const { onClick, expandAction } = this.props;
 
     // Expand the tree
@@ -121,7 +123,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
     }
   };
 
-  onDoubleClick = (event: React.MouseEvent<HTMLElement>, node: AntTreeNode) => {
+  onDoubleClick = (event: React.MouseEvent<HTMLElement>, node: EventDataNode) => {
     const { onDoubleClick, expandAction } = this.props;
 
     // Expand the tree
@@ -134,7 +136,16 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
     }
   };
 
-  onSelect = (keys: string[], event: AntTreeNodeSelectedEvent) => {
+  onSelect = (
+    keys: string[],
+    event: {
+      event: 'select';
+      selected: boolean;
+      node: any;
+      selectedNodes: DataNode[];
+      nativeEvent: MouseEvent;
+    },
+  ) => {
     const { onSelect, multiple } = this.props;
     const { expandedKeys = [] } = this.state;
     const { node, nativeEvent } = event;
@@ -144,7 +155,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
     const newState: DirectoryTreeState = {};
 
     // We need wrap this event since some value is not same
-    const newEvent: AntTreeNodeSelectedEvent = {
+    const newEvent: any = {
       ...event,
       selected: true, // Directory selected always true
     };
@@ -190,7 +201,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
     this.tree = node;
   };
 
-  expandFolderNode = (event: React.MouseEvent<HTMLElement>, node: AntTreeNode) => {
+  expandFolderNode = (event: React.MouseEvent<HTMLElement>, node: any) => {
     const { isLeaf } = node.props;
 
     if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) {

components/tree/Tree.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import RcTree, { TreeNode } from 'rc-tree';
+import RcTree, { TreeNode, TreeProps as RcTreeProps } from 'rc-tree';
 import classNames from 'classnames';
 import { DataNode } from 'rc-tree/lib/interface';
 
@@ -98,7 +98,7 @@ export interface TreeNodeNormal {
   children?: TreeNodeNormal[];
 }
 
-export interface TreeProps {
+export interface TreeProps extends Omit<RcTreeProps, 'prefixCls'> {
   showLine?: boolean;
   className?: string;
   /** 是否支持多选 */
@@ -128,50 +128,23 @@ export interface TreeProps {
   /** 默认选中的树节点 */
   defaultSelectedKeys?: string[];
   selectable?: boolean;
-  /** 展开/收起节点时触发 */
-  onExpand?: (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => void | PromiseLike<void>;
-  /** 点击复选框触发 */
-  onCheck?: (
-    checkedKeys: string[] | { checked: string[]; halfChecked: string[] },
-    e: AntTreeNodeCheckedEvent,
-  ) => void;
   /** 点击树节点触发 */
-  onSelect?: (selectedKeys: string[], e: AntTreeNodeSelectedEvent) => void;
-  /** 单击树节点触发 */
-  onClick?: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void;
-  /** 双击树节点触发 */
-  onDoubleClick?: (e: React.MouseEvent<HTMLElement>, node: AntTreeNode) => void;
-  /** filter some AntTreeNodes as you need. it should return true */
   filterAntTreeNode?: (node: AntTreeNode) => boolean;
-  /** 异步加载数据 */
-  loadData?: (node: AntTreeNode) => PromiseLike<void>;
   loadedKeys?: string[];
-  onLoad?: (loadedKeys: string[], info: { event: 'load'; node: AntTreeNode }) => void;
-  /** 响应右键点击 */
-  onRightClick?: (options: AntTreeNodeMouseEvent) => void;
   /** 设置节点可拖拽（IE>8） */
   draggable?: boolean;
-  onDragStart?: (options: AntTreeNodeMouseEvent) => void;
-  onDragEnter?: (options: AntTreeNodeDragEnterEvent) => void;
-  onDragOver?: (options: AntTreeNodeMouseEvent) => void;
-  onDragLeave?: (options: AntTreeNodeMouseEvent) => void;
-  onDragEnd?: (options: AntTreeNodeMouseEvent) => void;
-  onMouseEnter?: (options: AntTreeNodeMouseEvent) => void;
-  onMouseLeave?: (options: AntTreeNodeMouseEvent) => void;
-  onDrop?: (options: AntTreeNodeDropEvent) => void;
   style?: React.CSSProperties;
   showIcon?: boolean;
   icon?: ((nodeProps: AntdTreeNodeAttribute) => React.ReactNode) | React.ReactNode;
   switcherIcon?: React.ReactElement<any>;
   prefixCls?: string;
-  filterTreeNode?: (node: AntTreeNode) => boolean;
   children?: React.ReactNode;
   blockNode?: boolean;
   treeData?: Array<TreeNodeNormal>;
 }
 
 export default class Tree extends React.Component<TreeProps, any> {
-  static TreeNode: React.ComponentClass<AntTreeNodeProps> = TreeNode;
+  static TreeNode = TreeNode;
 
   static DirectoryTree = DirectoryTree;
 

components/tree/__tests__/demo.test.js

@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('tree', { skip: ['big-data.md'] });
+demoTest('tree', { skip: ['big-data.md', 'virtual-scroll.md'] });

components/tree/demo/virtual-scroll.md

@@ -0,0 +1,40 @@
+---
+order: 9
+title:
+  zh-CN: 虚拟滚动
+  en-US: Virtual scroll
+---
+
+## zh-CN
+
+使用 `height` 属性则切换为虚拟滚动。
+
+## en-US
+
+Use virtual list through `height` prop.
+
+```jsx
+import { Tree } from 'antd';
+
+function dig(path = '0', level = 3) {
+  const list = [];
+  for (let i = 0; i < 10; i += 1) {
+    const key = `${path}-${i}`;
+    const treeNode = {
+      title: key,
+      key,
+    };
+
+    if (level > 0) {
+      treeNode.children = dig(key, level - 1);
+    }
+
+    list.push(treeNode);
+  }
+  return list;
+}
+
+const treeData = dig();
+
+ReactDOM.render(<Tree treeData={treeData} height={233} defaultExpandAll />, mountNode);
+```

package.json

@@ -137,7 +137,7 @@
     "warning": "~4.0.3"
   },
   "devDependencies": {
-    "@ant-design/bisheng-plugin": "^2.1.0",
+    "@ant-design/bisheng-plugin": "^2.3.0",
     "@ant-design/colors": "^4.0.0-alpha.0",
     "@ant-design/hitu": "^0.0.0-alpha.13",
     "@ant-design/tools": "^8.0.4",

scripts/azure-github-comment.js

@@ -0,0 +1,55 @@
+const fetch = require('node-fetch');
+
+const REPO = process.env.ACCESS_REPO;
+const TOKEN = process.env.ACCESS_TOKEN;
+const PR = process.env.SYSTEM_PULLREQUEST_PULLREQUESTNUMBER;
+const REPLACE_MARK = '<!-- AZURE_UPDATE_COMMENT -->';
+
+const argv = process.argv;
+
+const comment = argv[argv.length - 1];
+
+const wrappedComment = `
+  ${REPLACE_MARK}
+  ${comment}
+`.trim();
+
+async function withGithub(url, json, method) {
+  const res = await fetch(url, {
+    method: method || (json ? 'POST' : 'GET'),
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      Authorization: `Basic ${Buffer.from(TOKEN).toString('base64')}`,
+    },
+    body: json ? JSON.stringify(json) : undefined,
+  });
+
+  return res.json();
+}
+
+(async function run() {
+  const comments = await withGithub(`https://api.github.com/repos/${REPO}/issues/${PR}/comments`);
+
+  // Find my comment
+  const updateComment = comments.find(({ body }) => body.includes(REPLACE_MARK));
+  console.log('Origin comment:', updateComment);
+
+  // Update
+  let res;
+  if (!updateComment) {
+    res = await withGithub(`https://api.github.com/repos/${REPO}/issues/${PR}/comments`, {
+      body: wrappedComment,
+    });
+  } else {
+    res = await withGithub(
+      `https://api.github.com/repos/${REPO}/issues/comments/${updateComment.id}`,
+      {
+        body: wrappedComment,
+      },
+      'PATCH',
+    );
+  }
+
+  console.log(res);
+})();

site/theme/template/Content/ComponentDoc.jsx

@@ -187,7 +187,7 @@ class ComponentDoc extends React.Component {
                 }
               >
                 {visibleAll ? (
-                  <BugFilled style={{ display: 'none' }} className={expandTriggerClass} onClick={this.handleVisibleToggle} />
+                  <BugFilled className={expandTriggerClass} onClick={this.handleVisibleToggle} />
                 ) : (
                   <BugOutlined className={expandTriggerClass} onClick={this.handleVisibleToggle} />
                 )}

typings/custom-typings.d.ts

@@ -28,7 +28,6 @@ declare module 'rc-editor-mention';
 
 declare module 'rc-tabs*';
 
-declare module 'rc-tree';
 declare module 'rc-tree/lib/util';
 
 declare module 'rc-input-number';