Skip to content

Commit d4426fc

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:tree-view): support standalone component (#8205)
* feat(module:tree-view): support standalone component * feat(module:tree-view): support standalone component
1 parent 9d656b2 commit d4426fc

13 files changed

Lines changed: 180 additions & 153 deletions

‎components/tree-view/checkbox.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
3232
'[class.ant-tree-checkbox-indeterminate]': `nzIndeterminate`,
3333
'[class.ant-tree-checkbox-disabled]': `nzDisabled`
3434
},
35-
providers: [NzDestroyService]
35+
providers: [NzDestroyService],
36+
standalone: true
3637
})
3738
export class NzTreeNodeCheckboxComponent implements OnInit {
3839
static ngAcceptInputType_nzDisabled: BooleanInput;

‎components/tree-view/doc/index.en-US.md‎

Lines changed: 62 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -16,139 +16,137 @@ import { NzTreeViewModule } from 'ng-zorro-antd/tree-view';
1616

1717
## API
1818

19-
### nz-tree-view
19+
### nz-tree-view:standalone
2020

21-
| Property | Description | Type | Default |
22-
| --- | --- | --- | --- |
23-
| [nzTreeControl] | The tree controller | [TreeControl](https://material.angular.io/cdk/tree/api#TreeControl) | - |
24-
| [nzDataSource] | The data array to render | [DataSource](https://material.angular.io/cdk/tree/overview#data-source)&lt;T&gt; \| Observable<T[]> \| T[] | - |
25-
| [nzDirectoryTree] | Whether nodes are displayed as directory style | `boolean` | `false` |
26-
| [nzBlockNode] | Whether tree nodes fill remaining horizontal space| `boolean` | `false` |
21+
| Property | Description | Type | Default |
22+
| ----------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------- |
23+
| [nzTreeControl] | The tree controller | [TreeControl](https://material.angular.io/cdk/tree/api#TreeControl) | - |
24+
| [nzDataSource] | The data array to render | [DataSource](https://material.angular.io/cdk/tree/overview#data-source)&lt;T&gt; \| Observable<T[]> \| T[] | - |
25+
| [nzDirectoryTree] | Whether nodes are displayed as directory style | `boolean` | `false` |
26+
| [nzBlockNode] | Whether tree nodes fill remaining horizontal space | `boolean` | `false` |
2727

28-
### nz-tree-virtual-scroll-view
28+
### nz-tree-virtual-scroll-view:standalone
2929

3030
The virtual scroll tree view, which can be accessed from
3131
the [CdkVirtualScrollViewport](https://material.angular.io/cdk/scrolling/api#CdkVirtualScrollViewport) instance through
3232
the `virtualScrollViewport` member of the component instance.
3333

34-
| Property | Description | Type | Default |
35-
| --- | --- | --- | --- |
36-
| [nzTreeControl] | The tree controller | [TreeControl](https://material.angular.io/cdk/tree/api#TreeControl) | - |
37-
| [nzDataSource] | The data array to render | [DataSource](https://material.angular.io/cdk/tree/overview#data-source)&lt;T&gt; \| Observable<T[]> \| T[] | - |
38-
| [nzDirectoryTree] | Whether nodes are displayed as directory style | `boolean` | `false` |
39-
| [nzBlockNode] | Whether tree nodes fill remaining horizontal space| `boolean` | `false` |
40-
| [nzItemSize] | The size of nodes in the tree (in pixels) | `number` | `28` |
41-
| [nzMinBufferPx] | The minimum amount of buffer rendered allowed outside the viewport (in pixels) | `number` | `28 * 5` |
42-
| [nzMaxBufferPx] | The amount of buffer required for rendering new nodes (in pixels) | `number` | `28 * 10` |
34+
| Property | Description | Type | Default |
35+
| ----------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | --------- |
36+
| [nzTreeControl] | The tree controller | [TreeControl](https://material.angular.io/cdk/tree/api#TreeControl) | - |
37+
| [nzDataSource] | The data array to render | [DataSource](https://material.angular.io/cdk/tree/overview#data-source)&lt;T&gt; \| Observable<T[]> \| T[] | - |
38+
| [nzDirectoryTree] | Whether nodes are displayed as directory style | `boolean` | `false` |
39+
| [nzBlockNode] | Whether tree nodes fill remaining horizontal space | `boolean` | `false` |
40+
| [nzItemSize] | The size of nodes in the tree (in pixels) | `number` | `28` |
41+
| [nzMinBufferPx] | The minimum amount of buffer rendered allowed outside the viewport (in pixels) | `number` | `28 * 5` |
42+
| [nzMaxBufferPx] | The amount of buffer required for rendering new nodes (in pixels) | `number` | `28 * 10` |
4343

44-
### [nzTreeNodeDef]
44+
### [nzTreeNodeDef]:standalone
4545

4646
Directive to define `nz-tree-node`.
4747

48-
| Property | Description | Type | Default |
49-
| --- | --- | --- | --- |
50-
| [nzTreeNodeDefWhen] | A matching function which indicates whether inputted node should be used. It matches the very first node that makes this function return `true`. If no nodes that makes this function return `true`, the node which does not define this function would be matched instead. | `(index: number, nodeData: T) => boolean` | - |
48+
| Property | Description | Type | Default |
49+
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------- |
50+
| [nzTreeNodeDefWhen] | A matching function which indicates whether inputted node should be used. It matches the very first node that makes this function return `true`. If no nodes that makes this function return `true`, the node which does not define this function would be matched instead. | `(index: number, nodeData: T) => boolean` | - |
5151

52-
### nz-tree-node
52+
### nz-tree-node:standalone
5353

5454
The tree node container component, which needs to be defined by the `nzTreeNodeDef` directive.
5555

56-
### [nzTreeNodePadding]
56+
### [nzTreeNodePadding]:standalone
5757

5858
```html
59-
6059
<nz-tree-node nzTreeNodePadding></nz-tree-node>
6160
```
6261

6362
Show node indentation by adding `padding` **Best Performance**.
6463

65-
### nzTreeNodeIndentLine
64+
### nzTreeNodeIndentLine:standalone
6665

6766
```html
68-
6967
<nz-tree-node nzTreeNodeIndentLine></nz-tree-node>
7068
```
7169

7270
Show node indentation by adding indent lines.
7371

74-
### nz-tree-node-toggle
72+
### nz-tree-node-toggle:standalone
7573

7674
A toggle which is used to expand / collapse the node.
7775

78-
| Property | Description | Type | Default |
79-
| --- | --- | --- | --- |
76+
| Property | Description | Type | Default |
77+
| --------------------------- | ----------------------------------- | --------- | ------- |
8078
| [nzTreeNodeToggleRecursive] | Is it recursively expand / collapse | `boolean` | `false` |
8179

82-
### nz-tree-node-toggle[nzTreeNodeNoopToggle]
80+
### nz-tree-node-toggle[nzTreeNodeNoopToggle]:standalone
8381

8482
A toggle that does no actions. This can be used for placeholders or displays icons.
8583

86-
### [nz-icon][nzTreeNodeToggleRotateIcon]
84+
### [nz-icon][nztreenodetogglerotateicon]:standalone
8785

8886
Define an icon in the toggle, which it will automatically rotate depending on the collapse/expand state.
8987

90-
### [nz-icon][nzTreeNodeToggleActiveIcon]
88+
### [nz-icon][nztreenodetoggleactiveicon]:standalone
9189

9290
Define an icon in the toggle for an active style, which it can be used for the loading state.
9391

94-
### nz-tree-node-option
92+
### nz-tree-node-option:standalone
9593

9694
Define the selectable feature of a node.
9795

98-
| Property | Description | Type | Default |
99-
| --- | --- | --- | --- |
100-
| [nzSelected] | Whether the option is selected | `boolean` | `false` |
101-
| [nzDisabled] | Whether the option is disabled | `boolean` | `false` |
102-
| (nzClick) | Event on click | `EventEmitter<MouseEvent>` | - |
96+
| Property | Description | Type | Default |
97+
| ------------ | ------------------------------ | -------------------------- | ------- |
98+
| [nzSelected] | Whether the option is selected | `boolean` | `false` |
99+
| [nzDisabled] | Whether the option is disabled | `boolean` | `false` |
100+
| (nzClick) | Event on click | `EventEmitter<MouseEvent>` | - |
103101

104-
### nz-tree-node-checkbox
102+
### nz-tree-node-checkbox:standalone
105103

106104
Define the checkbox feature of a node.
107105

108-
| Property | Description | Type | Default |
109-
| --- | --- | --- | --- |
110-
| [nzChecked] | Whether the checkbox is checked | `boolean` | `false` |
111-
| [nzDisabled] | Whether the checkbox is disabled | `boolean` | `false` |
112-
| [nzIndeterminate] | Whether the checkbox is indeterminate | `boolean` | `false` |
113-
| (nzClick) | Event on click | `EventEmitter<MouseEvent>` | - |
106+
| Property | Description | Type | Default |
107+
| ----------------- | ------------------------------------- | -------------------------- | ------- |
108+
| [nzChecked] | Whether the checkbox is checked | `boolean` | `false` |
109+
| [nzDisabled] | Whether the checkbox is disabled | `boolean` | `false` |
110+
| [nzIndeterminate] | Whether the checkbox is indeterminate | `boolean` | `false` |
111+
| (nzClick) | Event on click | `EventEmitter<MouseEvent>` | - |
114112

115113
## Classes
116114

117-
### __NzTreeFlatDataSource extends DataSource__
115+
### **NzTreeFlatDataSource extends DataSource**
118116

119117
### Construction Parameters
120118

121-
| Name | Description |
122-
| --- | --- |
123-
| `treeControl: FlatTreeControl<F, K>` | The tree controller. |
119+
| Name | Description |
120+
| ----------------------------------------- | ---------------------------------------------------------------- |
121+
| `treeControl: FlatTreeControl<F, K>` | The tree controller. |
124122
| `treeFlattener: NzTreeFlattener<T, F, K>` | Flattener for convert nested nodes `T` into flattened nodes `F`. |
125-
| `initialData: T[] = []` | Initialized data. |
123+
| `initialData: T[] = []` | Initialized data. |
126124

127125
### Methods
128126

129-
| Name | Description |
130-
| --- | --- |
127+
| Name | Description |
128+
| -------------------------------------------------------------- | ------------------------------------------------------------ |
131129
| `connect(collectionViewer: CollectionViewer): Observable<F[]>` | Call from the TreeView component to listen for data updates. |
132-
| `disconnect(): void` | Call when TreeView component is destroyed. |
133-
| `setData(value: T[]): void` | Set the origin data |
134-
| `getData(): T[]` | Get the origin data |
130+
| `disconnect(): void` | Call when TreeView component is destroyed. |
131+
| `setData(value: T[]): void` | Set the origin data |
132+
| `getData(): T[]` | Get the origin data |
135133

136-
### __NzTreeFlattener__
134+
### **NzTreeFlattener**
137135

138136
Convert nested data with child nodes into node data with level information.
139137

140138
### Construction Parameters
141139

142-
| Name | Description |
143-
| --- | --- |
144-
| `transformFunction: (node: T, level: number) => F` | Receive a nested node and return a flattened node |
145-
| `getLevel: (node: F) => number` | Define the method to get the `level` property |
146-
| `isExpandable: (node: F) => boolean` | Methods for defining whether a node is expandable |
140+
| Name | Description |
141+
| ----------------------------------------------------------------------- | ----------------------------------------------------- |
142+
| `transformFunction: (node: T, level: number) => F` | Receive a nested node and return a flattened node |
143+
| `getLevel: (node: F) => number` | Define the method to get the `level` property |
144+
| `isExpandable: (node: F) => boolean` | Methods for defining whether a node is expandable |
147145
| `getChildren: (node: T) => Observable<T[]> \| T[] \| undefined \| null` | Define methods to get children nodes from nested node |
148146

149147
### Methods
150148

151-
| Name | Description |
152-
| --- | --- |
153-
| `flattenNodes(structuredData: T[]): F[]` | Receive nested data and return flattened data |
149+
| Name | Description |
150+
| ----------------------------------------------------------------------- | ------------------------------------------------- |
151+
| `flattenNodes(structuredData: T[]): F[]` | Receive nested data and return flattened data |
154152
| `expandFlattenedNodes(nodes: F[], treeControl: TreeControl<F, K>): F[]` | Get flattened node data based on expansion status |

0 commit comments

Comments
 (0)