Skip to content

Remove keys and deprecated modules from nav-drawer samples #861

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
Jun 12, 2025
Merged

Remove keys and deprecated modules from nav-drawer samples #861

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
47 changes: 21 additions & 26 deletions samples/menus/nav-drawer/add-drawer-items/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrNavDrawerModule, IgrIconModule,
IgrIconButton, IgrIconButtonModule, registerIconFromText } from 'igniteui-react';
import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavDrawerModule.register();
IgrIconModule.register();
IgrIconButtonModule.register();

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>';
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>';
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>';
Expand All @@ -30,38 +25,38 @@ export default class NavDrawerAddDrawerItems extends React.Component<any, any> {
public render(): JSX.Element {
return (
<div className="container sample">
<IgrIconButton style={{margin: "10px"}}
onClick={this.toggleDrawer}
name="menu"
collection="material"
variant="flat">
</IgrIconButton>
<IgrIconButton style={{ margin: "10px" }}
onClick={this.toggleDrawer}
name="menu"
collection="material"
variant="flat">
</IgrIconButton>
<div onClick={this.onNavDrawerClick}>
<IgrNavDrawer open={true} ref={this.navDrawerRef}>
<IgrNavDrawerHeaderItem key="header">
<span key="sHeader">Sample Drawer</span>
<IgrNavDrawerHeaderItem>
<span>Sample Drawer</span>
</IgrNavDrawerHeaderItem>

<IgrNavDrawerItem key="home">
<div slot="icon" key="iHome">
<IgrNavDrawerItem>
<div slot="icon">
<IgrIcon name="home" collection="material" />
</div>
<span slot="content" key="sHome">Home</span>
<span slot="content">Home</span>
</IgrNavDrawerItem>

<IgrNavDrawerItem key="search">
<div slot="icon" key="iSearch">
<IgrNavDrawerItem>
<div slot="icon">
<IgrIcon name="search" collection="material" />
</div>
<span slot="content" key="sSearch">Search</span>
<span slot="content">Search</span>
</IgrNavDrawerItem>
</IgrNavDrawer>
</div>
</div>
);
}

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

public onNavDrawerClick(e: any) {
const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
null)
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
null)

if (!drawerItem) { return; }

drawerItem.active = true;
const navDrawer = drawerItem.parentElement;
Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
.filter((item: any) => item !== drawerItem)
.forEach((child: any) => child.active = false);
.filter((item: any) => item !== drawerItem)
.forEach((child: any) => child.active = false);
}

}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<NavDrawerAddDrawerItems/>);
root.render(<NavDrawerAddDrawerItems />);
38 changes: 17 additions & 21 deletions samples/menus/nav-drawer/add-mini/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrNavDrawer, IgrNavDrawerItem, IgrIcon, IgrButton, IgrNavDrawerModule, IgrIconModule, IgrButtonModule, registerIconFromText } from 'igniteui-react';
import { IgrNavDrawer, IgrNavDrawerItem, IgrIcon, IgrButton, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavDrawerModule.register();
IgrIconModule.register();
IgrButtonModule.register();

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>';
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>';

Expand All @@ -29,34 +25,34 @@ export default class NavDrawerAddMini extends React.Component<any, any> {
<div className="container sample">
<div style={{ width: '100%' }}>
<IgrButton onClick={this.onButtonClick} style={{ marginLeft: '70px' }}>
<span key="sButton">Toggle</span>
<span>Toggle</span>
</IgrButton>
</div>
<div onClick={this.onNavDrawerClick}>
<IgrNavDrawer ref={this.navDrawerRef}>
<IgrNavDrawerItem key="home">
<div slot="icon" key="iHome">
<IgrNavDrawerItem >
<div slot="icon">
<IgrIcon name="home" collection="material" />
</div>
<span slot="content" key="sHome">Home</span>
<span slot="content">Home</span>
</IgrNavDrawerItem>

<IgrNavDrawerItem key="search">
<div slot="icon" key="iSearch">
<IgrNavDrawerItem>
<div slot="icon">
<IgrIcon name="search" collection="material" />
</div>
<span slot="content" key="sSearch">Search</span>
<span slot="content">Search</span>
</IgrNavDrawerItem>

<div slot="mini" key="miniSlot">
<IgrNavDrawerItem key="miniHome">
<div slot="icon" key="iMiniHome">
<div slot="mini">
<IgrNavDrawerItem>
<div slot="icon">
<IgrIcon name="home" collection="material" />
</div>
</IgrNavDrawerItem>

<IgrNavDrawerItem key="miniSearch">
<div slot="icon" key="iMiniSearch">
<IgrNavDrawerItem>
<div slot="icon">
<IgrIcon name="search" collection="material" />
</div>
</IgrNavDrawerItem>
Expand All @@ -74,16 +70,16 @@ export default class NavDrawerAddMini extends React.Component<any, any> {

public onNavDrawerClick(e: any) {
const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
null)
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
null)

if (!drawerItem) { return; }

drawerItem.active = true;
const navDrawer = drawerItem.parentElement;
Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
.filter((item: any) => item !== drawerItem)
.forEach((child: any) => child.active = false);
.filter((item: any) => item !== drawerItem)
.forEach((child: any) => child.active = false);

const iconName = drawerItem.querySelector('igc-icon')!.name;
const icons = document.querySelectorAll(`igc-icon`);
Expand Down
56 changes: 25 additions & 31 deletions samples/menus/nav-drawer/add-positions-navbar/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrNavbar, IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrRadioGroup, IgrRadio, IgrNavDrawerModule, IgrNavbarModule, IgrRadioGroupModule, IgrRadioModule, IgrIconModule, registerIconFromText } from 'igniteui-react';
import { IgrNavbar, IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrRadioGroup, IgrRadio, registerIconFromText, IgrRadioChangeEventArgs } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavDrawerModule.register();
IgrNavbarModule.register();
IgrIconModule.register();
IgrRadioGroupModule.register();
IgrRadioModule.register();

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>';
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>';
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>';
Expand Down Expand Up @@ -38,45 +32,45 @@ export default class NavDrawerAddPositionsNavbar extends React.Component<any, an
<div className="container sample">
<div onClick={this.onNavDrawerClick}>
<IgrNavDrawer ref={this.navDrawerRef} position={this.state.drawerPosition}>
<IgrNavDrawerHeaderItem key="header">
<span key="sHeader">Sample Drawer</span>
<IgrNavDrawerHeaderItem>
<span>Sample Drawer</span>
</IgrNavDrawerHeaderItem>

<IgrNavDrawerItem key="home" active>
<div slot="icon" key="iHome">
<IgrNavDrawerItem>
<div slot="icon">
<IgrIcon name="home" collection="material" />
</div>
<span slot="content" key="sHome">Home</span>
<span slot="content">Home</span>
</IgrNavDrawerItem>

<IgrNavDrawerItem key="search">
<div slot="icon" key="iSearch">
<IgrNavDrawerItem>
<div slot="icon">
<IgrIcon name="search" collection="material" />
</div>
<span slot="content" key="sSearch">Search</span>
<span slot="content">Search</span>
</IgrNavDrawerItem>
</IgrNavDrawer>
</div>
<div>
<IgrRadioGroup alignment="horizontal" style={{ marginBottom: '10px' }}>
<IgrRadio name="position" value="start" labelPosition="after" checked={true} onChange={this.onRadioChange} key="start">
<span key="sStart">Start</span>
<IgrRadio name="position" value="start" labelPosition="after" checked={this.state.drawerPosition === "start"} onChange={this.onRadioChange}>
<span>Start</span>
</IgrRadio>
<IgrRadio name="position" value="end" labelPosition="after" onChange={this.onRadioChange} key="end">
<span key="sEnd">End</span>
<IgrRadio name="position" value="end" labelPosition="after" checked={this.state.drawerPosition === "end"} onChange={this.onRadioChange}>
<span>End</span>
</IgrRadio>
<IgrRadio name="position" value="top" labelPosition="after" onChange={this.onRadioChange} key="top">
<span key="sTop">Top</span>
<IgrRadio name="position" value="top" labelPosition="after" checked={this.state.drawerPosition === "top"} onChange={this.onRadioChange}>
<span>Top</span>
</IgrRadio>
<IgrRadio name="position" value="bottom" labelPosition="after" onChange={this.onRadioChange} key="bottom">
<span key="sBottom">Bottom</span>
<IgrRadio name="position" value="bottom" labelPosition="after" checked={this.state.drawerPosition === "bottom"} onChange={this.onRadioChange}>
<span>Bottom</span>
</IgrRadio>
</IgrRadioGroup>
<IgrNavbar>
<div slot="start" onClick={this.onMenuIconClick} key="start">
<div slot="start" onClick={this.onMenuIconClick}>
<IgrIcon name="menu" collection="material" />
</div>
<h2 key="navHome">{this.state.title}</h2>
<h2>{this.state.title}</h2>
</IgrNavbar>
</div>
</div>
Expand All @@ -91,16 +85,16 @@ export default class NavDrawerAddPositionsNavbar extends React.Component<any, an

public onNavDrawerClick(e: any) {
const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
null)
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
null)

if (!drawerItem) { return; }

drawerItem.active = true;
const navDrawer = drawerItem.parentElement;
Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
.filter((item: any) => item !== drawerItem)
.forEach((child: any) => child.active = false);
.filter((item: any) => item !== drawerItem)
.forEach((child: any) => child.active = false);

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

public onRadioChange(e: any) {
public onRadioChange(e: IgrRadioChangeEventArgs) {
if (e.detail.checked) {
this.setState({ drawerPosition: e.value });
this.setState({ drawerPosition: e.detail.value });
}
}
}
Expand Down
33 changes: 13 additions & 20 deletions samples/menus/nav-drawer/styling/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,9 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './NavDrawerStyling.css';
import {
IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrNavDrawerModule, IgrIconModule,
IgrIconButton, IgrIconButtonModule, registerIconFromText
} from 'igniteui-react';
import { IgrNavDrawer, IgrNavDrawerHeaderItem, IgrNavDrawerItem, IgrIcon, IgrIconButton, registerIconFromText } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrNavDrawerModule.register();
IgrIconModule.register();
IgrIconButtonModule.register();

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>';
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>';
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>';
Expand Down Expand Up @@ -41,22 +34,22 @@ export default class NavDrawerStyling extends React.Component<any, any> {
</IgrIconButton>
<div onClick={this.onNavDrawerClick}>
<IgrNavDrawer open={true} ref={this.navDrawerRef}>
<IgrNavDrawerHeaderItem key="header">
<span key="sHeader">Sample Drawer</span>
<IgrNavDrawerHeaderItem>
<span>Sample Drawer</span>
</IgrNavDrawerHeaderItem>

<IgrNavDrawerItem key="home">
<div slot="icon" key="iHome">
<IgrNavDrawerItem>
<div slot="icon">
<IgrIcon name="home" collection="material" />
</div>
<span slot="content" key="sHome">Home</span>
<span slot="content">Home</span>
</IgrNavDrawerItem>

<IgrNavDrawerItem key="search">
<div slot="icon" key="iSearch">
<IgrNavDrawerItem>
<div slot="icon">
<IgrIcon name="search" collection="material" />
</div>
<span slot="content" key="sSearch">Search</span>
<span slot="content">Search</span>
</IgrNavDrawerItem>
</IgrNavDrawer>
</div>
Expand All @@ -72,16 +65,16 @@ export default class NavDrawerStyling extends React.Component<any, any> {

public onNavDrawerClick(e: any) {
const drawerItem: any = e.target.closest('igc-nav-drawer-item') ??
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
null)
(e.target.parentElement?.closest('igc-nav-drawer-item') ??
null)

if (!drawerItem) { return; }

drawerItem.active = true;
const navDrawer = drawerItem.parentElement;
Array.from(navDrawer.querySelectorAll('igc-nav-drawer-item'))
.filter((item: any) => item !== drawerItem)
.forEach((child: any) => child.active = false);
.filter((item: any) => item !== drawerItem)
.forEach((child: any) => child.active = false);
}

public navDrawerRef(navDrawer: IgrNavDrawer) {
Expand Down