Fix: React implementation, lint, and build

Author: charlescordialDevExpress

React/orig_package.json

@@ -1,4 +1,43 @@
-.main {
+.demo-container {
   margin: 50px;
-  width: 90vw;
-}
+  width: 90vh;
+}
+
+.demo-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+#toggle-container {
+  padding-top: 20px;
+}
+
+#clean-after-drop-switch {
+  vertical-align: text-bottom;
+}
+
+#toggle-container span {
+  padding-right: 10px;
+}
+
+.drag-container {
+  padding: 10px;
+}
+
+.drag-container td {
+  padding: 0 10px;
+}
+
+.tables {
+  display: flex;
+}
+
+.column:first-child {
+  width: 50%;
+  padding-right: 15px;
+}
+
+.column:last-child {
+  width: 50%;
+  padding-left: 15px;
+}

React/src/App.css

@@ -1,16 +1,47 @@
-import { useCallback, useState } from 'react';
 import './App.css';
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import Button from 'devextreme-react/button';
+import { useCallback, useState } from 'react';
+import * as AspNetData from 'devextreme-aspnet-data-nojquery';
+import Switch from 'devextreme-react/switch';
+import { type ValueChangedEvent } from 'devextreme/ui/switch';
+import Grid from './Grid';
+
+const url = 'https://js.devexpress.com/Demos/Mvc/api/DnDBetweenGrids';
+
+const tasksStore = AspNetData.createStore({
+  key: 'ID',
+  loadUrl: `${url}/Tasks`,
+  updateUrl: `${url}/UpdateTask`,
+  onBeforeSend(_method, ajaxOptions) {
+    ajaxOptions.xhrFields = { withCredentials: true };
+  },
+});
 
 function App(): JSX.Element {
-  var [count, setCount] = useState<number>(0);
-  const clickHandler = useCallback(() => {
-    setCount((prev) => prev + 1);
-  }, [setCount]);
+  const [shouldClearSelection, setShouldClearSelection] = useState(false);
+
+  const switchValueChanged = useCallback((e: ValueChangedEvent) => {
+    setShouldClearSelection(e.value);
+  }, []);
+
   return (
-    <div className="main">
-      <Button text={`Click count: ${count}`} onClick={clickHandler} />
+    <div className="demo-container">
+      <div className="demo-header">
+        {/* eslint-disable-next-line react/no-unescaped-entities */}
+        <h3>DataGrid - Select multiple items and drag'n'drop between grids</h3>
+        <div id="toggle-container">
+          <span>Clear selection of dropped items</span>
+          <Switch id="clean-after-drop-switch" value={shouldClearSelection} onValueChanged={switchValueChanged}></Switch>
+        </div>
+      </div>
+      <div className="tables">
+        <div className="column">
+          <Grid tasksStore={tasksStore} status={1} shouldClearSelection={shouldClearSelection} />
+        </div>
+        <div className="column">
+          <Grid tasksStore={tasksStore} status={2} shouldClearSelection={shouldClearSelection} />
+        </div>
+      </div>
     </div>
   );
 }

React/src/App.tsx

@@ -1,85 +1,88 @@
-import { useState, useMemo, useCallback} from 'react';
-import DataGrid, { Column, RowDragging, Scrolling, Lookup, Selection } from 'devextreme-react/data-grid';
-import dxDataGrid, { RowDraggingStartEvent, Column as DxColumn, RowDraggingAddEvent, Row } from 'devextreme/ui/data_grid';
-import { DragTemplateData } from 'devextreme/ui/draggable';
+import { useState, useMemo, useCallback } from 'react';
+import DataGrid, {
+  Column, RowDragging, Scrolling, Lookup, Selection,
+} from 'devextreme-react/data-grid';
+import type { DataGridTypes } from 'devextreme-react/data-grid';
+import type dxDataGrid from 'devextreme/ui/data_grid';
+import type { DragTemplateData } from 'devextreme/ui/draggable';
 import CustomStore from 'devextreme/data/custom_store';
-import { Task, priorities } from './data';
+import notify from 'devextreme/ui/notify';
+import { type Task, priorities } from './data';
+
+type CellValue = Task[keyof Task] | string | undefined;
 
 interface GridDemoComponentProps {
   status?: number;
   tasksStore?: CustomStore;
   shouldClearSelection: boolean;
 }
 
-function draggedItemsRender(data: DragTemplateData) {
+function draggedItemsRender(data: DragTemplateData): JSX.Element {
   const draggedItems = data.itemData.map((item: Task, rowIndex: number) => {
-      const cellValues = (Object.keys(item) as (keyof Task)[]).map((key: keyof Task, dataIndex: number) =>
-          <td key={"key" + dataIndex}>{item[key]}</td>
-      );
-      return (<tr key={"row" + rowIndex}>{cellValues}</tr>)
+    const cellValues = (Object.keys(item) as (keyof Task)[]).map((key: keyof Task, dataIndex: number) => <td key={`key${dataIndex}`}>{item[key]}</td>);
+    return (<tr key={`row${rowIndex}`}>{cellValues}</tr>);
   });
   return (<table className="drag-container">
-      <tbody>{draggedItems}</tbody>
+    <tbody>{draggedItems}</tbody>
   </table>);
 }
 
-function getVisibleRowValues(rowsData: Task[], grid: dxDataGrid) {
-    const visibleColumns = grid.getVisibleColumns();
-    const selectedData = rowsData.map((rowData: Task) => {
-        const visibleValues: any = {};
-        visibleColumns.forEach((column: DxColumn) => {
-            if (column.dataField)
-                visibleValues[column.dataField] = getVisibleCellValue(column, rowData);
-        });
-        return visibleValues;
+function getVisibleRowValues(rowsData: Task[], grid: dxDataGrid): Record<string, CellValue>[] {
+  const visibleColumns = grid.getVisibleColumns();
+  const selectedData = rowsData.map((rowData: Task) => {
+    const visibleValues: Record<string, CellValue> = {};
+    visibleColumns.forEach((column: DataGridTypes.Column) => {
+      if (column.dataField) { visibleValues[column.dataField] = getVisibleCellValue(column, rowData); }
     });
-    return selectedData;
+    return visibleValues;
+  });
+  return selectedData;
 }
 
-function getVisibleCellValue(column: DxColumn, rowData: Task) {
-    if (column.dataField) {
-        const propKey = column.dataField as (keyof Task);
-        const cellValue = rowData[propKey];
-        return column.lookup && column.lookup.calculateCellValue ? column.lookup.calculateCellValue(cellValue) : cellValue;
-    }
+function getVisibleCellValue(column: DataGridTypes.Column, rowData: Task): CellValue {
+  if (column.dataField) {
+    const propKey = column.dataField as keyof Task;
+    const cellValue = rowData[propKey];
+    return column?.lookup?.calculateCellValue
+      ? column.lookup.calculateCellValue(cellValue) as CellValue
+      : cellValue as CellValue;
+  }
+  return undefined;
 }
 
-export default function Grid({ status, tasksStore, shouldClearSelection }: GridDemoComponentProps) {
+export default function Grid({ status, tasksStore, shouldClearSelection }: GridDemoComponentProps): JSX.Element {
   const [updateInProgress, setUpdateInProgress] = useState(false);
 
-  const filterExpr = useMemo(() => {
-    return ['Status', '=', status];
-  }, [status]);
+  const filterExpr = useMemo(() => ['Status', '=', status], [status]);
 
-  const dataSource = useMemo(() => {
-    return {
-      store: tasksStore,
-      reshapeOnPush: true,
-    };
-  }, [tasksStore]);
+  const dataSource = useMemo(() => ({
+    store: tasksStore,
+    reshapeOnPush: true,
+  }), [tasksStore]);
 
-  const canDrag = useCallback((e: RowDraggingStartEvent) => {
+  const canDrag = useCallback((e: DataGridTypes.RowDraggingStartEvent): boolean => {
     if (updateInProgress) return false;
     const visibleRows = e.component.getVisibleRows();
-    return visibleRows.some((r: Row) => r.isSelected && r.rowIndex === e.fromIndex);
+    return visibleRows.some((r: DataGridTypes.Row) => r.isSelected && r.rowIndex === e.fromIndex);
   }, [updateInProgress]);
 
-  const onDragStart = useCallback((e: RowDraggingStartEvent) => {
+  const onDragStart = useCallback((e: DataGridTypes.RowDraggingStartEvent): void => {
     const selectedData: Task[] = e.component.getSelectedRowsData();
     e.itemData = getVisibleRowValues(selectedData, e.component);
     e.cancel = !canDrag(e);
   }, [canDrag]);
 
-  const onAdd = useCallback((e: RowDraggingAddEvent) => {
+  // eslint-disable-next-line @typescript-eslint/space-before-function-paren
+  const onAdd = useCallback(async(e: DataGridTypes.RowDraggingAddEvent): Promise<void> => {
     const fromGrid = e.fromComponent as dxDataGrid;
     const toGrid = e.toComponent as dxDataGrid;
     const selectedRowKeys: (keyof Task)[] = fromGrid.getSelectedRowKeys();
     const updateProcess: (Promise<any> | undefined)[] = [];
     const changes: any[] = [];
 
     setUpdateInProgress(true);
-    fromGrid.beginCustomLoading("Loading...");
-    toGrid.beginCustomLoading("Loading...");
+    fromGrid.beginCustomLoading('Loading...');
+    toGrid.beginCustomLoading('Loading...');
     for (let key of selectedRowKeys) {
       const values = { Status: e.toData };
       updateProcess.push(tasksStore?.update(key, values));
@@ -89,17 +92,20 @@ export default function Grid({ status, tasksStore, shouldClearSelection }: GridD
         data: values,
       });
     }
-    Promise.all(updateProcess).then(() => {
+    try {
+      await Promise.all(updateProcess);
       tasksStore?.push(changes);
       fromGrid.endCustomLoading();
       toGrid.endCustomLoading();
       setUpdateInProgress(false);
 
       fromGrid.clearSelection();
       if (!shouldClearSelection) {
-        toGrid.selectRows(selectedRowKeys, true);
+        await toGrid.selectRows(selectedRowKeys, true);
       }
-    });
+    } catch (error: unknown) {
+      notify(error, 'error', 1000);
+    }
   }, [tasksStore, shouldClearSelection]);
 
   return (
@@ -112,8 +118,8 @@ export default function Grid({ status, tasksStore, shouldClearSelection }: GridD
       <RowDragging
         data={status}
         group="tasksGroup"
-        onAdd={onAdd}
-        onDragStart={onDragStart}
+        onAdd={onAdd as unknown as () => void}
+        onDragStart={onDragStart as () => void}
         dragRender={draggedItemsRender}
       />
       <Selection mode="multiple" />
@@ -138,7 +144,6 @@ export default function Grid({ status, tasksStore, shouldClearSelection }: GridD
         dataType="number"
         visible={false}
       />
-
     </DataGrid>
   );
-};
+}

React/src/Grid.tsx

@@ -0,0 +1,21 @@
+export interface Task {
+  ID?: number;
+  Priority?: number;
+  Status?: number;
+  Subject?: string;
+}
+
+interface Priority {
+  id?: number;
+  text?: string;
+}
+
+export const priorities: Priority[] = [{
+  id: 1, text: 'Low',
+}, {
+  id: 2, text: 'Normal',
+}, {
+  id: 3, text: 'High',
+}, {
+  id: 4, text: 'Urgent',
+}];