Skip to content

Commit 09c5855

Browse files
IMinchev64IMinchev64
authored
Remove keys and deprecated modules from banner samples (#862)
1 parent 98cc218 commit 09c5855

4 files changed

Lines changed: 76 additions & 124 deletions

File tree

‎samples/notifications/banner/banner-advanced-sample/src/index.tsx‎

Lines changed: 26 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,33 +2,18 @@ import React, { useEffect, useRef, useState } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import {
44
IgrBanner,
5-
IgrBannerModule,
65
IgrButton,
7-
IgrButtonModule,
86
IgrCard,
9-
IgrCardModule,
107
IgrIcon,
11-
IgrIconModule,
128
IgrNavbar,
13-
IgrNavbarModule,
149
IgrRipple,
15-
IgrRippleModule,
1610
IgrToast,
17-
IgrToastModule,
1811
registerIconFromText,
19-
} from 'igniteui-react';
12+
} from 'igniteui-react';
2013
import 'igniteui-webcomponents/themes/light/bootstrap.css';
2114
import './BannerAdvancedSample.css';
2215
import './index.css';
2316

24-
IgrBannerModule.register();
25-
IgrNavbarModule.register();
26-
IgrIconModule.register();
27-
IgrCardModule.register();
28-
IgrButtonModule.register();
29-
IgrRippleModule.register();
30-
IgrToastModule.register();
31-
3217
const wifiOnIcon =
3318
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12.01 21.49L23.64 7c-.45-.34-4.93-4-11.64-4C5.28 3 .81 6.66.36 7l11.63 14.49.01.01.01-.01z"/></svg>';
3419
const wifiOffIcon =
@@ -40,27 +25,29 @@ export default function BannerAdvancedSample() {
4025
const toastRef = useRef<IgrToast>(null);
4126

4227
const [wifiState, setWifiState] = useState(false);
28+
const [iconName, setIconName] = useState("signal_wifi_off");
4329

4430
useEffect(() => {
4531
registerIconFromText('signal_wifi_off', wifiOffIcon);
4632
registerIconFromText('signal_wifi_4_bar', wifiOnIcon);
4733
bannerRef.current.open = true;
4834
}, []);
4935

50-
function refreshBanner() {
51-
if (!wifiState) {
52-
iconRef.current.name = 'signal_wifi_4_bar';
36+
const refreshBanner = () => {
37+
const nextWifiState = !wifiState;
38+
setWifiState(nextWifiState);
39+
setIconName(nextWifiState ? "signal_wifi_4_bar" : "signal_wifi_off");
40+
41+
if (nextWifiState) {
5342
bannerRef.current.hide();
5443
} else {
55-
iconRef.current.name = 'signal_wifi_off';
5644
bannerRef.current.show();
5745
}
5846

59-
setWifiState(current => !current);
6047
showToast();
6148
}
6249

63-
function showToast() {
50+
const showToast = () => {
6451
toastRef.current.open = false;
6552
toastRef.current.show();
6653
}
@@ -69,37 +56,37 @@ export default function BannerAdvancedSample() {
6956
<div className="gallery__wrapper">
7057
<div className="gallery__content">
7158
<IgrNavbar>
72-
<h1 key="header">Gallery</h1>
73-
<IgrIcon ref={iconRef} key="icon-wifi-off" name="signal_wifi_off" slot="end" onClick={() => refreshBanner()}></IgrIcon>
59+
<h1>Gallery</h1>
60+
<IgrIcon ref={iconRef} name={iconName} slot="end" onClick={refreshBanner}></IgrIcon>
7461
</IgrNavbar>
7562

7663
<IgrBanner ref={bannerRef} className="offline-banner">
77-
<IgrIcon key="icon-wifi-off" name="signal_wifi_off" slot="prefix"></IgrIcon>
78-
<span key="message">You have lost connection to the internet. This app is offline.</span>
79-
<div key="actions" slot="actions">
80-
<IgrButton key="button-offline" variant="flat" onClick={() => bannerRef.current.hide()}>
81-
<IgrRipple key="ripple-offline" />
82-
<span key="action-offline">Continue Offline</span>
64+
<IgrIcon name="signal_wifi_off" slot="prefix"></IgrIcon>
65+
<span>You have lost connection to the internet. This app is offline.</span>
66+
<div slot="actions">
67+
<IgrButton variant="flat" onClick={() => bannerRef.current.hide()}>
68+
<IgrRipple />
69+
<span>Continue Offline</span>
8370
</IgrButton>
84-
<IgrButton key="button-wifi" variant="flat" onClick={() => refreshBanner()}>
85-
<IgrRipple key="ripple-wifi" />
86-
<span key="action-wifi">Turn On Wifi</span>
71+
<IgrButton variant="flat" onClick={refreshBanner}>
72+
<IgrRipple />
73+
<span>Turn On Wifi</span>
8774
</IgrButton>
8875
</div>
8976
</IgrBanner>
9077

9178
<IgrCard className="gallery__item" elevated>
92-
<div key="img-forest">
93-
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"/>
79+
<div>
80+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg" />
9481
</div>
9582
</IgrCard>
9683
<IgrCard className="gallery__item" elevated>
97-
<div key="img-yosemite">
98-
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"/>
84+
<div>
85+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg" />
9986
</div>
10087
</IgrCard>
10188
<IgrToast ref={toastRef} position="middle">
102-
<span key="toast-message">{`Wifi is now ${wifiState ? 'on' : 'off'}`}</span>
89+
<span>{`Wifi is now ${wifiState ? 'on' : 'off'}`}</span>
10390
</IgrToast>
10491
</div>
10592
</div>
@@ -108,4 +95,4 @@ export default function BannerAdvancedSample() {
10895

10996
// rendering above class to the React DOM
11097
const root = ReactDOM.createRoot(document.getElementById('root'));
111-
root.render(<BannerAdvancedSample/>);
98+
root.render(<BannerAdvancedSample />);

‎samples/notifications/banner/banner-sample-1/src/index.tsx‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,15 @@ import React, { useEffect, useRef } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import {
44
IgrBanner,
5-
IgrBannerModule,
65
IgrCard,
7-
IgrCardModule,
86
IgrIcon,
9-
IgrIconModule,
107
IgrNavbar,
11-
IgrNavbarModule,
128
registerIconFromText,
13-
} from 'igniteui-react';
9+
} from 'igniteui-react';
1410
import 'igniteui-webcomponents/themes/light/bootstrap.css';
1511
import './BannerSample1.css';
1612
import './index.css';
1713

18-
IgrBannerModule.register();
19-
IgrNavbarModule.register();
20-
IgrIconModule.register();
21-
IgrCardModule.register();
22-
2314
const refreshIcon =
2415
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>';
2516

@@ -35,22 +26,22 @@ export default function BannerSample1() {
3526
<div className="gallery__wrapper">
3627
<div className="gallery__content">
3728
<IgrNavbar>
38-
<h1 key="header">Gallery</h1>
39-
<IgrIcon key="icon" name="refresh" slot="end" onClick={() => bannerRef.current.show()}></IgrIcon>
29+
<h1>Gallery</h1>
30+
<IgrIcon name="refresh" slot="end" onClick={() => bannerRef.current.show()}></IgrIcon>
4031
</IgrNavbar>
4132

4233
<IgrBanner ref={bannerRef} className="offline-banner">
43-
<span key="message">You are currently offline.</span>
34+
<span>You are currently offline.</span>
4435
</IgrBanner>
45-
36+
4637
<IgrCard className="gallery__item" elevated>
47-
<div key="img-forest">
48-
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"/>
38+
<div>
39+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg" />
4940
</div>
5041
</IgrCard>
5142
<IgrCard className="gallery__item" elevated>
52-
<div key="img-yosemite">
53-
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"/>
43+
<div>
44+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg" />
5445
</div>
5546
</IgrCard>
5647
</div>
@@ -60,4 +51,4 @@ export default function BannerSample1() {
6051

6152
// rendering above class to the React DOM
6253
const root = ReactDOM.createRoot(document.getElementById('root'));
63-
root.render(<BannerSample1/>);
54+
root.render(<BannerSample1 />);

‎samples/notifications/banner/banner-sample-2/src/index.tsx‎

Lines changed: 14 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,17 @@ import React, { useEffect, useRef } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import {
44
IgrBanner,
5-
IgrBannerModule,
65
IgrButton,
7-
IgrButtonModule,
86
IgrCard,
9-
IgrCardModule,
107
IgrIcon,
11-
IgrIconModule,
128
IgrNavbar,
13-
IgrNavbarModule,
149
IgrRipple,
15-
IgrRippleModule,
1610
registerIconFromText,
17-
} from 'igniteui-react';
11+
} from 'igniteui-react';
1812
import 'igniteui-webcomponents/themes/light/bootstrap.css';
1913
import './BannerSample2.css';
2014
import './index.css';
2115

22-
IgrBannerModule.register();
23-
IgrNavbarModule.register();
24-
IgrIconModule.register();
25-
IgrCardModule.register();
26-
IgrButtonModule.register();
27-
IgrRippleModule.register();
28-
2916
const refreshIcon =
3017
'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>';
3118
const wifiOffIcon =
@@ -44,29 +31,29 @@ export default function BannerSample2() {
4431
<div className="gallery__wrapper">
4532
<div className="gallery__content">
4633
<IgrNavbar>
47-
<h1 key="header">Gallery</h1>
48-
<IgrIcon key="icon-refresh" name="refresh" slot="end" onClick={() => bannerRef.current.show()}></IgrIcon>
34+
<h1>Gallery</h1>
35+
<IgrIcon name="refresh" slot="end" onClick={() => bannerRef.current.show()}></IgrIcon>
4936
</IgrNavbar>
5037

5138
<IgrBanner ref={bannerRef} className="offline-banner">
52-
<IgrIcon key="icon-wifi-off" name="signal_wifi_off" slot="prefix"></IgrIcon>
53-
<span key="message">You have lost connection to the internet. This app is offline.</span>
54-
<div key="actions"slot="actions" >
55-
<IgrButton key="button" variant="flat" onClick={() => bannerRef.current.toggle()}>
56-
<IgrRipple key="ripple" />
57-
<span key="action-text">Toggle Banner</span>
39+
<IgrIcon name="signal_wifi_off" slot="prefix"></IgrIcon>
40+
<span>You have lost connection to the internet. This app is offline.</span>
41+
<div slot="actions" >
42+
<IgrButton variant="flat" onClick={() => bannerRef.current.toggle()}>
43+
<IgrRipple />
44+
<span>Toggle Banner</span>
5845
</IgrButton>
5946
</div>
6047
</IgrBanner>
6148

6249
<IgrCard className="gallery__item" elevated>
63-
<div key="img-forest">
64-
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg"/>
50+
<div>
51+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/the_red_ice_forest.jpg" />
6552
</div>
6653
</IgrCard>
6754
<IgrCard className="gallery__item" elevated>
68-
<div key="img-yosemite">
69-
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg"/>
55+
<div>
56+
<img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/yosemite.jpg" />
7057
</div>
7158
</IgrCard>
7259
</div>
@@ -76,4 +63,4 @@ export default function BannerSample2() {
7663

7764
// rendering above class to the React DOM
7865
const root = ReactDOM.createRoot(document.getElementById('root'));
79-
root.render(<BannerSample2/>);
66+
root.render(<BannerSample2 />);

0 commit comments

Comments
 (0)