diff --git a/JSDemos/Demos/Diagram/Adaptability/React/App.js b/JSDemos/Demos/Diagram/Adaptability/React/App.tsx similarity index 92% rename from JSDemos/Demos/Diagram/Adaptability/React/App.js rename to JSDemos/Demos/Diagram/Adaptability/React/App.tsx index 9ce264363ec..093fcec7905 100644 --- a/JSDemos/Demos/Diagram/Adaptability/React/App.js +++ b/JSDemos/Demos/Diagram/Adaptability/React/App.tsx @@ -3,7 +3,7 @@ import Diagram from 'devextreme-react/diagram'; import 'whatwg-fetch'; export default function App() { - const diagramRef = React.useRef(); + const diagramRef = React.useRef(); React.useEffect(() => { const diagram = diagramRef.current.instance; diff --git a/JSDemos/Demos/Diagram/Adaptability/React/index.html b/JSDemos/Demos/Diagram/Adaptability/React/index.html index c72af8e251a..1f6c30439c4 100644 --- a/JSDemos/Demos/Diagram/Adaptability/React/index.html +++ b/JSDemos/Demos/Diagram/Adaptability/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/Containers/React/index.js b/JSDemos/Demos/Diagram/Adaptability/React/index.tsx similarity index 81% rename from JSDemos/Demos/Diagram/Containers/React/index.js rename to JSDemos/Demos/Diagram/Adaptability/React/index.tsx index d9d7442ce76..8acbec4b617 100644 --- a/JSDemos/Demos/Diagram/Containers/React/index.js +++ b/JSDemos/Demos/Diagram/Adaptability/React/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.tsx'; ReactDOM.render( , diff --git a/JSDemos/Demos/Diagram/Adaptability/ReactJs/App.js b/JSDemos/Demos/Diagram/Adaptability/ReactJs/App.js new file mode 100644 index 00000000000..d3708aeb251 --- /dev/null +++ b/JSDemos/Demos/Diagram/Adaptability/ReactJs/App.js @@ -0,0 +1,25 @@ +import React from 'react'; +import Diagram from 'devextreme-react/diagram'; +import 'whatwg-fetch'; + +export default function App() { + const diagramRef = React.useRef(); + React.useEffect(() => { + const diagram = diagramRef.current.instance; + fetch('../../../../data/diagram-flow.json') + .then((response) => response.json()) + .then((json) => { + diagram.import(JSON.stringify(json)); + }) + .catch(() => { + throw new Error('Data Loading Error'); + }); + }, []); + return ( + + ); +} diff --git a/JSDemos/Demos/Diagram/Adaptability/ReactJs/index.html b/JSDemos/Demos/Diagram/Adaptability/ReactJs/index.html new file mode 100644 index 00000000000..61c6c618d41 --- /dev/null +++ b/JSDemos/Demos/Diagram/Adaptability/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/Adaptability/ReactJs/index.js b/JSDemos/Demos/Diagram/Adaptability/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/Adaptability/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/Adaptability/ReactJs/styles.css b/JSDemos/Demos/Diagram/Adaptability/ReactJs/styles.css new file mode 100644 index 00000000000..ea16a2c6a37 --- /dev/null +++ b/JSDemos/Demos/Diagram/Adaptability/ReactJs/styles.css @@ -0,0 +1,5 @@ +.demo-container, +#app, +#diagram { + height: 100%; +} diff --git a/JSDemos/Demos/Diagram/AdvancedDataBinding/React/App.js b/JSDemos/Demos/Diagram/AdvancedDataBinding/React/App.tsx similarity index 81% rename from JSDemos/Demos/Diagram/AdvancedDataBinding/React/App.js rename to JSDemos/Demos/Diagram/AdvancedDataBinding/React/App.tsx index edfaa6dbe49..d5041b27eac 100644 --- a/JSDemos/Demos/Diagram/AdvancedDataBinding/React/App.js +++ b/JSDemos/Demos/Diagram/AdvancedDataBinding/React/App.tsx @@ -3,7 +3,7 @@ import Diagram, { Nodes, AutoLayout, Edges, Toolbox, Group, } from 'devextreme-react/diagram'; import ArrayStore from 'devextreme/data/array_store'; -import service from './data.js'; +import service from './data.ts'; const orgItemsDataSource = new ArrayStore({ key: 'id', @@ -14,7 +14,7 @@ const orgLinksDataSource = new ArrayStore({ data: service.getOrgLinks(), }); -function itemTypeExpr(obj, value) { +function itemTypeExpr(obj: { type: string; }, value: string) { if (value) { obj.type = (value === 'rectangle') ? undefined : 'group'; } else { @@ -23,7 +23,7 @@ function itemTypeExpr(obj, value) { return null; } -function itemWidthExpr(obj, value) { +function itemWidthExpr(obj: { width: number; type: string; }, value) { if (value) { obj.width = value; } else { @@ -32,7 +32,7 @@ function itemWidthExpr(obj, value) { return null; } -function itemHeightExpr(obj, value) { +function itemHeightExpr(obj: { height: number; type: string; }, value) { if (value) { obj.height = value; } else { @@ -41,15 +41,15 @@ function itemHeightExpr(obj, value) { return null; } -function itemTextStyleExpr(obj) { +function itemTextStyleExpr(obj: { level: string; }) { if (obj.level === 'senior') { return { 'font-weight': 'bold', 'text-decoration': 'underline' }; } return {}; } -function itemStyleExpr(obj) { - const style = { stroke: '#444444' }; +function itemStyleExpr(obj: { type: string; }) { + const style: React.CSSProperties = { stroke: '#444444' }; if (obj.type === 'group') { style.fill = '#f3f3f3'; } diff --git a/JSDemos/Demos/Diagram/AdvancedDataBinding/React/data.js b/JSDemos/Demos/Diagram/AdvancedDataBinding/React/data.ts similarity index 100% rename from JSDemos/Demos/Diagram/AdvancedDataBinding/React/data.js rename to JSDemos/Demos/Diagram/AdvancedDataBinding/React/data.ts diff --git a/JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.html b/JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.html +++ b/JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/Adaptability/React/index.js b/JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.tsx similarity index 81% rename from JSDemos/Demos/Diagram/Adaptability/React/index.js rename to JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.tsx index d9d7442ce76..8acbec4b617 100644 --- a/JSDemos/Demos/Diagram/Adaptability/React/index.js +++ b/JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.tsx'; ReactDOM.render( , diff --git a/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/App.js b/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/App.js new file mode 100644 index 00000000000..62e72019cf0 --- /dev/null +++ b/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/App.js @@ -0,0 +1,93 @@ +import React from 'react'; +import Diagram, { + Nodes, AutoLayout, Edges, Toolbox, Group, +} from 'devextreme-react/diagram'; +import ArrayStore from 'devextreme/data/array_store'; +import service from './data.js'; + +const orgItemsDataSource = new ArrayStore({ + key: 'id', + data: service.getOrgItems(), +}); +const orgLinksDataSource = new ArrayStore({ + key: 'id', + data: service.getOrgLinks(), +}); +function itemTypeExpr(obj, value) { + if (value) { + obj.type = value === 'rectangle' ? undefined : 'group'; + } else { + return obj.type === 'group' ? 'ellipse' : 'rectangle'; + } + return null; +} +function itemWidthExpr(obj, value) { + if (value) { + obj.width = value; + } else { + return obj.width || (obj.type === 'group' && 1.5) || 1; + } + return null; +} +function itemHeightExpr(obj, value) { + if (value) { + obj.height = value; + } else { + return obj.height || (obj.type === 'group' && 1) || 0.75; + } + return null; +} +function itemTextStyleExpr(obj) { + if (obj.level === 'senior') { + return { 'font-weight': 'bold', 'text-decoration': 'underline' }; + } + return {}; +} +function itemStyleExpr(obj) { + const style = { stroke: '#444444' }; + if (obj.type === 'group') { + style.fill = '#f3f3f3'; + } + return style; +} +function linkStyleExpr() { + return { stroke: '#444444' }; +} +function linkFromLineEndExpr() { + return 'none'; +} +function linkToLineEndExpr() { + return 'none'; +} +export default function App() { + return ( + + + + + + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/data.js b/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/data.js new file mode 100644 index 00000000000..b8348339afb --- /dev/null +++ b/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/data.js @@ -0,0 +1,132 @@ +const orgItems = [ + { + id: '106', + name: 'Development', + type: 'group', + }, + { + id: '107', + name: 'WinForms\nTeam', + type: 'group', + }, + { + id: '108', + name: 'WPF\nTeam', + type: 'group', + }, + { + id: '109', + name: 'Javascript\nTeam', + type: 'group', + }, + { + id: '110', + name: 'ASP.NET\nTeam', + type: 'group', + }, + { + id: '112', + name: 'Ana\nTrujillo', + level: 'senior', + }, + { + id: '113', + name: 'Antonio\nMoreno', + }, + { + id: '115', + name: 'Christina\nBerglund', + }, + { + id: '116', + name: 'Hanna\nMoos', + }, + { + id: '119', + name: 'Laurence\nLebihan', + }, + { + id: '120', + name: 'Elizabeth\nLincoln', + level: 'senior', + }, + { + id: '122', + name: 'Patricio\nSimpson', + level: 'senior', + }, + { + id: '123', + name: 'Francisco\nChang', + }, +]; +const orgLinks = [ + { + id: '124', + from: '106', + to: '108', + }, + { + id: '125', + from: '106', + to: '109', + }, + { + id: '126', + from: '106', + to: '107', + }, + { + id: '127', + from: '106', + to: '110', + }, + { + id: '129', + from: '110', + to: '112', + }, + { + id: '130', + from: '110', + to: '113', + }, + { + id: '132', + from: '107', + to: '115', + }, + { + id: '133', + from: '107', + to: '116', + }, + { + id: '136', + from: '108', + to: '119', + }, + { + id: '137', + from: '108', + to: '120', + }, + { + id: '139', + from: '109', + to: '122', + }, + { + id: '140', + from: '109', + to: '123', + }, +]; +export default { + getOrgItems() { + return orgItems; + }, + getOrgLinks() { + return orgLinks; + }, +}; diff --git a/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/index.html b/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/index.js b/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/styles.css b/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/styles.css new file mode 100644 index 00000000000..1eefae9372a --- /dev/null +++ b/JSDemos/Demos/Diagram/AdvancedDataBinding/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 900px; +} diff --git a/JSDemos/Demos/Diagram/Containers/React/App.js b/JSDemos/Demos/Diagram/Containers/React/App.tsx similarity index 94% rename from JSDemos/Demos/Diagram/Containers/React/App.js rename to JSDemos/Demos/Diagram/Containers/React/App.tsx index 10e52b4da2f..aec5f8420aa 100644 --- a/JSDemos/Demos/Diagram/Containers/React/App.js +++ b/JSDemos/Demos/Diagram/Containers/React/App.tsx @@ -3,7 +3,7 @@ import Diagram, { Group, Toolbox } from 'devextreme-react/diagram'; import 'whatwg-fetch'; export default function App() { - const diagramRef = React.useRef(); + const diagramRef = React.useRef(); React.useEffect(() => { const diagram = diagramRef.current.instance; diff --git a/JSDemos/Demos/Diagram/Containers/React/index.html b/JSDemos/Demos/Diagram/Containers/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/Containers/React/index.html +++ b/JSDemos/Demos/Diagram/Containers/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/index.js b/JSDemos/Demos/Diagram/Containers/React/index.tsx similarity index 81% rename from JSDemos/Demos/Diagram/CustomShapesWithIcons/React/index.js rename to JSDemos/Demos/Diagram/Containers/React/index.tsx index d9d7442ce76..8acbec4b617 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/index.js +++ b/JSDemos/Demos/Diagram/Containers/React/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.tsx'; ReactDOM.render( , diff --git a/JSDemos/Demos/Diagram/Containers/ReactJs/App.js b/JSDemos/Demos/Diagram/Containers/ReactJs/App.js new file mode 100644 index 00000000000..dce048393ff --- /dev/null +++ b/JSDemos/Demos/Diagram/Containers/ReactJs/App.js @@ -0,0 +1,36 @@ +import React from 'react'; +import Diagram, { Group, Toolbox } from 'devextreme-react/diagram'; +import 'whatwg-fetch'; + +export default function App() { + const diagramRef = React.useRef(); + React.useEffect(() => { + const diagram = diagramRef.current.instance; + fetch('../../../../data/diagram-structure.json') + .then((response) => response.json()) + .then((json) => { + diagram.import(JSON.stringify(json)); + }) + .catch(() => { + throw new Error('Data Loading Error'); + }); + }, []); + return ( + + + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/Containers/ReactJs/index.html b/JSDemos/Demos/Diagram/Containers/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/Containers/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/Containers/ReactJs/index.js b/JSDemos/Demos/Diagram/Containers/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/Containers/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/Containers/ReactJs/styles.css b/JSDemos/Demos/Diagram/Containers/ReactJs/styles.css new file mode 100644 index 00000000000..ef449a83d9d --- /dev/null +++ b/JSDemos/Demos/Diagram/Containers/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 725px; +} diff --git a/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/App.js b/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/App.tsx similarity index 97% rename from JSDemos/Demos/Diagram/CustomShapesWithIcons/React/App.js rename to JSDemos/Demos/Diagram/CustomShapesWithIcons/React/App.tsx index b00deb2d9d5..1d8dae3ba7a 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/App.js +++ b/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/App.tsx @@ -5,14 +5,14 @@ import Diagram, { import 'whatwg-fetch'; export default function App() { - const diagramRef = React.useRef(null); + const diagramRef = React.useRef(null); React.useEffect(() => { - const diagram = diagramRef.current.instance; + const diagram = diagramRef.current?.instance; fetch('../../../../data/diagram-hardware.json') .then((response) => response.json()) .then((json) => { - diagram.import(JSON.stringify(json)); + diagram?.import(JSON.stringify(json)); }) .catch(() => { throw new Error('Data Loading Error'); @@ -260,7 +260,7 @@ export default function App() { - + ); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/index.html b/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/index.html +++ b/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.js b/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/index.tsx similarity index 81% rename from JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.js rename to JSDemos/Demos/Diagram/CustomShapesWithIcons/React/index.tsx index d9d7442ce76..8acbec4b617 100644 --- a/JSDemos/Demos/Diagram/AdvancedDataBinding/React/index.js +++ b/JSDemos/Demos/Diagram/CustomShapesWithIcons/React/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.tsx'; ReactDOM.render( , diff --git a/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/App.js b/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/App.js new file mode 100644 index 00000000000..8b881505851 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/App.js @@ -0,0 +1,401 @@ +import React from 'react'; +import Diagram, { + CustomShape, ConnectionPoint, Group, Toolbox, +} from 'devextreme-react/diagram'; +import 'whatwg-fetch'; + +export default function App() { + const diagramRef = React.useRef(null); + React.useEffect(() => { + const diagram = diagramRef.current?.instance; + fetch('../../../../data/diagram-hardware.json') + .then((response) => response.json()) + .then((json) => { + diagram?.import(JSON.stringify(json)); + }) + .catch(() => { + throw new Error('Data Loading Error'); + }); + }, []); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/index.html b/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/index.js b/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/styles.css b/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/styles.css new file mode 100644 index 00000000000..1eefae9372a --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithIcons/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 900px; +} diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/App.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx similarity index 89% rename from JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/App.js rename to JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx index 959e1b639b7..c7f02f19097 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/App.js +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx @@ -2,8 +2,8 @@ import React from 'react'; import Diagram, { CustomShape, Nodes, AutoLayout } from 'devextreme-react/diagram'; import { Popup } from 'devextreme-react/popup'; import ArrayStore from 'devextreme/data/array_store'; -import CustomShapeTemplate from './CustomShapeTemplate.js'; -import service from './data.js'; +import CustomShapeTemplate from './CustomShapeTemplate.tsx'; +import service, { Employee as EmployeeType } from './data.ts'; const employees = service.getEmployees(); const dataSource = new ArrayStore({ @@ -11,17 +11,14 @@ const dataSource = new ArrayStore({ data: employees, }); -function itemTypeExpr(obj) { +function itemTypeExpr(obj: { ID: number; }) { return `employee${obj.ID}`; } export default function App() { - const [currentEmployee, setCurrentEmployee] = React.useState({}); + const [currentEmployee, setCurrentEmployee] = React.useState>({}); const [popupVisible, setPopupVisible] = React.useState(false); - const customShapeTemplate = React.useCallback((item) => (CustomShapeTemplate(item.dataItem, - () => { showInfo(item.dataItem); })), [showInfo]); - const showInfo = React.useCallback((employee) => { setCurrentEmployee(employee); setPopupVisible(true); @@ -32,6 +29,9 @@ export default function App() { setPopupVisible(false); }, [setCurrentEmployee, setPopupVisible]); + const customShapeTemplate = React.useCallback((item) => (CustomShapeTemplate(item.dataItem, + () => { showInfo(item.dataItem); })), [showInfo]); + return (
diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/CustomShapeTemplate.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/CustomShapeTemplate.tsx similarity index 100% rename from JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/CustomShapeTemplate.js rename to JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/CustomShapeTemplate.tsx diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/data.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/data.ts similarity index 96% rename from JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/data.js rename to JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/data.ts index 41c705d20a0..82911a7bf60 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/data.js +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/data.ts @@ -1,4 +1,18 @@ -const employees = [{ +export interface Employee { + ID: number, + Head_ID: number, + Full_Name: string, + Prefix: string, + Title: string, + City: string, + State: string, + Email: string, + Skype: string, + Mobile_Phone: string, + Birth_Date: string, + Hire_Date: string, +} +const employees: Employee[] = [{ ID: 1, Head_ID: 0, Full_Name: 'John Heart', diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/index.html b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/index.html +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/index.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/index.tsx b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js new file mode 100644 index 00000000000..f109cfe274b --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/App.js @@ -0,0 +1,98 @@ +import React from 'react'; +import Diagram, { CustomShape, Nodes, AutoLayout } from 'devextreme-react/diagram'; +import { Popup } from 'devextreme-react/popup'; +import ArrayStore from 'devextreme/data/array_store'; +import CustomShapeTemplate from './CustomShapeTemplate.js'; +import service from './data.js'; + +const employees = service.getEmployees(); +const dataSource = new ArrayStore({ + key: 'ID', + data: employees, +}); +function itemTypeExpr(obj) { + return `employee${obj.ID}`; +} +export default function App() { + const [currentEmployee, setCurrentEmployee] = React.useState({}); + const [popupVisible, setPopupVisible] = React.useState(false); + const showInfo = React.useCallback( + (employee) => { + setCurrentEmployee(employee); + setPopupVisible(true); + }, + [setCurrentEmployee, setPopupVisible], + ); + const hideInfo = React.useCallback(() => { + setCurrentEmployee({}); + setPopupVisible(false); + }, [setCurrentEmployee, setPopupVisible]); + const customShapeTemplate = React.useCallback( + (item) => + CustomShapeTemplate(item.dataItem, () => { + showInfo(item.dataItem); + }), + [showInfo], + ); + return ( +
+ + {employees.map((employee, index) => ( + + ))} + + + + + +

+ Full Name: {currentEmployee.Full_Name} +

+

+ Title: {currentEmployee.Title} +

+

+ City: {currentEmployee.City} +

+

+ State: {currentEmployee.State} +

+

+ Email: {currentEmployee.Email} +

+

+ Skype: {currentEmployee.Skype} +

+

+ Mobile Phone: {currentEmployee.Mobile_Phone} +

+ +
+ ); +} diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/CustomShapeTemplate.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/CustomShapeTemplate.js new file mode 100644 index 00000000000..1d639c52cf0 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/CustomShapeTemplate.js @@ -0,0 +1,30 @@ +import React from 'react'; + +export default function CustomShapeTemplate(employee, showInfo) { + return ( + + + {employee.Full_Name} + + + {employee.Title} + + + Show Details + + + ); +} diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/data.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/data.js new file mode 100644 index 00000000000..25cd3e039fb --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/data.js @@ -0,0 +1,371 @@ +const employees = [ + { + ID: 1, + Head_ID: 0, + Full_Name: 'John Heart', + Prefix: 'Mr.', + Title: 'CEO', + City: 'Los Angeles', + State: 'California', + Email: 'jheart@dx-email.com', + Skype: 'jheart_DX_skype', + Mobile_Phone: '(213) 555-9392', + Birth_Date: '1964-03-16', + Hire_Date: '1995-01-15', + }, + { + ID: 2, + Head_ID: 1, + Full_Name: 'Samantha Bright', + Prefix: 'Dr.', + Title: 'COO', + City: 'Los Angeles', + State: 'California', + Email: 'samanthab@dx-email.com', + Skype: 'samanthab_DX_skype', + Mobile_Phone: '(213) 555-2858', + Birth_Date: '1966-05-02', + Hire_Date: '2004-05-24', + }, + { + ID: 3, + Head_ID: 1, + Full_Name: 'Arthur Miller', + Prefix: 'Mr.', + Title: 'CTO', + City: 'Denver', + State: 'Colorado', + Email: 'arthurm@dx-email.com', + Skype: 'arthurm_DX_skype', + Mobile_Phone: '(310) 555-8583', + Birth_Date: '1972-07-11', + Hire_Date: '2007-12-18', + }, + { + ID: 4, + Head_ID: 1, + Full_Name: 'Robert Reagan', + Prefix: 'Mr.', + Title: 'CMO', + City: 'Bentonville', + State: 'Arkansas', + Email: 'robertr@dx-email.com', + Skype: 'robertr_DX_skype', + Mobile_Phone: '(818) 555-2387', + Birth_Date: '1974-09-07', + Hire_Date: '2002-11-08', + }, + { + ID: 5, + Head_ID: 1, + Full_Name: 'Greta Sims', + Prefix: 'Ms.', + Title: 'HR Manager', + City: 'Atlanta', + State: 'Georgia', + Email: 'gretas@dx-email.com', + Skype: 'gretas_DX_skype', + Mobile_Phone: '(818) 555-6546', + Birth_Date: '1977-11-22', + Hire_Date: '1998-04-23', + }, + { + ID: 6, + Head_ID: 3, + Full_Name: 'Brett Wade', + Prefix: 'Mr.', + Title: 'IT Manager', + City: 'Reno', + State: 'Nevada', + Email: 'brettw@dx-email.com', + Skype: 'brettw_DX_skype', + Mobile_Phone: '(626) 555-0358', + Birth_Date: '1968-12-01', + Hire_Date: '2009-03-06', + }, + { + ID: 7, + Head_ID: 5, + Full_Name: 'Sandra Johnson', + Prefix: 'Mrs.', + Title: 'Controller', + City: 'Beaver', + State: 'Utah', + Email: 'sandraj@dx-email.com', + Skype: 'sandraj_DX_skype', + Mobile_Phone: '(562) 555-2082', + Birth_Date: '1974-11-15', + Hire_Date: '2005-05-11', + }, + { + ID: 8, + Head_ID: 4, + Full_Name: 'Ed Holmes', + Prefix: 'Dr.', + Title: 'Sales Manager', + City: 'Malibu', + State: 'California', + Email: 'edwardh@dx-email.com', + Skype: 'edwardh_DX_skype', + Mobile_Phone: '(310) 555-1288', + Birth_Date: '1973-07-14', + Hire_Date: '2005-06-19', + }, + { + ID: 9, + Head_ID: 3, + Full_Name: 'Barb Banks', + Prefix: 'Mrs.', + Title: 'Support Manager', + City: 'Phoenix', + State: 'Arizona', + Email: 'barbarab@dx-email.com', + Skype: 'barbarab_DX_skype', + Mobile_Phone: '(310) 555-3355', + Birth_Date: '1979-04-14', + Hire_Date: '2002-08-07', + }, + { + ID: 10, + Head_ID: 2, + Full_Name: 'Kevin Carter', + Prefix: 'Mr.', + Title: 'Shipping Manager', + City: 'San Diego', + State: 'California', + Email: 'kevinc@dx-email.com', + Skype: 'kevinc_DX_skype', + Mobile_Phone: '(213) 555-2840', + Birth_Date: '1978-01-09', + Hire_Date: '2009-08-11', + }, + { + ID: 11, + Head_ID: 5, + Full_Name: 'Cindy Stanwick', + Prefix: 'Ms.', + Title: 'HR Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'cindys@dx-email.com', + Skype: 'cindys_DX_skype', + Mobile_Phone: '(818) 555-6655', + Birth_Date: '1985-06-05', + Hire_Date: '2008-03-24', + }, + { + ID: 12, + Head_ID: 8, + Full_Name: 'Sammy Hill', + Prefix: 'Mr.', + Title: 'Sales Assistant', + City: 'Pasadena', + State: 'California', + Email: 'sammyh@dx-email.com', + Skype: 'sammyh_DX_skype', + Mobile_Phone: '(626) 555-7292', + Birth_Date: '1984-02-17', + Hire_Date: '2012-02-01', + }, + { + ID: 13, + Head_ID: 10, + Full_Name: 'Davey Jones', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Pasadena', + State: 'California', + Email: 'davidj@dx-email.com', + Skype: 'davidj_DX_skype', + Mobile_Phone: '(626) 555-0281', + Birth_Date: '1983-03-06', + Hire_Date: '2011-04-24', + }, + { + ID: 14, + Head_ID: 10, + Full_Name: 'Victor Norris', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'victorn@dx-email.com', + Skype: 'victorn_DX_skype', + Mobile_Phone: '(213) 555-9278', + Birth_Date: '1986-07-23', + Hire_Date: '2012-07-23', + }, + { + ID: 15, + Head_ID: 10, + Full_Name: 'Mary Stern', + Prefix: 'Ms.', + Title: 'Shipping Assistant', + City: 'Beaver', + State: 'Utah', + Email: 'marys@dx-email.com', + Skype: 'marys_DX_skype', + Mobile_Phone: '(818) 555-7857', + Birth_Date: '1982-04-08', + Hire_Date: '2012-08-12', + }, + { + ID: 16, + Head_ID: 10, + Full_Name: 'Robin Cosworth', + Prefix: 'Mrs.', + Title: 'Shipping Assistant', + City: 'Los Angeles', + State: 'California', + Email: 'robinc@dx-email.com', + Skype: 'robinc_DX_skype', + Mobile_Phone: '(818) 555-0942', + Birth_Date: '1981-06-12', + Hire_Date: '2012-09-01', + }, + { + ID: 17, + Head_ID: 9, + Full_Name: 'Kelly Rodriguez', + Prefix: 'Ms.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'kellyr@dx-email.com', + Skype: 'kellyr_DX_skype', + Mobile_Phone: '(818) 555-9248', + Birth_Date: '1988-05-11', + Hire_Date: '2012-10-13', + }, + { + ID: 18, + Head_ID: 9, + Full_Name: 'James Anderson', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'jamesa@dx-email.com', + Skype: 'jamesa_DX_skype', + Mobile_Phone: '(323) 555-4702', + Birth_Date: '1987-01-29', + Hire_Date: '2012-10-18', + }, + { + ID: 19, + Head_ID: 9, + Full_Name: 'Antony Remmen', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'anthonyr@dx-email.com', + Skype: 'anthonyr_DX_skype', + Mobile_Phone: '(310) 555-6625', + Birth_Date: '1986-02-19', + Hire_Date: '2013-01-19', + }, + { + ID: 20, + Head_ID: 8, + Full_Name: 'Olivia Peyton', + Prefix: 'Mrs.', + Title: 'Sales Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'oliviap@dx-email.com', + Skype: 'oliviap_DX_skype', + Mobile_Phone: '(310) 555-2728', + Birth_Date: '1981-06-03', + Hire_Date: '2012-05-14', + }, + { + ID: 21, + Head_ID: 6, + Full_Name: 'Taylor Riley', + Prefix: 'Mr.', + Title: 'Network Admin', + City: 'San Jose', + State: 'California', + Email: 'taylorr@dx-email.com', + Skype: 'taylorr_DX_skype', + Mobile_Phone: '(310) 555-7276', + Birth_Date: '1982-08-14', + Hire_Date: '2012-04-14', + }, + { + ID: 22, + Head_ID: 6, + Full_Name: 'Amelia Harper', + Prefix: 'Mrs.', + Title: 'Network Admin', + City: 'Los Angeles', + State: 'California', + Email: 'ameliah@dx-email.com', + Skype: 'ameliah_DX_skype', + Mobile_Phone: '(213) 555-4276', + Birth_Date: '1983-11-19', + Hire_Date: '2011-02-10', + }, + { + ID: 23, + Head_ID: 6, + Full_Name: 'Wally Hobbs', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'Chatsworth', + State: 'California', + Email: 'wallyh@dx-email.com', + Skype: 'wallyh_DX_skype', + Mobile_Phone: '(818) 555-8872', + Birth_Date: '1984-12-24', + Hire_Date: '2011-02-17', + }, + { + ID: 24, + Head_ID: 6, + Full_Name: 'Brad Jameson', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'San Fernando', + State: 'California', + Email: 'bradleyj@dx-email.com', + Skype: 'bradleyj_DX_skype', + Mobile_Phone: '(818) 555-4646', + Birth_Date: '1988-10-12', + Hire_Date: '2011-03-02', + }, + { + ID: 25, + Head_ID: 6, + Full_Name: 'Karen Goodson', + Prefix: 'Miss', + Title: 'Programmer', + City: 'South Pasadena', + State: 'California', + Email: 'kareng@dx-email.com', + Skype: 'kareng_DX_skype', + Mobile_Phone: '(626) 555-0908', + Birth_Date: '1987-04-26', + Hire_Date: '2011-03-14', + }, + { + ID: 26, + Head_ID: 5, + Full_Name: 'Marcus Orbison', + Prefix: 'Mr.', + Title: 'Travel Coordinator', + City: 'Los Angeles', + State: 'California', + Email: 'marcuso@dx-email.com', + Skype: 'marcuso_DX_skype', + Mobile_Phone: '(213) 555-7098', + Birth_Date: '1982-03-02', + Hire_Date: '2005-05-19', + }, +]; +export default { + getEmployees() { + return employees; + }, +}; diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/index.html b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/index.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css new file mode 100644 index 00000000000..19c663799ca --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplates/ReactJs/styles.css @@ -0,0 +1,26 @@ +#diagram { + height: 725px; +} + +#diagram .template .template-name { + font-weight: bold; + text-decoration: underline; +} + +#diagram .template .template-title { + font-style: italic; +} + +#diagram .template .template-button { + cursor: pointer; + font-size: 8pt; + fill: navy; +} + +#diagram .template .template-button:hover { + text-decoration: underline; +} + +.dx-popup-content p { + margin: 0 0 10px; +} diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx similarity index 66% rename from JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.js rename to JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx index 3fb736ec0bd..e9c5d62f44a 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.js +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx @@ -1,14 +1,14 @@ import React from 'react'; import Diagram, { - CustomShape, ContextToolbox, PropertiesPanel, Group, Tab, Toolbox, Nodes, AutoLayout, + CustomShape, ContextToolbox, PropertiesPanel, Group, Tab, Toolbox, Nodes, AutoLayout, DiagramTypes, } from 'devextreme-react/diagram'; import { Popup } from 'devextreme-react/popup'; import TextBox from 'devextreme-react/text-box'; import Button from 'devextreme-react/button'; import ArrayStore from 'devextreme/data/array_store'; -import CustomShapeTemplate from './CustomShapeTemplate.js'; -import CustomShapeToolboxTemplate from './CustomShapeToolboxTemplate.js'; -import service from './data.js'; +import CustomShapeTemplate from './CustomShapeTemplate.tsx'; +import CustomShapeToolboxTemplate from './CustomShapeToolboxTemplate.tsx'; +import service, { Employee } from './data.ts'; const pageCommands = ['pageSize', 'pageOrientation', 'pageColor']; @@ -33,9 +33,9 @@ const dataSource = new ArrayStore({ Title: values.Title || "Employee's Title", }); }, -}); +} as any); -function onRequestLayoutUpdate(e) { +function onRequestLayoutUpdate(e: DiagramTypes.RequestLayoutUpdateEvent) { for (let i = 0; i < e.changes.length; i += 1) { if (e.changes[i].type === 'remove') { e.allowed = true; @@ -45,7 +45,7 @@ function onRequestLayoutUpdate(e) { } } -function deleteEmployee(employee) { +function deleteEmployee(employee: Employee) { dataSource.push([{ type: 'remove', key: employee.ID }]); } @@ -53,7 +53,7 @@ function itemTypeExpr() { return 'employee'; } -function itemCustomDataExpr(obj, value) { +function itemCustomDataExpr(obj: Employee, value: Employee) { if (value === undefined) { return { Full_Name: obj.Full_Name, @@ -78,17 +78,10 @@ function itemCustomDataExpr(obj, value) { } export default function App() { - const [currentEmployee, setCurrentEmployee] = React.useState({}); + const [currentEmployee, setCurrentEmployee] = React.useState>({}); const [popupVisible, setPopupVisible] = React.useState(false); - const diagramRef = React.useRef(null); - - const customShapeTemplate = React.useCallback((item) => (CustomShapeTemplate(item.dataItem, - () => { editEmployee(item.dataItem); }, - () => { deleteEmployee(item.dataItem); }) - ), [editEmployee, deleteEmployee]); - - const customShapeToolboxTemplate = React.useCallback(() => CustomShapeToolboxTemplate(), []); + const diagramRef = React.useRef(null); const editEmployee = React.useCallback((employee) => { setCurrentEmployee({ ...employee }); @@ -113,6 +106,13 @@ export default function App() { setPopupVisible(false); }, [currentEmployee, setCurrentEmployee, setPopupVisible]); + const customShapeTemplate = React.useCallback((item) => (CustomShapeTemplate(item.dataItem, + () => { editEmployee(item.dataItem); }, + () => { deleteEmployee(item.dataItem); }) + ), [editEmployee]); + + const customShapeToolboxTemplate = React.useCallback(() => CustomShapeToolboxTemplate(), []); + const cancelEditEmployee = React.useCallback(() => { setCurrentEmployee({}); setPopupVisible(false); @@ -125,31 +125,31 @@ export default function App() { })); }, [setCurrentEmployee]); - const handleNameChange = React.useCallback((e) => { + const handleNameChange = React.useCallback((e: { value: any; }) => { handleChange('Full_Name', e.value); }, [handleChange]); - const handleTitleChange = React.useCallback((e) => { + const handleTitleChange = React.useCallback((e: { value: any; }) => { handleChange('Title', e.value); }, [handleChange]); - const handleCityChange = React.useCallback((e) => { + const handleCityChange = React.useCallback((e: { value: any; }) => { handleChange('City', e.value); }, [handleChange]); - const handleStateChange = React.useCallback((e) => { + const handleStateChange = React.useCallback((e: { value: any; }) => { handleChange('State', e.value); }, [handleChange]); - const handleEmailChange = React.useCallback((e) => { + const handleEmailChange = React.useCallback((e: { value: any; }) => { handleChange('Email', e.value); }, [handleChange]); - const handleSkypeChange = React.useCallback((e) => { + const handleSkypeChange = React.useCallback((e: { value: any; }) => { handleChange('Skype', e.value); }, [handleChange]); - const handlePhoneChange = React.useCallback((e) => { + const handlePhoneChange = React.useCallback((e: { value: any; }) => { handleChange('Mobile_Phone', e.value); }, [handleChange]); @@ -181,21 +181,43 @@ export default function App() { return (
- - - + + + - + - + @@ -220,43 +242,78 @@ function PopupContentFunc(props) {
Name
- + +
Title
- + +
City
- + +
State
- + +
Email
- + +
Skype
- + +
Phone
- + +
diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeTemplate.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeTemplate.tsx similarity index 81% rename from JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeTemplate.js rename to JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeTemplate.tsx index f128c9b6218..dc64584b8b7 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeTemplate.js +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeTemplate.tsx @@ -1,6 +1,7 @@ import React from 'react'; +import { Employee } from './data'; -export default function CustomShapeTemplate(employee, editEmployee, deleteEmployee) { +export default function CustomShapeTemplate(employee: Employee, editEmployee, deleteEmployee) { const employeeName = employee ? employee.Full_Name : 'Employee\'s Name'; const employeeTitle = employee ? employee.Title : 'Employee\'s Title'; return ( diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeToolboxTemplate.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeToolboxTemplate.tsx similarity index 100% rename from JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeToolboxTemplate.js rename to JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeToolboxTemplate.tsx diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/data.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/data.ts similarity index 96% rename from JSDemos/Demos/Diagram/CustomShapesWithTexts/React/data.js rename to JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/data.ts index 41c705d20a0..82911a7bf60 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/data.js +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/data.ts @@ -1,4 +1,18 @@ -const employees = [{ +export interface Employee { + ID: number, + Head_ID: number, + Full_Name: string, + Prefix: string, + Title: string, + City: string, + State: string, + Email: string, + Skype: string, + Mobile_Phone: string, + Birth_Date: string, + Hire_Date: string, +} +const employees: Employee[] = [{ ID: 1, Head_ID: 0, Full_Name: 'John Heart', diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/index.html b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/index.html +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/index.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/index.tsx b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js new file mode 100644 index 00000000000..191cb9627b4 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js @@ -0,0 +1,366 @@ +import React from 'react'; +import Diagram, { + CustomShape, + ContextToolbox, + PropertiesPanel, + Group, + Tab, + Toolbox, + Nodes, + AutoLayout, +} from 'devextreme-react/diagram'; +import { Popup } from 'devextreme-react/popup'; +import TextBox from 'devextreme-react/text-box'; +import Button from 'devextreme-react/button'; +import ArrayStore from 'devextreme/data/array_store'; +import CustomShapeTemplate from './CustomShapeTemplate.js'; +import CustomShapeToolboxTemplate from './CustomShapeToolboxTemplate.js'; +import service from './data.js'; + +const pageCommands = ['pageSize', 'pageOrientation', 'pageColor']; +const nameLabel = { 'aria-label': 'Name' }; +const emailLabel = { 'aria-label': 'Email' }; +const titleLabel = { 'aria-label': 'Title' }; +const stateLabel = { 'aria-label': 'State' }; +const cityLabel = { 'aria-label': 'City' }; +const phoneLabel = { 'aria-label': 'Phone' }; +const skypeLabel = { 'aria-label': 'Skype' }; +let generatedID = 100; +const employees = service.getEmployees(); +const dataSource = new ArrayStore({ + key: 'ID', + data: employees, + onInserting(values, key) { + this.update(key, { + ID: values.ID || (generatedID += 1), + Full_Name: values.Full_Name || "Employee's Name", + Title: values.Title || "Employee's Title", + }); + }, +}); +function onRequestLayoutUpdate(e) { + for (let i = 0; i < e.changes.length; i += 1) { + if (e.changes[i].type === 'remove') { + e.allowed = true; + } else if (e.changes[i].data.Head_ID !== undefined && e.changes[i].data.Head_ID !== null) { + e.allowed = true; + } + } +} +function deleteEmployee(employee) { + dataSource.push([{ type: 'remove', key: employee.ID }]); +} +function itemTypeExpr() { + return 'employee'; +} +function itemCustomDataExpr(obj, value) { + if (value === undefined) { + return { + Full_Name: obj.Full_Name, + Prefix: obj.Prefix, + Title: obj.Title, + City: obj.City, + State: obj.State, + Email: obj.Email, + Skype: obj.Skype, + Mobile_Phone: obj.Mobile_Phone, + }; + } + obj.Full_Name = value.Full_Name; + obj.Prefix = value.Prefix; + obj.Title = value.Title; + obj.City = value.City; + obj.State = value.State; + obj.Email = value.Email; + obj.Skype = value.Skype; + obj.Mobile_Phone = value.Mobile_Phone; + return null; +} +export default function App() { + const [currentEmployee, setCurrentEmployee] = React.useState({}); + const [popupVisible, setPopupVisible] = React.useState(false); + const diagramRef = React.useRef(null); + const editEmployee = React.useCallback((employee) => { + setCurrentEmployee({ ...employee }); + setPopupVisible(true); + }, []); + const updateEmployee = React.useCallback(() => { + dataSource.push([ + { + type: 'update', + key: currentEmployee.ID, + data: { + Full_Name: currentEmployee.Full_Name, + Title: currentEmployee.Title, + City: currentEmployee.City, + State: currentEmployee.State, + Email: currentEmployee.Email, + Skype: currentEmployee.Skype, + Mobile_Phone: currentEmployee.Mobile_Phone, + }, + }, + ]); + setCurrentEmployee({}); + setPopupVisible(false); + }, [currentEmployee, setCurrentEmployee, setPopupVisible]); + const customShapeTemplate = React.useCallback( + (item) => + CustomShapeTemplate( + item.dataItem, + () => { + editEmployee(item.dataItem); + }, + () => { + deleteEmployee(item.dataItem); + }, + ), + [editEmployee], + ); + const customShapeToolboxTemplate = React.useCallback(() => CustomShapeToolboxTemplate(), []); + const cancelEditEmployee = React.useCallback(() => { + setCurrentEmployee({}); + setPopupVisible(false); + }, [setCurrentEmployee, setPopupVisible]); + const handleChange = React.useCallback( + (field, value) => { + setCurrentEmployee((prevState) => ({ + ...prevState, + [field]: value, + })); + }, + [setCurrentEmployee], + ); + const handleNameChange = React.useCallback( + (e) => { + handleChange('Full_Name', e.value); + }, + [handleChange], + ); + const handleTitleChange = React.useCallback( + (e) => { + handleChange('Title', e.value); + }, + [handleChange], + ); + const handleCityChange = React.useCallback( + (e) => { + handleChange('City', e.value); + }, + [handleChange], + ); + const handleStateChange = React.useCallback( + (e) => { + handleChange('State', e.value); + }, + [handleChange], + ); + const handleEmailChange = React.useCallback( + (e) => { + handleChange('Email', e.value); + }, + [handleChange], + ); + const handleSkypeChange = React.useCallback( + (e) => { + handleChange('Skype', e.value); + }, + [handleChange], + ); + const handlePhoneChange = React.useCallback( + (e) => { + handleChange('Mobile_Phone', e.value); + }, + [handleChange], + ); + const popupContentRender = React.useCallback( + () => ( + + ), + [ + currentEmployee, + handleNameChange, + handleTitleChange, + handleCityChange, + handleStateChange, + handleEmailChange, + handleSkypeChange, + handlePhoneChange, + updateEmployee, + cancelEditEmployee, + ], + ); + return ( +
+ + + + + + + + + + + + + + + + +
+ ); +} +function PopupContentFunc(props) { + return ( + +
+
+
Name
+
+ +
+
+
+
Title
+
+ +
+
+
+
City
+
+ +
+
+
+
State
+
+ +
+
+
+
Email
+
+ +
+
+
+
Skype
+
+ +
+
+
+
Phone
+
+ +
+
+
+
+ + +
+ + ); +} diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/CustomShapeTemplate.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/CustomShapeTemplate.js new file mode 100644 index 00000000000..fc86519eaca --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/CustomShapeTemplate.js @@ -0,0 +1,40 @@ +import React from 'react'; + +export default function CustomShapeTemplate(employee, editEmployee, deleteEmployee) { + const employeeName = employee ? employee.Full_Name : "Employee's Name"; + const employeeTitle = employee ? employee.Title : "Employee's Title"; + return ( + + + {employeeName} + + + {employeeTitle} + + + Edit + + + Delete + + + ); +} diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/CustomShapeToolboxTemplate.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/CustomShapeToolboxTemplate.js new file mode 100644 index 00000000000..736ac912270 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/CustomShapeToolboxTemplate.js @@ -0,0 +1,20 @@ +import React from 'react'; + +export default function CustomShapeToolboxTemplate() { + return ( + + + New + + + Employee + + + ); +} diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/data.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/data.js new file mode 100644 index 00000000000..25cd3e039fb --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/data.js @@ -0,0 +1,371 @@ +const employees = [ + { + ID: 1, + Head_ID: 0, + Full_Name: 'John Heart', + Prefix: 'Mr.', + Title: 'CEO', + City: 'Los Angeles', + State: 'California', + Email: 'jheart@dx-email.com', + Skype: 'jheart_DX_skype', + Mobile_Phone: '(213) 555-9392', + Birth_Date: '1964-03-16', + Hire_Date: '1995-01-15', + }, + { + ID: 2, + Head_ID: 1, + Full_Name: 'Samantha Bright', + Prefix: 'Dr.', + Title: 'COO', + City: 'Los Angeles', + State: 'California', + Email: 'samanthab@dx-email.com', + Skype: 'samanthab_DX_skype', + Mobile_Phone: '(213) 555-2858', + Birth_Date: '1966-05-02', + Hire_Date: '2004-05-24', + }, + { + ID: 3, + Head_ID: 1, + Full_Name: 'Arthur Miller', + Prefix: 'Mr.', + Title: 'CTO', + City: 'Denver', + State: 'Colorado', + Email: 'arthurm@dx-email.com', + Skype: 'arthurm_DX_skype', + Mobile_Phone: '(310) 555-8583', + Birth_Date: '1972-07-11', + Hire_Date: '2007-12-18', + }, + { + ID: 4, + Head_ID: 1, + Full_Name: 'Robert Reagan', + Prefix: 'Mr.', + Title: 'CMO', + City: 'Bentonville', + State: 'Arkansas', + Email: 'robertr@dx-email.com', + Skype: 'robertr_DX_skype', + Mobile_Phone: '(818) 555-2387', + Birth_Date: '1974-09-07', + Hire_Date: '2002-11-08', + }, + { + ID: 5, + Head_ID: 1, + Full_Name: 'Greta Sims', + Prefix: 'Ms.', + Title: 'HR Manager', + City: 'Atlanta', + State: 'Georgia', + Email: 'gretas@dx-email.com', + Skype: 'gretas_DX_skype', + Mobile_Phone: '(818) 555-6546', + Birth_Date: '1977-11-22', + Hire_Date: '1998-04-23', + }, + { + ID: 6, + Head_ID: 3, + Full_Name: 'Brett Wade', + Prefix: 'Mr.', + Title: 'IT Manager', + City: 'Reno', + State: 'Nevada', + Email: 'brettw@dx-email.com', + Skype: 'brettw_DX_skype', + Mobile_Phone: '(626) 555-0358', + Birth_Date: '1968-12-01', + Hire_Date: '2009-03-06', + }, + { + ID: 7, + Head_ID: 5, + Full_Name: 'Sandra Johnson', + Prefix: 'Mrs.', + Title: 'Controller', + City: 'Beaver', + State: 'Utah', + Email: 'sandraj@dx-email.com', + Skype: 'sandraj_DX_skype', + Mobile_Phone: '(562) 555-2082', + Birth_Date: '1974-11-15', + Hire_Date: '2005-05-11', + }, + { + ID: 8, + Head_ID: 4, + Full_Name: 'Ed Holmes', + Prefix: 'Dr.', + Title: 'Sales Manager', + City: 'Malibu', + State: 'California', + Email: 'edwardh@dx-email.com', + Skype: 'edwardh_DX_skype', + Mobile_Phone: '(310) 555-1288', + Birth_Date: '1973-07-14', + Hire_Date: '2005-06-19', + }, + { + ID: 9, + Head_ID: 3, + Full_Name: 'Barb Banks', + Prefix: 'Mrs.', + Title: 'Support Manager', + City: 'Phoenix', + State: 'Arizona', + Email: 'barbarab@dx-email.com', + Skype: 'barbarab_DX_skype', + Mobile_Phone: '(310) 555-3355', + Birth_Date: '1979-04-14', + Hire_Date: '2002-08-07', + }, + { + ID: 10, + Head_ID: 2, + Full_Name: 'Kevin Carter', + Prefix: 'Mr.', + Title: 'Shipping Manager', + City: 'San Diego', + State: 'California', + Email: 'kevinc@dx-email.com', + Skype: 'kevinc_DX_skype', + Mobile_Phone: '(213) 555-2840', + Birth_Date: '1978-01-09', + Hire_Date: '2009-08-11', + }, + { + ID: 11, + Head_ID: 5, + Full_Name: 'Cindy Stanwick', + Prefix: 'Ms.', + Title: 'HR Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'cindys@dx-email.com', + Skype: 'cindys_DX_skype', + Mobile_Phone: '(818) 555-6655', + Birth_Date: '1985-06-05', + Hire_Date: '2008-03-24', + }, + { + ID: 12, + Head_ID: 8, + Full_Name: 'Sammy Hill', + Prefix: 'Mr.', + Title: 'Sales Assistant', + City: 'Pasadena', + State: 'California', + Email: 'sammyh@dx-email.com', + Skype: 'sammyh_DX_skype', + Mobile_Phone: '(626) 555-7292', + Birth_Date: '1984-02-17', + Hire_Date: '2012-02-01', + }, + { + ID: 13, + Head_ID: 10, + Full_Name: 'Davey Jones', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Pasadena', + State: 'California', + Email: 'davidj@dx-email.com', + Skype: 'davidj_DX_skype', + Mobile_Phone: '(626) 555-0281', + Birth_Date: '1983-03-06', + Hire_Date: '2011-04-24', + }, + { + ID: 14, + Head_ID: 10, + Full_Name: 'Victor Norris', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'victorn@dx-email.com', + Skype: 'victorn_DX_skype', + Mobile_Phone: '(213) 555-9278', + Birth_Date: '1986-07-23', + Hire_Date: '2012-07-23', + }, + { + ID: 15, + Head_ID: 10, + Full_Name: 'Mary Stern', + Prefix: 'Ms.', + Title: 'Shipping Assistant', + City: 'Beaver', + State: 'Utah', + Email: 'marys@dx-email.com', + Skype: 'marys_DX_skype', + Mobile_Phone: '(818) 555-7857', + Birth_Date: '1982-04-08', + Hire_Date: '2012-08-12', + }, + { + ID: 16, + Head_ID: 10, + Full_Name: 'Robin Cosworth', + Prefix: 'Mrs.', + Title: 'Shipping Assistant', + City: 'Los Angeles', + State: 'California', + Email: 'robinc@dx-email.com', + Skype: 'robinc_DX_skype', + Mobile_Phone: '(818) 555-0942', + Birth_Date: '1981-06-12', + Hire_Date: '2012-09-01', + }, + { + ID: 17, + Head_ID: 9, + Full_Name: 'Kelly Rodriguez', + Prefix: 'Ms.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'kellyr@dx-email.com', + Skype: 'kellyr_DX_skype', + Mobile_Phone: '(818) 555-9248', + Birth_Date: '1988-05-11', + Hire_Date: '2012-10-13', + }, + { + ID: 18, + Head_ID: 9, + Full_Name: 'James Anderson', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'jamesa@dx-email.com', + Skype: 'jamesa_DX_skype', + Mobile_Phone: '(323) 555-4702', + Birth_Date: '1987-01-29', + Hire_Date: '2012-10-18', + }, + { + ID: 19, + Head_ID: 9, + Full_Name: 'Antony Remmen', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'anthonyr@dx-email.com', + Skype: 'anthonyr_DX_skype', + Mobile_Phone: '(310) 555-6625', + Birth_Date: '1986-02-19', + Hire_Date: '2013-01-19', + }, + { + ID: 20, + Head_ID: 8, + Full_Name: 'Olivia Peyton', + Prefix: 'Mrs.', + Title: 'Sales Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'oliviap@dx-email.com', + Skype: 'oliviap_DX_skype', + Mobile_Phone: '(310) 555-2728', + Birth_Date: '1981-06-03', + Hire_Date: '2012-05-14', + }, + { + ID: 21, + Head_ID: 6, + Full_Name: 'Taylor Riley', + Prefix: 'Mr.', + Title: 'Network Admin', + City: 'San Jose', + State: 'California', + Email: 'taylorr@dx-email.com', + Skype: 'taylorr_DX_skype', + Mobile_Phone: '(310) 555-7276', + Birth_Date: '1982-08-14', + Hire_Date: '2012-04-14', + }, + { + ID: 22, + Head_ID: 6, + Full_Name: 'Amelia Harper', + Prefix: 'Mrs.', + Title: 'Network Admin', + City: 'Los Angeles', + State: 'California', + Email: 'ameliah@dx-email.com', + Skype: 'ameliah_DX_skype', + Mobile_Phone: '(213) 555-4276', + Birth_Date: '1983-11-19', + Hire_Date: '2011-02-10', + }, + { + ID: 23, + Head_ID: 6, + Full_Name: 'Wally Hobbs', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'Chatsworth', + State: 'California', + Email: 'wallyh@dx-email.com', + Skype: 'wallyh_DX_skype', + Mobile_Phone: '(818) 555-8872', + Birth_Date: '1984-12-24', + Hire_Date: '2011-02-17', + }, + { + ID: 24, + Head_ID: 6, + Full_Name: 'Brad Jameson', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'San Fernando', + State: 'California', + Email: 'bradleyj@dx-email.com', + Skype: 'bradleyj_DX_skype', + Mobile_Phone: '(818) 555-4646', + Birth_Date: '1988-10-12', + Hire_Date: '2011-03-02', + }, + { + ID: 25, + Head_ID: 6, + Full_Name: 'Karen Goodson', + Prefix: 'Miss', + Title: 'Programmer', + City: 'South Pasadena', + State: 'California', + Email: 'kareng@dx-email.com', + Skype: 'kareng_DX_skype', + Mobile_Phone: '(626) 555-0908', + Birth_Date: '1987-04-26', + Hire_Date: '2011-03-14', + }, + { + ID: 26, + Head_ID: 5, + Full_Name: 'Marcus Orbison', + Prefix: 'Mr.', + Title: 'Travel Coordinator', + City: 'Los Angeles', + State: 'California', + Email: 'marcuso@dx-email.com', + Skype: 'marcuso_DX_skype', + Mobile_Phone: '(213) 555-7098', + Birth_Date: '1982-03-02', + Hire_Date: '2005-05-19', + }, +]; +export default { + getEmployees() { + return employees; + }, +}; diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/index.html b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/index.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/styles.css b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/styles.css new file mode 100644 index 00000000000..9f3bca9114d --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/styles.css @@ -0,0 +1,35 @@ +#diagram { + height: 725px; +} + +#diagram .template .template-name { + font-weight: bold; + text-decoration: underline; +} + +#diagram .template .template-title { + font-style: italic; +} + +#diagram .template .template-button { + cursor: pointer; + font-size: 8pt; + fill: navy; +} + +#diagram .template .template-button:hover { + text-decoration: underline; +} + +.dx-popup-content { + padding: 0; +} + +.dx-popup-content .dx-fieldset.buttons { + display: flex; + justify-content: flex-end; +} + +.dx-popup-content .dx-fieldset.buttons > * { + margin-left: 8px; +} diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/App.js b/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/App.tsx similarity index 85% rename from JSDemos/Demos/Diagram/CustomShapesWithTexts/React/App.js rename to JSDemos/Demos/Diagram/CustomShapesWithTexts/React/App.tsx index 7649916b845..ae7e87211ea 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/App.js +++ b/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/App.tsx @@ -1,12 +1,12 @@ import React from 'react'; import Diagram, { CustomShape, Group, Toolbox } from 'devextreme-react/diagram'; -import service from './data.js'; +import service from './data.ts'; import 'whatwg-fetch'; const employees = service.getEmployees(); export default function App() { - const diagramRef = React.useRef(); + const diagramRef = React.useRef(); React.useEffect(() => { const diagram = diagramRef.current.instance; @@ -33,7 +33,7 @@ export default function App() { /> ))} - + ); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/data.js b/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/data.ts similarity index 100% rename from JSDemos/Demos/Diagram/CustomShapesWithTemplates/React/data.js rename to JSDemos/Demos/Diagram/CustomShapesWithTexts/React/data.ts diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/index.html b/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/index.html +++ b/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/index.js b/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/index.tsx b/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTexts/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/App.js b/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/App.js new file mode 100644 index 00000000000..5cadd927c28 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/App.js @@ -0,0 +1,44 @@ +import React from 'react'; +import Diagram, { CustomShape, Group, Toolbox } from 'devextreme-react/diagram'; +import service from './data.js'; +import 'whatwg-fetch'; + +const employees = service.getEmployees(); +export default function App() { + const diagramRef = React.useRef(); + React.useEffect(() => { + const diagram = diagramRef.current.instance; + fetch('../../../../data/diagram-employees.json') + .then((response) => response.json()) + .then((json) => { + diagram.import(JSON.stringify(json)); + }) + .catch(() => { + throw new Error('Data Loading Error'); + }); + }, []); + return ( + + {employees.map((employee, index) => ( + + ))} + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/data.js b/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/data.js new file mode 100644 index 00000000000..25cd3e039fb --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/data.js @@ -0,0 +1,371 @@ +const employees = [ + { + ID: 1, + Head_ID: 0, + Full_Name: 'John Heart', + Prefix: 'Mr.', + Title: 'CEO', + City: 'Los Angeles', + State: 'California', + Email: 'jheart@dx-email.com', + Skype: 'jheart_DX_skype', + Mobile_Phone: '(213) 555-9392', + Birth_Date: '1964-03-16', + Hire_Date: '1995-01-15', + }, + { + ID: 2, + Head_ID: 1, + Full_Name: 'Samantha Bright', + Prefix: 'Dr.', + Title: 'COO', + City: 'Los Angeles', + State: 'California', + Email: 'samanthab@dx-email.com', + Skype: 'samanthab_DX_skype', + Mobile_Phone: '(213) 555-2858', + Birth_Date: '1966-05-02', + Hire_Date: '2004-05-24', + }, + { + ID: 3, + Head_ID: 1, + Full_Name: 'Arthur Miller', + Prefix: 'Mr.', + Title: 'CTO', + City: 'Denver', + State: 'Colorado', + Email: 'arthurm@dx-email.com', + Skype: 'arthurm_DX_skype', + Mobile_Phone: '(310) 555-8583', + Birth_Date: '1972-07-11', + Hire_Date: '2007-12-18', + }, + { + ID: 4, + Head_ID: 1, + Full_Name: 'Robert Reagan', + Prefix: 'Mr.', + Title: 'CMO', + City: 'Bentonville', + State: 'Arkansas', + Email: 'robertr@dx-email.com', + Skype: 'robertr_DX_skype', + Mobile_Phone: '(818) 555-2387', + Birth_Date: '1974-09-07', + Hire_Date: '2002-11-08', + }, + { + ID: 5, + Head_ID: 1, + Full_Name: 'Greta Sims', + Prefix: 'Ms.', + Title: 'HR Manager', + City: 'Atlanta', + State: 'Georgia', + Email: 'gretas@dx-email.com', + Skype: 'gretas_DX_skype', + Mobile_Phone: '(818) 555-6546', + Birth_Date: '1977-11-22', + Hire_Date: '1998-04-23', + }, + { + ID: 6, + Head_ID: 3, + Full_Name: 'Brett Wade', + Prefix: 'Mr.', + Title: 'IT Manager', + City: 'Reno', + State: 'Nevada', + Email: 'brettw@dx-email.com', + Skype: 'brettw_DX_skype', + Mobile_Phone: '(626) 555-0358', + Birth_Date: '1968-12-01', + Hire_Date: '2009-03-06', + }, + { + ID: 7, + Head_ID: 5, + Full_Name: 'Sandra Johnson', + Prefix: 'Mrs.', + Title: 'Controller', + City: 'Beaver', + State: 'Utah', + Email: 'sandraj@dx-email.com', + Skype: 'sandraj_DX_skype', + Mobile_Phone: '(562) 555-2082', + Birth_Date: '1974-11-15', + Hire_Date: '2005-05-11', + }, + { + ID: 8, + Head_ID: 4, + Full_Name: 'Ed Holmes', + Prefix: 'Dr.', + Title: 'Sales Manager', + City: 'Malibu', + State: 'California', + Email: 'edwardh@dx-email.com', + Skype: 'edwardh_DX_skype', + Mobile_Phone: '(310) 555-1288', + Birth_Date: '1973-07-14', + Hire_Date: '2005-06-19', + }, + { + ID: 9, + Head_ID: 3, + Full_Name: 'Barb Banks', + Prefix: 'Mrs.', + Title: 'Support Manager', + City: 'Phoenix', + State: 'Arizona', + Email: 'barbarab@dx-email.com', + Skype: 'barbarab_DX_skype', + Mobile_Phone: '(310) 555-3355', + Birth_Date: '1979-04-14', + Hire_Date: '2002-08-07', + }, + { + ID: 10, + Head_ID: 2, + Full_Name: 'Kevin Carter', + Prefix: 'Mr.', + Title: 'Shipping Manager', + City: 'San Diego', + State: 'California', + Email: 'kevinc@dx-email.com', + Skype: 'kevinc_DX_skype', + Mobile_Phone: '(213) 555-2840', + Birth_Date: '1978-01-09', + Hire_Date: '2009-08-11', + }, + { + ID: 11, + Head_ID: 5, + Full_Name: 'Cindy Stanwick', + Prefix: 'Ms.', + Title: 'HR Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'cindys@dx-email.com', + Skype: 'cindys_DX_skype', + Mobile_Phone: '(818) 555-6655', + Birth_Date: '1985-06-05', + Hire_Date: '2008-03-24', + }, + { + ID: 12, + Head_ID: 8, + Full_Name: 'Sammy Hill', + Prefix: 'Mr.', + Title: 'Sales Assistant', + City: 'Pasadena', + State: 'California', + Email: 'sammyh@dx-email.com', + Skype: 'sammyh_DX_skype', + Mobile_Phone: '(626) 555-7292', + Birth_Date: '1984-02-17', + Hire_Date: '2012-02-01', + }, + { + ID: 13, + Head_ID: 10, + Full_Name: 'Davey Jones', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Pasadena', + State: 'California', + Email: 'davidj@dx-email.com', + Skype: 'davidj_DX_skype', + Mobile_Phone: '(626) 555-0281', + Birth_Date: '1983-03-06', + Hire_Date: '2011-04-24', + }, + { + ID: 14, + Head_ID: 10, + Full_Name: 'Victor Norris', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'victorn@dx-email.com', + Skype: 'victorn_DX_skype', + Mobile_Phone: '(213) 555-9278', + Birth_Date: '1986-07-23', + Hire_Date: '2012-07-23', + }, + { + ID: 15, + Head_ID: 10, + Full_Name: 'Mary Stern', + Prefix: 'Ms.', + Title: 'Shipping Assistant', + City: 'Beaver', + State: 'Utah', + Email: 'marys@dx-email.com', + Skype: 'marys_DX_skype', + Mobile_Phone: '(818) 555-7857', + Birth_Date: '1982-04-08', + Hire_Date: '2012-08-12', + }, + { + ID: 16, + Head_ID: 10, + Full_Name: 'Robin Cosworth', + Prefix: 'Mrs.', + Title: 'Shipping Assistant', + City: 'Los Angeles', + State: 'California', + Email: 'robinc@dx-email.com', + Skype: 'robinc_DX_skype', + Mobile_Phone: '(818) 555-0942', + Birth_Date: '1981-06-12', + Hire_Date: '2012-09-01', + }, + { + ID: 17, + Head_ID: 9, + Full_Name: 'Kelly Rodriguez', + Prefix: 'Ms.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'kellyr@dx-email.com', + Skype: 'kellyr_DX_skype', + Mobile_Phone: '(818) 555-9248', + Birth_Date: '1988-05-11', + Hire_Date: '2012-10-13', + }, + { + ID: 18, + Head_ID: 9, + Full_Name: 'James Anderson', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'jamesa@dx-email.com', + Skype: 'jamesa_DX_skype', + Mobile_Phone: '(323) 555-4702', + Birth_Date: '1987-01-29', + Hire_Date: '2012-10-18', + }, + { + ID: 19, + Head_ID: 9, + Full_Name: 'Antony Remmen', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'anthonyr@dx-email.com', + Skype: 'anthonyr_DX_skype', + Mobile_Phone: '(310) 555-6625', + Birth_Date: '1986-02-19', + Hire_Date: '2013-01-19', + }, + { + ID: 20, + Head_ID: 8, + Full_Name: 'Olivia Peyton', + Prefix: 'Mrs.', + Title: 'Sales Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'oliviap@dx-email.com', + Skype: 'oliviap_DX_skype', + Mobile_Phone: '(310) 555-2728', + Birth_Date: '1981-06-03', + Hire_Date: '2012-05-14', + }, + { + ID: 21, + Head_ID: 6, + Full_Name: 'Taylor Riley', + Prefix: 'Mr.', + Title: 'Network Admin', + City: 'San Jose', + State: 'California', + Email: 'taylorr@dx-email.com', + Skype: 'taylorr_DX_skype', + Mobile_Phone: '(310) 555-7276', + Birth_Date: '1982-08-14', + Hire_Date: '2012-04-14', + }, + { + ID: 22, + Head_ID: 6, + Full_Name: 'Amelia Harper', + Prefix: 'Mrs.', + Title: 'Network Admin', + City: 'Los Angeles', + State: 'California', + Email: 'ameliah@dx-email.com', + Skype: 'ameliah_DX_skype', + Mobile_Phone: '(213) 555-4276', + Birth_Date: '1983-11-19', + Hire_Date: '2011-02-10', + }, + { + ID: 23, + Head_ID: 6, + Full_Name: 'Wally Hobbs', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'Chatsworth', + State: 'California', + Email: 'wallyh@dx-email.com', + Skype: 'wallyh_DX_skype', + Mobile_Phone: '(818) 555-8872', + Birth_Date: '1984-12-24', + Hire_Date: '2011-02-17', + }, + { + ID: 24, + Head_ID: 6, + Full_Name: 'Brad Jameson', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'San Fernando', + State: 'California', + Email: 'bradleyj@dx-email.com', + Skype: 'bradleyj_DX_skype', + Mobile_Phone: '(818) 555-4646', + Birth_Date: '1988-10-12', + Hire_Date: '2011-03-02', + }, + { + ID: 25, + Head_ID: 6, + Full_Name: 'Karen Goodson', + Prefix: 'Miss', + Title: 'Programmer', + City: 'South Pasadena', + State: 'California', + Email: 'kareng@dx-email.com', + Skype: 'kareng_DX_skype', + Mobile_Phone: '(626) 555-0908', + Birth_Date: '1987-04-26', + Hire_Date: '2011-03-14', + }, + { + ID: 26, + Head_ID: 5, + Full_Name: 'Marcus Orbison', + Prefix: 'Mr.', + Title: 'Travel Coordinator', + City: 'Los Angeles', + State: 'California', + Email: 'marcuso@dx-email.com', + Skype: 'marcuso_DX_skype', + Mobile_Phone: '(213) 555-7098', + Birth_Date: '1982-03-02', + Hire_Date: '2005-05-19', + }, +]; +export default { + getEmployees() { + return employees; + }, +}; diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/index.html b/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/index.js b/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/styles.css b/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/styles.css new file mode 100644 index 00000000000..ef449a83d9d --- /dev/null +++ b/JSDemos/Demos/Diagram/CustomShapesWithTexts/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 725px; +} diff --git a/JSDemos/Demos/Diagram/ImagesInShapes/React/App.js b/JSDemos/Demos/Diagram/ImagesInShapes/React/App.tsx similarity index 96% rename from JSDemos/Demos/Diagram/ImagesInShapes/React/App.js rename to JSDemos/Demos/Diagram/ImagesInShapes/React/App.tsx index bf923c766e5..203743004a6 100644 --- a/JSDemos/Demos/Diagram/ImagesInShapes/React/App.js +++ b/JSDemos/Demos/Diagram/ImagesInShapes/React/App.tsx @@ -3,7 +3,7 @@ import Diagram, { Nodes, AutoLayout, Edges, Toolbox, Group, } from 'devextreme-react/diagram'; import ArrayStore from 'devextreme/data/array_store'; -import service from './data.js'; +import service from './data.ts'; const orgItemsDataSource = new ArrayStore({ key: 'id', diff --git a/JSDemos/Demos/Diagram/ImagesInShapes/React/data.js b/JSDemos/Demos/Diagram/ImagesInShapes/React/data.ts similarity index 100% rename from JSDemos/Demos/Diagram/ImagesInShapes/React/data.js rename to JSDemos/Demos/Diagram/ImagesInShapes/React/data.ts diff --git a/JSDemos/Demos/Diagram/ImagesInShapes/React/index.html b/JSDemos/Demos/Diagram/ImagesInShapes/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/ImagesInShapes/React/index.html +++ b/JSDemos/Demos/Diagram/ImagesInShapes/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/ImagesInShapes/React/index.js b/JSDemos/Demos/Diagram/ImagesInShapes/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/ImagesInShapes/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/ImagesInShapes/React/index.tsx b/JSDemos/Demos/Diagram/ImagesInShapes/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/ImagesInShapes/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/App.js b/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/App.js new file mode 100644 index 00000000000..3e3bd6a14b3 --- /dev/null +++ b/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/App.js @@ -0,0 +1,42 @@ +import React from 'react'; +import Diagram, { + Nodes, AutoLayout, Edges, Toolbox, Group, +} from 'devextreme-react/diagram'; +import ArrayStore from 'devextreme/data/array_store'; +import service from './data.js'; + +const orgItemsDataSource = new ArrayStore({ + key: 'id', + data: service.getOrgItems(), +}); +const orgLinksDataSource = new ArrayStore({ + key: 'id', + data: service.getOrgLinks(), +}); +export default function App() { + return ( + + + + + + + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/data.js b/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/data.js new file mode 100644 index 00000000000..da71747ec10 --- /dev/null +++ b/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/data.js @@ -0,0 +1,156 @@ +const orgItems = [ + { + id: '106', + text: 'Development', + type: 'ellipse', + }, + { + id: '107', + text: 'WinForms\nTeam', + type: 'ellipse', + }, + { + id: '108', + text: 'WPF\nTeam', + type: 'ellipse', + }, + { + id: '109', + text: 'Javascript\nTeam', + type: 'ellipse', + }, + { + id: '110', + text: 'ASP.NET\nTeam', + type: 'ellipse', + }, + { + id: '112', + text: 'Ken Samuelson', + type: 'cardWithImageOnLeft', + picture: '../../../../images/employees/32.png', + }, + { + id: '113', + text: 'Terry Bradley', + type: 'cardWithImageOnLeft', + picture: '../../../../images/employees/33.png', + }, + { + id: '115', + text: 'Nat Maguiree', + type: 'cardWithImageOnLeft', + picture: '../../../../images/employees/34.png', + }, + { + id: '116', + text: 'Gabe Jones', + type: 'cardWithImageOnLeft', + picture: '../../../../images/employees/35.png', + }, + { + id: '117', + text: 'Lucy Ball', + type: 'cardWithImageOnLeft', + picture: '../../../../images/employees/36.png', + }, + { + id: '119', + text: 'Bart Arnaz', + type: 'cardWithImageOnLeft', + picture: '../../../../images/employees/37.png', + }, + { + id: '120', + text: 'Leah Simpson', + type: 'cardWithImageOnLeft', + picture: '../../../../images/employees/38.png', + }, + { + id: '122', + text: 'Hannah Brookly', + type: 'cardWithImageOnLeft', + picture: '../../../../images/employees/39.png', + }, + { + id: '123', + text: 'Arnie Schwartz', + type: 'cardWithImageOnLeft', + picture: '../../../../images/employees/40.png', + }, +]; +const orgLinks = [ + { + id: '124', + from: '106', + to: '108', + }, + { + id: '125', + from: '106', + to: '109', + }, + { + id: '126', + from: '106', + to: '107', + }, + { + id: '127', + from: '106', + to: '110', + }, + { + id: '129', + from: '110', + to: '112', + }, + { + id: '130', + from: '110', + to: '113', + }, + { + id: '132', + from: '107', + to: '115', + }, + { + id: '133', + from: '107', + to: '116', + }, + { + id: '134', + from: '107', + to: '117', + }, + { + id: '136', + from: '108', + to: '119', + }, + { + id: '137', + from: '108', + to: '120', + }, + { + id: '139', + from: '109', + to: '122', + }, + { + id: '140', + from: '109', + to: '123', + }, +]; +export default { + getOrgItems() { + return orgItems; + }, + getOrgLinks() { + return orgLinks; + }, +}; diff --git a/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/index.html b/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/index.js b/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/styles.css b/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/styles.css new file mode 100644 index 00000000000..1eefae9372a --- /dev/null +++ b/JSDemos/Demos/Diagram/ImagesInShapes/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 900px; +} diff --git a/JSDemos/Demos/Diagram/ItemSelection/React/App.js b/JSDemos/Demos/Diagram/ItemSelection/React/App.tsx similarity index 76% rename from JSDemos/Demos/Diagram/ItemSelection/React/App.js rename to JSDemos/Demos/Diagram/ItemSelection/React/App.tsx index d86425b4a28..d6f15968e53 100644 --- a/JSDemos/Demos/Diagram/ItemSelection/React/App.js +++ b/JSDemos/Demos/Diagram/ItemSelection/React/App.tsx @@ -1,19 +1,23 @@ import React from 'react'; import Diagram, { - Nodes, AutoLayout, Toolbox, PropertiesPanel, + Nodes, AutoLayout, Toolbox, PropertiesPanel, DiagramTypes, } from 'devextreme-react/diagram'; import ArrayStore from 'devextreme/data/array_store'; -import service from './data.js'; +import service from './data.ts'; const dataSource = new ArrayStore({ key: 'ID', data: service.getEmployees(), }); -function onContentReady(e) { +const textExpression = 'Full_Name'; + +function onContentReady(e: DiagramTypes.ContentReadyEvent) { const diagram = e.component; // preselect some shape - const items = diagram.getItems().filter((item) => item.itemType === 'shape' && (item.text === 'Greta Sims')); + const items = diagram.getItems().filter( + (item) => item.itemType === 'shape' && (item.dataItem[textExpression] === 'Greta Sims'), + ); if (items.length > 0) { diagram.setSelectedItems(items); diagram.scrollToItem(items[0]); @@ -38,7 +42,7 @@ export default function App() { return (
- + diff --git a/JSDemos/Demos/Diagram/ItemSelection/React/data.js b/JSDemos/Demos/Diagram/ItemSelection/React/data.ts similarity index 100% rename from JSDemos/Demos/Diagram/ItemSelection/React/data.js rename to JSDemos/Demos/Diagram/ItemSelection/React/data.ts diff --git a/JSDemos/Demos/Diagram/ItemSelection/React/index.html b/JSDemos/Demos/Diagram/ItemSelection/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/ItemSelection/React/index.html +++ b/JSDemos/Demos/Diagram/ItemSelection/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/ItemSelection/React/index.js b/JSDemos/Demos/Diagram/ItemSelection/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/ItemSelection/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/ItemSelection/React/index.tsx b/JSDemos/Demos/Diagram/ItemSelection/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/ItemSelection/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/ItemSelection/ReactJs/App.js b/JSDemos/Demos/Diagram/ItemSelection/ReactJs/App.js new file mode 100644 index 00000000000..265b33c8476 --- /dev/null +++ b/JSDemos/Demos/Diagram/ItemSelection/ReactJs/App.js @@ -0,0 +1,63 @@ +import React from 'react'; +import Diagram, { + Nodes, AutoLayout, Toolbox, PropertiesPanel, +} from 'devextreme-react/diagram'; +import ArrayStore from 'devextreme/data/array_store'; +import service from './data.js'; + +const dataSource = new ArrayStore({ + key: 'ID', + data: service.getEmployees(), +}); +const textExpression = 'Full_Name'; +function onContentReady(e) { + const diagram = e.component; + // preselect some shape + const items = diagram + .getItems() + .filter((item) => item.itemType === 'shape' && item.dataItem[textExpression] === 'Greta Sims'); + if (items.length > 0) { + diagram.setSelectedItems(items); + diagram.scrollToItem(items[0]); + diagram.focus(); + } +} +export default function App() { + const [selectedItemNames, setSelectedItemNames] = React.useState('Nobody has been selected'); + const onSelectionChanged = React.useCallback( + ({ items }) => { + let selectedItems = 'Nobody has been selected'; + const filteredItems = items + .filter((item) => item.itemType === 'shape') + .map((item) => item.text); + if (filteredItems.length > 0) { + selectedItems = filteredItems.join(', '); + } + setSelectedItemNames(selectedItems); + }, + [setSelectedItemNames], + ); + return ( +
+ + + + + + + +
+ Selected Items: {selectedItemNames} +
+
+ ); +} diff --git a/JSDemos/Demos/Diagram/ItemSelection/ReactJs/data.js b/JSDemos/Demos/Diagram/ItemSelection/ReactJs/data.js new file mode 100644 index 00000000000..0ea5aeb392b --- /dev/null +++ b/JSDemos/Demos/Diagram/ItemSelection/ReactJs/data.js @@ -0,0 +1,370 @@ +const employees = [ + { + ID: 1, + Full_Name: 'John Heart', + Prefix: 'Mr.', + Title: 'CEO', + City: 'Los Angeles', + State: 'California', + Email: 'jheart@dx-email.com', + Skype: 'jheart_DX_skype', + Mobile_Phone: '(213) 555-9392', + Birth_Date: '1964-03-16', + Hire_Date: '1995-01-15', + }, + { + ID: 2, + Head_ID: 1, + Full_Name: 'Samantha Bright', + Prefix: 'Dr.', + Title: 'COO', + City: 'Los Angeles', + State: 'California', + Email: 'samanthab@dx-email.com', + Skype: 'samanthab_DX_skype', + Mobile_Phone: '(213) 555-2858', + Birth_Date: '1966-05-02', + Hire_Date: '2004-05-24', + }, + { + ID: 3, + Head_ID: 1, + Full_Name: 'Arthur Miller', + Prefix: 'Mr.', + Title: 'CTO', + City: 'Denver', + State: 'Colorado', + Email: 'arthurm@dx-email.com', + Skype: 'arthurm_DX_skype', + Mobile_Phone: '(310) 555-8583', + Birth_Date: '1972-07-11', + Hire_Date: '2007-12-18', + }, + { + ID: 4, + Head_ID: 1, + Full_Name: 'Robert Reagan', + Prefix: 'Mr.', + Title: 'CMO', + City: 'Bentonville', + State: 'Arkansas', + Email: 'robertr@dx-email.com', + Skype: 'robertr_DX_skype', + Mobile_Phone: '(818) 555-2387', + Birth_Date: '1974-09-07', + Hire_Date: '2002-11-08', + }, + { + ID: 5, + Head_ID: 1, + Full_Name: 'Greta Sims', + Prefix: 'Ms.', + Title: 'HR Manager', + City: 'Atlanta', + State: 'Georgia', + Email: 'gretas@dx-email.com', + Skype: 'gretas_DX_skype', + Mobile_Phone: '(818) 555-6546', + Birth_Date: '1977-11-22', + Hire_Date: '1998-04-23', + }, + { + ID: 6, + Head_ID: 3, + Full_Name: 'Brett Wade', + Prefix: 'Mr.', + Title: 'IT Manager', + City: 'Reno', + State: 'Nevada', + Email: 'brettw@dx-email.com', + Skype: 'brettw_DX_skype', + Mobile_Phone: '(626) 555-0358', + Birth_Date: '1968-12-01', + Hire_Date: '2009-03-06', + }, + { + ID: 7, + Head_ID: 5, + Full_Name: 'Sandra Johnson', + Prefix: 'Mrs.', + Title: 'Controller', + City: 'Beaver', + State: 'Utah', + Email: 'sandraj@dx-email.com', + Skype: 'sandraj_DX_skype', + Mobile_Phone: '(562) 555-2082', + Birth_Date: '1974-11-15', + Hire_Date: '2005-05-11', + }, + { + ID: 8, + Head_ID: 4, + Full_Name: 'Ed Holmes', + Prefix: 'Dr.', + Title: 'Sales Manager', + City: 'Malibu', + State: 'California', + Email: 'edwardh@dx-email.com', + Skype: 'edwardh_DX_skype', + Mobile_Phone: '(310) 555-1288', + Birth_Date: '1973-07-14', + Hire_Date: '2005-06-19', + }, + { + ID: 9, + Head_ID: 3, + Full_Name: 'Barb Banks', + Prefix: 'Mrs.', + Title: 'Support Manager', + City: 'Phoenix', + State: 'Arizona', + Email: 'barbarab@dx-email.com', + Skype: 'barbarab_DX_skype', + Mobile_Phone: '(310) 555-3355', + Birth_Date: '1979-04-14', + Hire_Date: '2002-08-07', + }, + { + ID: 10, + Head_ID: 2, + Full_Name: 'Kevin Carter', + Prefix: 'Mr.', + Title: 'Shipping Manager', + City: 'San Diego', + State: 'California', + Email: 'kevinc@dx-email.com', + Skype: 'kevinc_DX_skype', + Mobile_Phone: '(213) 555-2840', + Birth_Date: '1978-01-09', + Hire_Date: '2009-08-11', + }, + { + ID: 11, + Head_ID: 5, + Full_Name: 'Cindy Stanwick', + Prefix: 'Ms.', + Title: 'HR Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'cindys@dx-email.com', + Skype: 'cindys_DX_skype', + Mobile_Phone: '(818) 555-6655', + Birth_Date: '1985-06-05', + Hire_Date: '2008-03-24', + }, + { + ID: 12, + Head_ID: 8, + Full_Name: 'Sammy Hill', + Prefix: 'Mr.', + Title: 'Sales Assistant', + City: 'Pasadena', + State: 'California', + Email: 'sammyh@dx-email.com', + Skype: 'sammyh_DX_skype', + Mobile_Phone: '(626) 555-7292', + Birth_Date: '1984-02-17', + Hire_Date: '2012-02-01', + }, + { + ID: 13, + Head_ID: 10, + Full_Name: 'Davey Jones', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Pasadena', + State: 'California', + Email: 'davidj@dx-email.com', + Skype: 'davidj_DX_skype', + Mobile_Phone: '(626) 555-0281', + Birth_Date: '1983-03-06', + Hire_Date: '2011-04-24', + }, + { + ID: 14, + Head_ID: 10, + Full_Name: 'Victor Norris', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'victorn@dx-email.com', + Skype: 'victorn_DX_skype', + Mobile_Phone: '(213) 555-9278', + Birth_Date: '1986-07-23', + Hire_Date: '2012-07-23', + }, + { + ID: 15, + Head_ID: 10, + Full_Name: 'Mary Stern', + Prefix: 'Ms.', + Title: 'Shipping Assistant', + City: 'Beaver', + State: 'Utah', + Email: 'marys@dx-email.com', + Skype: 'marys_DX_skype', + Mobile_Phone: '(818) 555-7857', + Birth_Date: '1982-04-08', + Hire_Date: '2012-08-12', + }, + { + ID: 16, + Head_ID: 10, + Full_Name: 'Robin Cosworth', + Prefix: 'Mrs.', + Title: 'Shipping Assistant', + City: 'Los Angeles', + State: 'California', + Email: 'robinc@dx-email.com', + Skype: 'robinc_DX_skype', + Mobile_Phone: '(818) 555-0942', + Birth_Date: '1981-06-12', + Hire_Date: '2012-09-01', + }, + { + ID: 17, + Head_ID: 9, + Full_Name: 'Kelly Rodriguez', + Prefix: 'Ms.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'kellyr@dx-email.com', + Skype: 'kellyr_DX_skype', + Mobile_Phone: '(818) 555-9248', + Birth_Date: '1988-05-11', + Hire_Date: '2012-10-13', + }, + { + ID: 18, + Head_ID: 9, + Full_Name: 'James Anderson', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'jamesa@dx-email.com', + Skype: 'jamesa_DX_skype', + Mobile_Phone: '(323) 555-4702', + Birth_Date: '1987-01-29', + Hire_Date: '2012-10-18', + }, + { + ID: 19, + Head_ID: 9, + Full_Name: 'Antony Remmen', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'anthonyr@dx-email.com', + Skype: 'anthonyr_DX_skype', + Mobile_Phone: '(310) 555-6625', + Birth_Date: '1986-02-19', + Hire_Date: '2013-01-19', + }, + { + ID: 20, + Head_ID: 8, + Full_Name: 'Olivia Peyton', + Prefix: 'Mrs.', + Title: 'Sales Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'oliviap@dx-email.com', + Skype: 'oliviap_DX_skype', + Mobile_Phone: '(310) 555-2728', + Birth_Date: '1981-06-03', + Hire_Date: '2012-05-14', + }, + { + ID: 21, + Head_ID: 6, + Full_Name: 'Taylor Riley', + Prefix: 'Mr.', + Title: 'Network Admin', + City: 'San Jose', + State: 'California', + Email: 'taylorr@dx-email.com', + Skype: 'taylorr_DX_skype', + Mobile_Phone: '(310) 555-7276', + Birth_Date: '1982-08-14', + Hire_Date: '2012-04-14', + }, + { + ID: 22, + Head_ID: 6, + Full_Name: 'Amelia Harper', + Prefix: 'Mrs.', + Title: 'Network Admin', + City: 'Los Angeles', + State: 'California', + Email: 'ameliah@dx-email.com', + Skype: 'ameliah_DX_skype', + Mobile_Phone: '(213) 555-4276', + Birth_Date: '1983-11-19', + Hire_Date: '2011-02-10', + }, + { + ID: 23, + Head_ID: 6, + Full_Name: 'Wally Hobbs', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'Chatsworth', + State: 'California', + Email: 'wallyh@dx-email.com', + Skype: 'wallyh_DX_skype', + Mobile_Phone: '(818) 555-8872', + Birth_Date: '1984-12-24', + Hire_Date: '2011-02-17', + }, + { + ID: 24, + Head_ID: 6, + Full_Name: 'Brad Jameson', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'San Fernando', + State: 'California', + Email: 'bradleyj@dx-email.com', + Skype: 'bradleyj_DX_skype', + Mobile_Phone: '(818) 555-4646', + Birth_Date: '1988-10-12', + Hire_Date: '2011-03-02', + }, + { + ID: 25, + Head_ID: 6, + Full_Name: 'Karen Goodson', + Prefix: 'Miss', + Title: 'Programmer', + City: 'South Pasadena', + State: 'California', + Email: 'kareng@dx-email.com', + Skype: 'kareng_DX_skype', + Mobile_Phone: '(626) 555-0908', + Birth_Date: '1987-04-26', + Hire_Date: '2011-03-14', + }, + { + ID: 26, + Head_ID: 5, + Full_Name: 'Marcus Orbison', + Prefix: 'Mr.', + Title: 'Travel Coordinator', + City: 'Los Angeles', + State: 'California', + Email: 'marcuso@dx-email.com', + Skype: 'marcuso_DX_skype', + Mobile_Phone: '(213) 555-7098', + Birth_Date: '1982-03-02', + Hire_Date: '2005-05-19', + }, +]; +export default { + getEmployees() { + return employees; + }, +}; diff --git a/JSDemos/Demos/Diagram/ItemSelection/ReactJs/index.html b/JSDemos/Demos/Diagram/ItemSelection/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/ItemSelection/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/ItemSelection/ReactJs/index.js b/JSDemos/Demos/Diagram/ItemSelection/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/ItemSelection/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/ItemSelection/ReactJs/styles.css b/JSDemos/Demos/Diagram/ItemSelection/ReactJs/styles.css new file mode 100644 index 00000000000..a45420e21bc --- /dev/null +++ b/JSDemos/Demos/Diagram/ItemSelection/ReactJs/styles.css @@ -0,0 +1,14 @@ +#diagram { + height: 600px; +} + +.selected-data { + margin-top: 20px; + padding: 20px; + background-color: rgba(191, 191, 191, 0.15); +} + +.selected-data .caption { + font-weight: bold; + font-size: 115%; +} diff --git a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/App.js b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/App.tsx similarity index 71% rename from JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/App.js rename to JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/App.tsx index 4dcc50aea93..662dd752e62 100644 --- a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/App.js +++ b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/App.tsx @@ -3,7 +3,7 @@ import Diagram, { Nodes, Edges, AutoLayout, Toolbox, Group, } from 'devextreme-react/diagram'; import ArrayStore from 'devextreme/data/array_store'; -import service from './data.js'; +import service from './data.ts'; const flowNodesDataSource = new ArrayStore({ key: 'id', @@ -17,10 +17,10 @@ const flowEdgesDataSource = new ArrayStore({ export default function App() { return ( - + - + diff --git a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/data.js b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/data.ts similarity index 100% rename from JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/data.js rename to JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/data.ts diff --git a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/index.html b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/index.html index 4165d17a5c7..d9607076aa0 100644 --- a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/index.html +++ b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/index.js b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/index.tsx b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/App.js b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/App.js new file mode 100644 index 00000000000..0e9eaa6db79 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/App.js @@ -0,0 +1,40 @@ +import React from 'react'; +import Diagram, { + Nodes, Edges, AutoLayout, Toolbox, Group, +} from 'devextreme-react/diagram'; +import ArrayStore from 'devextreme/data/array_store'; +import service from './data.js'; + +const flowNodesDataSource = new ArrayStore({ + key: 'id', + data: service.getFlowNodes(), +}); +const flowEdgesDataSource = new ArrayStore({ + key: 'id', + data: service.getFlowEdges(), +}); +export default function App() { + return ( + + + + + + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/data.js b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/data.js new file mode 100644 index 00000000000..d733068ad3d --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/data.js @@ -0,0 +1,117 @@ +const flowNodes = [ + { + id: 107, + text: 'A new ticket', + type: 'terminator', + }, + { + id: 108, + text: 'Analyze the issue', + type: 'process', + }, + { + id: 118, + text: 'Do we have all information to work with?', + type: 'diamond', + }, + { + id: 120, + text: 'Answered', + type: 'terminator', + }, + { + id: 121, + text: 'Request additional information or clarify the scenario', + type: 'rectangle', + }, + { + id: 125, + text: 'Prepare an example in Code Central', + type: 'rectangle', + }, + { + id: 127, + text: 'Update the documentation', + type: 'rectangle', + }, + { + id: 131, + text: 'Process the ticket', + type: 'rectangle', + }, + { + id: 133, + text: 'Work with the R&D team', + type: 'rectangle', + }, +]; +const flowEdges = [ + { + fromId: 107, + id: 116, + text: null, + toId: 108, + }, + { + fromId: 108, + id: 117, + text: null, + toId: 118, + }, + { + fromId: 118, + id: 122, + text: 'No', + toId: 121, + }, + { + fromId: 121, + id: 123, + text: null, + toId: 108, + }, + { + fromId: 131, + id: 124, + text: null, + toId: 120, + }, + { + fromId: 120, + id: 126, + text: '', + toId: 125, + }, + { + fromId: 120, + id: 130, + text: '', + toId: 127, + }, + { + fromId: 118, + id: 132, + text: 'Yes', + toId: 131, + }, + { + fromId: 131, + id: 134, + text: 'Need developer assistance?', + toId: 133, + }, + { + fromId: 133, + id: 135, + text: null, + toId: 120, + }, +]; +export default { + getFlowNodes() { + return flowNodes; + }, + getFlowEdges() { + return flowEdges; + }, +}; diff --git a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/index.html b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/index.html new file mode 100644 index 00000000000..81cecb4fa48 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/index.js b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/styles.css b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/styles.css new file mode 100644 index 00000000000..ef449a83d9d --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesAndEdgesArrays/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 725px; +} diff --git a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/App.js b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/App.tsx similarity index 94% rename from JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/App.js rename to JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/App.tsx index e1ac5b364b9..476ae3b975f 100644 --- a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/App.js +++ b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/App.tsx @@ -3,7 +3,7 @@ import Diagram, { Nodes, AutoLayout, Toolbox, Group, } from 'devextreme-react/diagram'; import ArrayStore from 'devextreme/data/array_store'; -import service from './data.js'; +import service from './data.ts'; const dataSource = new ArrayStore({ key: 'this', diff --git a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/data.js b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/data.ts similarity index 100% rename from JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/data.js rename to JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/data.ts diff --git a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/index.html b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/index.html index 4165d17a5c7..d9607076aa0 100644 --- a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/index.html +++ b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/index.js b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/index.tsx b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/App.js b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/App.js new file mode 100644 index 00000000000..8bf827c0dbb --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/App.js @@ -0,0 +1,30 @@ +import React from 'react'; +import Diagram, { + Nodes, AutoLayout, Toolbox, Group, +} from 'devextreme-react/diagram'; +import ArrayStore from 'devextreme/data/array_store'; +import service from './data.js'; + +const dataSource = new ArrayStore({ + key: 'this', + data: service.getEmployees(), +}); +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/data.js b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/data.js new file mode 100644 index 00000000000..e1a361ab6b9 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/data.js @@ -0,0 +1,349 @@ +const employees = [ + { + Full_Name: 'John Heart', + Prefix: 'Mr.', + Title: 'CEO', + City: 'Los Angeles', + State: 'California', + Email: 'jheart@dx-email.com', + Skype: 'jheart_DX_skype', + Mobile_Phone: '(213) 555-9392', + Birth_Date: '1964-03-16', + Hire_Date: '1995-01-15', + Items: [ + { + Full_Name: 'Samantha Bright', + Prefix: 'Dr.', + Title: 'COO', + City: 'Los Angeles', + State: 'California', + Email: 'samanthab@dx-email.com', + Skype: 'samanthab_DX_skype', + Mobile_Phone: '(213) 555-2858', + Birth_Date: '1966-05-02', + Hire_Date: '2004-05-24', + Items: [ + { + Full_Name: 'Kevin Carter', + Prefix: 'Mr.', + Title: 'Shipping Manager', + City: 'San Diego', + State: 'California', + Email: 'kevinc@dx-email.com', + Skype: 'kevinc_DX_skype', + Mobile_Phone: '(213) 555-2840', + Birth_Date: '1978-01-09', + Hire_Date: '2009-08-11', + Items: [ + { + Full_Name: 'Davey Jones', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Pasadena', + State: 'California', + Email: 'davidj@dx-email.com', + Skype: 'davidj_DX_skype', + Mobile_Phone: '(626) 555-0281', + Birth_Date: '1983-03-06', + Hire_Date: '2011-04-24', + }, + { + Full_Name: 'Victor Norris', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'victorn@dx-email.com', + Skype: 'victorn_DX_skype', + Mobile_Phone: '(213) 555-9278', + Birth_Date: '1986-07-23', + Hire_Date: '2012-07-23', + }, + { + Full_Name: 'Mary Stern', + Prefix: 'Ms.', + Title: 'Shipping Assistant', + City: 'Beaver', + State: 'Utah', + Email: 'marys@dx-email.com', + Skype: 'marys_DX_skype', + Mobile_Phone: '(818) 555-7857', + Birth_Date: '1982-04-08', + Hire_Date: '2012-08-12', + }, + { + Full_Name: 'Robin Cosworth', + Prefix: 'Mrs.', + Title: 'Shipping Assistant', + City: 'Los Angeles', + State: 'California', + Email: 'robinc@dx-email.com', + Skype: 'robinc_DX_skype', + Mobile_Phone: '(818) 555-0942', + Birth_Date: '1981-06-12', + Hire_Date: '2012-09-01', + }, + ], + }, + ], + }, + { + Full_Name: 'Arthur Miller', + Prefix: 'Mr.', + Title: 'CTO', + City: 'Denver', + State: 'Colorado', + Email: 'arthurm@dx-email.com', + Skype: 'arthurm_DX_skype', + Mobile_Phone: '(310) 555-8583', + Birth_Date: '1972-07-11', + Hire_Date: '2007-12-18', + Items: [ + { + Full_Name: 'Brett Wade', + Prefix: 'Mr.', + Title: 'IT Manager', + City: 'Reno', + State: 'Nevada', + Email: 'brettw@dx-email.com', + Skype: 'brettw_DX_skype', + Mobile_Phone: '(626) 555-0358', + Birth_Date: '1968-12-01', + Hire_Date: '2009-03-06', + Items: [ + { + Full_Name: 'Taylor Riley', + Prefix: 'Mr.', + Title: 'Network Admin', + City: 'San Jose', + State: 'California', + Email: 'taylorr@dx-email.com', + Skype: 'taylorr_DX_skype', + Mobile_Phone: '(310) 555-7276', + Birth_Date: '1982-08-14', + Hire_Date: '2012-04-14', + }, + { + Full_Name: 'Amelia Harper', + Prefix: 'Mrs.', + Title: 'Network Admin', + City: 'Los Angeles', + State: 'California', + Email: 'ameliah@dx-email.com', + Skype: 'ameliah_DX_skype', + Mobile_Phone: '(213) 555-4276', + Birth_Date: '1983-11-19', + Hire_Date: '2011-02-10', + }, + { + Full_Name: 'Wally Hobbs', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'Chatsworth', + State: 'California', + Email: 'wallyh@dx-email.com', + Skype: 'wallyh_DX_skype', + Mobile_Phone: '(818) 555-8872', + Birth_Date: '1984-12-24', + Hire_Date: '2011-02-17', + }, + { + Full_Name: 'Brad Jameson', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'San Fernando', + State: 'California', + Email: 'bradleyj@dx-email.com', + Skype: 'bradleyj_DX_skype', + Mobile_Phone: '(818) 555-4646', + Birth_Date: '1988-10-12', + Hire_Date: '2011-03-02', + }, + { + Full_Name: 'Karen Goodson', + Prefix: 'Miss', + Title: 'Programmer', + City: 'South Pasadena', + State: 'California', + Email: 'kareng@dx-email.com', + Skype: 'kareng_DX_skype', + Mobile_Phone: '(626) 555-0908', + Birth_Date: '1987-04-26', + Hire_Date: '2011-03-14', + }, + ], + }, + { + Full_Name: 'Barb Banks', + Prefix: 'Mrs.', + Title: 'Support Manager', + City: 'Phoenix', + State: 'Arizona', + Email: 'barbarab@dx-email.com', + Skype: 'barbarab_DX_skype', + Mobile_Phone: '(310) 555-3355', + Birth_Date: '1979-04-14', + Hire_Date: '2002-08-07', + Items: [ + { + Full_Name: 'Kelly Rodriguez', + Prefix: 'Ms.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'kellyr@dx-email.com', + Skype: 'kellyr_DX_skype', + Mobile_Phone: '(818) 555-9248', + Birth_Date: '1988-05-11', + Hire_Date: '2012-10-13', + }, + { + Full_Name: 'James Anderson', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'jamesa@dx-email.com', + Skype: 'jamesa_DX_skype', + Mobile_Phone: '(323) 555-4702', + Birth_Date: '1987-01-29', + Hire_Date: '2012-10-18', + }, + { + Full_Name: 'Antony Remmen', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'anthonyr@dx-email.com', + Skype: 'anthonyr_DX_skype', + Mobile_Phone: '(310) 555-6625', + Birth_Date: '1986-02-19', + Hire_Date: '2013-01-19', + }, + ], + }, + ], + }, + { + Full_Name: 'Robert Reagan', + Prefix: 'Mr.', + Title: 'CMO', + City: 'Bentonville', + State: 'Arkansas', + Email: 'robertr@dx-email.com', + Skype: 'robertr_DX_skype', + Mobile_Phone: '(818) 555-2387', + Birth_Date: '1974-09-07', + Hire_Date: '2002-11-08', + Items: [ + { + Full_Name: 'Ed Holmes', + Prefix: 'Dr.', + Title: 'Sales Manager', + City: 'Malibu', + State: 'California', + Email: 'edwardh@dx-email.com', + Skype: 'edwardh_DX_skype', + Mobile_Phone: '(310) 555-1288', + Birth_Date: '1973-07-14', + Hire_Date: '2005-06-19', + Items: [ + { + Full_Name: 'Sammy Hill', + Prefix: 'Mr.', + Title: 'Sales Assistant', + City: 'Pasadena', + State: 'California', + Email: 'sammyh@dx-email.com', + Skype: 'sammyh_DX_skype', + Mobile_Phone: '(626) 555-7292', + Birth_Date: '1984-02-17', + Hire_Date: '2012-02-01', + }, + { + Full_Name: 'Olivia Peyton', + Prefix: 'Mrs.', + Title: 'Sales Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'oliviap@dx-email.com', + Skype: 'oliviap_DX_skype', + Mobile_Phone: '(310) 555-2728', + Birth_Date: '1981-06-03', + Hire_Date: '2012-05-14', + }, + ], + }, + ], + }, + { + Full_Name: 'Greta Sims', + Prefix: 'Ms.', + Title: 'HR Manager', + City: 'Atlanta', + State: 'Georgia', + Email: 'gretas@dx-email.com', + Skype: 'gretas_DX_skype', + Mobile_Phone: '(818) 555-6546', + Birth_Date: '1977-11-22', + Hire_Date: '1998-04-23', + Items: [ + { + Full_Name: 'Sandra Johnson', + Prefix: 'Mrs.', + Title: 'Controller', + City: 'Beaver', + State: 'Utah', + Email: 'sandraj@dx-email.com', + Skype: 'sandraj_DX_skype', + Mobile_Phone: '(562) 555-2082', + Birth_Date: '1974-11-15', + Hire_Date: '2005-05-11', + }, + { + Full_Name: 'Cindy Stanwick', + Prefix: 'Ms.', + Title: 'HR Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'cindys@dx-email.com', + Skype: 'cindys_DX_skype', + Mobile_Phone: '(818) 555-6655', + Birth_Date: '1985-06-05', + Hire_Date: '2008-03-24', + }, + { + Full_Name: 'Marcus Orbison', + Prefix: 'Mr.', + Title: 'Travel Coordinator', + City: 'Los Angeles', + State: 'California', + Email: 'marcuso@dx-email.com', + Skype: 'marcuso_DX_skype', + Mobile_Phone: '(213) 555-7098', + Birth_Date: '1982-03-02', + Hire_Date: '2005-05-19', + }, + { + Full_Name: 'Sandy Bright', + Prefix: 'Ms.', + Title: 'Benefits Coordinator', + City: 'Denver', + State: 'Colorado', + Email: 'sandrab@dx-email.com', + Skype: 'sandrab_DX_skype', + Mobile_Phone: '(818) 555-0524', + Birth_Date: '1983-09-11', + Hire_Date: '2005-06-04', + }, + ], + }, + ], + }, +]; +export default { + getEmployees() { + return employees; + }, +}; diff --git a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/index.html b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/index.html new file mode 100644 index 00000000000..81cecb4fa48 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/index.js b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/styles.css b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/styles.css new file mode 100644 index 00000000000..ef449a83d9d --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayHierarchicalStructure/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 725px; +} diff --git a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/App.js b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/App.tsx similarity index 94% rename from JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/App.js rename to JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/App.tsx index 2c17eeb88b3..a0841fe660d 100644 --- a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/App.js +++ b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/App.tsx @@ -3,7 +3,7 @@ import Diagram, { Nodes, AutoLayout, Toolbox, Group, } from 'devextreme-react/diagram'; import ArrayStore from 'devextreme/data/array_store'; -import service from './data.js'; +import service from './data.ts'; const dataSource = new ArrayStore({ key: 'ID', diff --git a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/data.js b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/data.ts similarity index 100% rename from JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/data.js rename to JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/data.ts diff --git a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/index.html b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/index.html index 4165d17a5c7..d9607076aa0 100644 --- a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/index.html +++ b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/index.js b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/index.tsx b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/App.js b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/App.js new file mode 100644 index 00000000000..50a7c053b30 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/App.js @@ -0,0 +1,31 @@ +import React from 'react'; +import Diagram, { + Nodes, AutoLayout, Toolbox, Group, +} from 'devextreme-react/diagram'; +import ArrayStore from 'devextreme/data/array_store'; +import service from './data.js'; + +const dataSource = new ArrayStore({ + key: 'ID', + data: service.getEmployees(), +}); +export default function App() { + return ( + + + + + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/data.js b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/data.js new file mode 100644 index 00000000000..0ea5aeb392b --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/data.js @@ -0,0 +1,370 @@ +const employees = [ + { + ID: 1, + Full_Name: 'John Heart', + Prefix: 'Mr.', + Title: 'CEO', + City: 'Los Angeles', + State: 'California', + Email: 'jheart@dx-email.com', + Skype: 'jheart_DX_skype', + Mobile_Phone: '(213) 555-9392', + Birth_Date: '1964-03-16', + Hire_Date: '1995-01-15', + }, + { + ID: 2, + Head_ID: 1, + Full_Name: 'Samantha Bright', + Prefix: 'Dr.', + Title: 'COO', + City: 'Los Angeles', + State: 'California', + Email: 'samanthab@dx-email.com', + Skype: 'samanthab_DX_skype', + Mobile_Phone: '(213) 555-2858', + Birth_Date: '1966-05-02', + Hire_Date: '2004-05-24', + }, + { + ID: 3, + Head_ID: 1, + Full_Name: 'Arthur Miller', + Prefix: 'Mr.', + Title: 'CTO', + City: 'Denver', + State: 'Colorado', + Email: 'arthurm@dx-email.com', + Skype: 'arthurm_DX_skype', + Mobile_Phone: '(310) 555-8583', + Birth_Date: '1972-07-11', + Hire_Date: '2007-12-18', + }, + { + ID: 4, + Head_ID: 1, + Full_Name: 'Robert Reagan', + Prefix: 'Mr.', + Title: 'CMO', + City: 'Bentonville', + State: 'Arkansas', + Email: 'robertr@dx-email.com', + Skype: 'robertr_DX_skype', + Mobile_Phone: '(818) 555-2387', + Birth_Date: '1974-09-07', + Hire_Date: '2002-11-08', + }, + { + ID: 5, + Head_ID: 1, + Full_Name: 'Greta Sims', + Prefix: 'Ms.', + Title: 'HR Manager', + City: 'Atlanta', + State: 'Georgia', + Email: 'gretas@dx-email.com', + Skype: 'gretas_DX_skype', + Mobile_Phone: '(818) 555-6546', + Birth_Date: '1977-11-22', + Hire_Date: '1998-04-23', + }, + { + ID: 6, + Head_ID: 3, + Full_Name: 'Brett Wade', + Prefix: 'Mr.', + Title: 'IT Manager', + City: 'Reno', + State: 'Nevada', + Email: 'brettw@dx-email.com', + Skype: 'brettw_DX_skype', + Mobile_Phone: '(626) 555-0358', + Birth_Date: '1968-12-01', + Hire_Date: '2009-03-06', + }, + { + ID: 7, + Head_ID: 5, + Full_Name: 'Sandra Johnson', + Prefix: 'Mrs.', + Title: 'Controller', + City: 'Beaver', + State: 'Utah', + Email: 'sandraj@dx-email.com', + Skype: 'sandraj_DX_skype', + Mobile_Phone: '(562) 555-2082', + Birth_Date: '1974-11-15', + Hire_Date: '2005-05-11', + }, + { + ID: 8, + Head_ID: 4, + Full_Name: 'Ed Holmes', + Prefix: 'Dr.', + Title: 'Sales Manager', + City: 'Malibu', + State: 'California', + Email: 'edwardh@dx-email.com', + Skype: 'edwardh_DX_skype', + Mobile_Phone: '(310) 555-1288', + Birth_Date: '1973-07-14', + Hire_Date: '2005-06-19', + }, + { + ID: 9, + Head_ID: 3, + Full_Name: 'Barb Banks', + Prefix: 'Mrs.', + Title: 'Support Manager', + City: 'Phoenix', + State: 'Arizona', + Email: 'barbarab@dx-email.com', + Skype: 'barbarab_DX_skype', + Mobile_Phone: '(310) 555-3355', + Birth_Date: '1979-04-14', + Hire_Date: '2002-08-07', + }, + { + ID: 10, + Head_ID: 2, + Full_Name: 'Kevin Carter', + Prefix: 'Mr.', + Title: 'Shipping Manager', + City: 'San Diego', + State: 'California', + Email: 'kevinc@dx-email.com', + Skype: 'kevinc_DX_skype', + Mobile_Phone: '(213) 555-2840', + Birth_Date: '1978-01-09', + Hire_Date: '2009-08-11', + }, + { + ID: 11, + Head_ID: 5, + Full_Name: 'Cindy Stanwick', + Prefix: 'Ms.', + Title: 'HR Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'cindys@dx-email.com', + Skype: 'cindys_DX_skype', + Mobile_Phone: '(818) 555-6655', + Birth_Date: '1985-06-05', + Hire_Date: '2008-03-24', + }, + { + ID: 12, + Head_ID: 8, + Full_Name: 'Sammy Hill', + Prefix: 'Mr.', + Title: 'Sales Assistant', + City: 'Pasadena', + State: 'California', + Email: 'sammyh@dx-email.com', + Skype: 'sammyh_DX_skype', + Mobile_Phone: '(626) 555-7292', + Birth_Date: '1984-02-17', + Hire_Date: '2012-02-01', + }, + { + ID: 13, + Head_ID: 10, + Full_Name: 'Davey Jones', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Pasadena', + State: 'California', + Email: 'davidj@dx-email.com', + Skype: 'davidj_DX_skype', + Mobile_Phone: '(626) 555-0281', + Birth_Date: '1983-03-06', + Hire_Date: '2011-04-24', + }, + { + ID: 14, + Head_ID: 10, + Full_Name: 'Victor Norris', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'victorn@dx-email.com', + Skype: 'victorn_DX_skype', + Mobile_Phone: '(213) 555-9278', + Birth_Date: '1986-07-23', + Hire_Date: '2012-07-23', + }, + { + ID: 15, + Head_ID: 10, + Full_Name: 'Mary Stern', + Prefix: 'Ms.', + Title: 'Shipping Assistant', + City: 'Beaver', + State: 'Utah', + Email: 'marys@dx-email.com', + Skype: 'marys_DX_skype', + Mobile_Phone: '(818) 555-7857', + Birth_Date: '1982-04-08', + Hire_Date: '2012-08-12', + }, + { + ID: 16, + Head_ID: 10, + Full_Name: 'Robin Cosworth', + Prefix: 'Mrs.', + Title: 'Shipping Assistant', + City: 'Los Angeles', + State: 'California', + Email: 'robinc@dx-email.com', + Skype: 'robinc_DX_skype', + Mobile_Phone: '(818) 555-0942', + Birth_Date: '1981-06-12', + Hire_Date: '2012-09-01', + }, + { + ID: 17, + Head_ID: 9, + Full_Name: 'Kelly Rodriguez', + Prefix: 'Ms.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'kellyr@dx-email.com', + Skype: 'kellyr_DX_skype', + Mobile_Phone: '(818) 555-9248', + Birth_Date: '1988-05-11', + Hire_Date: '2012-10-13', + }, + { + ID: 18, + Head_ID: 9, + Full_Name: 'James Anderson', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'jamesa@dx-email.com', + Skype: 'jamesa_DX_skype', + Mobile_Phone: '(323) 555-4702', + Birth_Date: '1987-01-29', + Hire_Date: '2012-10-18', + }, + { + ID: 19, + Head_ID: 9, + Full_Name: 'Antony Remmen', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'anthonyr@dx-email.com', + Skype: 'anthonyr_DX_skype', + Mobile_Phone: '(310) 555-6625', + Birth_Date: '1986-02-19', + Hire_Date: '2013-01-19', + }, + { + ID: 20, + Head_ID: 8, + Full_Name: 'Olivia Peyton', + Prefix: 'Mrs.', + Title: 'Sales Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'oliviap@dx-email.com', + Skype: 'oliviap_DX_skype', + Mobile_Phone: '(310) 555-2728', + Birth_Date: '1981-06-03', + Hire_Date: '2012-05-14', + }, + { + ID: 21, + Head_ID: 6, + Full_Name: 'Taylor Riley', + Prefix: 'Mr.', + Title: 'Network Admin', + City: 'San Jose', + State: 'California', + Email: 'taylorr@dx-email.com', + Skype: 'taylorr_DX_skype', + Mobile_Phone: '(310) 555-7276', + Birth_Date: '1982-08-14', + Hire_Date: '2012-04-14', + }, + { + ID: 22, + Head_ID: 6, + Full_Name: 'Amelia Harper', + Prefix: 'Mrs.', + Title: 'Network Admin', + City: 'Los Angeles', + State: 'California', + Email: 'ameliah@dx-email.com', + Skype: 'ameliah_DX_skype', + Mobile_Phone: '(213) 555-4276', + Birth_Date: '1983-11-19', + Hire_Date: '2011-02-10', + }, + { + ID: 23, + Head_ID: 6, + Full_Name: 'Wally Hobbs', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'Chatsworth', + State: 'California', + Email: 'wallyh@dx-email.com', + Skype: 'wallyh_DX_skype', + Mobile_Phone: '(818) 555-8872', + Birth_Date: '1984-12-24', + Hire_Date: '2011-02-17', + }, + { + ID: 24, + Head_ID: 6, + Full_Name: 'Brad Jameson', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'San Fernando', + State: 'California', + Email: 'bradleyj@dx-email.com', + Skype: 'bradleyj_DX_skype', + Mobile_Phone: '(818) 555-4646', + Birth_Date: '1988-10-12', + Hire_Date: '2011-03-02', + }, + { + ID: 25, + Head_ID: 6, + Full_Name: 'Karen Goodson', + Prefix: 'Miss', + Title: 'Programmer', + City: 'South Pasadena', + State: 'California', + Email: 'kareng@dx-email.com', + Skype: 'kareng_DX_skype', + Mobile_Phone: '(626) 555-0908', + Birth_Date: '1987-04-26', + Hire_Date: '2011-03-14', + }, + { + ID: 26, + Head_ID: 5, + Full_Name: 'Marcus Orbison', + Prefix: 'Mr.', + Title: 'Travel Coordinator', + City: 'Los Angeles', + State: 'California', + Email: 'marcuso@dx-email.com', + Skype: 'marcuso_DX_skype', + Mobile_Phone: '(213) 555-7098', + Birth_Date: '1982-03-02', + Hire_Date: '2005-05-19', + }, +]; +export default { + getEmployees() { + return employees; + }, +}; diff --git a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/index.html b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/index.html new file mode 100644 index 00000000000..81cecb4fa48 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/index.js b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/styles.css b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/styles.css new file mode 100644 index 00000000000..ef449a83d9d --- /dev/null +++ b/JSDemos/Demos/Diagram/NodesArrayPlainStructure/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 725px; +} diff --git a/JSDemos/Demos/Diagram/OperationRestrictions/React/App.js b/JSDemos/Demos/Diagram/OperationRestrictions/React/App.tsx similarity index 78% rename from JSDemos/Demos/Diagram/OperationRestrictions/React/App.js rename to JSDemos/Demos/Diagram/OperationRestrictions/React/App.tsx index 497158028a1..91e456763bb 100644 --- a/JSDemos/Demos/Diagram/OperationRestrictions/React/App.js +++ b/JSDemos/Demos/Diagram/OperationRestrictions/React/App.tsx @@ -1,10 +1,10 @@ import React from 'react'; import Diagram, { - CustomShape, Nodes, AutoLayout, ContextToolbox, Toolbox, PropertiesPanel, Group, + CustomShape, Nodes, AutoLayout, ContextToolbox, Toolbox, PropertiesPanel, Group, DiagramTypes, } from 'devextreme-react/diagram'; import notify from 'devextreme/ui/notify'; import ArrayStore from 'devextreme/data/array_store'; -import service from './data.js'; +import service from './data.ts'; const shapes = ['team', 'employee']; @@ -13,7 +13,7 @@ const orgItemsDataSource = new ArrayStore({ data: service.getOrgItems(), }); -function showToast(text) { +function showToast(text: string) { notify({ position: { at: 'top', my: 'top', of: '#diagram', offset: '0 4', @@ -24,7 +24,7 @@ function showToast(text) { }); } -function onRequestLayoutUpdate(e) { +function onRequestLayoutUpdate(e: DiagramTypes.RequestLayoutUpdateEvent) { for (let i = 0; i < e.changes.length; i += 1) { if (e.changes[i].type === 'remove') { e.allowed = true; @@ -34,7 +34,7 @@ function onRequestLayoutUpdate(e) { } } -function itemStyleExpr(obj) { +function itemStyleExpr(obj: { Type: string; }) { if (obj.Type === 'root') { return { fill: '#ffcfc3' }; } @@ -121,20 +121,46 @@ export default function App() { }, []); return ( - - - - - + + + + + - + - + diff --git a/JSDemos/Demos/Diagram/OperationRestrictions/React/data.js b/JSDemos/Demos/Diagram/OperationRestrictions/React/data.ts similarity index 100% rename from JSDemos/Demos/Diagram/OperationRestrictions/React/data.js rename to JSDemos/Demos/Diagram/OperationRestrictions/React/data.ts diff --git a/JSDemos/Demos/Diagram/OperationRestrictions/React/index.html b/JSDemos/Demos/Diagram/OperationRestrictions/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/OperationRestrictions/React/index.html +++ b/JSDemos/Demos/Diagram/OperationRestrictions/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/OperationRestrictions/React/index.js b/JSDemos/Demos/Diagram/OperationRestrictions/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/OperationRestrictions/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/OperationRestrictions/React/index.tsx b/JSDemos/Demos/Diagram/OperationRestrictions/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/OperationRestrictions/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/App.js b/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/App.js new file mode 100644 index 00000000000..dd728affee4 --- /dev/null +++ b/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/App.js @@ -0,0 +1,174 @@ +import React from 'react'; +import Diagram, { + CustomShape, + Nodes, + AutoLayout, + ContextToolbox, + Toolbox, + PropertiesPanel, + Group, +} from 'devextreme-react/diagram'; +import notify from 'devextreme/ui/notify'; +import ArrayStore from 'devextreme/data/array_store'; +import service from './data.js'; + +const shapes = ['team', 'employee']; +const orgItemsDataSource = new ArrayStore({ + key: 'ID', + data: service.getOrgItems(), +}); +function showToast(text) { + notify({ + position: { + at: 'top', + my: 'top', + of: '#diagram', + offset: '0 4', + }, + message: text, + type: 'warning', + delayTime: 2000, + }); +} +function onRequestLayoutUpdate(e) { + for (let i = 0; i < e.changes.length; i += 1) { + if (e.changes[i].type === 'remove') { + e.allowed = true; + } else if (e.changes[i].data.ParentID !== undefined && e.changes[i].data.ParentID !== null) { + e.allowed = true; + } + } +} +function itemStyleExpr(obj) { + if (obj.Type === 'root') { + return { fill: '#ffcfc3' }; + } + if (obj.Type === 'team') { + return { fill: '#b7e3fe' }; + } + return { fill: '#bbefcb' }; +} +export default function App() { + const diagramRef = React.useRef(null); + const onRequestEditOperation = React.useCallback((e) => { + const diagram = diagramRef.current.instance; + if (e.operation === 'addShape') { + if (e.args.shape.type !== 'employee' && e.args.shape.type !== 'team') { + if (e.reason !== 'checkUIElementAvailability') { + showToast("You can add only a 'Team' or 'Employee' shape."); + } + e.allowed = false; + } + } else if (e.operation === 'deleteShape') { + if (e.args.shape.type === 'root') { + if (e.reason !== 'checkUIElementAvailability') { + showToast("You cannot delete the 'Development' shape."); + } + e.allowed = false; + } + if (e.args.shape.type === 'team') { + for (let i = 0; i < e.args.shape.attachedConnectorIds.length; i += 1) { + if (diagram.getItemById(e.args.shape.attachedConnectorIds[i]).toId !== e.args.shape.id) { + if (e.reason !== 'checkUIElementAvailability') { + showToast("You cannot delete a 'Team' shape that has a child shape."); + } + e.allowed = false; + break; + } + } + } + } else if (e.operation === 'resizeShape') { + if (e.args.newSize.width < 1 || e.args.newSize.height < 0.75) { + if (e.reason !== 'checkUIElementAvailability') { + showToast('The shape size is too small.'); + } + e.allowed = false; + } + } else if (e.operation === 'changeConnection') { + const shapeType = e.args.newShape && e.args.newShape.type; + if (shapeType === 'root' && e.args.connectorPosition === 'end') { + if (e.reason !== 'checkUIElementAvailability') { + showToast("The 'Development' shape cannot have an incoming connection."); + } + e.allowed = false; + } + if (shapeType === 'employee' && e.args.connectorPosition === 'start') { + e.allowed = false; + } + } else if (e.operation === 'changeConnectorPoints') { + if (e.args.newPoints.length > 2) { + if (e.reason !== 'checkUIElementAvailability') { + showToast('You cannot add points to a connector.'); + } + e.allowed = false; + } + } else if (e.operation === 'beforeChangeShapeText') { + if (e.args.shape.type === 'root') { + if (e.reason !== 'checkUIElementAvailability') { + showToast("You cannot change the 'Development' shape's text."); + } + e.allowed = false; + } + } else if (e.operation === 'changeShapeText') { + if (e.args.text === '') { + if (e.reason !== 'checkUIElementAvailability') { + showToast('A shape text cannot be empty.'); + } + e.allowed = false; + } + } else if (e.operation === 'beforeChangeConnectorText') { + e.allowed = false; + } + }, []); + return ( + + + + + + + + + + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/data.js b/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/data.js new file mode 100644 index 00000000000..7d25de002fa --- /dev/null +++ b/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/data.js @@ -0,0 +1,72 @@ +const orgItems = [ + { + ID: '106', + Name: 'Development', + Type: 'root', + }, + { + ID: '107', + Name: 'WinForms Team', + Type: 'team', + ParentID: '106', + }, + { + ID: '109', + Name: 'Javascript Team', + Type: 'team', + ParentID: '106', + }, + { + ID: '110', + Name: 'ASP.NET Team', + Type: 'team', + ParentID: '106', + }, + { + ID: '112', + Name: 'Ana Trujillo', + Type: 'employee', + ParentID: '107', + }, + { + ID: '113', + Name: 'Antonio Moreno', + Type: 'employee', + ParentID: '107', + }, + { + ID: '115', + Name: 'Christina Berglund', + Type: 'employee', + ParentID: '109', + }, + { + ID: '116', + Name: 'Hanna Moos', + Type: 'employee', + ParentID: '109', + }, + { + ID: '119', + Name: 'Laurence Lebihan', + Type: 'employee', + ParentID: '110', + }, + { + ID: '122', + Name: 'Patricio Simpson', + Type: 'employee', + ParentID: '110', + }, + { + ID: '123', + Name: 'Francisco Chang', + Type: 'employee', + ParentID: '110', + }, +]; +export default { + getOrgItems() { + return orgItems; + }, +}; diff --git a/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/index.html b/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/index.js b/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/styles.css b/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/styles.css new file mode 100644 index 00000000000..832b8896cd0 --- /dev/null +++ b/JSDemos/Demos/Diagram/OperationRestrictions/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 600px; +} diff --git a/JSDemos/Demos/Diagram/Overview/React/App.js b/JSDemos/Demos/Diagram/Overview/React/App.tsx similarity index 92% rename from JSDemos/Demos/Diagram/Overview/React/App.js rename to JSDemos/Demos/Diagram/Overview/React/App.tsx index 9da553e7183..f5b55c747ad 100644 --- a/JSDemos/Demos/Diagram/Overview/React/App.js +++ b/JSDemos/Demos/Diagram/Overview/React/App.tsx @@ -3,7 +3,7 @@ import Diagram from 'devextreme-react/diagram'; import 'whatwg-fetch'; export default function App() { - const diagramRef = React.useRef(); + const diagramRef = React.useRef(); React.useEffect(() => { const diagram = diagramRef.current.instance; diff --git a/JSDemos/Demos/Diagram/Overview/React/index.html b/JSDemos/Demos/Diagram/Overview/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/Overview/React/index.html +++ b/JSDemos/Demos/Diagram/Overview/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/Overview/React/index.js b/JSDemos/Demos/Diagram/Overview/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/Overview/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/Overview/React/index.tsx b/JSDemos/Demos/Diagram/Overview/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/Overview/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/Overview/ReactJs/App.js b/JSDemos/Demos/Diagram/Overview/ReactJs/App.js new file mode 100644 index 00000000000..d0b86d0adc9 --- /dev/null +++ b/JSDemos/Demos/Diagram/Overview/ReactJs/App.js @@ -0,0 +1,24 @@ +import React from 'react'; +import Diagram from 'devextreme-react/diagram'; +import 'whatwg-fetch'; + +export default function App() { + const diagramRef = React.useRef(); + React.useEffect(() => { + const diagram = diagramRef.current.instance; + fetch('../../../../data/diagram-flow.json') + .then((response) => response.json()) + .then((json) => { + diagram.import(JSON.stringify(json)); + }) + .catch(() => { + throw new Error('Data Loading Error'); + }); + }, []); + return ( + + ); +} diff --git a/JSDemos/Demos/Diagram/Overview/ReactJs/index.html b/JSDemos/Demos/Diagram/Overview/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/Overview/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/Overview/ReactJs/index.js b/JSDemos/Demos/Diagram/Overview/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/Overview/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/Overview/ReactJs/styles.css b/JSDemos/Demos/Diagram/Overview/ReactJs/styles.css new file mode 100644 index 00000000000..1eefae9372a --- /dev/null +++ b/JSDemos/Demos/Diagram/Overview/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 900px; +} diff --git a/JSDemos/Demos/Diagram/ReadOnly/React/App.js b/JSDemos/Demos/Diagram/ReadOnly/React/App.tsx similarity index 91% rename from JSDemos/Demos/Diagram/ReadOnly/React/App.js rename to JSDemos/Demos/Diagram/ReadOnly/React/App.tsx index aa85b5bc040..6595b751e3c 100644 --- a/JSDemos/Demos/Diagram/ReadOnly/React/App.js +++ b/JSDemos/Demos/Diagram/ReadOnly/React/App.tsx @@ -3,7 +3,7 @@ import Diagram from 'devextreme-react/diagram'; import 'whatwg-fetch'; export default function App() { - const diagramRef = React.useRef(null); + const diagramRef = React.useRef(null); React.useEffect(() => { const diagram = diagramRef.current.instance; diff --git a/JSDemos/Demos/Diagram/ReadOnly/React/index.html b/JSDemos/Demos/Diagram/ReadOnly/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/ReadOnly/React/index.html +++ b/JSDemos/Demos/Diagram/ReadOnly/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/ReadOnly/React/index.js b/JSDemos/Demos/Diagram/ReadOnly/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/ReadOnly/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/ReadOnly/React/index.tsx b/JSDemos/Demos/Diagram/ReadOnly/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/ReadOnly/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/ReadOnly/ReactJs/App.js b/JSDemos/Demos/Diagram/ReadOnly/ReactJs/App.js new file mode 100644 index 00000000000..af902657282 --- /dev/null +++ b/JSDemos/Demos/Diagram/ReadOnly/ReactJs/App.js @@ -0,0 +1,25 @@ +import React from 'react'; +import Diagram from 'devextreme-react/diagram'; +import 'whatwg-fetch'; + +export default function App() { + const diagramRef = React.useRef(null); + React.useEffect(() => { + const diagram = diagramRef.current.instance; + fetch('../../../../data/diagram-structure.json') + .then((response) => response.json()) + .then((json) => { + diagram.import(JSON.stringify(json)); + }) + .catch(() => { + throw new Error('Data Loading Error'); + }); + }, []); + return ( + + ); +} diff --git a/JSDemos/Demos/Diagram/ReadOnly/ReactJs/index.html b/JSDemos/Demos/Diagram/ReadOnly/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/ReadOnly/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/ReadOnly/ReactJs/index.js b/JSDemos/Demos/Diagram/ReadOnly/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/ReadOnly/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/ReadOnly/ReactJs/styles.css b/JSDemos/Demos/Diagram/ReadOnly/ReactJs/styles.css new file mode 100644 index 00000000000..7247cc93a42 --- /dev/null +++ b/JSDemos/Demos/Diagram/ReadOnly/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 700px; +} diff --git a/JSDemos/Demos/Diagram/SimpleView/React/App.js b/JSDemos/Demos/Diagram/SimpleView/React/App.tsx similarity index 94% rename from JSDemos/Demos/Diagram/SimpleView/React/App.js rename to JSDemos/Demos/Diagram/SimpleView/React/App.tsx index 545b32faf7a..ec33b7d80cd 100644 --- a/JSDemos/Demos/Diagram/SimpleView/React/App.js +++ b/JSDemos/Demos/Diagram/SimpleView/React/App.tsx @@ -3,7 +3,7 @@ import Diagram, { Nodes, AutoLayout, Toolbox, PropertiesPanel, } from 'devextreme-react/diagram'; import ArrayStore from 'devextreme/data/array_store'; -import service from './data.js'; +import service from './data.ts'; const dataSource = new ArrayStore({ key: 'ID', diff --git a/JSDemos/Demos/Diagram/SimpleView/React/data.js b/JSDemos/Demos/Diagram/SimpleView/React/data.ts similarity index 100% rename from JSDemos/Demos/Diagram/SimpleView/React/data.js rename to JSDemos/Demos/Diagram/SimpleView/React/data.ts diff --git a/JSDemos/Demos/Diagram/SimpleView/React/index.html b/JSDemos/Demos/Diagram/SimpleView/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/SimpleView/React/index.html +++ b/JSDemos/Demos/Diagram/SimpleView/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/SimpleView/React/index.js b/JSDemos/Demos/Diagram/SimpleView/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/SimpleView/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/SimpleView/React/index.tsx b/JSDemos/Demos/Diagram/SimpleView/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/SimpleView/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/SimpleView/ReactJs/App.js b/JSDemos/Demos/Diagram/SimpleView/ReactJs/App.js new file mode 100644 index 00000000000..7c165a078b1 --- /dev/null +++ b/JSDemos/Demos/Diagram/SimpleView/ReactJs/App.js @@ -0,0 +1,30 @@ +import React from 'react'; +import Diagram, { + Nodes, AutoLayout, Toolbox, PropertiesPanel, +} from 'devextreme-react/diagram'; +import ArrayStore from 'devextreme/data/array_store'; +import service from './data.js'; + +const dataSource = new ArrayStore({ + key: 'ID', + data: service.getEmployees(), +}); +export default function App() { + return ( + + + + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/SimpleView/ReactJs/data.js b/JSDemos/Demos/Diagram/SimpleView/ReactJs/data.js new file mode 100644 index 00000000000..0ea5aeb392b --- /dev/null +++ b/JSDemos/Demos/Diagram/SimpleView/ReactJs/data.js @@ -0,0 +1,370 @@ +const employees = [ + { + ID: 1, + Full_Name: 'John Heart', + Prefix: 'Mr.', + Title: 'CEO', + City: 'Los Angeles', + State: 'California', + Email: 'jheart@dx-email.com', + Skype: 'jheart_DX_skype', + Mobile_Phone: '(213) 555-9392', + Birth_Date: '1964-03-16', + Hire_Date: '1995-01-15', + }, + { + ID: 2, + Head_ID: 1, + Full_Name: 'Samantha Bright', + Prefix: 'Dr.', + Title: 'COO', + City: 'Los Angeles', + State: 'California', + Email: 'samanthab@dx-email.com', + Skype: 'samanthab_DX_skype', + Mobile_Phone: '(213) 555-2858', + Birth_Date: '1966-05-02', + Hire_Date: '2004-05-24', + }, + { + ID: 3, + Head_ID: 1, + Full_Name: 'Arthur Miller', + Prefix: 'Mr.', + Title: 'CTO', + City: 'Denver', + State: 'Colorado', + Email: 'arthurm@dx-email.com', + Skype: 'arthurm_DX_skype', + Mobile_Phone: '(310) 555-8583', + Birth_Date: '1972-07-11', + Hire_Date: '2007-12-18', + }, + { + ID: 4, + Head_ID: 1, + Full_Name: 'Robert Reagan', + Prefix: 'Mr.', + Title: 'CMO', + City: 'Bentonville', + State: 'Arkansas', + Email: 'robertr@dx-email.com', + Skype: 'robertr_DX_skype', + Mobile_Phone: '(818) 555-2387', + Birth_Date: '1974-09-07', + Hire_Date: '2002-11-08', + }, + { + ID: 5, + Head_ID: 1, + Full_Name: 'Greta Sims', + Prefix: 'Ms.', + Title: 'HR Manager', + City: 'Atlanta', + State: 'Georgia', + Email: 'gretas@dx-email.com', + Skype: 'gretas_DX_skype', + Mobile_Phone: '(818) 555-6546', + Birth_Date: '1977-11-22', + Hire_Date: '1998-04-23', + }, + { + ID: 6, + Head_ID: 3, + Full_Name: 'Brett Wade', + Prefix: 'Mr.', + Title: 'IT Manager', + City: 'Reno', + State: 'Nevada', + Email: 'brettw@dx-email.com', + Skype: 'brettw_DX_skype', + Mobile_Phone: '(626) 555-0358', + Birth_Date: '1968-12-01', + Hire_Date: '2009-03-06', + }, + { + ID: 7, + Head_ID: 5, + Full_Name: 'Sandra Johnson', + Prefix: 'Mrs.', + Title: 'Controller', + City: 'Beaver', + State: 'Utah', + Email: 'sandraj@dx-email.com', + Skype: 'sandraj_DX_skype', + Mobile_Phone: '(562) 555-2082', + Birth_Date: '1974-11-15', + Hire_Date: '2005-05-11', + }, + { + ID: 8, + Head_ID: 4, + Full_Name: 'Ed Holmes', + Prefix: 'Dr.', + Title: 'Sales Manager', + City: 'Malibu', + State: 'California', + Email: 'edwardh@dx-email.com', + Skype: 'edwardh_DX_skype', + Mobile_Phone: '(310) 555-1288', + Birth_Date: '1973-07-14', + Hire_Date: '2005-06-19', + }, + { + ID: 9, + Head_ID: 3, + Full_Name: 'Barb Banks', + Prefix: 'Mrs.', + Title: 'Support Manager', + City: 'Phoenix', + State: 'Arizona', + Email: 'barbarab@dx-email.com', + Skype: 'barbarab_DX_skype', + Mobile_Phone: '(310) 555-3355', + Birth_Date: '1979-04-14', + Hire_Date: '2002-08-07', + }, + { + ID: 10, + Head_ID: 2, + Full_Name: 'Kevin Carter', + Prefix: 'Mr.', + Title: 'Shipping Manager', + City: 'San Diego', + State: 'California', + Email: 'kevinc@dx-email.com', + Skype: 'kevinc_DX_skype', + Mobile_Phone: '(213) 555-2840', + Birth_Date: '1978-01-09', + Hire_Date: '2009-08-11', + }, + { + ID: 11, + Head_ID: 5, + Full_Name: 'Cindy Stanwick', + Prefix: 'Ms.', + Title: 'HR Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'cindys@dx-email.com', + Skype: 'cindys_DX_skype', + Mobile_Phone: '(818) 555-6655', + Birth_Date: '1985-06-05', + Hire_Date: '2008-03-24', + }, + { + ID: 12, + Head_ID: 8, + Full_Name: 'Sammy Hill', + Prefix: 'Mr.', + Title: 'Sales Assistant', + City: 'Pasadena', + State: 'California', + Email: 'sammyh@dx-email.com', + Skype: 'sammyh_DX_skype', + Mobile_Phone: '(626) 555-7292', + Birth_Date: '1984-02-17', + Hire_Date: '2012-02-01', + }, + { + ID: 13, + Head_ID: 10, + Full_Name: 'Davey Jones', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Pasadena', + State: 'California', + Email: 'davidj@dx-email.com', + Skype: 'davidj_DX_skype', + Mobile_Phone: '(626) 555-0281', + Birth_Date: '1983-03-06', + Hire_Date: '2011-04-24', + }, + { + ID: 14, + Head_ID: 10, + Full_Name: 'Victor Norris', + Prefix: 'Mr.', + Title: 'Shipping Assistant', + City: 'Little Rock', + State: 'Arkansas', + Email: 'victorn@dx-email.com', + Skype: 'victorn_DX_skype', + Mobile_Phone: '(213) 555-9278', + Birth_Date: '1986-07-23', + Hire_Date: '2012-07-23', + }, + { + ID: 15, + Head_ID: 10, + Full_Name: 'Mary Stern', + Prefix: 'Ms.', + Title: 'Shipping Assistant', + City: 'Beaver', + State: 'Utah', + Email: 'marys@dx-email.com', + Skype: 'marys_DX_skype', + Mobile_Phone: '(818) 555-7857', + Birth_Date: '1982-04-08', + Hire_Date: '2012-08-12', + }, + { + ID: 16, + Head_ID: 10, + Full_Name: 'Robin Cosworth', + Prefix: 'Mrs.', + Title: 'Shipping Assistant', + City: 'Los Angeles', + State: 'California', + Email: 'robinc@dx-email.com', + Skype: 'robinc_DX_skype', + Mobile_Phone: '(818) 555-0942', + Birth_Date: '1981-06-12', + Hire_Date: '2012-09-01', + }, + { + ID: 17, + Head_ID: 9, + Full_Name: 'Kelly Rodriguez', + Prefix: 'Ms.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'kellyr@dx-email.com', + Skype: 'kellyr_DX_skype', + Mobile_Phone: '(818) 555-9248', + Birth_Date: '1988-05-11', + Hire_Date: '2012-10-13', + }, + { + ID: 18, + Head_ID: 9, + Full_Name: 'James Anderson', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'jamesa@dx-email.com', + Skype: 'jamesa_DX_skype', + Mobile_Phone: '(323) 555-4702', + Birth_Date: '1987-01-29', + Hire_Date: '2012-10-18', + }, + { + ID: 19, + Head_ID: 9, + Full_Name: 'Antony Remmen', + Prefix: 'Mr.', + Title: 'Support Assistant', + City: 'Boise', + State: 'Idaho', + Email: 'anthonyr@dx-email.com', + Skype: 'anthonyr_DX_skype', + Mobile_Phone: '(310) 555-6625', + Birth_Date: '1986-02-19', + Hire_Date: '2013-01-19', + }, + { + ID: 20, + Head_ID: 8, + Full_Name: 'Olivia Peyton', + Prefix: 'Mrs.', + Title: 'Sales Assistant', + City: 'Atlanta', + State: 'Georgia', + Email: 'oliviap@dx-email.com', + Skype: 'oliviap_DX_skype', + Mobile_Phone: '(310) 555-2728', + Birth_Date: '1981-06-03', + Hire_Date: '2012-05-14', + }, + { + ID: 21, + Head_ID: 6, + Full_Name: 'Taylor Riley', + Prefix: 'Mr.', + Title: 'Network Admin', + City: 'San Jose', + State: 'California', + Email: 'taylorr@dx-email.com', + Skype: 'taylorr_DX_skype', + Mobile_Phone: '(310) 555-7276', + Birth_Date: '1982-08-14', + Hire_Date: '2012-04-14', + }, + { + ID: 22, + Head_ID: 6, + Full_Name: 'Amelia Harper', + Prefix: 'Mrs.', + Title: 'Network Admin', + City: 'Los Angeles', + State: 'California', + Email: 'ameliah@dx-email.com', + Skype: 'ameliah_DX_skype', + Mobile_Phone: '(213) 555-4276', + Birth_Date: '1983-11-19', + Hire_Date: '2011-02-10', + }, + { + ID: 23, + Head_ID: 6, + Full_Name: 'Wally Hobbs', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'Chatsworth', + State: 'California', + Email: 'wallyh@dx-email.com', + Skype: 'wallyh_DX_skype', + Mobile_Phone: '(818) 555-8872', + Birth_Date: '1984-12-24', + Hire_Date: '2011-02-17', + }, + { + ID: 24, + Head_ID: 6, + Full_Name: 'Brad Jameson', + Prefix: 'Mr.', + Title: 'Programmer', + City: 'San Fernando', + State: 'California', + Email: 'bradleyj@dx-email.com', + Skype: 'bradleyj_DX_skype', + Mobile_Phone: '(818) 555-4646', + Birth_Date: '1988-10-12', + Hire_Date: '2011-03-02', + }, + { + ID: 25, + Head_ID: 6, + Full_Name: 'Karen Goodson', + Prefix: 'Miss', + Title: 'Programmer', + City: 'South Pasadena', + State: 'California', + Email: 'kareng@dx-email.com', + Skype: 'kareng_DX_skype', + Mobile_Phone: '(626) 555-0908', + Birth_Date: '1987-04-26', + Hire_Date: '2011-03-14', + }, + { + ID: 26, + Head_ID: 5, + Full_Name: 'Marcus Orbison', + Prefix: 'Mr.', + Title: 'Travel Coordinator', + City: 'Los Angeles', + State: 'California', + Email: 'marcuso@dx-email.com', + Skype: 'marcuso_DX_skype', + Mobile_Phone: '(213) 555-7098', + Birth_Date: '1982-03-02', + Hire_Date: '2005-05-19', + }, +]; +export default { + getEmployees() { + return employees; + }, +}; diff --git a/JSDemos/Demos/Diagram/SimpleView/ReactJs/index.html b/JSDemos/Demos/Diagram/SimpleView/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/SimpleView/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/SimpleView/ReactJs/index.js b/JSDemos/Demos/Diagram/SimpleView/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/SimpleView/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/SimpleView/ReactJs/styles.css b/JSDemos/Demos/Diagram/SimpleView/ReactJs/styles.css new file mode 100644 index 00000000000..832b8896cd0 --- /dev/null +++ b/JSDemos/Demos/Diagram/SimpleView/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 600px; +} diff --git a/JSDemos/Demos/Diagram/UICustomization/React/App.js b/JSDemos/Demos/Diagram/UICustomization/React/App.tsx similarity index 74% rename from JSDemos/Demos/Diagram/UICustomization/React/App.js rename to JSDemos/Demos/Diagram/UICustomization/React/App.tsx index bbee8631b7c..5ee3db8d777 100644 --- a/JSDemos/Demos/Diagram/UICustomization/React/App.js +++ b/JSDemos/Demos/Diagram/UICustomization/React/App.tsx @@ -10,6 +10,7 @@ import Diagram, { MainToolbar, Command, Toolbox, + DiagramTypes, } from 'devextreme-react/diagram'; import { confirm } from 'devextreme/ui/dialog'; import 'whatwg-fetch'; @@ -17,7 +18,7 @@ import 'whatwg-fetch'; const pageCommands = ['pageSize', 'pageOrientation', 'pageColor']; const menuCommands = ['bringToFront', 'sendToBack', 'lock', 'unlock']; -function onCustomCommand(e) { +function onCustomCommand(e: DiagramTypes.CustomCommandEvent) { if (e.name === 'clear') { const result = confirm('Are you sure you want to clear the diagram? This action cannot be undone.', 'Warning'); result.then( @@ -46,12 +47,24 @@ export default function App() { }, []); return ( - - - + + + - + @@ -71,9 +84,14 @@ export default function App() { - + - + diff --git a/JSDemos/Demos/Diagram/UICustomization/React/index.html b/JSDemos/Demos/Diagram/UICustomization/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/UICustomization/React/index.html +++ b/JSDemos/Demos/Diagram/UICustomization/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/UICustomization/React/index.js b/JSDemos/Demos/Diagram/UICustomization/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/UICustomization/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/UICustomization/React/index.tsx b/JSDemos/Demos/Diagram/UICustomization/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/UICustomization/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/UICustomization/ReactJs/App.js b/JSDemos/Demos/Diagram/UICustomization/ReactJs/App.js new file mode 100644 index 00000000000..25b546ff77a --- /dev/null +++ b/JSDemos/Demos/Diagram/UICustomization/ReactJs/App.js @@ -0,0 +1,110 @@ +import React from 'react'; +import Diagram, { + ContextMenu, + ContextToolbox, + PropertiesPanel, + Group, + Tab, + HistoryToolbar, + ViewToolbar, + MainToolbar, + Command, + Toolbox, +} from 'devextreme-react/diagram'; +import { confirm } from 'devextreme/ui/dialog'; +import 'whatwg-fetch'; + +const pageCommands = ['pageSize', 'pageOrientation', 'pageColor']; +const menuCommands = ['bringToFront', 'sendToBack', 'lock', 'unlock']; +function onCustomCommand(e) { + if (e.name === 'clear') { + const result = confirm( + 'Are you sure you want to clear the diagram? This action cannot be undone.', + 'Warning', + ); + result.then((dialogResult) => { + if (dialogResult) { + e.component.import(''); + } + }); + } +} +export default function App() { + const diagramRef = React.useRef(null); + React.useEffect(() => { + const diagram = diagramRef.current.instance; + fetch('../../../../data/diagram-flow.json') + .then((response) => response.json()) + .then((json) => { + diagram.import(JSON.stringify(json)); + }) + .catch(() => { + throw new Error('Data Loading Error'); + }); + }, []); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/UICustomization/ReactJs/index.html b/JSDemos/Demos/Diagram/UICustomization/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/UICustomization/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/UICustomization/ReactJs/index.js b/JSDemos/Demos/Diagram/UICustomization/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/UICustomization/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/UICustomization/ReactJs/styles.css b/JSDemos/Demos/Diagram/UICustomization/ReactJs/styles.css new file mode 100644 index 00000000000..1eefae9372a --- /dev/null +++ b/JSDemos/Demos/Diagram/UICustomization/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 900px; +} diff --git a/JSDemos/Demos/Diagram/WebAPIService/React/App.js b/JSDemos/Demos/Diagram/WebAPIService/React/App.tsx similarity index 89% rename from JSDemos/Demos/Diagram/WebAPIService/React/App.js rename to JSDemos/Demos/Diagram/WebAPIService/React/App.tsx index 2911121235e..631e34944d0 100644 --- a/JSDemos/Demos/Diagram/WebAPIService/React/App.js +++ b/JSDemos/Demos/Diagram/WebAPIService/React/App.tsx @@ -1,6 +1,6 @@ import React from 'react'; import Diagram, { - Nodes, AutoLayout, ContextToolbox, Toolbox, Group, + Nodes, AutoLayout, ContextToolbox, Toolbox, Group, IContextToolboxProps, } from 'devextreme-react/diagram'; import { createStore } from 'devextreme-aspnet-data-nojquery'; @@ -26,7 +26,7 @@ const dataSource = createStore({ }, }); -const shapes = ['rectangle']; +const shapes: IContextToolboxProps['shapes'] = ['rectangle']; export default function App() { return ( diff --git a/JSDemos/Demos/Diagram/WebAPIService/React/index.html b/JSDemos/Demos/Diagram/WebAPIService/React/index.html index 500024e7b11..dfc3594fb49 100644 --- a/JSDemos/Demos/Diagram/WebAPIService/React/index.html +++ b/JSDemos/Demos/Diagram/WebAPIService/React/index.html @@ -13,7 +13,7 @@ diff --git a/JSDemos/Demos/Diagram/WebAPIService/React/index.js b/JSDemos/Demos/Diagram/WebAPIService/React/index.js deleted file mode 100644 index d9d7442ce76..00000000000 --- a/JSDemos/Demos/Diagram/WebAPIService/React/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; - -import App from './App.js'; - -ReactDOM.render( - , - document.getElementById('app'), -); diff --git a/JSDemos/Demos/Diagram/WebAPIService/React/index.tsx b/JSDemos/Demos/Diagram/WebAPIService/React/index.tsx new file mode 100644 index 00000000000..8acbec4b617 --- /dev/null +++ b/JSDemos/Demos/Diagram/WebAPIService/React/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import App from './App.tsx'; + +ReactDOM.render( + , + document.getElementById('app'), +); diff --git a/JSDemos/Demos/Diagram/WebAPIService/ReactJs/App.js b/JSDemos/Demos/Diagram/WebAPIService/ReactJs/App.js new file mode 100644 index 00000000000..798d7b5ebb7 --- /dev/null +++ b/JSDemos/Demos/Diagram/WebAPIService/ReactJs/App.js @@ -0,0 +1,59 @@ +import React from 'react'; +import Diagram, { + Nodes, + AutoLayout, + ContextToolbox, + Toolbox, + Group, +} from 'devextreme-react/diagram'; +import { createStore } from 'devextreme-aspnet-data-nojquery'; + +const url = 'https://js.devexpress.com/Demos/Mvc/api/DiagramEmployees'; +const dataSource = createStore({ + key: 'ID', + loadUrl: `${url}/Employees`, + insertUrl: `${url}/InsertEmployee`, + updateUrl: `${url}/UpdateEmployee`, + deleteUrl: `${url}/DeleteEmployee`, + onBeforeSend(method, ajaxOptions) { + ajaxOptions.xhrFields = { withCredentials: true }; + }, + onInserting(values) { + values.ID = 0; + values.Title = values.Title || 'New Position'; + values.Prefix = 'Mr'; + values.FullName = 'New Employee'; + values.City = 'LA'; + values.State = 'CA'; + values.HireDate = new Date(); + }, +}); +const shapes = ['rectangle']; +export default function App() { + return ( + + + + + + + + + + ); +} diff --git a/JSDemos/Demos/Diagram/WebAPIService/ReactJs/index.html b/JSDemos/Demos/Diagram/WebAPIService/ReactJs/index.html new file mode 100644 index 00000000000..e5651212855 --- /dev/null +++ b/JSDemos/Demos/Diagram/WebAPIService/ReactJs/index.html @@ -0,0 +1,53 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Diagram/WebAPIService/ReactJs/index.js b/JSDemos/Demos/Diagram/WebAPIService/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Diagram/WebAPIService/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Diagram/WebAPIService/ReactJs/styles.css b/JSDemos/Demos/Diagram/WebAPIService/ReactJs/styles.css new file mode 100644 index 00000000000..ef449a83d9d --- /dev/null +++ b/JSDemos/Demos/Diagram/WebAPIService/ReactJs/styles.css @@ -0,0 +1,3 @@ +#diagram { + height: 725px; +}