Update samples for Grid lite with the react wrappers

samples/grids/grid-lite/data-binding/src/index.tsx

@@ -1,21 +1,18 @@
-import React, { useCallback, useState } from "react";
+import { useCallback, useState, useEffect } from "react";
 import ReactDOM from "react-dom/client";
 import { GridLiteDataService } from "./GridLiteDataService";
 
-// Import the web component
-import { IgcGridLite } from "igniteui-grid-lite";
+import { IgrGridLite } from 'igniteui-react/grid-lite';
 import { IgrButton } from "igniteui-react";
 import "igniteui-webcomponents/themes/light/bootstrap.css";
 import "./index.css";
 
-// Register components
-IgcGridLite.register();
 
-export default function Sample() {
+export default function GridLiteDataBinding() {
   const [showingProducts, setShowingProducts] = useState(true);
   const [data, setData] = useState([]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const dataService = new GridLiteDataService();
     setData(dataService.generateProducts(50));
 
@@ -50,15 +47,15 @@ export default function Sample() {
           Switch Data
         </IgrButton>
       </div>
-      <igc-grid-lite
-        auto-generate="true"
+      <IgrGridLite
+        autoGenerate={true}
         id="grid-lite"
         data={data}
-      ></igc-grid-lite>
+      ></IgrGridLite>
     </div>
   );
 }
 
 // rendering above component in the React DOM
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<Sample />);
+root.render(<GridLiteDataBinding />);

samples/grids/grid-lite/filtering-config-events/src/index.tsx

@@ -1,24 +1,19 @@
-import React from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import { GridLiteDataService, User } from './GridLiteDataService';
 
-// Import the web component
-import { IgcGridLite } from 'igniteui-grid-lite';
-
+import { IgrGridLite, IgrGridLiteColumn } from 'igniteui-react/grid-lite';
 import "igniteui-webcomponents/themes/light/bootstrap.css";
 import "./index.css";
 
-// Register components
-IgcGridLite.register();
-
 const getTime = () => `[${new Date().toLocaleTimeString()}]`;
 
-export default function Sample() {
-  const gridRef = React.useRef<any>(null);
-  const logRef = React.useRef<HTMLDivElement>(null);
-  const [log, setLog] = React.useState<string[]>([]);
+export default function GridLiteFilteringConfigEvents() {
+  const logRef = useRef<HTMLDivElement>(null);
+  const [data, setData] = useState<User[]>([]);
+  const [log, setLog] = useState<string[]>([]);
 
-  const updateLog = React.useCallback((message: string) => {
+  const updateLog = useCallback((message: string) => {
     setLog(prevLog => {
       const newLog = [...prevLog];
       if (newLog.length > 10) {
@@ -29,59 +24,45 @@ export default function Sample() {
     });
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (logRef.current) {
       logRef.current.scrollTop = logRef.current.scrollHeight;
     }
   }, [log]);
 
-  React.useEffect(() => {
-    if (gridRef.current) {
-      const dataService = new GridLiteDataService();
-      const data: User[] = dataService.generateUsers(50);
-      gridRef.current.data = data;
-
-      // Listen to filter events
-      const handleFiltering = (e: any) => {
-        const { expressions, type } = e.detail;
-        updateLog(`${getTime()} :: Event \`${e.type}\` :: Filter operation of type '${type}' for column '${expressions[0].key}'`);
-      };
-
-      const handleFiltered = (e: any) => {
-        updateLog(`${getTime()} :: Event \`${e.type}\` for column '${e.detail.key}'`);
-      };
-
-      gridRef.current.addEventListener('filtering', handleFiltering);
-      gridRef.current.addEventListener('filtered', handleFiltered);
+  const handleFiltering = useCallback((event: CustomEvent<any>) => {
+    const { expressions, type } = event.detail;
+    updateLog(`${getTime()} :: Event \`filtering\` :: Filter operation of type '${type}' for column '${expressions[0].key}'`);
+  }, [updateLog]);
 
-      return () => {
-        if (gridRef.current) {
-          gridRef.current.removeEventListener('filtering', handleFiltering);
-          gridRef.current.removeEventListener('filtered', handleFiltered);
-        }
-      };
-    }
+  const handleFiltered = useCallback((event: CustomEvent<any>) => {
+    updateLog(`${getTime()} :: Event \`filtered\` for column '${event.detail.key}'`);
   }, [updateLog]);
 
-  const logContent = log
-    .map(entry => `<p><code>${entry}</code></p>`)
-    .join('');
+  useEffect(() => {
+    const dataService = new GridLiteDataService();
+    setData(dataService.generateUsers(50));
+  }, []);
 
   return (
     <div className="container sample ig-typography">
       <div className="grid-lite-wrapper">
-        <igc-grid-lite ref={gridRef} id="grid-lite">
-          <igc-grid-lite-column field="firstName" header="First name" filterable></igc-grid-lite-column>
-          <igc-grid-lite-column field="lastName" header="Last name" filterable></igc-grid-lite-column>
-          <igc-grid-lite-column field="age" header="Age" filterable data-type="number"></igc-grid-lite-column>
-          <igc-grid-lite-column field="email" header="Email" filterable></igc-grid-lite-column>
-        </igc-grid-lite>
-        <div ref={logRef} className="log" id="log" dangerouslySetInnerHTML={{ __html: logContent }}></div>
+        <IgrGridLite id="grid-lite" data={data} onFiltering={handleFiltering} onFiltered={handleFiltered}>
+          <IgrGridLiteColumn field="firstName" header="First name" filterable={true}></IgrGridLiteColumn>
+          <IgrGridLiteColumn field="lastName" header="Last name" filterable={true}></IgrGridLiteColumn>
+          <IgrGridLiteColumn field="age" header="Age" filterable={true} dataType="number"></IgrGridLiteColumn>
+          <IgrGridLiteColumn field="email" header="Email" filterable={true}></IgrGridLiteColumn>
+        </IgrGridLite>
+        <div ref={logRef} className="log" id="log">
+          {log.map((entry, index) => (
+            <p key={index}><code>{entry}</code></p>
+          ))}
+        </div>
       </div>
     </div>
   );
 }
 
 // rendering above component in the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<Sample/>);
+root.render(<GridLiteFilteringConfigEvents/>);

samples/grids/grid-lite/sort-config-events/src/index.tsx

@@ -1,37 +1,28 @@
-import React from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom/client';
 import { GridLiteDataService, ProductInfo } from './GridLiteDataService';
 
-// Import the web component
-import { IgcGridLite } from 'igniteui-grid-lite';
-import { 
-  defineComponents,
-  IgcRatingComponent
-} from 'igniteui-webcomponents';
+import { IgrGridLite, IgrGridLiteColumn } from 'igniteui-react/grid-lite';
+import { IgrRating } from 'igniteui-react';
 import "igniteui-webcomponents/themes/light/bootstrap.css";
 import "./index.css";
 
-// Register components
-IgcGridLite.register();
-defineComponents(IgcRatingComponent);
-
 const getTimeStamp = (): string => `[${new Date().toLocaleTimeString()}]`;
 
 // Define cellTemplate function outside component
-const ratingCellTemplate = (params: any) => {
-  const rating = document.createElement('igc-rating');
-  rating.setAttribute('readonly', '');
-  rating.setAttribute('step', '0.01');
-  rating.setAttribute('value', params.value.toString());
-  return rating;
+const ratingCellTemplate = (ctx: any) => {
+  return (
+    <IgrRating readonly={true} step={0.01} value={ctx.value}></IgrRating>
+  );
 };
 
-export default function Sample() {
-  const gridRef = React.useRef<any>(null);
-  const logRef = React.useRef<HTMLDivElement>(null);
-  const [log, setLog] = React.useState<string[]>([]);
+export default function GridLiteSortConfigEvents() {
+  const gridRef = useRef<IgrGridLite>(null);
+  const logRef = useRef<HTMLDivElement>(null);
+  const [data, setData] = useState<ProductInfo[]>([]);
+  const [log, setLog] = useState<string[]>([]);
 
-  const updateLog = React.useCallback((message: string) => {
+  const updateLog = useCallback((message: string) => {
     setLog(prevLog => {
       const newLog = [...prevLog];
       if (newLog.length > 10) {
@@ -42,74 +33,60 @@ export default function Sample() {
     });
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (logRef.current) {
       logRef.current.scrollTop = logRef.current.scrollHeight;
     }
   }, [log]);
 
-  const handleSorting = React.useCallback((event: any) => {
-    const { detail, type } = event;
+  const handleSorting = useCallback((event: CustomEvent<any>) => {
+    const { detail } = event;
     const allowedColumns = ['price', 'total', 'sold'];
 
     if (!allowedColumns.includes(detail.key)) {
       event.preventDefault();
       updateLog(
-        `${getTimeStamp()} :: Event '${type}' :: Sort operation was prevented for column '${detail.key}'`
+        `${getTimeStamp()} :: Event 'sorting' :: Sort operation was prevented for column '${detail.key}'`
       );
     } else {
       updateLog(
-        `${getTimeStamp()} :: Event '${type}' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}`
+        `${getTimeStamp()} :: Event 'sorting' :: Column '${detail.key}' is being sorted with expression: ${JSON.stringify(detail)}`
       );
     }
   }, [updateLog]);
 
-  const handleSorted = React.useCallback((event: any) => {
-    const { detail, type } = event;
+  const handleSorted = useCallback((event: CustomEvent<any>) => {
+    const { detail } = event;
     updateLog(
-      `${getTimeStamp()} :: Event '${type}' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}`
+      `${getTimeStamp()} :: Event 'sorted' :: Column '${detail.key}' was sorted with expression: ${JSON.stringify(detail)}`
     );
   }, [updateLog]);
 
-  React.useEffect(() => {
-    if (gridRef.current) {
-      const dataService = new GridLiteDataService();
-      const data: ProductInfo[] = dataService.generateProducts(100);
-      gridRef.current.data = data;
-
-      // Listen to sorting events
-      gridRef.current.addEventListener('sorting', handleSorting);
-      gridRef.current.addEventListener('sorted', handleSorted);
-
-      return () => {
-        if (gridRef.current) {
-          gridRef.current.removeEventListener('sorting', handleSorting);
-          gridRef.current.removeEventListener('sorted', handleSorted);
-        }
-      };
-    }
-  }, [handleSorting, handleSorted]);
-
-  const logContent = log
-    .map(entry => `<p><code>${entry}</code></p>`)
-    .join('');
+  useEffect(() => {
+    const dataService = new GridLiteDataService();
+    setData(dataService.generateProducts(100));
+  }, []);
 
   return (
     <div className="container sample ig-typography">
       <div className="grid-lite-wrapper">
-        <igc-grid-lite ref={gridRef} id="grid-lite">
-          <igc-grid-lite-column field="name" header="Name" sortable></igc-grid-lite-column>
-          <igc-grid-lite-column field="price" data-type="number" header="Price" sortable></igc-grid-lite-column>
-          <igc-grid-lite-column field="rating" data-type="number" header="Rating" sortable cellTemplate={ratingCellTemplate}></igc-grid-lite-column>
-          <igc-grid-lite-column field="sold" data-type="number" header="Sold" sortable></igc-grid-lite-column>
-          <igc-grid-lite-column field="total" data-type="number" header="Total" sortable></igc-grid-lite-column>
-        </igc-grid-lite>
-        <div ref={logRef} className="log" id="log" dangerouslySetInnerHTML={{ __html: logContent }}></div>
+        <IgrGridLite ref={gridRef} id="grid-lite" data={data} onSorting={handleSorting} onSorted={handleSorted}>
+          <IgrGridLiteColumn field="name" header="Name" sortable={true}></IgrGridLiteColumn>
+          <IgrGridLiteColumn field="price" dataType="number" header="Price" sortable={true}></IgrGridLiteColumn>
+          <IgrGridLiteColumn field="rating" dataType="number" header="Rating" sortable={true} cellTemplate={ratingCellTemplate}></IgrGridLiteColumn>
+          <IgrGridLiteColumn field="sold" dataType="number" header="Sold" sortable={true}></IgrGridLiteColumn>
+          <IgrGridLiteColumn field="total" dataType="number" header="Total" sortable={true}></IgrGridLiteColumn>
+        </IgrGridLite>
+        <div ref={logRef} className="log" id="log">
+          {log.map((entry, index) => (
+            <p key={index}><code>{entry}</code></p>
+          ))}
+        </div>
       </div>
     </div>
   );
 }
 
 // rendering above component in the React DOM
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<Sample/>);
+root.render(<GridLiteSortConfigEvents/>);