feat(module: tree): support nzBlockNode (NG-ZORRO#3270)

Ricbet · Apr 9, 2020 · ab2a289 · ab2a289
1 parent 8555e1a
commit ab2a289
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 10 deletions.
diff --git a/components/tree/demo/draggable-confirm.ts b/components/tree/demo/draggable-confirm.ts
@@ -6,7 +6,7 @@ import { delay } from 'rxjs/operators';
 @Component({
   selector: 'nz-demo-tree-draggable-confirm',
   template: `
-    <nz-tree [nzData]="nodes" nzDraggable [nzBeforeDrop]="beforeDrop"> </nz-tree>
+    <nz-tree [nzData]="nodes" nzDraggable nzBlockNode [nzBeforeDrop]="beforeDrop"> </nz-tree>
   `
 })
 export class NzDemoTreeDraggableConfirmComponent implements OnInit {

diff --git a/components/tree/demo/draggable.ts b/components/tree/demo/draggable.ts
@@ -4,15 +4,8 @@ import { NzFormatEmitEvent } from 'ng-zorro-antd';
 @Component({
   selector: 'nz-demo-tree-draggable',
   template: `
-    <nz-tree [nzData]="nodes" nzDraggable (nzOnDrop)="nzEvent($event)"> </nz-tree>
-  `,
-  styles: [
-    `
-      :host ::ng-deep .draggable-tree .ant-tree-node-content-wrapper {
-        width: calc(100% - 42px);
-      }
-    `
-  ]
+    <nz-tree [nzData]="nodes" nzDraggable nzBlockNode (nzOnDrop)="nzEvent($event)"> </nz-tree>
+  `
 })
 export class NzDemoTreeDraggableComponent implements OnInit {
   nodes = [

diff --git a/components/tree/doc/index.en-US.md b/components/tree/doc/index.en-US.md
@@ -15,6 +15,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[nzData]` | Tree data (Reference NzTreeNode) | `NzTreeNodeOptions[]｜NzTreeNode[]` | `[]` |
+| `[nzBlockNode]` | Whether treeNode fill remaining horizontal space | `boolean` | `false` |
 | `[nzCheckable]` | Adds a Checkbox before the treeNodes| `boolean` | `false` |
 | `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` |
 | `[nzShowLine]` | Shows a connecting line | `boolean` | `false` |

diff --git a/components/tree/doc/index.zh-CN.md b/components/tree/doc/index.zh-CN.md
@@ -16,6 +16,7 @@ subtitle: 树形控件
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzData]` | 元数据 | `NzTreeNodeOptions[]｜NzTreeNode[]` | `[]` |
+| `[nzBlockNode]` | 是否节点占据一行 | `boolean` | `false` |
 | `[nzCheckable]` | 节点前添加 Checkbox 复选框 | `boolean` | `false` |
 | `[nzShowExpand]` | 节点前添加展开图标 | `boolean` | `true` |
 | `[nzShowLine]` | 是否展示连接线 | `boolean` | `false` |

diff --git a/components/tree/nz-tree.component.ts b/components/tree/nz-tree.component.ts
@@ -65,6 +65,7 @@ export class NzTreeComponent implements OnInit, OnDestroy, ControlValueAccessor,
   @Input() @InputBoolean() nzHideUnMatched = false;
   @Input() @InputBoolean() nzSelectMode = false;
   @Input() @InputBoolean() nzCheckStrictly = false;
+  @Input() @InputBoolean() nzBlockNode = false;
   /**
    * @deprecated use
    * nzExpandAll instead
@@ -229,6 +230,7 @@ export class NzTreeComponent implements OnInit, OnDestroy, ControlValueAccessor,
       [this.prefixCls]: true,
       [this.prefixCls + '-show-line']: this.nzShowLine,
       [`${this.prefixCls}-icon-hide`]: !this.nzShowIcon,
+      [`${this.prefixCls}-block-node`]: this.nzBlockNode,
       ['draggable-tree']: this.nzDraggable,
       ['ant-select-tree']: this.nzSelectMode
     };

diff --git a/components/tree/nz-tree.spec.ts b/components/tree/nz-tree.spec.ts
@@ -398,6 +398,12 @@ describe('nz-tree', () => {
       expect(treeInstance).toBeTruthy();
     });
 
+    it('test nzBlockNode property', () => {
+      fixture.detectChanges();
+      const tree = treeElement.querySelector('.ant-tree') as HTMLElement;
+      expect(tree!.classList).toContain('ant-tree-block-node');
+    });
+
     it('test drag event', fakeAsync(() => {
       fixture.detectChanges();
       const dragStartSpy = spyOn(treeInstance, 'onDragStart');
@@ -729,6 +735,7 @@ export class NzTestTreeBasicControlledComponent {
   selector: 'nz-demo-tree-draggable',
   template: `
     <nz-tree
+      nzBlockNode
       [nzData]="nodes"
       nzDraggable="true"
       [nzBeforeDrop]="beforeDrop"