Skip to content

Commit cd3bc41

Browse files
TeodorTaushanovTeodorTaushanov
authored
chore(ui5-side-navigation): simplify rendering templates (#11900)
* chore(ui5-side-navigation): simplify rendering templates
1 parent 1e3e54d commit cd3bc41

8 files changed

+161
-252
lines changed

‎packages/fiori/src/SideNavigationGroupTemplate.tsx

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,24 @@ function TreeItemTemplate(this: SideNavigationGroup) {
2222
role="none"
2323
>
2424
<div class="ui5-sn-item-separator"></div>
25-
<div class={`ui5-sn-item ui5-sn-item-group ${this._classes}`}
26-
role="treeitem"
27-
data-sap-focus-ref
28-
onKeyDown={this._onkeydown}
29-
onClick={this._onclick}
30-
onFocusIn={this._onfocusin}
31-
tabIndex={this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined}
32-
aria-expanded={this._expanded}
33-
title={this._tooltip}
34-
aria-owns={this._groupId}
25+
<div id={this._id}
26+
data-sap-focus-ref
27+
class={`ui5-sn-item ui5-sn-item-group ${this._classes}`}
28+
role="treeitem"
29+
onKeyDown={this._onkeydown}
30+
onClick={this._onclick}
31+
onFocusIn={this._onfocusin}
32+
tabIndex={this.effectiveTabIndex}
33+
aria-expanded={this._expanded}
34+
title={this._tooltip}
35+
aria-owns={this._groupId}
3536
>
3637
<div class="ui5-sn-item-text">{this.text}</div>
3738
{!!this.items.length &&
3839
<Icon class="ui5-sn-item-toggle-icon"
39-
name={this.expanded ? navDownArrow : navRightArrow}
40-
accessibleName={this._arrowTooltip}
41-
showTooltip={true}
40+
name={this.expanded ? navDownArrow : navRightArrow}
41+
accessibleName={this._arrowTooltip}
42+
showTooltip={true}
4243
/>
4344
}
4445
</div>

‎packages/fiori/src/SideNavigationItem.ts

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -145,27 +145,31 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
145145
return "tree";
146146
}
147147

148+
if (this.accessibilityAttributes?.hasPopup) {
149+
return this.accessibilityAttributes.hasPopup;
150+
}
151+
148152
return undefined;
149153
}
150154

151155
get _ariaChecked() {
152-
if (this.isOverflow || this.unselectable) {
156+
if (this.isOverflow || this.unselectable || !this.sideNavCollapsed) {
153157
return undefined;
154158
}
155159

156160
return this.selected;
157161
}
158162

159163
get _groupId() {
160-
if (!this.items.length) {
164+
if (!this.items.length || this.sideNavCollapsed) {
161165
return undefined;
162166
}
163167

164168
return `${this._id}-group`;
165169
}
166170

167171
get _expanded() {
168-
if (!this.items.length) {
172+
if (!this.items.length || this.sideNavCollapsed) {
169173
return undefined;
170174
}
171175

@@ -313,15 +317,15 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
313317
this.getDomRef()!.classList.add("ui5-sn-item-no-hover-effect");
314318
}
315319

316-
get isSideNavigationItem() {
317-
return true;
318-
}
319-
320320
_toggle() {
321321
if (this.items.length && !this.effectiveDisabled) {
322322
this.expanded = !this.expanded;
323323
}
324324
}
325+
326+
get isSideNavigationItem() {
327+
return true;
328+
}
325329
}
326330

327331
SideNavigationItem.define();

‎packages/fiori/src/SideNavigationItemBase.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ class SideNavigationItemBase extends UI5Element implements ITabbable {
115115
}
116116

117117
get effectiveTabIndex() {
118-
return this.forcedTabIndex || undefined;
118+
return this.forcedTabIndex !== undefined ? parseInt(this.forcedTabIndex) : undefined;
119119
}
120120

121121
get sideNavigation() {

‎packages/fiori/src/SideNavigationItemTemplate.tsx

Lines changed: 53 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -6,154 +6,72 @@ import type SideNavigationItem from "./SideNavigationItem.js";
66

77
export default function SideNavigationItemTemplate(this: SideNavigationItem) {
88
if (this.sideNavCollapsed) {
9-
return MenuItemTemplate.call(this);
9+
return ItemTemplate.call(this);
1010
}
11-
return TreeItemTemplate.call(this);
11+
12+
return (
13+
<li id={this._id} class="ui5-sn-list-li" role="none">
14+
{ItemTemplate.call(this)}
15+
</li>
16+
);
1217
}
1318

14-
function MenuItemTemplate(this: SideNavigationItem) {
15-
return (<>
16-
{this._href ?
17-
<a id={this._id}
18-
class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
19-
role={this.ariaRole}
20-
data-sap-focus-ref
21-
onKeyDown={this._onkeydown}
22-
onKeyUp={this._onkeyup}
23-
onClick={this._onclick}
24-
onFocusIn={this._onfocusin}
25-
onFocusOut={this._onfocusout}
26-
onMouseEnter={this._onmouseenter}
27-
onMouseLeave={this._onmouseleave}
28-
tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
29-
aria-haspopup={this._ariaHasPopup}
30-
aria-checked={this._ariaChecked}
31-
title={this._tooltip}
32-
href={this._href}
33-
target={this._target}
19+
function ItemTemplate(this: SideNavigationItem) {
20+
const EffectiveTag = this._effectiveTag;
21+
22+
return (
23+
<>
24+
<EffectiveTag id={this._id}
25+
data-sap-focus-ref
26+
class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
27+
role={this.ariaRole}
28+
onKeyDown={this._onkeydown}
29+
onKeyUp={this._onkeyup}
30+
onClick={this._onclick}
31+
onFocusIn={this._onfocusin}
32+
tabIndex={this.effectiveTabIndex}
33+
aria-current={this._ariaCurrent}
34+
aria-selected={this._ariaSelected}
35+
title={this._tooltip}
36+
aria-disabled={this.effectiveDisabled}
37+
href={this._href}
38+
target={this._target}
39+
aria-haspopup={this._ariaHasPopup}
40+
onFocusOut={this._onfocusout}
41+
onMouseEnter={this._onmouseenter}
42+
onMouseLeave={this._onmouseleave}
43+
aria-checked={this._ariaChecked}
44+
aria-owns={this._groupId}
45+
aria-label={this._ariaLabel}
46+
aria-expanded={this._expanded}
3447
>
35-
<Icon class="ui5-sn-item-icon" name={this.icon}/>
48+
{this.sideNavCollapsed ?
49+
<Icon class="ui5-sn-item-icon" name={this.icon}/>
50+
:
51+
this.icon && <Icon class="ui5-sn-item-icon" name={this.icon}/>
52+
}
3653
<div class="ui5-sn-item-text">{this.text}</div>
37-
{!!this.items.length &&
54+
{this.sideNavCollapsed ?
55+
!!this.items.length &&
3856
<Icon class="ui5-sn-item-toggle-icon"
39-
name={navRightArrow}
57+
name={navRightArrow}
4058
/>
41-
}
42-
{this.isExternalLink &&
43-
<Icon class="ui5-sn-item-external-link-icon"
44-
name={arrowRight}
45-
/>
46-
}
47-
</a>
48-
:
49-
<div id={this._id}
50-
class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
51-
role={this.ariaRole}
52-
data-sap-focus-ref
53-
onKeyDown={this._onkeydown}
54-
onKeyUp={this._onkeyup}
55-
onClick={this._onclick}
56-
onFocusIn={this._onfocusin}
57-
onFocusOut={this._onfocusout}
58-
onMouseEnter={this._onmouseenter}
59-
onMouseLeave={this._onmouseleave}
60-
tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
61-
aria-haspopup={this._ariaHasPopup}
62-
aria-checked={this._ariaChecked}
63-
title={this._tooltip}
64-
aria-label={this._ariaLabel}
65-
>
66-
<Icon class="ui5-sn-item-icon" name={this.icon}/>
67-
<div class="ui5-sn-item-text">{this.text}</div>
68-
{!!this.items.length &&
59+
:
60+
!!this.items.length &&
6961
<Icon class="ui5-sn-item-toggle-icon"
70-
name={navRightArrow}
62+
name={this.expanded ? navDownArrow : navRightArrow}
63+
accessibleName={this._arrowTooltip}
64+
showTooltip={true}
65+
onClick={this._onToggleClick}
7166
/>
7267
}
7368
{this.isExternalLink &&
7469
<Icon class="ui5-sn-item-external-link-icon"
75-
name={arrowRight}
70+
name={arrowRight}
7671
/>
7772
}
78-
</div>
79-
}
80-
</>);
81-
}
82-
83-
function TreeItemTemplate(this: SideNavigationItem) {
84-
return (
85-
<li id={this._id} class="ui5-sn-list-li" role="none">
86-
{this._href ?
87-
<a class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
88-
role={this.ariaRole}
89-
data-sap-focus-ref
90-
onKeyDown={this._onkeydown}
91-
onKeyUp={this._onkeyup}
92-
onClick={this._onclick}
93-
onFocusIn={this._onfocusin}
94-
tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
95-
aria-expanded={this._expanded}
96-
aria-current={this._ariaCurrent}
97-
aria-selected={this.selected}
98-
title={this._tooltip}
99-
aria-owns={this._groupId}
100-
href={this._href}
101-
target={this._target}
102-
>
103-
{this.icon &&
104-
<Icon class="ui5-sn-item-icon" name={this.icon}/>
105-
}
106-
<div class="ui5-sn-item-text">{this.text}</div>
107-
{this.isExternalLink &&
108-
<Icon class="ui5-sn-item-external-link-icon"
109-
name={arrowRight}
110-
/>
111-
}
112-
{!!this.items.length &&
113-
<Icon class="ui5-sn-item-toggle-icon"
114-
name={this.expanded ? navDownArrow : navRightArrow}
115-
accessibleName={this._arrowTooltip}
116-
showTooltip={true}
117-
onClick={this._onToggleClick}
118-
/>
119-
}
120-
</a>
121-
:
122-
<div class={`ui5-sn-item ui5-sn-item-level1 ${this._classes}`}
123-
role={this.ariaRole}
124-
data-sap-focus-ref
125-
onKeyDown={this._onkeydown}
126-
onKeyUp={this._onkeyup}
127-
onClick={this._onclick}
128-
onFocusIn={this._onfocusin}
129-
tabIndex={this.effectiveTabIndex !== undefined ? parseInt(this.effectiveTabIndex) : undefined}
130-
aria-expanded={this._expanded}
131-
aria-current={this._ariaCurrent}
132-
aria-selected={this.selected}
133-
aria-haspopup={this.accessibilityAttributes?.hasPopup}
134-
title={this._tooltip}
135-
aria-owns={this._groupId}
136-
>
137-
{this.icon &&
138-
<Icon class="ui5-sn-item-icon" name={this.icon}/>
139-
}
140-
<div class="ui5-sn-item-text">{this.text}</div>
141-
{this.isExternalLink &&
142-
<Icon class="ui5-sn-item-external-link-icon"
143-
name={arrowRight}
144-
/>
145-
}
146-
{!!this.items.length &&
147-
<Icon class="ui5-sn-item-toggle-icon"
148-
name={this.expanded ? navDownArrow : navRightArrow}
149-
accessibleName={this._arrowTooltip}
150-
showTooltip={true}
151-
onClick={this._onToggleClick}
152-
/>
153-
}
154-
</div>
155-
}
156-
{!!this.items.length &&
73+
</EffectiveTag>
74+
{!this.sideNavCollapsed && !!this.items.length &&
15775
<ul id={this._groupId}
15876
class="ui5-sn-item-ul"
15977
aria-label={this.text}
@@ -162,6 +80,6 @@ function TreeItemTemplate(this: SideNavigationItem) {
16280
<slot></slot>
16381
</ul>
16482
}
165-
</li>
83+
</>
16684
);
16785
}

‎packages/fiori/src/SideNavigationPopoverTemplate.tsx

Lines changed: 18 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,23 @@ import SideNavigationItem from "./SideNavigationItem.js";
66
import SideNavigationSubItem from "./SideNavigationSubItem.js";
77

88
export default function SideNavigationTemplate(this: SideNavigation) {
9+
const renderMenuItem = (item: SideNavigationItem | SideNavigationSubItem) => (
10+
<NavigationMenuItem
11+
accessibilityAttributes={item.accessibilityAttributes}
12+
text={item.text}
13+
icon={item.icon}
14+
design={item.design}
15+
disabled={item.disabled}
16+
href={item.href}
17+
target={item.target}
18+
title={item.title}
19+
tooltip={item._tooltip}
20+
ref={this.captureRef.bind(item)}
21+
>
22+
{(item as any).items?.map(renderMenuItem)}
23+
</NavigationMenuItem>
24+
);
25+
926
return (<>
1027
<NavigationMenu
1128
id={`${this._id}-side-navigation-overflow-menu`}
@@ -14,35 +31,7 @@ export default function SideNavigationTemplate(this: SideNavigation) {
1431
onClose={this._onMenuClose}
1532
class="ui5-side-navigation-popover ui5-side-navigation-overflow-menu"
1633
>
17-
{this._menuPopoverItems.map(item =>
18-
<NavigationMenuItem
19-
accessibilityAttributes={item.accessibilityAttributes}
20-
text={item.text}
21-
icon={item.icon}
22-
design={item.design}
23-
disabled={item.disabled}
24-
href={item.href}
25-
target={item.target}
26-
title={item.title}
27-
tooltip={item._tooltip}
28-
ref={this.captureRef.bind(item)}
29-
>
30-
{item.items.map(subItem =>
31-
<NavigationMenuItem
32-
accessibilityAttributes={subItem.accessibilityAttributes}
33-
text={subItem.text}
34-
icon={subItem.icon}
35-
design={subItem.design}
36-
disabled={subItem.disabled}
37-
ref={this.captureRef.bind(subItem)}
38-
href={subItem.href}
39-
target={subItem.target}
40-
title={subItem.title}
41-
tooltip={subItem._tooltip}
42-
/>
43-
)}
44-
</NavigationMenuItem>
45-
)}
34+
{this._menuPopoverItems.map(renderMenuItem)}
4635
</NavigationMenu>
4736
<ResponsivePopover
4837
verticalAlign="Top"

0 commit comments

Comments
 (0)