Skip to content

docs(cdk/tree): examples not working when forked to Stackblitz #30601

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 7, 2025
Merged

docs(cdk/tree): examples not working when forked to Stackblitz #30601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions src/components-examples/cdk/tree/cdk-tree-complex/cdk-tree-complex-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,40 +14,6 @@ interface BackendData {
children?: string[];
}

const TREE_DATA: Map<string, BackendData> = new Map(
[
{
id: '1',
name: 'Fruit',
children: ['1-1', '1-2', '1-3'],
},
{id: '1-1', name: 'Apple', parent: '1'},
{id: '1-2', name: 'Banana', parent: '1'},
{id: '1-3', name: 'Fruit Loops', parent: '1'},
{
id: '2',
name: 'Vegetables',
children: ['2-1', '2-2'],
},
{
id: '2-1',
name: 'Green',
parent: '2',
children: ['2-1-1', '2-1-2'],
},
{
id: '2-2',
name: 'Orange',
parent: '2',
children: ['2-2-1', '2-2-2'],
},
{id: '2-1-1', name: 'Broccoli', parent: '2-1'},
{id: '2-1-2', name: 'Brussel sprouts', parent: '2-1'},
{id: '2-2-1', name: 'Pumpkins', parent: '2-2'},
{id: '2-2-2', name: 'Carrots', parent: '2-2'},
].map(datum => [datum.id, datum]),
);

class FakeDataBackend {
private _getRandomDelayTime() {
// anywhere from 100 to 500ms.
Expand All @@ -56,16 +22,16 @@ class FakeDataBackend {

getChildren(id: string): Observable<BackendData[]> {
// first, find the specified ID in our tree
const item = TREE_DATA.get(id);
const item = EXAMPLE_DATA.get(id);
const children = item?.children ?? [];

return observableOf(children.map(childId => TREE_DATA.get(childId)!)).pipe(
return observableOf(children.map(childId => EXAMPLE_DATA.get(childId)!)).pipe(
delay(this._getRandomDelayTime()),
);
}

getRoots(): Observable<BackendData[]> {
return observableOf([...TREE_DATA.values()].filter(datum => !datum.parent)).pipe(
return observableOf([...EXAMPLE_DATA.values()].filter(datum => !datum.parent)).pipe(
delay(this._getRandomDelayTime()),
);
}
Expand Down Expand Up @@ -268,7 +234,7 @@ class ComplexDataStore {
const transformFn = sourcesAndTransform[sourcesAndTransform.length - 1] as TransformFn<T, U>;

return combineLatest([...sources, this._state]).pipe(
map(args => transformFn(...(args as [...ObservedValuesOf<T>, State]))),
map(args => transformFn(...(args as unknown as [...ObservedValuesOf<T>, State]))),
shareReplay({refCount: true, bufferSize: 1}),
);
}
Expand Down Expand Up @@ -305,3 +271,37 @@ export class CdkTreeComplexExample implements OnInit {
}
}
}

const EXAMPLE_DATA = new Map<string, BackendData>(
[
{
id: '1',
name: 'Fruit',
children: ['1-1', '1-2', '1-3'],
},
{id: '1-1', name: 'Apple', parent: '1'},
{id: '1-2', name: 'Banana', parent: '1'},
{id: '1-3', name: 'Fruit Loops', parent: '1'},
{
id: '2',
name: 'Vegetables',
children: ['2-1', '2-2'],
},
{
id: '2-1',
name: 'Green',
parent: '2',
children: ['2-1-1', '2-1-2'],
},
{
id: '2-2',
name: 'Orange',
parent: '2',
children: ['2-2-1', '2-2-2'],
},
{id: '2-1-1', name: 'Broccoli', parent: '2-1'},
{id: '2-1-2', name: 'Brussel sprouts', parent: '2-1'},
{id: '2-2-1', name: 'Pumpkins', parent: '2-2'},
{id: '2-2-2', name: 'Carrots', parent: '2-2'},
].map(datum => [datum.id, datum]),
);
124 changes: 62 additions & 62 deletions ...ents-examples/cdk/tree/cdk-tree-custom-key-manager/cdk-tree-custom-key-manager-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,64 +28,6 @@ import {
import {Subject, isObservable, Observable} from 'rxjs';
import {take} from 'rxjs/operators';

const TREE_DATA: ExampleFlatNode[] = [
{
name: 'Fruit',
expandable: true,
level: 0,
},
{
name: 'Apple',
expandable: false,
level: 1,
},
{
name: 'Banana',
expandable: false,
level: 1,
},
{
name: 'Fruit loops',
expandable: false,
level: 1,
},
{
name: 'Vegetables',
expandable: true,
level: 0,
},
{
name: 'Green',
expandable: true,
level: 1,
},
{
name: 'Broccoli',
expandable: false,
level: 2,
},
{
name: 'Brussels sprouts',
expandable: false,
level: 2,
},
{
name: 'Orange',
expandable: true,
level: 1,
},
{
name: 'Pumpkins',
expandable: false,
level: 2,
},
{
name: 'Carrots',
expandable: false,
level: 2,
},
];

/** Flat node with expandable and level information */
interface ExampleFlatNode {
expandable: boolean;
Expand Down Expand Up @@ -379,16 +321,16 @@ export class CdkTreeCustomKeyManagerExample {
node => node.expandable,
);

dataSource = new ArrayDataSource(TREE_DATA);
dataSource = new ArrayDataSource(EXAMPLE_DATA);

hasChild = (_: number, node: ExampleFlatNode) => node.expandable;

getParentNode(node: ExampleFlatNode) {
const nodeIndex = TREE_DATA.indexOf(node);
const nodeIndex = EXAMPLE_DATA.indexOf(node);

for (let i = nodeIndex - 1; i >= 0; i--) {
if (TREE_DATA[i].level === node.level - 1) {
return TREE_DATA[i];
if (EXAMPLE_DATA[i].level === node.level - 1) {
return EXAMPLE_DATA[i];
}
}

Expand All @@ -406,3 +348,61 @@ export class CdkTreeCustomKeyManagerExample {
return true;
}
}

const EXAMPLE_DATA: ExampleFlatNode[] = [
{
name: 'Fruit',
expandable: true,
level: 0,
},
{
name: 'Apple',
expandable: false,
level: 1,
},
{
name: 'Banana',
expandable: false,
level: 1,
},
{
name: 'Fruit loops',
expandable: false,
level: 1,
},
{
name: 'Vegetables',
expandable: true,
level: 0,
},
{
name: 'Green',
expandable: true,
level: 1,
},
{
name: 'Broccoli',
expandable: false,
level: 2,
},
{
name: 'Brussels sprouts',
expandable: false,
level: 2,
},
{
name: 'Orange',
expandable: true,
level: 1,
},
{
name: 'Pumpkins',
expandable: false,
level: 2,
},
{
name: 'Carrots',
expandable: false,
level: 2,
},
];
28 changes: 0 additions & 28 deletions .../cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example-data.ts
View file
Open in desktop

This file was deleted.

34 changes: 31 additions & 3 deletions ...mples/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,15 @@ import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {timer} from 'rxjs';
import {mapTo} from 'rxjs/operators';
import {NestedFoodNode, NESTED_DATA} from './cdk-tree-flat-children-accessor-example-data';

/**
* Food data with nested structure.
* Each node has a name and an optional list of children.
*/
interface NestedFoodNode {
name: string;
children?: NestedFoodNode[];
}

function flattenNodes(nodes: NestedFoodNode[]): NestedFoodNode[] {
const flattenedNodes = [];
Expand Down Expand Up @@ -34,12 +42,12 @@ export class CdkTreeFlatChildrenAccessorExample {

childrenAccessor = (dataNode: NestedFoodNode) => timer(100).pipe(mapTo(dataNode.children ?? []));

dataSource = new ArrayDataSource(NESTED_DATA);
dataSource = new ArrayDataSource(EXAMPLE_DATA);

hasChild = (_: number, node: NestedFoodNode) => !!node.children?.length;

getParentNode(node: NestedFoodNode) {
for (const parent of flattenNodes(NESTED_DATA)) {
for (const parent of flattenNodes(EXAMPLE_DATA)) {
if (parent.children?.includes(node)) {
return parent;
}
Expand All @@ -59,3 +67,23 @@ export class CdkTreeFlatChildrenAccessorExample {
return true;
}
}

const EXAMPLE_DATA: NestedFoodNode[] = [
{
name: 'Fruit',
children: [{name: 'Apple'}, {name: 'Banana'}, {name: 'Fruit loops'}],
},
{
name: 'Vegetables',
children: [
{
name: 'Green',
children: [{name: 'Broccoli'}, {name: 'Brussels sprouts'}],
},
{
name: 'Orange',
children: [{name: 'Pumpkins'}, {name: 'Carrots'}],
},
],
},
];
Loading
Loading