Skip to content

Commit 98cc218

Browse files
IMinchev64IMinchev64
authored
remove: keys and deprecated modules from nav-drawer samples (#861)
1 parent 9379414 commit 98cc218

4 files changed

Lines changed: 76 additions & 98 deletions

File tree

‎samples/menus/nav-drawer/add-drawer-items/src/index.tsx‎

Lines changed: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,9 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrNavDrawerModule, IgrIconModule,
5-
IgrIconButton, IgrIconButtonModule, registerIconFromText } from 'igniteui-react';
4+
import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react';
65
import 'igniteui-webcomponents/themes/light/bootstrap.css';
76

8-
IgrNavDrawerModule.register();
9-
IgrIconModule.register();
10-
IgrIconButtonModule.register();
11-
127
const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
138
const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
149
const menuIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';
@@ -30,38 +25,38 @@ export default class NavDrawerAddDrawerItems extends React.Component<any, any> {
3025
public render(): JSX.Element {
3126
return (
3227
<div className="container sample">
33-
<IgrIconButton style={{margin: "10px"}}
34-
onClick={this.toggleDrawer}
35-
name="menu"
36-
collection="material"
37-
variant="flat">
38-
</IgrIconButton>
28+
<IgrIconButton style={{ margin: "10px" }}
29+
onClick={this.toggleDrawer}
30+
name="menu"
31+
collection="material"
32+
variant="flat">
33+
</IgrIconButton>
3934
<div onClick={this.onNavDrawerClick}>
4035
<IgrNavDrawer open={true} ref={this.navDrawerRef}>
41-
<IgrNavDrawerHeaderItem key="header">
42-
<span key="sHeader">Sample Drawer</span>
36+
<IgrNavDrawerHeaderItem>
37+
<span>Sample Drawer</span>
4338
</IgrNavDrawerHeaderItem>
4439

45-
<IgrNavDrawerItem key="home">
46-
<div slot="icon" key="iHome">
40+
<IgrNavDrawerItem>
41+
<div slot="icon">
4742
<IgrIcon name="home" collection="material" />
4843
</div>
49-
<span slot="content" key="sHome">Home</span>
44+
<span slot="content">Home</span>
5045
</IgrNavDrawerItem>
5146

52-
<IgrNavDrawerItem key="search">
53-
<div slot="icon" key="iSearch">
47+
<IgrNavDrawerItem>
48+
<div slot="icon">
5449
<IgrIcon name="search" collection="material" />
5550
</div>
56-
<span slot="content" key="sSearch">Search</span>
51+
<span slot="content">Search</span>
5752
</IgrNavDrawerItem>
5853
</IgrNavDrawer>
5954
</div>
6055
</div>
6156
);
6257
}
6358

64-
public navDrawerRef(navDrawer: IgrNavDrawer){
59+
public navDrawerRef(navDrawer: IgrNavDrawer) {
6560
if (!navDrawer) { return; }
6661
this.navDrawer = navDrawer;
6762
}
@@ -74,20 +69,20 @@ export default class NavDrawerAddDrawerItems extends React.Component<any, any> {
7469

7570
public onNavDrawerClick(e: any) {
7671
const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
77-
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
78-
null)
72+
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
73+
null)
7974

8075
if (!drawerItem) { return; }
8176

8277
drawerItem.active = true;
8378
const navDrawer = drawerItem.parentElement;
8479
Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
85-
.filter((item: any) => item !== drawerItem)
86-
.forEach((child: any) => child.active = false);
80+
.filter((item: any) => item !== drawerItem)
81+
.forEach((child: any) => child.active = false);
8782
}
8883

8984
}
9085

9186
// rendering above class to the React DOM
9287
const root = ReactDOM.createRoot(document.getElementById('root'));
93-
root.render(<NavDrawerAddDrawerItems/>);
88+
root.render(<NavDrawerAddDrawerItems />);

‎samples/menus/nav-drawer/add-mini/src/index.tsx‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrNavDrawer, IgrNavDrawerItem, IgrIcon, IgrButton, IgrNavDrawerModule, IgrIconModule, IgrButtonModule, registerIconFromText } from 'igniteui-react';
4+
import { IgrNavDrawer, IgrNavDrawerItem, IgrIcon, IgrButton, registerIconFromText } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrNavDrawerModule.register();
8-
IgrIconModule.register();
9-
IgrButtonModule.register();
10-
117
const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
128
const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
139

@@ -29,34 +25,34 @@ export default class NavDrawerAddMini extends React.Component<any, any> {
2925
<div className="container sample">
3026
<div style={{ width: '100%' }}>
3127
<IgrButton onClick={this.onButtonClick} style={{ marginLeft: '70px' }}>
32-
<span key="sButton">Toggle</span>
28+
<span>Toggle</span>
3329
</IgrButton>
3430
</div>
3531
<div onClick={this.onNavDrawerClick}>
3632
<IgrNavDrawer ref={this.navDrawerRef}>
37-
<IgrNavDrawerItem key="home">
38-
<div slot="icon" key="iHome">
33+
<IgrNavDrawerItem >
34+
<div slot="icon">
3935
<IgrIcon name="home" collection="material" />
4036
</div>
41-
<span slot="content" key="sHome">Home</span>
37+
<span slot="content">Home</span>
4238
</IgrNavDrawerItem>
4339

44-
<IgrNavDrawerItem key="search">
45-
<div slot="icon" key="iSearch">
40+
<IgrNavDrawerItem>
41+
<div slot="icon">
4642
<IgrIcon name="search" collection="material" />
4743
</div>
48-
<span slot="content" key="sSearch">Search</span>
44+
<span slot="content">Search</span>
4945
</IgrNavDrawerItem>
5046

51-
<div slot="mini" key="miniSlot">
52-
<IgrNavDrawerItem key="miniHome">
53-
<div slot="icon" key="iMiniHome">
47+
<div slot="mini">
48+
<IgrNavDrawerItem>
49+
<div slot="icon">
5450
<IgrIcon name="home" collection="material" />
5551
</div>
5652
</IgrNavDrawerItem>
5753

58-
<IgrNavDrawerItem key="miniSearch">
59-
<div slot="icon" key="iMiniSearch">
54+
<IgrNavDrawerItem>
55+
<div slot="icon">
6056
<IgrIcon name="search" collection="material" />
6157
</div>
6258
</IgrNavDrawerItem>
@@ -74,16 +70,16 @@ export default class NavDrawerAddMini extends React.Component<any, any> {
7470

7571
public onNavDrawerClick(e: any) {
7672
const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
77-
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
78-
null)
73+
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
74+
null)
7975

8076
if (!drawerItem) { return; }
8177

8278
drawerItem.active = true;
8379
const navDrawer = drawerItem.parentElement;
8480
Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
85-
.filter((item: any) => item !== drawerItem)
86-
.forEach((child: any) => child.active = false);
81+
.filter((item: any) => item !== drawerItem)
82+
.forEach((child: any) => child.active = false);
8783

8884
const iconName = drawerItem.querySelector('igc-icon')!.name;
8985
const icons = document.querySelectorAll(`igc-icon`);

‎samples/menus/nav-drawer/add-positions-navbar/src/index.tsx‎

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrNavbar, IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrRadioGroup, IgrRadio, IgrNavDrawerModule, IgrNavbarModule, IgrRadioGroupModule, IgrRadioModule, IgrIconModule, registerIconFromText } from 'igniteui-react';
4+
import { IgrNavbar, IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrRadioGroup, IgrRadio, registerIconFromText, IgrRadioChangeEventArgs } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrNavDrawerModule.register();
8-
IgrNavbarModule.register();
9-
IgrIconModule.register();
10-
IgrRadioGroupModule.register();
11-
IgrRadioModule.register();
12-
137
const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
148
const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
159
const menuIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>';
@@ -38,45 +32,45 @@ export default class NavDrawerAddPositionsNavbar extends React.Component<any, an
3832
<div className="container sample">
3933
<div onClick={this.onNavDrawerClick}>
4034
<IgrNavDrawer ref={this.navDrawerRef} position={this.state.drawerPosition}>
41-
<IgrNavDrawerHeaderItem key="header">
42-
<span key="sHeader">Sample Drawer</span>
35+
<IgrNavDrawerHeaderItem>
36+
<span>Sample Drawer</span>
4337
</IgrNavDrawerHeaderItem>
4438

45-
<IgrNavDrawerItem key="home" active>
46-
<div slot="icon" key="iHome">
39+
<IgrNavDrawerItem>
40+
<div slot="icon">
4741
<IgrIcon name="home" collection="material" />
4842
</div>
49-
<span slot="content" key="sHome">Home</span>
43+
<span slot="content">Home</span>
5044
</IgrNavDrawerItem>
5145

52-
<IgrNavDrawerItem key="search">
53-
<div slot="icon" key="iSearch">
46+
<IgrNavDrawerItem>
47+
<div slot="icon">
5448
<IgrIcon name="search" collection="material" />
5549
</div>
56-
<span slot="content" key="sSearch">Search</span>
50+
<span slot="content">Search</span>
5751
</IgrNavDrawerItem>
5852
</IgrNavDrawer>
5953
</div>
6054
<div>
6155
<IgrRadioGroup alignment="horizontal" style={{ marginBottom: '10px' }}>
62-
<IgrRadio name="position" value="start" labelPosition="after" checked={true} onChange={this.onRadioChange} key="start">
63-
<span key="sStart">Start</span>
56+
<IgrRadio name="position" value="start" labelPosition="after" checked={this.state.drawerPosition === "start"} onChange={this.onRadioChange}>
57+
<span>Start</span>
6458
</IgrRadio>
65-
<IgrRadio name="position" value="end" labelPosition="after" onChange={this.onRadioChange} key="end">
66-
<span key="sEnd">End</span>
59+
<IgrRadio name="position" value="end" labelPosition="after" checked={this.state.drawerPosition === "end"} onChange={this.onRadioChange}>
60+
<span>End</span>
6761
</IgrRadio>
68-
<IgrRadio name="position" value="top" labelPosition="after" onChange={this.onRadioChange} key="top">
69-
<span key="sTop">Top</span>
62+
<IgrRadio name="position" value="top" labelPosition="after" checked={this.state.drawerPosition === "top"} onChange={this.onRadioChange}>
63+
<span>Top</span>
7064
</IgrRadio>
71-
<IgrRadio name="position" value="bottom" labelPosition="after" onChange={this.onRadioChange} key="bottom">
72-
<span key="sBottom">Bottom</span>
65+
<IgrRadio name="position" value="bottom" labelPosition="after" checked={this.state.drawerPosition === "bottom"} onChange={this.onRadioChange}>
66+
<span>Bottom</span>
7367
</IgrRadio>
7468
</IgrRadioGroup>
7569
<IgrNavbar>
76-
<div slot="start" onClick={this.onMenuIconClick} key="start">
70+
<div slot="start" onClick={this.onMenuIconClick}>
7771
<IgrIcon name="menu" collection="material" />
7872
</div>
79-
<h2 key="navHome">{this.state.title}</h2>
73+
<h2>{this.state.title}</h2>
8074
</IgrNavbar>
8175
</div>
8276
</div>
@@ -91,16 +85,16 @@ export default class NavDrawerAddPositionsNavbar extends React.Component<any, an
9185

9286
public onNavDrawerClick(e: any) {
9387
const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
94-
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
95-
null)
88+
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
89+
null)
9690

9791
if (!drawerItem) { return; }
9892

9993
drawerItem.active = true;
10094
const navDrawer = drawerItem.parentElement;
10195
Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
102-
.filter((item: any) => item !== drawerItem)
103-
.forEach((child: any) => child.active = false);
96+
.filter((item: any) => item !== drawerItem)
97+
.forEach((child: any) => child.active = false);
10498

10599
this.setState({ title: drawerItem.textContent });
106100
}
@@ -110,9 +104,9 @@ export default class NavDrawerAddPositionsNavbar extends React.Component<any, an
110104
this.navDrawer = navDrawer;
111105
}
112106

113-
public onRadioChange(e: any) {
107+
public onRadioChange(e: IgrRadioChangeEventArgs) {
114108
if (e.detail.checked) {
115-
this.setState({ drawerPosition: e.value });
109+
this.setState({ drawerPosition: e.detail.value });
116110
}
117111
}
118112
}

‎samples/menus/nav-drawer/styling/src/index.tsx‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,9 @@ import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
44
import './NavDrawerStyling.css';
5-
import {
6-
IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrNavDrawerModule, IgrIconModule,
7-
IgrIconButton, IgrIconButtonModule, registerIconFromText
8-
} from 'igniteui-react';
5+
import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react';
96
import 'igniteui-webcomponents/themes/light/bootstrap.css';
107

11-
IgrNavDrawerModule.register();
12-
IgrIconModule.register();
13-
IgrIconButtonModule.register();
14-
158
const searchIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
169
const homeIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>';
1710
const menuIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>';
@@ -41,22 +34,22 @@ export default class NavDrawerStyling extends React.Component<any, any> {
4134
</IgrIconButton>
4235
<div onClick={this.onNavDrawerClick}>
4336
<IgrNavDrawer open={true} ref={this.navDrawerRef}>
44-
<IgrNavDrawerHeaderItem key="header">
45-
<span key="sHeader">Sample Drawer</span>
37+
<IgrNavDrawerHeaderItem>
38+
<span>Sample Drawer</span>
4639
</IgrNavDrawerHeaderItem>
4740

48-
<IgrNavDrawerItem key="home">
49-
<div slot="icon" key="iHome">
41+
<IgrNavDrawerItem>
42+
<div slot="icon">
5043
<IgrIcon name="home" collection="material" />
5144
</div>
52-
<span slot="content" key="sHome">Home</span>
45+
<span slot="content">Home</span>
5346
</IgrNavDrawerItem>
5447

55-
<IgrNavDrawerItem key="search">
56-
<div slot="icon" key="iSearch">
48+
<IgrNavDrawerItem>
49+
<div slot="icon">
5750
<IgrIcon name="search" collection="material" />
5851
</div>
59-
<span slot="content" key="sSearch">Search</span>
52+
<span slot="content">Search</span>
6053
</IgrNavDrawerItem>
6154
</IgrNavDrawer>
6255
</div>
@@ -72,16 +65,16 @@ export default class NavDrawerStyling extends React.Component<any, any> {
7265

7366
public onNavDrawerClick(e: any) {
7467
const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
75-
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
76-
null)
68+
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
69+
null)
7770

7871
if (!drawerItem) { return; }
7972

8073
drawerItem.active = true;
8174
const navDrawer = drawerItem.parentElement;
8275
Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
83-
.filter((item: any) => item !== drawerItem)
84-
.forEach((child: any) => child.active = false);
76+
.filter((item: any) => item !== drawerItem)
77+
.forEach((child: any) => child.active = false);
8578
}
8679

8780
public navDrawerRef(navDrawer: IgrNavDrawer) {

0 commit comments

Comments
 (0)