Publish dxDiagram types, arrange "commands" props types (T1227506) (#…

…27344) (cherry picked from DevExpress/DevExtreme#27344)
mpreyskurantov · May 21, 2024 · 93aba07 · 93aba07
1 parent b039987
commit 93aba07
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 23 deletions.
diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx
@@ -1,6 +1,15 @@
 import React, { useCallback, useRef, useState } from 'react';
-import Diagram, {
- CustomShape, ContextToolbox, PropertiesPanel, Group, Tab, Toolbox, Nodes, AutoLayout, DiagramTypes,
+import {
+ Diagram,
+ AutoLayout,
+ ContextToolbox,
+ CustomShape,
+ Group,
+ Nodes,
+ PropertiesPanel,
+ Tab,
+ Toolbox,
+ DiagramTypes,
 } from 'devextreme-react/diagram';
 import { Popup } from 'devextreme-react/popup';
 import TextBox from 'devextreme-react/text-box';
@@ -10,7 +19,7 @@ import CustomShapeTemplate from './CustomShapeTemplate.tsx';
 import CustomShapeToolboxTemplate from './CustomShapeToolboxTemplate.tsx';
 import service, { Employee } from './data.ts';
 
-const pageCommands = ['pageSize', 'pageOrientation', 'pageColor'];
+const pageCommands: DiagramTypes.Command[] = ['pageSize', 'pageOrientation', 'pageColor'];
 
 const nameLabel = { 'aria-label': 'Name' };
 const emailLabel = { 'aria-label': 'Email' };
@@ -217,7 +226,7 @@ export default function App() {
  </Toolbox>
  <PropertiesPanel>
  <Tab>
- <Group title="Page Properties" commands={pageCommands as any} />
+ <Group title="Page Properties" commands={pageCommands} />
  </Tab>
  </PropertiesPanel>
  </Diagram>

diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js
@@ -1,13 +1,14 @@
 import React, { useCallback, useRef, useState } from 'react';
-import Diagram, {
- CustomShape,
+import {
+ Diagram,
+ AutoLayout,
  ContextToolbox,
- PropertiesPanel,
+ CustomShape,
  Group,
+ Nodes,
+ PropertiesPanel,
  Tab,
  Toolbox,
- Nodes,
- AutoLayout,
 } from 'devextreme-react/diagram';
 import { Popup } from 'devextreme-react/popup';
 import TextBox from 'devextreme-react/text-box';

diff --git a/JSDemos/Demos/Diagram/UICustomization/React/App.tsx b/JSDemos/Demos/Diagram/UICustomization/React/App.tsx
@@ -1,22 +1,23 @@
 import React, { useEffect, useRef } from 'react';
-import Diagram, {
+import {
+ Diagram,
+ Command,
  ContextMenu,
  ContextToolbox,
- PropertiesPanel,
  Group,
- Tab,
  HistoryToolbar,
- ViewToolbar,
  MainToolbar,
- Command,
+ PropertiesPanel,
+ Tab,
  Toolbox,
+ ViewToolbar,
  DiagramTypes,
 } from 'devextreme-react/diagram';
 import { confirm } from 'devextreme/ui/dialog';
 import 'whatwg-fetch';
 
-const pageCommands = ['pageSize', 'pageOrientation', 'pageColor'];
-const menuCommands = ['bringToFront', 'sendToBack', 'lock', 'unlock'];
+const pageCommands: DiagramTypes.Command[] = ['pageSize', 'pageOrientation', 'pageColor'];
+const menuCommands: DiagramTypes.Command[] = ['bringToFront', 'sendToBack', 'lock', 'unlock'];
 
 function onCustomCommand(e: DiagramTypes.CustomCommandEvent) {
  if (e.name === 'clear') {
@@ -54,7 +55,7 @@ export default function App() {
  >
  <ContextMenu
  enabled={true}
- commands={menuCommands as any}
+ commands={menuCommands}
  />
  <ContextToolbox
  enabled={true}
@@ -64,7 +65,7 @@ export default function App() {
  />
  <PropertiesPanel visibility="visible">
  <Tab>
- <Group title="Page Properties" commands={pageCommands as any} />
+ <Group title="Page Properties" commands={pageCommands} />
  </Tab>
  </PropertiesPanel>
  <HistoryToolbar visible={false} />

diff --git a/JSDemos/Demos/Diagram/UICustomization/ReactJs/App.js b/JSDemos/Demos/Diagram/UICustomization/ReactJs/App.js
@@ -1,15 +1,16 @@
 import React, { useEffect, useRef } from 'react';
-import Diagram, {
+import {
+ Diagram,
+ Command,
  ContextMenu,
  ContextToolbox,
- PropertiesPanel,
  Group,
- Tab,
  HistoryToolbar,
- ViewToolbar,
  MainToolbar,
- Command,
+ PropertiesPanel,
+ Tab,
  Toolbox,
+ ViewToolbar,
 } from 'devextreme-react/diagram';
 import { confirm } from 'devextreme/ui/dialog';
 import 'whatwg-fetch';