From 91108ed27ea980f7ae72120183fd090354906d59 Mon Sep 17 00:00:00 2001 From: Diana Gromova <16adianay@gmail.com> Date: Tue, 12 Dec 2023 19:51:49 +0400 Subject: [PATCH 1/7] WIP --- React/src/App.tsx | 87 ++++++++++++++++++++++++++++++++++++++++++---- React/src/data.tsx | 41 ++++++++++++++++++++++ 2 files changed, 121 insertions(+), 7 deletions(-) create mode 100644 React/src/data.tsx diff --git a/React/src/App.tsx b/React/src/App.tsx index 70cdc75..98de213 100644 --- a/React/src/App.tsx +++ b/React/src/App.tsx @@ -1,16 +1,89 @@ import React, { useCallback, useState } from 'react'; +import Button from 'devextreme-react/button'; import './App.css'; import 'devextreme/dist/css/dx.material.blue.light.compact.css'; -import Button from 'devextreme-react/button'; +import type { DataChange } from 'devextreme/common/grids'; +import { Row } from 'devextreme/ui/data_grid'; +import DataGrid, { + Column, Editing, PatternRule, RequiredRule, StringLengthRule, Toolbar, Item, +} from 'devextreme-react/data-grid'; +import notify from 'devextreme/ui/notify'; +import { customers } from './data'; function App(): JSX.Element { - var [count, setCount] = useState(0); - const clickHandler = useCallback(() => { - setCount((prev) => prev + 1); - }, [setCount]); + let grid = React.useRef(null); + const [changes, setChanges] = useState([]); + + const onChangesChange = useCallback((changes: DataChange[]): void => { + setChanges(changes); + }, [changes]); + + const validateVisibleRows = React.useCallback(() => { + let dataGrid: any = grid?.current?.instance; + // dataGrid.focus(); + const fakeChanges = dataGrid?.getVisibleRows().map((row: Row) => ({ type: 'update', key: row.key, data: {} })); + + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // doesn't work + setChanges([...changes, ...fakeChanges]); + // works + // dataGrid.option('editing.changes', [...changes, ...fakeChanges]); + dataGrid.repaint(); + dataGrid.getController('validating').validate(true).then((result: Boolean) => { + const message = result ? 'Validation is passed' : 'Validation is failed'; + const type = result ? 'success' : 'error'; + notify(message, type); + }); + }, []); + return ( -
-
); } diff --git a/React/src/data.tsx b/React/src/data.tsx new file mode 100644 index 0000000..e349efd --- /dev/null +++ b/React/src/data.tsx @@ -0,0 +1,41 @@ +export interface Customer { + ID: number; + + CompanyName: string; + + Address: string; + + City: string; + + State: string; + + Zipcode: number; + + Phone: string; + + Fax: string; + + Website: string; +} + +export const customers: Customer[] = [{ + ID: 1, + CompanyName: '', + Address: '702 SW 8th Street', + City: 'Bentonville', + State: 'Arkansas', + Zipcode: 72716, + Phone: '123456', + Fax: '(800) 555-2171', + Website: 'http://www.nowebsitesupermart.com', +}, { + ID: 2, + CompanyName: 'Electronics Depot', + Address: '2455 Paces Ferry Road NW', + City: 'NYC', + State: 'Georgia', + Zipcode: 30339, + Phone: '(800) 595-3232', + Fax: '(800) 595-3231', + Website: 'http://www.nowebsitedepot.com', +}]; From a5ad486834770c12806af0c241960e170dd75b33 Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Tue, 12 Dec 2023 19:55:55 +0400 Subject: [PATCH 2/7] README auto update [skip ci] --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 9687e9f..3e99775 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/723096689/23.1.3%2B) [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1202789) [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) From 34bbbd343805f62d3054490b406f5b2f1100e955 Mon Sep 17 00:00:00 2001 From: Diana Gromova <16adianay@gmail.com> Date: Fri, 15 Dec 2023 18:34:20 +0400 Subject: [PATCH 3/7] Updated TS --- React/src/App.tsx | 62 +++++++++++++++++++++++++-------------------- React/src/index.css | 4 +++ 2 files changed, 38 insertions(+), 28 deletions(-) diff --git a/React/src/App.tsx b/React/src/App.tsx index 98de213..e71c79e 100644 --- a/React/src/App.tsx +++ b/React/src/App.tsx @@ -1,44 +1,53 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import Button from 'devextreme-react/button'; import './App.css'; import 'devextreme/dist/css/dx.material.blue.light.compact.css'; import type { DataChange } from 'devextreme/common/grids'; -import { Row } from 'devextreme/ui/data_grid'; +import dxDataGrid, { Row } from 'devextreme/ui/data_grid'; import DataGrid, { Column, Editing, PatternRule, RequiredRule, StringLengthRule, Toolbar, Item, } from 'devextreme-react/data-grid'; import notify from 'devextreme/ui/notify'; import { customers } from './data'; +const pattern = /^\(\d{3}\) \d{3}-\d{4}$/i; + function App(): JSX.Element { let grid = React.useRef(null); + const [clicked, setClicked] = useState(false); const [changes, setChanges] = useState([]); - const onChangesChange = useCallback((changes: DataChange[]): void => { - setChanges(changes); + const validateVisibleRows = React.useCallback(() => { + let dataGrid: dxDataGrid | undefined = grid?.current?.instance; + const fakeChanges: DataChange[] = dataGrid + ? dataGrid.getVisibleRows().map((row: Row) => ({ type: 'update', key: row.key, data: {} })) + : []; + // alternatively, you can use the DataGrid|option method to set a new changes array + let array: DataChange[] | [] | undefined = [...changes, ...fakeChanges]; + setChanges(array); + setClicked(true); }, [changes]); - const validateVisibleRows = React.useCallback(() => { - let dataGrid: any = grid?.current?.instance; - // dataGrid.focus(); - const fakeChanges = dataGrid?.getVisibleRows().map((row: Row) => ({ type: 'update', key: row.key, data: {} })); + useEffect(() => { + if (changes.length && clicked) { + let dataGrid: dxDataGrid | undefined = grid?.current?.instance; + dataGrid?.repaint(); + // @ts-expect-error - getController is a private method + dataGrid?.getController('validating').validate(true).then((result: Boolean) => { + const message = result ? 'Validation is passed' : 'Validation is failed'; + const type = result ? 'success' : 'error'; + notify(message, type); + }); + setClicked(false); + } + }, [validateVisibleRows]); - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // doesn't work - setChanges([...changes, ...fakeChanges]); - // works - // dataGrid.option('editing.changes', [...changes, ...fakeChanges]); - dataGrid.repaint(); - dataGrid.getController('validating').validate(true).then((result: Boolean) => { - const message = result ? 'Validation is passed' : 'Validation is failed'; - const type = result ? 'success' : 'error'; - notify(message, type); - }); - }, []); + const onChangesChange = useCallback((changes: DataChange[]): void => { + setChanges(changes); + }, [validateVisibleRows]); return (
-
Top Content
@@ -67,21 +73,21 @@ function App(): JSX.Element { - - - +
diff --git a/React/src/index.css b/React/src/index.css index 496bcb2..7f5487b 100644 --- a/React/src/index.css +++ b/React/src/index.css @@ -11,3 +11,7 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } +.demo-container { + margin: 50px; + width: 90vh; +} From 9870989cdb9461360e875fe6c76f823ef429b15c Mon Sep 17 00:00:00 2001 From: Diana Gromova <16adianay@gmail.com> Date: Fri, 15 Dec 2023 18:36:25 +0400 Subject: [PATCH 4/7] Update index.css --- React/src/index.css | 1 + 1 file changed, 1 insertion(+) diff --git a/React/src/index.css b/React/src/index.css index 7f5487b..86ceedd 100644 --- a/React/src/index.css +++ b/React/src/index.css @@ -11,6 +11,7 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + .demo-container { margin: 50px; width: 90vh; From c7ec412501cf6be5fce460322a3dfd5eee2757d5 Mon Sep 17 00:00:00 2001 From: Diana Gromova <16adianay@gmail.com> Date: Fri, 15 Dec 2023 18:39:36 +0400 Subject: [PATCH 5/7] Update App.tsx --- React/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/React/src/App.tsx b/React/src/App.tsx index e71c79e..5a76b20 100644 --- a/React/src/App.tsx +++ b/React/src/App.tsx @@ -44,7 +44,7 @@ function App(): JSX.Element { const onChangesChange = useCallback((changes: DataChange[]): void => { setChanges(changes); - }, [validateVisibleRows]); + }, []); return (
From a3fb9eefa33b5e9ad71bb43497c8b25aa7babc40 Mon Sep 17 00:00:00 2001 From: Diana Gromova <16adianay@gmail.com> Date: Mon, 18 Dec 2023 19:32:33 +0400 Subject: [PATCH 6/7] Update TS --- React/src/App.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/React/src/App.tsx b/React/src/App.tsx index 5a76b20..eb84782 100644 --- a/React/src/App.tsx +++ b/React/src/App.tsx @@ -3,9 +3,8 @@ import Button from 'devextreme-react/button'; import './App.css'; import 'devextreme/dist/css/dx.material.blue.light.compact.css'; import type { DataChange } from 'devextreme/common/grids'; -import dxDataGrid, { Row } from 'devextreme/ui/data_grid'; import DataGrid, { - Column, Editing, PatternRule, RequiredRule, StringLengthRule, Toolbar, Item, + DataGridTypes, Column, Editing, PatternRule, RequiredRule, StringLengthRule, Toolbar, Item, } from 'devextreme-react/data-grid'; import notify from 'devextreme/ui/notify'; import { customers } from './data'; @@ -15,22 +14,21 @@ const pattern = /^\(\d{3}\) \d{3}-\d{4}$/i; function App(): JSX.Element { let grid = React.useRef(null); const [clicked, setClicked] = useState(false); - const [changes, setChanges] = useState([]); + const [changes, setChanges] = useState([]); const validateVisibleRows = React.useCallback(() => { - let dataGrid: dxDataGrid | undefined = grid?.current?.instance; - const fakeChanges: DataChange[] = dataGrid - ? dataGrid.getVisibleRows().map((row: Row) => ({ type: 'update', key: row.key, data: {} })) + let dataGrid = grid?.current?.instance; + const fakeChanges = dataGrid + ? dataGrid.getVisibleRows().map((row: DataGridTypes.Row): DataGridTypes.DataChange => ({ type: 'update', key: row.key, data: {} })) : []; // alternatively, you can use the DataGrid|option method to set a new changes array - let array: DataChange[] | [] | undefined = [...changes, ...fakeChanges]; - setChanges(array); + setChanges([...changes, ...fakeChanges]); setClicked(true); }, [changes]); useEffect(() => { if (changes.length && clicked) { - let dataGrid: dxDataGrid | undefined = grid?.current?.instance; + let dataGrid = grid?.current?.instance; dataGrid?.repaint(); // @ts-expect-error - getController is a private method dataGrid?.getController('validating').validate(true).then((result: Boolean) => { From 3f0bdc8e8c1163433532872243e4dce210736abc Mon Sep 17 00:00:00 2001 From: Diana Gromova <16adianay@gmail.com> Date: Mon, 18 Dec 2023 19:33:54 +0400 Subject: [PATCH 7/7] Update App.tsx --- React/src/App.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/React/src/App.tsx b/React/src/App.tsx index eb84782..3bd8168 100644 --- a/React/src/App.tsx +++ b/React/src/App.tsx @@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useState } from 'react'; import Button from 'devextreme-react/button'; import './App.css'; import 'devextreme/dist/css/dx.material.blue.light.compact.css'; -import type { DataChange } from 'devextreme/common/grids'; import DataGrid, { DataGridTypes, Column, Editing, PatternRule, RequiredRule, StringLengthRule, Toolbar, Item, } from 'devextreme-react/data-grid'; @@ -40,7 +39,7 @@ function App(): JSX.Element { } }, [validateVisibleRows]); - const onChangesChange = useCallback((changes: DataChange[]): void => { + const onChangesChange = useCallback((changes: DataGridTypes.DataChange[]): void => { setChanges(changes); }, []);