add react

Author: artem-kurchenko

React/package-lock.json

@@ -1,16 +1,106 @@
-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 DataGrid, {
+  Editing, Column, Lookup, type DataGridTypes,
+} from 'devextreme-react/data-grid';
+import './App.css';
+import ArrayStore from 'devextreme/data/array_store';
+import { DataSource } from 'devextreme-react/common/data';
+import service, { type City, type Employee } from './data';
+import MultipleDropDownBox from './components/MultipleDropDownBox';
+
+const dataSource: Employee[] = service.getEmployees();
+
+const statesStore = new ArrayStore({
+  data: service.getStates(),
+  key: 'ID',
+});
+
+const citiesStore = new ArrayStore({
+  data: service.getCities(),
+  key: 'ID',
+});
+
+function getFilteredCities(cellInfo: DataGridTypes.ColumnEditCellTemplateData<Employee, number>, citiesStore: ArrayStore): DataSource {
+  return new DataSource({
+    store: citiesStore,
+    filter: (data: City) => (cellInfo.data?.StateID && cellInfo.data?.StateID?.length > 0
+      ? cellInfo.data?.StateID.includes(data.StateID)
+      : true),
+  });
+}
+
+async function setStateValue(this: DataGridTypes.Column<Employee, number>, rowData: Employee, value: number[], currentRowData: Employee): Promise<void> {
+  rowData.CityID = [];
+  await this.defaultSetCellValue?.(rowData, value, currentRowData);
+}
+
+function arrayCellTemplate(container: HTMLElement, options: DataGridTypes.ColumnCellTemplateData<Employee, number>): void {
+  const noBreakSpace = '\u00A0';
+  const text = (options.value || [])
+    .map((element: number) => options.column.lookup?.calculateCellValue?.(element) as string || '')
+    .join(', ');
+  container.textContent = text || noBreakSpace;
+  container.title = text;
+}
+
+function renderMultipleDropDownBox(
+  currentValue: number[],
+  // eslint-disable-next-line no-unused-vars
+  setValue: (value: number[]) => void,
+  dataSource: ArrayStore | DataSource,
+): JSX.Element {
+  return (
+    <MultipleDropDownBox
+      dataSource={dataSource}
+      value={currentValue}
+      setValue={setValue}
+    />
+  );
+}
+
+function renderStateDropDownBox(e: DataGridTypes.ColumnEditCellTemplateData<Employee, number>): JSX.Element {
+  const { setValue } = e;
+  return renderMultipleDropDownBox(
+    e.value,
+    setValue,
+    statesStore,
+  );
+}
+
+function renderCityDropDownBox(e: DataGridTypes.ColumnEditCellTemplateData<Employee, number>): JSX.Element {
+  const { setValue } = e;
+  return renderMultipleDropDownBox(
+    e.value,
+    setValue,
+    getFilteredCities(e, citiesStore),
+  );
+}
 
 function App(): JSX.Element {
-  var [count, setCount] = useState<number>(0);
-  const clickHandler = useCallback(() => {
-    setCount((prev) => prev + 1);
-  }, [setCount]);
   return (
-    <div className="main">
-      <Button text={`Click count: ${count}`} onClick={clickHandler} />
+    <div className="App">
+      <DataGrid dataSource={dataSource}>
+        <Editing
+          mode="row"
+          allowUpdating={true}
+          allowAdding={true}>
+        </Editing>
+        <Column
+          dataField="StateID"
+          caption="State"
+          setCellValue={setStateValue}
+          cellTemplate={arrayCellTemplate}
+          editCellRender={renderStateDropDownBox}>
+          <Lookup dataSource={statesStore} displayExpr="Name" valueExpr="ID" />
+        </Column>
+        <Column
+          dataField="CityID"
+          caption="City"
+          cellTemplate={arrayCellTemplate}
+          editCellRender={renderCityDropDownBox}>
+          <Lookup dataSource={citiesStore} displayExpr="Name" valueExpr="ID" />
+        </Column>
+      </DataGrid>
     </div>
   );
 }

React/src/App.tsx

@@ -0,0 +1,25 @@
+import React, { useCallback } from 'react';
+import Button from 'devextreme-react/button';
+
+type DropDownBoxAction =
+  | { type: 'dropDownBoxValue'; data: number[] }
+  | { type: 'selectedKeys'; data: number[] }
+  | { type: 'openDropdown' };
+
+interface DropDownBoxSaveProps {
+  selectedKeys: number[];
+  // eslint-disable-next-line no-unused-vars
+  setCellValue: (value: number[]) => void;
+  setState: React.Dispatch<DropDownBoxAction>;
+}
+
+function DropDownBoxSave({ selectedKeys, setCellValue, setState }: DropDownBoxSaveProps): JSX.Element {
+  const onClick = useCallback(() => {
+    setState({ type: 'dropDownBoxValue', data: selectedKeys });
+    setCellValue(selectedKeys);
+  }, [selectedKeys, setCellValue, setState]);
+
+  return <Button text="Apply" onClick={onClick} />;
+}
+
+export default DropDownBoxSave;

React/src/components/DropDownBoxSave.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useMemo, useReducer } from 'react';
+import DataGrid, { Column, Selection, type DataGridTypes } from 'devextreme-react/data-grid';
+import DropDownBox from 'devextreme-react/drop-down-box';
+import type { ArrayStore, DataSource } from 'devextreme-react/common/data';
+import DropDownBoxSave from './DropDownBoxSave';
+
+interface MultipleDropDownBoxProps {
+  value: number[];
+  dataSource: DataSource | ArrayStore;
+  // eslint-disable-next-line no-unused-vars
+  setValue: (newValue: number[]) => void;
+}
+
+interface DropDownBoxState {
+  selectedKeys: number[];
+  currentValue: number[];
+  isOpened: boolean;
+}
+
+type DropDownBoxAction =
+  | { type: 'dropDownBoxValue'; data: number[] }
+  | { type: 'selectedKeys'; data: number[] }
+  | { type: 'openDropdown' };
+
+function reducer(state: DropDownBoxState, action: DropDownBoxAction): DropDownBoxState {
+  switch (action.type) {
+    case 'dropDownBoxValue':
+      return { ...state, currentValue: action.data, isOpened: false };
+    case 'selectedKeys':
+      return { ...state, selectedKeys: action.data };
+    case 'openDropdown':
+      return { ...state, isOpened: true };
+    default:
+      return state;
+  }
+}
+
+function MultipleDropDownBox({ value, dataSource, setValue }: MultipleDropDownBoxProps): JSX.Element {
+  const [{ selectedKeys, currentValue, isOpened }, dispatch] = useReducer(reducer, {
+    selectedKeys: value,
+    currentValue: value,
+    isOpened: false,
+  });
+
+  const onShowingHandler = useCallback(() => {
+    dispatch({ type: 'openDropdown' });
+  }, []);
+
+  const dropDownOpts = useMemo(() => ({
+    onShowing: onShowingHandler,
+    visible: isOpened,
+  }), [isOpened]);
+
+  const onSelectionChanged = useCallback((args: DataGridTypes.SelectionChangedEvent): void => {
+    const { selectedRowKeys } = args;
+    dispatch({ type: 'selectedKeys', data: selectedRowKeys });
+  }, []);
+
+  return (
+    <DropDownBox
+      dataSource={dataSource}
+      value={currentValue}
+      displayExpr="Name"
+      valueExpr="ID"
+      dropDownOptions={dropDownOpts}
+    >
+      <React.Fragment>
+        <DataGrid
+          dataSource={dataSource}
+          selectedRowKeys={selectedKeys}
+          hoverStateEnabled={true}
+          height={250}
+          onSelectionChanged={onSelectionChanged}
+        >
+          <Column dataField="ID" />
+          <Column dataField="Name" />
+          <Selection mode="multiple" />
+        </DataGrid>
+        <DropDownBoxSave
+          selectedKeys={selectedKeys}
+          setCellValue={setValue}
+          setState={dispatch}
+        />
+      </React.Fragment>
+    </DropDownBox>
+  );
+}
+
+export default MultipleDropDownBox;