Skip to content

Commit f6f6576

Browse files
keskamikeskami
committed
Add count prop to OuiTreeView opensearch-project#934
Signed-off-by: keskami <[email protected]>
1 parent baead4a commit f6f6576

File tree

3 files changed

+115
-16
lines changed

3 files changed

+115
-16
lines changed

‎src/components/tree_view/__snapshots__/tree_view.test.tsx.snap

+89-10
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,28 @@ exports[`OuiTreeView is rendered 1`] = `
3434
data-ouiicon-type="folderOpen"
3535
/>
3636
</span>
37+
</button>
38+
<button
39+
class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton"
40+
type="button"
41+
>
3742
<span
38-
class="ouiTreeView__nodeLabel"
43+
class="ouiFacetButton__content"
3944
>
40-
Item One
45+
<span
46+
class="ouiFacetButton__text"
47+
>
48+
<span
49+
class="ouiTreeView__nodeLabel"
50+
>
51+
Item One
52+
</span>
53+
</span>
54+
<span
55+
class="ouiNotificationBadge ouiNotificationBadge--medium ouiNotificationBadge--subdued ouiFacetButton__quantity"
56+
>
57+
3
58+
</span>
4159
</span>
4260
</button>
4361
<div
@@ -67,10 +85,23 @@ exports[`OuiTreeView is rendered 1`] = `
6785
data-ouiicon-type="document"
6886
/>
6987
</span>
88+
</button>
89+
<button
90+
class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton"
91+
type="button"
92+
>
7093
<span
71-
class="ouiTreeView__nodeLabel"
94+
class="ouiFacetButton__content"
7295
>
73-
Item A
96+
<span
97+
class="ouiFacetButton__text"
98+
>
99+
<span
100+
class="ouiTreeView__nodeLabel"
101+
>
102+
Item A
103+
</span>
104+
</span>
74105
</span>
75106
</button>
76107
<div
@@ -94,10 +125,28 @@ exports[`OuiTreeView is rendered 1`] = `
94125
data-ouiicon-type="arrowRight"
95126
/>
96127
</span>
128+
</button>
129+
<button
130+
class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton"
131+
type="button"
132+
>
97133
<span
98-
class="ouiTreeView__nodeLabel"
134+
class="ouiFacetButton__content"
99135
>
100-
Item B
136+
<span
137+
class="ouiFacetButton__text"
138+
>
139+
<span
140+
class="ouiTreeView__nodeLabel"
141+
>
142+
Item B
143+
</span>
144+
</span>
145+
<span
146+
class="ouiNotificationBadge ouiNotificationBadge--medium ouiNotificationBadge--subdued ouiFacetButton__quantity"
147+
>
148+
2
149+
</span>
101150
</span>
102151
</button>
103152
<div
@@ -121,10 +170,28 @@ exports[`OuiTreeView is rendered 1`] = `
121170
data-ouiicon-type="arrowRight"
122171
/>
123172
</span>
173+
</button>
174+
<button
175+
class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton"
176+
type="button"
177+
>
124178
<span
125-
class="ouiTreeView__nodeLabel"
179+
class="ouiFacetButton__content"
126180
>
127-
Item C
181+
<span
182+
class="ouiFacetButton__text"
183+
>
184+
<span
185+
class="ouiTreeView__nodeLabel"
186+
>
187+
Item C
188+
</span>
189+
</span>
190+
<span
191+
class="ouiNotificationBadge ouiNotificationBadge--medium ouiNotificationBadge--subdued ouiFacetButton__quantity"
192+
>
193+
2
194+
</span>
128195
</span>
129196
</button>
130197
<div
@@ -144,11 +211,23 @@ exports[`OuiTreeView is rendered 1`] = `
144211
class="ouiTreeView__nodeInner"
145212
data-test-subj="ouiTreeViewButton-ouiTreeView_generated-id"
146213
id="item_two"
214+
/>
215+
<button
216+
class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton"
217+
type="button"
147218
>
148219
<span
149-
class="ouiTreeView__nodeLabel"
220+
class="ouiFacetButton__content"
150221
>
151-
Item Two
222+
<span
223+
class="ouiFacetButton__text"
224+
>
225+
<span
226+
class="ouiTreeView__nodeLabel"
227+
>
228+
Item Two
229+
</span>
230+
</span>
152231
</span>
153232
</button>
154233
<div

‎src/components/tree_view/tree_view.scss

+5
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@
5555

5656
}
5757

58+
.ouiTreeView_ouiFacetButton {
59+
text-align-last: center;
60+
padding: none;
61+
}
62+
5863
.ouiTreeView__nodeLabel {
5964
@include ouiTextTruncate;
6065
}

‎src/components/tree_view/tree_view.tsx

+21-6
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import { OuiScreenReaderOnly } from '../accessibility';
3737
import { OuiText } from '../text';
3838
import { keys, htmlIdGenerator } from '../../services';
3939
import { OuiInnerText } from '../inner_text';
40+
import { OuiFacetButton } from '../facet';
4041

4142
const OuiTreeViewContext = createContext<string>('');
4243

@@ -118,6 +119,8 @@ export type CommonTreeProps = CommonProps &
118119
* that contain children
119120
*/
120121
showExpansionArrows?: boolean;
122+
/** Number of child components within tree view node
123+
*/
121124
};
122125

123126
export type OuiTreeViewProps = Omit<
@@ -307,7 +310,7 @@ export class OuiTreeView extends Component<OuiTreeViewProps, OuiTreeViewState> {
307310
{items.map((node, index) => {
308311
const buttonId = node.id;
309312
const wrappingId = this.treeIdGenerator(buttonId);
310-
313+
const count = node.children?.length;
311314
return (
312315
<OuiInnerText
313316
key={node.id + index}
@@ -389,11 +392,23 @@ export class OuiTreeView extends Component<OuiTreeViewProps, OuiTreeViewState> {
389392
{node.useEmptyIcon && !node.icon ? (
390393
<span className="ouiTreeView__iconPlaceholder" />
391394
) : null}
392-
<span
393-
ref={ref}
394-
className="ouiTreeView__nodeLabel">
395-
{node.label}
396-
</span>
395+
{count === 0 ? (
396+
<span
397+
ref={ref}
398+
className="ouiTreeView__nodeLabel">
399+
{node.label}
400+
</span>
401+
) : (
402+
<OuiFacetButton
403+
quantity={count}
404+
className="ouiTreeView_ouiFacetButton">
405+
<span
406+
ref={ref}
407+
className="ouiTreeView__nodeLabel">
408+
{node.label}
409+
</span>
410+
</OuiFacetButton>
411+
)}
397412
</button>
398413
<div
399414
id={wrappingId}

0 commit comments

Comments
 (0)