Merge branch 'feature' into master

components/tree/Tree.tsx

@@ -146,6 +146,7 @@ export interface TreeProps {
   prefixCls?: string;
   filterTreeNode?: (node: AntTreeNode) => boolean;
   children?: React.ReactNode | React.ReactNode[];
+  blockNode?: boolean;
 }
 
 export default class Tree extends React.Component<TreeProps, any> {
@@ -159,6 +160,7 @@ export default class Tree extends React.Component<TreeProps, any> {
       ...animation,
       appear: null,
     },
+    blockNode: false,
   };
 
   tree: any;
@@ -190,7 +192,7 @@ export default class Tree extends React.Component<TreeProps, any> {
       } else if (switcherIcon) {
         const switcherOriginCls = switcherIcon.props.className || '';
         return React.cloneElement(switcherIcon, {
-          className: [switcherOriginCls, switcherCls],
+          className: classNames(switcherOriginCls, switcherCls),
         });
       } else {
         return <Icon type="caret-down" className={switcherCls} theme="filled" />;
@@ -204,7 +206,7 @@ export default class Tree extends React.Component<TreeProps, any> {
 
   renderTree = ({ getPrefixCls }: ConfigConsumerProps) => {
     const props = this.props;
-    const { prefixCls: customizePrefixCls, className, showIcon, switcherIcon } = props;
+    const { prefixCls: customizePrefixCls, className, showIcon, switcherIcon, blockNode } = props;
     const checkable = props.checkable;
     const prefixCls = getPrefixCls('tree', customizePrefixCls);
     return (
@@ -212,7 +214,10 @@ export default class Tree extends React.Component<TreeProps, any> {
         ref={this.setTreeRef}
         {...props}
         prefixCls={prefixCls}
-        className={classNames(!showIcon && `${prefixCls}-icon-hide`, className)}
+        className={classNames(className, {
+          [`${prefixCls}-icon-hide`]: !showIcon,
+          [`${prefixCls}-block-node`]: blockNode,
+        })}
         checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
         switcherIcon={(nodeProps: AntTreeNodeProps) =>
           this.renderSwitcherIcon(prefixCls, switcherIcon, nodeProps)

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

@@ -1096,7 +1096,7 @@ exports[`renders ./components/tree/demo/directory.md correctly 1`] = `
 
 exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
 <ul
-  class="ant-tree ant-tree-icon-hide draggable-tree"
+  class="ant-tree draggable-tree ant-tree-icon-hide ant-tree-block-node"
   role="tree"
   unselectable="on"
 >

components/tree/demo/draggable.md

@@ -134,6 +134,7 @@ class Demo extends React.Component {
         className="draggable-tree"
         defaultExpandedKeys={this.state.expandedKeys}
         draggable
+        blockNode
         onDragEnter={this.onDragEnter}
         onDrop={this.onDrop}
       >
@@ -146,9 +147,3 @@ class Demo extends React.Component {
 ReactDOM.render(<Demo />, mountNode);
 ````
 
-````css
-/* You can add the following CSS to your project to make draggable area bigger */
-#components-tree-demo-draggable .draggable-tree .ant-tree-node-content-wrapper {
-  width: calc(100% - 18px);
-}
-````

components/tree/index.en-US.md

@@ -15,6 +15,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | autoExpandParent | Whether to automatically expand a parent treeNode | boolean | true |
+| blockNode | Whether treeNode fill remaining horizontal space | boolean | false |
 | checkable | Adds a `Checkbox` before the treeNodes | boolean | false |
 | checkedKeys | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
 | checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false |

components/tree/index.zh-CN.md

@@ -16,6 +16,7 @@ subtitle: 树形控件
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | autoExpandParent | 是否自动展开父节点 | boolean | true |
+| blockNode | 是否节点占据一行 | boolean | false |
 | checkable | 节点前添加 Checkbox 复选框 | boolean | false |
 | checkedKeys | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
 | checkStrictly | checkable状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false |

components/tree/style/index.less

@@ -249,4 +249,19 @@
       }
     }
   }
+
+  &.@{tree-prefix-cls}-block-node {
+    li {
+      .@{tree-prefix-cls}-node-content-wrapper {
+        width: ~'calc(100% - 24px)';
+      }
+      span {
+        &.@{tree-prefix-cls}-checkbox {
+          + .@{tree-prefix-cls}-node-content-wrapper {
+            width: ~'calc(100% - 46px)';
+          }
+        }
+      }
+    }
+  }
 }