Toast samples update

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

@@ -313,4 +313,4 @@ export default class Sample extends React.Component<any, any> {
 
 // rendering above component in the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<Sample/>);
+root.render(<Sample/>);

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

@@ -1,48 +1,29 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrButton, IgrToast, IgrButtonModule, IgrToastModule } from 'igniteui-react';
+import { IgrButton, IgrToast } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrButtonModule.register();
-IgrToastModule.register();
+export default function ToastOverview() {
+    const toastRef = useRef<IgrToast>(null);
 
-export default class ToastOverview extends React.Component<any, any> {
+    const onShowButtonClicked = () => {
+        toastRef.current?.show();
+    };
 
-    public toastRef: IgrToast;
+    return (
+        <div className="container sample">
+            <IgrButton variant="contained" onClick={onShowButtonClicked}>
+                <span>Show Toast</span>
+            </IgrButton>
 
-    constructor(props: any) {
-        super(props);
-        this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
-        this.onToastRef = this.onToastRef.bind(this);
-    }
-
-    public render(): JSX.Element {
-        return (
-            <div className="container sample">
-                <IgrButton variant="contained" onClick={this.onShowButtonClicked}>
-                    <span>Show Toast</span>
-                </IgrButton>
-
-                <IgrToast ref={this.onToastRef}>
-                    <span>Toast Message</span>
-                </IgrToast>
-            </div>
-        );
-    }
-
-    public onToastRef(toast: IgrToast){
-        if (!toast) { return; }
-        this.toastRef = toast;
-    }
-
-    public onShowButtonClicked() {
-        if(this.toastRef){
-            this.toastRef.show();
-        }
-    }
+            <IgrToast ref={toastRef}>
+                <span>Toast Message</span>
+            </IgrToast>
+        </div>
+    );
 }
 
-// rendering above class to the React DOM
+// rendering above function to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<ToastOverview/>);
+root.render(<ToastOverview />);

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

@@ -1,70 +1,49 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import { IgrButton, IgrToast, IgrButtonModule, IgrToastModule } from 'igniteui-react';
+import { IgrButton, IgrToast } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrButtonModule.register();
-IgrToastModule.register();
+export default function ToastProperties() {
+    const toastRef = useRef<IgrToast>(null);
 
-export default class ToastProperties extends React.Component<any, any> {
+    const onToggleButtonClicked = () => {
+        toastRef.current?.toggle();
+    };
 
-    public toastRef: IgrToast;
-
-    constructor(props: any) {
-        super(props);
-        this.onToggleButtonClicked = this.onToggleButtonClicked.bind(this);
-        this.onKeepOpenButtonClicked = this.onKeepOpenButtonClicked.bind(this);
-        this.onDisplayTimeButtonClicked = this.onDisplayTimeButtonClicked.bind(this);
-        this.onToastRef = this.onToastRef.bind(this);
-    }
-
-    public render(): JSX.Element {
-        return (
-            <div className="container sample">
-                <div style={{display: 'flex', justifyContent: 'space-evenly', marginTop: '20px'}}>
-                    <IgrButton variant="contained" onClick={this.onToggleButtonClicked}>
-                        <span>Toggle Toast</span>
-                    </IgrButton>
-                    <IgrButton variant="contained" onClick={this.onKeepOpenButtonClicked}>
-                        <span>Toggle keepOpen Property</span>
-                    </IgrButton>
-                    <IgrButton variant="contained" onClick={this.onDisplayTimeButtonClicked}>
-                        <span>Set DisplayTime to 8000</span>
-                    </IgrButton>
-                </div>
-
-                <IgrToast ref={this.onToastRef}>
-                    <span>Toast Message</span>
-                </IgrToast>
-            </div>
-        );
-    }
-
-    public onToastRef(toast: IgrToast){
-        if (!toast) { return; }
-        this.toastRef = toast;
-    }
-
-    public onToggleButtonClicked() {
-        if(this.toastRef){
-            this.toastRef.toggle();
+    const onKeepOpenButtonClicked = () => {
+        if (toastRef.current) {
+            toastRef.current.keepOpen = !toastRef.current.keepOpen;
         }
-    }
+    };
 
-    public onKeepOpenButtonClicked() {
-        if(this.toastRef){
-            this.toastRef.keepOpen = !this.toastRef.keepOpen;
+    const onDisplayTimeButtonClicked = () => {
+        if (toastRef.current) {
+            toastRef.current.displayTime = 8000;
         }
-    }
+    };
+
+    return (
+        <div className="container sample">
+            <div style={{display: 'flex', justifyContent: 'space-evenly', marginTop: '20px'}}>
+                <IgrButton variant="contained" onClick={onToggleButtonClicked}>
+                    <span>Toggle Toast</span>
+                </IgrButton>
+                <IgrButton variant="contained" onClick={onKeepOpenButtonClicked}>
+                    <span>Toggle keepOpen Property</span>
+                </IgrButton>
+                <IgrButton variant="contained" onClick={onDisplayTimeButtonClicked}>
+                    <span>Set DisplayTime to 8000</span>
+                </IgrButton>
+            </div>
 
-    public onDisplayTimeButtonClicked() {
-        if(this.toastRef){
-            this.toastRef.displayTime = 8000;
-        }
-    }
+            <IgrToast ref={toastRef}>
+                <span>Toast Message</span>
+            </IgrToast>
+        </div>
+    );
 }
 
-// rendering above class to the React DOM
+// rendering above function to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<ToastProperties/>);
+root.render(<ToastProperties />);

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

@@ -1,49 +1,30 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import './ToastStyling.css';
-import { IgrButton, IgrToast, IgrButtonModule, IgrToastModule } from 'igniteui-react';
+import { IgrButton, IgrToast } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
-IgrButtonModule.register();
-IgrToastModule.register();
+export default function ToastStyling() {
+    const toastRef = useRef<IgrToast>(null);
 
-export default class ToastStyling extends React.Component<any, any> {
+    const onShowButtonClicked = () => {
+        toastRef.current?.show();
+    };
 
-    public toastRef: IgrToast;
+    return (
+        <div className="container sample">
+            <IgrButton variant="contained" onClick={onShowButtonClicked}>
+                <span>Show Styled Toast</span>
+            </IgrButton>
 
-    constructor(props: any) {
-        super(props);
-        this.onShowButtonClicked = this.onShowButtonClicked.bind(this);
-        this.onToastRef = this.onToastRef.bind(this);
-    }
-
-    public render(): JSX.Element {
-        return (
-            <div className="container sample">
-                <IgrButton variant="contained" onClick={this.onShowButtonClicked}>
-                    <span>Show Styled Toast</span>
-                </IgrButton>
-
-                <IgrToast ref={this.onToastRef}>
-                    <span>Styled Message</span>
-                </IgrToast>
-            </div>
-        );
-    }
-
-    public onToastRef(toast: IgrToast){
-        if (!toast) { return; }
-        this.toastRef = toast;
-    }
-
-    public onShowButtonClicked() {
-        if(this.toastRef){
-            this.toastRef.show();
-        }
-    }
+            <IgrToast ref={toastRef}>
+                <span>Styled Message</span>
+            </IgrToast>
+        </div>
+    );
 }
 
-// rendering above class to the React DOM
+// rendering above function to the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<ToastStyling/>);
+root.render(<ToastStyling />);