Skip to content

ASP Related: fix ts issues in demos in strict mode (cherry-pick) #32126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dmlvr merged 1 commit into from
Jan 8, 2026
+155 −100
Merged

ASP Related: fix ts issues in demos in strict mode (cherry-pick) #32126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/demos/Demos/Diagram/Adaptability/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import type { DiagramRef } from 'devextreme-react/diagram';
import 'whatwg-fetch';

export default function App() {
const diagramRef = useRef<DiagramRef>();
const diagramRef = useRef<DiagramRef>(null);

useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-flow.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/Diagram/Adaptability/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import Diagram from 'devextreme-react/diagram';
import 'whatwg-fetch';

export default function App() {
const diagramRef = useRef();
const diagramRef = useRef(null);
useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-flow.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/Diagram/AdvancedDataBinding/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,23 @@ const orgLinksDataSource = new ArrayStore({
data: service.getOrgLinks(),
});

function itemTypeExpr(obj: { type: string; }, value: string) {
function itemTypeExpr(obj: { type: string | undefined; }, value: string) {
if (value) {
obj.type = (value === 'rectangle') ? undefined : 'group';
return null;
}
return obj.type === 'group' ? 'ellipse' : 'rectangle';
}

function itemWidthExpr(obj: { width: number; type: string; }, value) {
function itemWidthExpr(obj: { width: number; type: string; }, value: number) {
if (value) {
obj.width = value;
return null;
}
return obj.width || (obj.type === 'group' && 1.5) || 1;
}

function itemHeightExpr(obj: { height: number; type: string; }, value) {
function itemHeightExpr(obj: { height: number; type: string; }, value: number) {
if (value) {
obj.height = value;
return null;
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/Diagram/Containers/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import type { DiagramRef } from 'devextreme-react/diagram';
import 'whatwg-fetch';

export default function App() {
const diagramRef = useRef<DiagramRef>();
const diagramRef = useRef<DiagramRef>(null);

useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-structure.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/Diagram/Containers/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import Diagram, { Group, Toolbox } from 'devextreme-react/diagram';
import 'whatwg-fetch';

export default function App() {
const diagramRef = useRef();
const diagramRef = useRef(null);
useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-structure.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function App() {
const [currentEmployee, setCurrentEmployee] = useState<Partial<EmployeeType>>({});
const [popupVisible, setPopupVisible] = useState(false);

const showInfo = useCallback((employee) => {
const showInfo = useCallback((employee: EmployeeType) => {
setCurrentEmployee(employee);
setPopupVisible(true);
}, [setCurrentEmployee, setPopupVisible]);
Expand Down
3 changes: 2 additions & 1 deletion apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/CustomShapeTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import type { Employee } from './data.ts';

export default function CustomShapeTemplate(employee, showInfo) {
export default function CustomShapeTemplate(employee: Employee, showInfo: () => void) {
return (
<svg className="template">
<text className="template-name" x="50%" y="20%">{employee.Full_Name}</text>
Expand Down
32 changes: 23 additions & 9 deletions apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,20 @@ import CustomShapeTemplate from './CustomShapeTemplate.tsx';
import CustomShapeToolboxTemplate from './CustomShapeToolboxTemplate.tsx';
import service from './data.ts';
import type { Employee } from './data.ts';
import type { ValueChangedEvent } from 'devextreme/ui/text_box';

interface PopupContentFuncProps {
currentEmployee: Partial<Employee>;
handleNameChange: (e: ValueChangedEvent) => void;
handleTitleChange: (e: ValueChangedEvent) => void;
handleCityChange: (e: ValueChangedEvent) => void;
handleStateChange: (e: ValueChangedEvent) => void;
handleEmailChange: (e: ValueChangedEvent) => void;
handleSkypeChange: (e: ValueChangedEvent) => void;
handlePhoneChange: (e: ValueChangedEvent) => void;
updateEmployeeClick: () => void;
cancelEditEmployeeClick: () => void;
}

const pageCommands: DiagramTypes.Command[] = ['pageSize', 'pageOrientation', 'pageColor'];

Expand All @@ -36,7 +50,7 @@ const employees = service.getEmployees();
const dataSource = new ArrayStore({
key: 'ID',
data: employees,
onInserting(values, key) {
onInserting(values: Employee, key: string) {
this.update(key, {
ID: values.ID || (generatedID += 1),
Full_Name: values.Full_Name || "Employee's Name",
Expand Down Expand Up @@ -139,31 +153,31 @@ export default function App() {
}));
}, [setCurrentEmployee]);

const handleNameChange = useCallback((e: { value: any; }) => {
const handleNameChange = useCallback((e: ValueChangedEvent) => {
handleChange('Full_Name', e.value);
}, [handleChange]);

const handleTitleChange = useCallback((e: { value: any; }) => {
const handleTitleChange = useCallback((e: ValueChangedEvent) => {
handleChange('Title', e.value);
}, [handleChange]);

const handleCityChange = useCallback((e: { value: any; }) => {
const handleCityChange = useCallback((e: ValueChangedEvent) => {
handleChange('City', e.value);
}, [handleChange]);

const handleStateChange = useCallback((e: { value: any; }) => {
const handleStateChange = useCallback((e: ValueChangedEvent) => {
handleChange('State', e.value);
}, [handleChange]);

const handleEmailChange = useCallback((e: { value: any; }) => {
const handleEmailChange = useCallback((e: ValueChangedEvent) => {
handleChange('Email', e.value);
}, [handleChange]);

const handleSkypeChange = useCallback((e: { value: any; }) => {
const handleSkypeChange = useCallback((e: ValueChangedEvent) => {
handleChange('Skype', e.value);
}, [handleChange]);

const handlePhoneChange = useCallback((e: { value: any; }) => {
const handlePhoneChange = useCallback((e: ValueChangedEvent) => {
handleChange('Mobile_Phone', e.value);
}, [handleChange]);

Expand Down Expand Up @@ -249,7 +263,7 @@ export default function App() {
);
}

function PopupContentFunc(props) {
function PopupContentFunc(props: PopupContentFuncProps) {
return (
<>
<div className="dx-fieldset">
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import type { Employee } from './data';

export default function CustomShapeTemplate(employee: Employee, editEmployee, deleteEmployee) {
export default function CustomShapeTemplate(employee: Employee, editEmployee: () => void, deleteEmployee: () => void) {
const employeeName = employee ? employee.Full_Name : 'Employee\'s Name';
const employeeTitle = employee ? employee.Title : 'Employee\'s Title';
return (
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/Diagram/CustomShapesWithTexts/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ import 'whatwg-fetch';
const employees = service.getEmployees();

export default function App() {
const diagramRef = useRef<DiagramRef>();
const diagramRef = useRef<DiagramRef>(null);

useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-employees.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/Diagram/CustomShapesWithTexts/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import 'whatwg-fetch';

const employees = service.getEmployees();
export default function App() {
const diagramRef = useRef();
const diagramRef = useRef(null);
useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-employees.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
7 changes: 4 additions & 3 deletions apps/demos/Demos/Diagram/ItemSelection/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React, { useCallback, useState } from 'react';
import Diagram, {
Nodes, AutoLayout, Toolbox, PropertiesPanel, type DiagramTypes,
Nodes, AutoLayout, Toolbox, PropertiesPanel,
} from 'devextreme-react/diagram';
import { ArrayStore } from 'devextreme-react/common/data';
import service from './data.ts';
import type { DiagramTypes } from 'devextreme-react/diagram';

const dataSource = new ArrayStore({
key: 'ID',
Expand All @@ -28,11 +29,11 @@ function onContentReady(e: DiagramTypes.ContentReadyEvent) {
export default function App() {
const [selectedItemNames, setSelectedItemNames] = useState('Nobody has been selected');

const onSelectionChanged = useCallback(({ items }) => {
const onSelectionChanged = useCallback(({ items }: { items: DiagramTypes.Item[] }) => {
let selectedItems = 'Nobody has been selected';
const filteredItems = items
.filter((item) => item.itemType === 'shape')
.map((item) => item.text);
.map((item) => item.dataItem?.[textExpression]);
if (filteredItems.length > 0) {
selectedItems = filteredItems.join(', ');
}
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Diagram/ItemSelection/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function App() {
let selectedItems = 'Nobody has been selected';
const filteredItems = items
.filter((item) => item.itemType === 'shape')
.map((item) => item.text);
.map((item) => item.dataItem?.[textExpression]);
if (filteredItems.length > 0) {
selectedItems = filteredItems.join(', ');
}
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/Diagram/Overview/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ import type { DiagramRef } from 'devextreme-react/diagram';
import 'whatwg-fetch';

export default function App() {
const diagramRef = useRef<DiagramRef>();
const diagramRef = useRef<DiagramRef>(null);

useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-flow.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/Diagram/Overview/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ import Diagram from 'devextreme-react/diagram';
import 'whatwg-fetch';

export default function App() {
const diagramRef = useRef();
const diagramRef = useRef(null);
useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-flow.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/Diagram/ReadOnly/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ export default function App() {
const diagramRef = useRef<DiagramRef>(null);

useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-structure.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/Diagram/ReadOnly/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import 'whatwg-fetch';
export default function App() {
const diagramRef = useRef(null);
useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-structure.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
8 changes: 4 additions & 4 deletions apps/demos/Demos/Diagram/UICustomization/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ import {
Tab,
Toolbox,
ViewToolbar,
type DiagramTypes,
} from 'devextreme-react/diagram';
import { confirm } from 'devextreme/ui/dialog';
import 'whatwg-fetch';
import type { DiagramTypes, DiagramRef } from 'devextreme-react/diagram';

const pageCommands: DiagramTypes.Command[] = ['pageSize', 'pageOrientation', 'pageColor'];
const menuCommands: DiagramTypes.Command[] = ['bringToFront', 'sendToBack', 'lock', 'unlock'];
Expand All @@ -33,14 +33,14 @@ function onCustomCommand(e: DiagramTypes.CustomCommandEvent) {
}

export default function App() {
const diagramRef = useRef(null);
const diagramRef = useRef<DiagramRef>(null);

useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-flow.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
4 changes: 2 additions & 2 deletions apps/demos/Demos/Diagram/UICustomization/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ function onCustomCommand(e) {
export default function App() {
const diagramRef = useRef(null);
useEffect(() => {
const diagram = diagramRef.current.instance();
const diagram = diagramRef?.current?.instance();
fetch('../../../../data/diagram-flow.json')
.then((response) => response.json())
.then((json) => {
diagram.import(JSON.stringify(json));
diagram?.import(JSON.stringify(json));
})
.catch(() => {
throw new Error('Data Loading Error');
Expand Down
Loading
Loading