Skip to content

Commit 1dcd7f0

Browse files
tishko0tishko0
authored
Snackbar Overview sample update (#864)
1 parent 59c3801 commit 1dcd7f0

5 files changed

Lines changed: 89 additions & 163 deletions

File tree

‎samples/grids/grid/paste/src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,4 +313,4 @@ export default class Sample extends React.Component<any, any> {
313313

314314
// rendering above component in the React DOM
315315
const root = ReactDOM.createRoot(document.getElementById('root'));
316-
root.render(<Sample/>);
316+
root.render(<Sample/>);

‎samples/notifications/snackbar/action-text/src/index.tsx‎

Lines changed: 31 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,38 @@
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, IgrSnackbar, IgrButtonModule, IgrSnackbarModule } from 'igniteui-react';
4+
import { IgrButton, IgrSnackbar } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrButtonModule.register();
8-
IgrSnackbarModule.register();
9-
10-
export default class SnackbarActionText extends React.Component<any, any> {
11-
12-
public snackbarRef: IgrSnackbar;
13-
14-
constructor(props: any) {
15-
super(props);
16-
this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
17-
this.onSnackbarRef = this.onSnackbarRef.bind(this);
18-
this.onSnackbarActionClicked = this.onSnackbarActionClicked.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 Snackbar</span>
26-
</IgrButton>
27-
28-
<IgrSnackbar ref={this.onSnackbarRef} keepOpen={true} actionText="Close" onAction={this.onSnackbarActionClicked}>
29-
<span>Snackbar with enabled keep-open option</span>
30-
</IgrSnackbar>
31-
</div>
32-
);
33-
}
34-
35-
public onSnackbarRef(snackbar: IgrSnackbar){
36-
if (!snackbar) { return; }
37-
this.snackbarRef = snackbar;
38-
}
39-
40-
public onSnackbarActionClicked() {
41-
if (this.snackbarRef) {
42-
this.snackbarRef.hide();
43-
}
44-
}
45-
46-
public onShowButtonClicked() {
47-
if(this.snackbarRef){
48-
this.snackbarRef.show();
49-
}
50-
}
7+
export default function SnackbarActionText() {
8+
const snackbarRef = useRef<IgrSnackbar>(null);
9+
10+
const onShowButtonClicked = () => {
11+
snackbarRef.current?.show();
12+
};
13+
14+
const onSnackbarActionClicked = () => {
15+
snackbarRef.current?.hide();
16+
};
17+
18+
return (
19+
<div className="container sample">
20+
<IgrButton variant="contained" onClick={onShowButtonClicked}>
21+
<span>Show Snackbar</span>
22+
</IgrButton>
23+
24+
<IgrSnackbar
25+
ref={snackbarRef}
26+
keepOpen={true}
27+
actionText="Close"
28+
onAction={onSnackbarActionClicked}
29+
>
30+
<span>Snackbar with enabled keep-open option</span>
31+
</IgrSnackbar>
32+
</div>
33+
);
5134
}
5235

53-
// rendering above class to the React DOM
36+
// rendering above function to the React DOM
5437
const root = ReactDOM.createRoot(document.getElementById('root'));
55-
root.render(<SnackbarActionText/>);
38+
root.render(<SnackbarActionText />);

‎samples/notifications/snackbar/display-time/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, IgrSnackbar, IgrButtonModule, IgrSnackbarModule } from 'igniteui-react';
4+
import { IgrButton, IgrSnackbar } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrButtonModule.register();
8-
IgrSnackbarModule.register();
7+
export default function SnackbarDisplayTime() {
8+
const snackbarRef = useRef<IgrSnackbar>(null);
99

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

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

14-
constructor(props: any) {
15-
super(props);
16-
this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
17-
this.onSnackbarRef = this.onSnackbarRef.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 Snackbar</span>
25-
</IgrButton>
26-
27-
<IgrSnackbar ref={this.onSnackbarRef} displayTime={6000}>
28-
<span>Snackbar with different display time</span>
29-
</IgrSnackbar>
30-
</div>
31-
);
32-
}
33-
34-
public onSnackbarRef(snackbar: IgrSnackbar){
35-
if (!snackbar) { return; }
36-
this.snackbarRef = snackbar;
37-
}
38-
39-
public onShowButtonClicked() {
40-
if(this.snackbarRef){
41-
this.snackbarRef.show();
42-
}
43-
}
20+
<IgrSnackbar ref={snackbarRef} displayTime={6000}>
21+
<span>Snackbar with different display time</span>
22+
</IgrSnackbar>
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(<SnackbarDisplayTime/>);
29+
root.render(<SnackbarDisplayTime />);

‎samples/notifications/snackbar/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, IgrSnackbar, IgrButtonModule, IgrSnackbarModule } from 'igniteui-react';
4+
import { IgrButton, IgrSnackbar } from 'igniteui-react';
55
import 'igniteui-webcomponents/themes/light/bootstrap.css';
66

7-
IgrButtonModule.register();
8-
IgrSnackbarModule.register();
7+
export default function SnackbarOverview() {
8+
const snackbarRef = useRef<IgrSnackbar>(null);
99

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

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

14-
constructor(props: any) {
15-
super(props);
16-
this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
17-
this.onSnackbarRef = this.onSnackbarRef.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 Snackbar</span>
25-
</IgrButton>
26-
27-
<IgrSnackbar ref={this.onSnackbarRef}>
28-
<span>Snackbar Message</span>
29-
</IgrSnackbar>
30-
</div>
31-
);
32-
}
33-
34-
public onSnackbarRef(snackbar: IgrSnackbar){
35-
if (!snackbar) { return; }
36-
this.snackbarRef = snackbar;
37-
}
38-
39-
public onShowButtonClicked() {
40-
if(this.snackbarRef){
41-
this.snackbarRef.show();
42-
}
43-
}
20+
<IgrSnackbar ref={snackbarRef}>
21+
<span>Snackbar Message</span>
22+
</IgrSnackbar>
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(<SnackbarOverview/>);
29+
root.render(<SnackbarOverview />);

‎samples/notifications/snackbar/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 './SnackbarStyling.css';
5-
import { IgrButton, IgrSnackbar, IgrButtonModule, IgrSnackbarModule } from 'igniteui-react';
5+
import { IgrButton, IgrSnackbar } from 'igniteui-react';
66
import 'igniteui-webcomponents/themes/light/bootstrap.css';
77

8-
IgrButtonModule.register();
9-
IgrSnackbarModule.register();
8+
export default function SnackbarStyling() {
9+
const snackbarRef = useRef<IgrSnackbar>(null);
1010

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

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

15-
constructor(props: any) {
16-
super(props);
17-
this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
18-
this.onSnackbarRef = this.onSnackbarRef.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 Snackbar</span>
26-
</IgrButton>
27-
28-
<IgrSnackbar ref={this.onSnackbarRef}>
29-
<span>Styled Snackbar</span>
30-
</IgrSnackbar>
31-
</div>
32-
);
33-
}
34-
35-
public onSnackbarRef(snackbar: IgrSnackbar){
36-
if (!snackbar) { return; }
37-
this.snackbarRef = snackbar;
38-
}
39-
40-
public onShowButtonClicked() {
41-
if(this.snackbarRef){
42-
this.snackbarRef.show();
43-
}
44-
}
21+
<IgrSnackbar ref={snackbarRef}>
22+
<span>Styled Snackbar</span>
23+
</IgrSnackbar>
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(<SnackbarStyling/>);
30+
root.render(<SnackbarStyling />);

0 commit comments

Comments
 (0)