Skip to content

Commit 9e717a1

Browse files
crisbetocrisbeto
committed
main - 5a98cc6 docs(cdk/tree): examples not working when forked to Stackblitz (#30601)
1 parent e6f947c commit 9e717a1

File tree

45 files changed

+1299
-1306
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1299
-1306
lines changed

‎docs-content/examples-highlighted/cdk/tree/cdk-tree-complex/cdk-tree-complex-example-ts.html‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,40 +14,6 @@
1414
children?: <span class="hljs-built_in">string</span>[];
1515
}
1616

17-
<span class="hljs-keyword">const</span> TREE_DATA: <span class="hljs-built_in">Map</span>&lt;<span class="hljs-built_in">string</span>, BackendData&gt; = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>(
18-
[
19-
{
20-
<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;1&#x27;</span>,
21-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Fruit&#x27;</span>,
22-
<span class="hljs-attr">children</span>: [<span class="hljs-string">&#x27;1-1&#x27;</span>, <span class="hljs-string">&#x27;1-2&#x27;</span>, <span class="hljs-string">&#x27;1-3&#x27;</span>],
23-
},
24-
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;1-1&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Apple&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;1&#x27;</span>},
25-
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;1-2&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Banana&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;1&#x27;</span>},
26-
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;1-3&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Fruit Loops&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;1&#x27;</span>},
27-
{
28-
<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2&#x27;</span>,
29-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Vegetables&#x27;</span>,
30-
<span class="hljs-attr">children</span>: [<span class="hljs-string">&#x27;2-1&#x27;</span>, <span class="hljs-string">&#x27;2-2&#x27;</span>],
31-
},
32-
{
33-
<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-1&#x27;</span>,
34-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Green&#x27;</span>,
35-
<span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2&#x27;</span>,
36-
<span class="hljs-attr">children</span>: [<span class="hljs-string">&#x27;2-1-1&#x27;</span>, <span class="hljs-string">&#x27;2-1-2&#x27;</span>],
37-
},
38-
{
39-
<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-2&#x27;</span>,
40-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Orange&#x27;</span>,
41-
<span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2&#x27;</span>,
42-
<span class="hljs-attr">children</span>: [<span class="hljs-string">&#x27;2-2-1&#x27;</span>, <span class="hljs-string">&#x27;2-2-2&#x27;</span>],
43-
},
44-
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-1-1&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Broccoli&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2-1&#x27;</span>},
45-
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-1-2&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Brussel sprouts&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2-1&#x27;</span>},
46-
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-2-1&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Pumpkins&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2-2&#x27;</span>},
47-
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-2-2&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Carrots&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2-2&#x27;</span>},
48-
].map(<span class="hljs-function"><span class="hljs-params">datum</span> =&gt;</span> [datum.id, datum]),
49-
);
50-
5117
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FakeDataBackend</span> </span>{
5218
<span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-title">_getRandomDelayTime</span>(<span class="hljs-params"></span>)</span> {
5319
<span class="hljs-comment">// anywhere from 100 to 500ms.</span>
@@ -56,16 +22,16 @@
5622

5723
getChildren(id: <span class="hljs-built_in">string</span>): Observable&lt;BackendData[]&gt; {
5824
<span class="hljs-comment">// first, find the specified ID in our tree</span>
59-
<span class="hljs-keyword">const</span> item = TREE_DATA.get(id);
25+
<span class="hljs-keyword">const</span> item = EXAMPLE_DATA.get(id);
6026
<span class="hljs-keyword">const</span> children = item?.children ?? [];
6127

62-
<span class="hljs-keyword">return</span> observableOf(children.map(<span class="hljs-function"><span class="hljs-params">childId</span> =&gt;</span> TREE_DATA.get(childId)!)).pipe(
28+
<span class="hljs-keyword">return</span> observableOf(children.map(<span class="hljs-function"><span class="hljs-params">childId</span> =&gt;</span> EXAMPLE_DATA.get(childId)!)).pipe(
6329
delay(<span class="hljs-built_in">this</span>._getRandomDelayTime()),
6430
);
6531
}
6632

6733
getRoots(): Observable&lt;BackendData[]&gt; {
68-
<span class="hljs-keyword">return</span> observableOf([...TREE_DATA.values()].filter(<span class="hljs-function"><span class="hljs-params">datum</span> =&gt;</span> !datum.parent)).pipe(
34+
<span class="hljs-keyword">return</span> observableOf([...EXAMPLE_DATA.values()].filter(<span class="hljs-function"><span class="hljs-params">datum</span> =&gt;</span> !datum.parent)).pipe(
6935
delay(<span class="hljs-built_in">this</span>._getRandomDelayTime()),
7036
);
7137
}
@@ -268,7 +234,7 @@
268234
<span class="hljs-keyword">const</span> transformFn = sourcesAndTransform[sourcesAndTransform.length - <span class="hljs-number">1</span>] <span class="hljs-keyword">as</span> TransformFn&lt;T, U&gt;;
269235

270236
<span class="hljs-keyword">return</span> combineLatest([...sources, <span class="hljs-built_in">this</span>._state]).pipe(
271-
map(<span class="hljs-function"><span class="hljs-params">args</span> =&gt;</span> transformFn(...(args <span class="hljs-keyword">as</span> [...ObservedValuesOf&lt;T&gt;, State]))),
237+
map(<span class="hljs-function"><span class="hljs-params">args</span> =&gt;</span> transformFn(...(args <span class="hljs-keyword">as</span> unknown <span class="hljs-keyword">as</span> [...ObservedValuesOf&lt;T&gt;, State]))),
272238
shareReplay({<span class="hljs-attr">refCount</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">bufferSize</span>: <span class="hljs-number">1</span>}),
273239
);
274240
}
@@ -305,3 +271,37 @@
305271
}
306272
}
307273
}
274+
275+
<span class="hljs-keyword">const</span> EXAMPLE_DATA = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Map</span>&lt;<span class="hljs-built_in">string</span>, BackendData&gt;(
276+
[
277+
{
278+
<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;1&#x27;</span>,
279+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Fruit&#x27;</span>,
280+
<span class="hljs-attr">children</span>: [<span class="hljs-string">&#x27;1-1&#x27;</span>, <span class="hljs-string">&#x27;1-2&#x27;</span>, <span class="hljs-string">&#x27;1-3&#x27;</span>],
281+
},
282+
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;1-1&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Apple&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;1&#x27;</span>},
283+
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;1-2&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Banana&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;1&#x27;</span>},
284+
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;1-3&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Fruit Loops&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;1&#x27;</span>},
285+
{
286+
<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2&#x27;</span>,
287+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Vegetables&#x27;</span>,
288+
<span class="hljs-attr">children</span>: [<span class="hljs-string">&#x27;2-1&#x27;</span>, <span class="hljs-string">&#x27;2-2&#x27;</span>],
289+
},
290+
{
291+
<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-1&#x27;</span>,
292+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Green&#x27;</span>,
293+
<span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2&#x27;</span>,
294+
<span class="hljs-attr">children</span>: [<span class="hljs-string">&#x27;2-1-1&#x27;</span>, <span class="hljs-string">&#x27;2-1-2&#x27;</span>],
295+
},
296+
{
297+
<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-2&#x27;</span>,
298+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Orange&#x27;</span>,
299+
<span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2&#x27;</span>,
300+
<span class="hljs-attr">children</span>: [<span class="hljs-string">&#x27;2-2-1&#x27;</span>, <span class="hljs-string">&#x27;2-2-2&#x27;</span>],
301+
},
302+
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-1-1&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Broccoli&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2-1&#x27;</span>},
303+
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-1-2&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Brussel sprouts&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2-1&#x27;</span>},
304+
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-2-1&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Pumpkins&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2-2&#x27;</span>},
305+
{<span class="hljs-attr">id</span>: <span class="hljs-string">&#x27;2-2-2&#x27;</span>, <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Carrots&#x27;</span>, <span class="hljs-attr">parent</span>: <span class="hljs-string">&#x27;2-2&#x27;</span>},
306+
].map(<span class="hljs-function"><span class="hljs-params">datum</span> =&gt;</span> [datum.id, datum]),
307+
);

‎docs-content/examples-highlighted/cdk/tree/cdk-tree-custom-key-manager/cdk-tree-custom-key-manager-example-ts.html‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -28,64 +28,6 @@
2828
<span class="hljs-keyword">import</span> {Subject, isObservable, Observable} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;rxjs&#x27;</span>;
2929
<span class="hljs-keyword">import</span> {take} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;rxjs/operators&#x27;</span>;
3030

31-
<span class="hljs-keyword">const</span> TREE_DATA: ExampleFlatNode[] = [
32-
{
33-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Fruit&#x27;</span>,
34-
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">true</span>,
35-
<span class="hljs-attr">level</span>: <span class="hljs-number">0</span>,
36-
},
37-
{
38-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Apple&#x27;</span>,
39-
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
40-
<span class="hljs-attr">level</span>: <span class="hljs-number">1</span>,
41-
},
42-
{
43-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Banana&#x27;</span>,
44-
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
45-
<span class="hljs-attr">level</span>: <span class="hljs-number">1</span>,
46-
},
47-
{
48-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Fruit loops&#x27;</span>,
49-
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
50-
<span class="hljs-attr">level</span>: <span class="hljs-number">1</span>,
51-
},
52-
{
53-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Vegetables&#x27;</span>,
54-
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">true</span>,
55-
<span class="hljs-attr">level</span>: <span class="hljs-number">0</span>,
56-
},
57-
{
58-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Green&#x27;</span>,
59-
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">true</span>,
60-
<span class="hljs-attr">level</span>: <span class="hljs-number">1</span>,
61-
},
62-
{
63-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Broccoli&#x27;</span>,
64-
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
65-
<span class="hljs-attr">level</span>: <span class="hljs-number">2</span>,
66-
},
67-
{
68-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Brussels sprouts&#x27;</span>,
69-
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
70-
<span class="hljs-attr">level</span>: <span class="hljs-number">2</span>,
71-
},
72-
{
73-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Orange&#x27;</span>,
74-
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">true</span>,
75-
<span class="hljs-attr">level</span>: <span class="hljs-number">1</span>,
76-
},
77-
{
78-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Pumpkins&#x27;</span>,
79-
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
80-
<span class="hljs-attr">level</span>: <span class="hljs-number">2</span>,
81-
},
82-
{
83-
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Carrots&#x27;</span>,
84-
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
85-
<span class="hljs-attr">level</span>: <span class="hljs-number">2</span>,
86-
},
87-
];
88-
8931
<span class="hljs-comment">/** Flat node with expandable and level information */</span>
9032
<span class="hljs-keyword">interface</span> ExampleFlatNode {
9133
<span class="hljs-attr">expandable</span>: <span class="hljs-built_in">boolean</span>;
@@ -379,16 +321,16 @@
379321
<span class="hljs-function"><span class="hljs-params">node</span> =&gt;</span> node.expandable,
380322
);
381323

382-
dataSource = <span class="hljs-keyword">new</span> ArrayDataSource(TREE_DATA);
324+
dataSource = <span class="hljs-keyword">new</span> ArrayDataSource(EXAMPLE_DATA);
383325

384326
hasChild = <span class="hljs-function">(<span class="hljs-params">_: <span class="hljs-built_in">number</span>, node: ExampleFlatNode</span>) =&gt;</span> node.expandable;
385327

386328
<span class="hljs-function"><span class="hljs-title">getParentNode</span>(<span class="hljs-params">node: ExampleFlatNode</span>)</span> {
387-
<span class="hljs-keyword">const</span> nodeIndex = TREE_DATA.indexOf(node);
329+
<span class="hljs-keyword">const</span> nodeIndex = EXAMPLE_DATA.indexOf(node);
388330

389331
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = nodeIndex - <span class="hljs-number">1</span>; i &gt;= <span class="hljs-number">0</span>; i--) {
390-
<span class="hljs-keyword">if</span> (TREE_DATA[i].level === node.level - <span class="hljs-number">1</span>) {
391-
<span class="hljs-keyword">return</span> TREE_DATA[i];
332+
<span class="hljs-keyword">if</span> (EXAMPLE_DATA[i].level === node.level - <span class="hljs-number">1</span>) {
333+
<span class="hljs-keyword">return</span> EXAMPLE_DATA[i];
392334
}
393335
}
394336

@@ -406,3 +348,61 @@
406348
<span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
407349
}
408350
}
351+
352+
<span class="hljs-keyword">const</span> EXAMPLE_DATA: ExampleFlatNode[] = [
353+
{
354+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Fruit&#x27;</span>,
355+
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">true</span>,
356+
<span class="hljs-attr">level</span>: <span class="hljs-number">0</span>,
357+
},
358+
{
359+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Apple&#x27;</span>,
360+
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
361+
<span class="hljs-attr">level</span>: <span class="hljs-number">1</span>,
362+
},
363+
{
364+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Banana&#x27;</span>,
365+
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
366+
<span class="hljs-attr">level</span>: <span class="hljs-number">1</span>,
367+
},
368+
{
369+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Fruit loops&#x27;</span>,
370+
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
371+
<span class="hljs-attr">level</span>: <span class="hljs-number">1</span>,
372+
},
373+
{
374+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Vegetables&#x27;</span>,
375+
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">true</span>,
376+
<span class="hljs-attr">level</span>: <span class="hljs-number">0</span>,
377+
},
378+
{
379+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Green&#x27;</span>,
380+
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">true</span>,
381+
<span class="hljs-attr">level</span>: <span class="hljs-number">1</span>,
382+
},
383+
{
384+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Broccoli&#x27;</span>,
385+
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
386+
<span class="hljs-attr">level</span>: <span class="hljs-number">2</span>,
387+
},
388+
{
389+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Brussels sprouts&#x27;</span>,
390+
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
391+
<span class="hljs-attr">level</span>: <span class="hljs-number">2</span>,
392+
},
393+
{
394+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Orange&#x27;</span>,
395+
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">true</span>,
396+
<span class="hljs-attr">level</span>: <span class="hljs-number">1</span>,
397+
},
398+
{
399+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Pumpkins&#x27;</span>,
400+
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
401+
<span class="hljs-attr">level</span>: <span class="hljs-number">2</span>,
402+
},
403+
{
404+
<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Carrots&#x27;</span>,
405+
<span class="hljs-attr">expandable</span>: <span class="hljs-literal">false</span>,
406+
<span class="hljs-attr">level</span>: <span class="hljs-number">2</span>,
407+
},
408+
];

0 commit comments

Comments
 (0)