remove inlines form react datagrid demos

apps/demos/Demos/CardView/FieldTemplate/React/Progress.tsx

@@ -5,12 +5,15 @@ interface ProgressProps {
   value: number;
 }
 
+const progressElementAttributes = { 'aria-label': 'Progress Bar' };
+const formatPercent = (_: unknown, value: number) => `${value}%`;
+
 const Progress = ({ value }: ProgressProps) => (
   <div className="task__progress">
     <ProgressBar
       value={value}
-      elementAttr={{ 'aria-label': 'Progress Bar' }}
-      statusFormat={(_, value: number) => `${value}%`}
+      elementAttr={progressElementAttributes}
+      statusFormat={formatProgressStatus}
     />
   </div>
 );

apps/demos/Demos/CardView/FieldTemplate/ReactJs/Progress.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { ProgressBar } from 'devextreme-react/progress-bar';
 
+const progressElementAttributes = { 'aria-label': 'Progress Bar' };
+const formatProgressStatus = (_, value) => `${value}%`;
 const Progress = ({ value }) => (
   <div className="task__progress">
     <ProgressBar
       value={value}
-      elementAttr={{ 'aria-label': 'Progress Bar' }}
-      statusFormat={(_, value) => `${value}%`}
+      elementAttr={progressElementAttributes}
+      statusFormat={formatProgressStatus}
     />
   </div>
 );

apps/demos/Demos/DataGrid/AIAssistant/React/App.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 
 import DataGrid, {
   Column,
@@ -76,7 +76,7 @@ export default function App() {
     }]);
   }, []);
 
-  const chatOptions: ChatTypes.Properties = {
+  const chatOptions = useMemo<ChatTypes.Properties>(() => ({
     onInitialized: onChatInitialized,
     user: {
       id: 'user',
@@ -85,7 +85,7 @@ export default function App() {
       ...suggestions,
       onItemClick: onSuggestionItemClick,
     },
-  };
+  }), [onChatInitialized, onSuggestionItemClick]);
 
   return (
     <DataGrid

apps/demos/Demos/DataGrid/AIAssistant/ReactJs/App.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import DataGrid, {
   Column,
   Paging,
@@ -69,16 +69,19 @@ export default function App() {
         },
       ]);
   }, []);
-  const chatOptions = {
-    onInitialized: onChatInitialized,
-    user: {
-      id: 'user',
-    },
-    suggestions: {
-      ...suggestions,
-      onItemClick: onSuggestionItemClick,
-    },
-  };
+  const chatOptions = useMemo(
+    () => ({
+      onInitialized: onChatInitialized,
+      user: {
+        id: 'user',
+      },
+      suggestions: {
+        ...suggestions,
+        onItemClick: onSuggestionItemClick,
+      },
+    }),
+    [onChatInitialized, onSuggestionItemClick],
+  );
   return (
     <DataGrid
       id="gridContainer"

apps/demos/Demos/DataGrid/AIColumns/React/App.tsx

@@ -36,6 +36,17 @@ export default function App() {
     setCurrentVehicle(null);
   }, []);
 
+  const renderTrademark = useCallback((cellData: DataGridTypes.ColumnCellTemplateData) => (
+    <Trademark
+      vehicle={cellData.data}
+      onShowInfo={showInfo}
+    />
+  ), [showInfo]);
+
+  const renderLicenseInfo = useCallback(() => (
+    <LicenseInfo vehicle={currentVehicle} />
+  ), [currentVehicle]);
+
   return (
     <>
       <DataGrid
@@ -55,12 +66,7 @@ export default function App() {
           caption="Trademark"
           width={200}
           dataField="TrademarkName"
-          cellRender={(cellData) =>
-            <Trademark
-              vehicle={cellData.data}
-              onShowInfo={showInfo}
-            />
-          }
+          cellRender={renderTrademark}
         />
         <Column
           dataField="Price"
@@ -110,9 +116,7 @@ export default function App() {
         hideOnOutsideClick={true}
         title="Image Info"
         onHiding={hideInfo}
-        contentRender={() =>
-          <LicenseInfo vehicle={currentVehicle} />
-        }
+        contentRender={renderLicenseInfo}
       >
         <Position
           at="center"

apps/demos/Demos/DataGrid/AIColumns/React/Trademark.tsx

@@ -15,6 +15,8 @@ export default function Trademark({ vehicle, onShowInfo }: TrademarkProps) {
     }
   }, [onShowInfo, vehicle]);
 
+  const onClick = useCallback(() => onShowInfo(vehicle), [onShowInfo, vehicle]);
+
   return (
     <div className="trademark__wrapper">
       <div className="trademark__img-wrapper">
@@ -23,7 +25,7 @@ export default function Trademark({ vehicle, onShowInfo }: TrademarkProps) {
           src={`../../../../images/vehicles/image_${ID}.png`}
           alt={`${TrademarkName} ${Name}`}
           tabIndex={0}
-          onClick={() => onShowInfo(vehicle)}
+          onClick={onClick}
           role="button"
           onKeyDown={onKeyDown}
           aria-haspopup="dialog"

apps/demos/Demos/DataGrid/AIColumns/ReactJs/App.js

@@ -25,6 +25,19 @@ export default function App() {
   const hideInfo = useCallback(() => {
     setCurrentVehicle(null);
   }, []);
+  const renderTrademark = useCallback(
+    (cellData) => (
+      <Trademark
+        vehicle={cellData.data}
+        onShowInfo={showInfo}
+      />
+    ),
+    [showInfo],
+  );
+  const renderLicenseInfo = useCallback(
+    () => <LicenseInfo vehicle={currentVehicle} />,
+    [currentVehicle],
+  );
   return (
     <>
       <DataGrid
@@ -44,12 +57,7 @@ export default function App() {
           caption="Trademark"
           width={200}
           dataField="TrademarkName"
-          cellRender={(cellData) => (
-            <Trademark
-              vehicle={cellData.data}
-              onShowInfo={showInfo}
-            />
-          )}
+          cellRender={renderTrademark}
         />
         <Column
           dataField="Price"
@@ -99,7 +107,7 @@ export default function App() {
         hideOnOutsideClick={true}
         title="Image Info"
         onHiding={hideInfo}
-        contentRender={() => <LicenseInfo vehicle={currentVehicle} />}
+        contentRender={renderLicenseInfo}
       >
         <Position
           at="center"

apps/demos/Demos/DataGrid/AIColumns/ReactJs/Trademark.js

@@ -10,6 +10,7 @@ export default function Trademark({ vehicle, onShowInfo }) {
     },
     [onShowInfo, vehicle],
   );
+  const onClick = useCallback(() => onShowInfo(vehicle), [onShowInfo, vehicle]);
   return (
     <div className="trademark__wrapper">
       <div className="trademark__img-wrapper">
@@ -18,7 +19,7 @@ export default function Trademark({ vehicle, onShowInfo }) {
           src={`../../../../images/vehicles/image_${ID}.png`}
           alt={`${TrademarkName} ${Name}`}
           tabIndex={0}
-          onClick={() => onShowInfo(vehicle)}
+          onClick={onClick}
           role="button"
           onKeyDown={onKeyDown}
           aria-haspopup="dialog"

apps/demos/Demos/DataGrid/CustomEditors/React/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import DataGrid, {
   Paging,
@@ -73,36 +73,41 @@ function calculateFilterExpression(
 
 const onRowInserted = (e: DataGridTypes.RowInsertedEvent) => e.component.navigateToRow(e.key);
 
-const statusEditorRender = (cell: DataGridTypes.ColumnEditCellTemplateData) => {
-  const onValueChanged = (e: SelectBoxTypes.ValueChangedEvent) => cell.setValue(e.value);
+const statusEditorRender = (cell: DataGridTypes.ColumnEditCellTemplateData) => <StatusEditor cell={cell} />;
 
-  const itemRender = (data: { id: number, name: string } | null) => {
-    if (data) {
-      const imageSource = `images/icons/status-${data.id}.svg`;
+const statusItemRender = (data: { id: number, name: string } | null) => {
+  if (data) {
+    const imageSource = `images/icons/status-${data.id}.svg`;
 
-      return (
-        <div>
-          <img src={imageSource} className="status-icon middle"></img>
-          <span className="middle">{data.name}</span>
-        </div>
-      );
-    }
+    return (
+      <div>
+        <img src={imageSource} className="status-icon middle"></img>
+        <span className="middle">{data.name}</span>
+      </div>
+    );
+  }
 
-    return <span>(All)</span>;
-  };
+  return <span>(All)</span>;
+};
 
+const StatusEditor = ({ cell }: { cell: DataGridTypes.ColumnEditCellTemplateData }) => {
   const lookupDataSource = cell.column.lookup?.dataSource;
   const dataSource = typeof lookupDataSource === 'function'
     ? lookupDataSource({ data: cell.data, key: cell.row.key })
     : lookupDataSource;
+  const onValueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
+    cell.setValue(e.value);
+  }, [cell]);
 
   return (
     <SelectBox
       defaultValue={cell.value}
       dataSource={dataSource}
+      displayExpr="name"
+      valueExpr="id"
       onValueChanged={onValueChanged}
       inputAttr={statusLabel}
-      itemRender={itemRender} />
+      itemRender={statusItemRender} />
   );
 };
 

apps/demos/Demos/DataGrid/CustomEditors/React/EmployeeDropDownBoxComponent.tsx

@@ -11,6 +11,9 @@ import DropDownBox, { type DropDownBoxTypes } from 'devextreme-react/drop-down-b
 
 const dropDownOptions = { width: 500 };
 const ownerLabel = { 'aria-label': 'Owner' };
+const clearContextMenu = (event: DataGridTypes.ContextMenuPreparingEvent) => {
+  event.items = [];
+};
 
 const EmployeeDropDownBoxComponent = (props: DataGridTypes.ColumnCellTemplateData) => {
   const { data: { value: dataValue } } = props;
@@ -24,41 +27,36 @@ const EmployeeDropDownBoxComponent = (props: DataGridTypes.ColumnCellTemplateDat
     }
   }, []);
 
-  const contentRender = useCallback(() => {
-    const onContextMenuPreparing = (event: DataGridTypes.ContextMenuPreparingEvent) => {
-      event.items = [];
-    };
-    const onSelectionChanged = (args: DataGridTypes.SelectionChangedEvent) => {
-      setSelectedRowKeys(args.selectedRowKeys);
-      setDropDownOpened(false);
+  const onSelectionChanged = useCallback((args: DataGridTypes.SelectionChangedEvent) => {
+    setSelectedRowKeys(args.selectedRowKeys);
+    setDropDownOpened(false);
 
-      props.data.setValue(args.selectedRowKeys[0]);
-    };
+    props.data.setValue(args.selectedRowKeys[0]);
+  }, [props.data]);
 
-    return (
-      <DataGrid
-        dataSource={props.data.column.lookup.dataSource}
-        remoteOperations={true}
-        height={250}
-        selectedRowKeys={selectedRowKeys}
-        hoverStateEnabled={true}
-        onContextMenuPreparing={onContextMenuPreparing}
-        onSelectionChanged={onSelectionChanged}
-        focusedRowEnabled={true}
-        defaultFocusedRowKey={selectedRowKeys[0]}
-      >
-        <Column dataField="FullName" />
-        <Column dataField="Title" />
-        <Column dataField="Department" />
-        <Paging
-          enabled={true}
-          defaultPageSize={10}
-        />
-        <Scrolling mode="virtual" />
-        <Selection mode="single" />
-      </DataGrid>
-    );
-  }, [props.data, selectedRowKeys]);
+  const contentRender = useCallback(() => (
+    <DataGrid
+      dataSource={props.data.column.lookup.dataSource}
+      remoteOperations={true}
+      height={250}
+      selectedRowKeys={selectedRowKeys}
+      hoverStateEnabled={true}
+      onContextMenuPreparing={clearContextMenu}
+      onSelectionChanged={onSelectionChanged}
+      focusedRowEnabled={true}
+      defaultFocusedRowKey={selectedRowKeys[0]}
+    >
+      <Column dataField="FullName" />
+      <Column dataField="Title" />
+      <Column dataField="Department" />
+      <Paging
+        enabled={true}
+        defaultPageSize={10}
+      />
+      <Scrolling mode="virtual" />
+      <Selection mode="single" />
+    </DataGrid>
+  ), [props.data, onSelectionChanged, selectedRowKeys]);
 
   return (
     <DropDownBox