Skip to content

Commit beba810

Browse files
tishko0tishko0
authored
Toast samples update (#865)
1 parent 1dcd7f0 commit beba810

3 files changed

Lines changed: 74 additions & 133 deletions

File tree

‎samples/notifications/toast/overview/src/index.tsx‎

Lines changed: 19 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,29 @@
1-
import React from 'react';
1+
import React, { useRef } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrButton, IgrToast, IgrButtonModule, IgrToastModule } from 'igniteui-react';
4+
import { IgrButton, IgrToast } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrButtonModule.register();
8-
IgrToastModule.register();
7+
export default function ToastOverview() {
8+
const toastRef = useRef<IgrToast>(null);
99

10-
export default class ToastOverview extends React.Component<any, any> {
10+
const onShowButtonClicked = () => {
11+
toastRef.current?.show();
12+
};
1113

12-
public toastRef: IgrToast;
14+
return (
15+
<div className="container sample">
16+
<IgrButton variant="contained" onClick={onShowButtonClicked}>
17+
<span>Show Toast</span>
18+
</IgrButton>
1319

14-
constructor(props: any) {
15-
super(props);
16-
this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
17-
this.onToastRef = this.onToastRef.bind(this);
18-
}
19-
20-
public render(): JSX.Element {
21-
return (
22-
<div className="container sample">
23-
<IgrButton variant="contained" onClick={this.onShowButtonClicked}>
24-
<span>Show Toast</span>
25-
</IgrButton>
26-
27-
<IgrToast ref={this.onToastRef}>
28-
<span>Toast Message</span>
29-
</IgrToast>
30-
</div>
31-
);
32-
}
33-
34-
public onToastRef(toast: IgrToast){
35-
if (!toast) { return; }
36-
this.toastRef = toast;
37-
}
38-
39-
public onShowButtonClicked() {
40-
if(this.toastRef){
41-
this.toastRef.show();
42-
}
43-
}
20+
<IgrToast ref={toastRef}>
21+
<span>Toast Message</span>
22+
</IgrToast>
23+
</div>
24+
);
4425
}
4526

46-
// rendering above class to the React DOM
27+
// rendering above function to the React DOM
4728
const root = ReactDOM.createRoot(document.getElementById('root'));
48-
root.render(<ToastOverview/>);
29+
root.render(<ToastOverview />);

‎samples/notifications/toast/properties/src/index.tsx‎

Lines changed: 36 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,49 @@
1-
import React from 'react';
1+
import React, { useRef } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
4-
import { IgrButton, IgrToast, IgrButtonModule, IgrToastModule } from 'igniteui-react';
4+
import { IgrButton, IgrToast } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrButtonModule.register();
8-
IgrToastModule.register();
7+
export default function ToastProperties() {
8+
const toastRef = useRef<IgrToast>(null);
99

10-
export default class ToastProperties extends React.Component<any, any> {
10+
const onToggleButtonClicked = () => {
11+
toastRef.current?.toggle();
12+
};
1113

12-
public toastRef: IgrToast;
13-
14-
constructor(props: any) {
15-
super(props);
16-
this.onToggleButtonClicked = this.onToggleButtonClicked.bind(this);
17-
this.onKeepOpenButtonClicked = this.onKeepOpenButtonClicked.bind(this);
18-
this.onDisplayTimeButtonClicked = this.onDisplayTimeButtonClicked.bind(this);
19-
this.onToastRef = this.onToastRef.bind(this);
20-
}
21-
22-
public render(): JSX.Element {
23-
return (
24-
<div className="container sample">
25-
<div style={{display: 'flex', justifyContent: 'space-evenly', marginTop: '20px'}}>
26-
<IgrButton variant="contained" onClick={this.onToggleButtonClicked}>
27-
<span>Toggle Toast</span>
28-
</IgrButton>
29-
<IgrButton variant="contained" onClick={this.onKeepOpenButtonClicked}>
30-
<span>Toggle keepOpen Property</span>
31-
</IgrButton>
32-
<IgrButton variant="contained" onClick={this.onDisplayTimeButtonClicked}>
33-
<span>Set DisplayTime to 8000</span>
34-
</IgrButton>
35-
</div>
36-
37-
<IgrToast ref={this.onToastRef}>
38-
<span>Toast Message</span>
39-
</IgrToast>
40-
</div>
41-
);
42-
}
43-
44-
public onToastRef(toast: IgrToast){
45-
if (!toast) { return; }
46-
this.toastRef = toast;
47-
}
48-
49-
public onToggleButtonClicked() {
50-
if(this.toastRef){
51-
this.toastRef.toggle();
14+
const onKeepOpenButtonClicked = () => {
15+
if (toastRef.current) {
16+
toastRef.current.keepOpen = !toastRef.current.keepOpen;
5217
}
53-
}
18+
};
5419

55-
public onKeepOpenButtonClicked() {
56-
if(this.toastRef){
57-
this.toastRef.keepOpen = !this.toastRef.keepOpen;
20+
const onDisplayTimeButtonClicked = () => {
21+
if (toastRef.current) {
22+
toastRef.current.displayTime = 8000;
5823
}
59-
}
24+
};
25+
26+
return (
27+
<div className="container sample">
28+
<div style={{display: 'flex', justifyContent: 'space-evenly', marginTop: '20px'}}>
29+
<IgrButton variant="contained" onClick={onToggleButtonClicked}>
30+
<span>Toggle Toast</span>
31+
</IgrButton>
32+
<IgrButton variant="contained" onClick={onKeepOpenButtonClicked}>
33+
<span>Toggle keepOpen Property</span>
34+
</IgrButton>
35+
<IgrButton variant="contained" onClick={onDisplayTimeButtonClicked}>
36+
<span>Set DisplayTime to 8000</span>
37+
</IgrButton>
38+
</div>
6039

61-
public onDisplayTimeButtonClicked() {
62-
if(this.toastRef){
63-
this.toastRef.displayTime = 8000;
64-
}
65-
}
40+
<IgrToast ref={toastRef}>
41+
<span>Toast Message</span>
42+
</IgrToast>
43+
</div>
44+
);
6645
}
6746

68-
// rendering above class to the React DOM
47+
// rendering above function to the React DOM
6948
const root = ReactDOM.createRoot(document.getElementById('root'));
70-
root.render(<ToastProperties/>);
49+
root.render(<ToastProperties />);

‎samples/notifications/toast/styling/src/index.tsx‎

Lines changed: 19 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,30 @@
1-
import React from 'react';
1+
import React, { useRef } from 'react';
22
import ReactDOM from 'react-dom/client';
33
import './index.css';
44
import './ToastStyling.css';
5-
import { IgrButton, IgrToast, IgrButtonModule, IgrToastModule } from 'igniteui-react';
5+
import { IgrButton, IgrToast } from 'igniteui-react';
66
import 'igniteui-webcomponents/themes/light/bootstrap.css';
77

8-
IgrButtonModule.register();
9-
IgrToastModule.register();
8+
export default function ToastStyling() {
9+
const toastRef = useRef<IgrToast>(null);
1010

11-
export default class ToastStyling extends React.Component<any, any> {
11+
const onShowButtonClicked = () => {
12+
toastRef.current?.show();
13+
};
1214

13-
public toastRef: IgrToast;
15+
return (
16+
<div className="container sample">
17+
<IgrButton variant="contained" onClick={onShowButtonClicked}>
18+
<span>Show Styled Toast</span>
19+
</IgrButton>
1420

15-
constructor(props: any) {
16-
super(props);
17-
this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
18-
this.onToastRef = this.onToastRef.bind(this);
19-
}
20-
21-
public render(): JSX.Element {
22-
return (
23-
<div className="container sample">
24-
<IgrButton variant="contained" onClick={this.onShowButtonClicked}>
25-
<span>Show Styled Toast</span>
26-
</IgrButton>
27-
28-
<IgrToast ref={this.onToastRef}>
29-
<span>Styled Message</span>
30-
</IgrToast>
31-
</div>
32-
);
33-
}
34-
35-
public onToastRef(toast: IgrToast){
36-
if (!toast) { return; }
37-
this.toastRef = toast;
38-
}
39-
40-
public onShowButtonClicked() {
41-
if(this.toastRef){
42-
this.toastRef.show();
43-
}
44-
}
21+
<IgrToast ref={toastRef}>
22+
<span>Styled Message</span>
23+
</IgrToast>
24+
</div>
25+
);
4526
}
4627

47-
// rendering above class to the React DOM
28+
// rendering above function to the React DOM
4829
const root = ReactDOM.createRoot(document.getElementById('root'));
49-
root.render(<ToastStyling/>);
30+
root.render(<ToastStyling />);

0 commit comments

Comments
 (0)