Skip to content

Commit 6dd97f2

Browse files
dmlvrdmlvr
authored
ASP Related: fix ts issues in demos in strict mode (cherry-pick) (#32126)
1 parent 16eced1 commit 6dd97f2

File tree

34 files changed

+155
-100
lines changed

34 files changed

+155
-100
lines changed

‎apps/demos/Demos/Diagram/Adaptability/React/App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import type { DiagramRef } from 'devextreme-react/diagram';
44
import 'whatwg-fetch';
55

66
export default function App() {
7-
const diagramRef = useRef<DiagramRef>();
7+
const diagramRef = useRef<DiagramRef>(null);
88

99
useEffect(() => {
10-
const diagram = diagramRef.current.instance();
10+
const diagram = diagramRef?.current?.instance();
1111
fetch('../../../../data/diagram-flow.json')
1212
.then((response) => response.json())
1313
.then((json) => {
14-
diagram.import(JSON.stringify(json));
14+
diagram?.import(JSON.stringify(json));
1515
})
1616
.catch(() => {
1717
throw new Error('Data Loading Error');

‎apps/demos/Demos/Diagram/Adaptability/ReactJs/App.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import Diagram from 'devextreme-react/diagram';
33
import 'whatwg-fetch';
44

55
export default function App() {
6-
const diagramRef = useRef();
6+
const diagramRef = useRef(null);
77
useEffect(() => {
8-
const diagram = diagramRef.current.instance();
8+
const diagram = diagramRef?.current?.instance();
99
fetch('../../../../data/diagram-flow.json')
1010
.then((response) => response.json())
1111
.then((json) => {
12-
diagram.import(JSON.stringify(json));
12+
diagram?.import(JSON.stringify(json));
1313
})
1414
.catch(() => {
1515
throw new Error('Data Loading Error');

‎apps/demos/Demos/Diagram/AdvancedDataBinding/React/App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,23 @@ const orgLinksDataSource = new ArrayStore({
1414
data: service.getOrgLinks(),
1515
});
1616

17-
function itemTypeExpr(obj: { type: string; }, value: string) {
17+
function itemTypeExpr(obj: { type: string | undefined; }, value: string) {
1818
if (value) {
1919
obj.type = (value === 'rectangle') ? undefined : 'group';
2020
return null;
2121
}
2222
return obj.type === 'group' ? 'ellipse' : 'rectangle';
2323
}
2424

25-
function itemWidthExpr(obj: { width: number; type: string; }, value) {
25+
function itemWidthExpr(obj: { width: number; type: string; }, value: number) {
2626
if (value) {
2727
obj.width = value;
2828
return null;
2929
}
3030
return obj.width || (obj.type === 'group' && 1.5) || 1;
3131
}
3232

33-
function itemHeightExpr(obj: { height: number; type: string; }, value) {
33+
function itemHeightExpr(obj: { height: number; type: string; }, value: number) {
3434
if (value) {
3535
obj.height = value;
3636
return null;

‎apps/demos/Demos/Diagram/Containers/React/App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import type { DiagramRef } from 'devextreme-react/diagram';
44
import 'whatwg-fetch';
55

66
export default function App() {
7-
const diagramRef = useRef<DiagramRef>();
7+
const diagramRef = useRef<DiagramRef>(null);
88

99
useEffect(() => {
10-
const diagram = diagramRef.current.instance();
10+
const diagram = diagramRef?.current?.instance();
1111
fetch('../../../../data/diagram-structure.json')
1212
.then((response) => response.json())
1313
.then((json) => {
14-
diagram.import(JSON.stringify(json));
14+
diagram?.import(JSON.stringify(json));
1515
})
1616
.catch(() => {
1717
throw new Error('Data Loading Error');

‎apps/demos/Demos/Diagram/Containers/ReactJs/App.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import Diagram, { Group, Toolbox } from 'devextreme-react/diagram';
33
import 'whatwg-fetch';
44

55
export default function App() {
6-
const diagramRef = useRef();
6+
const diagramRef = useRef(null);
77
useEffect(() => {
8-
const diagram = diagramRef.current.instance();
8+
const diagram = diagramRef?.current?.instance();
99
fetch('../../../../data/diagram-structure.json')
1010
.then((response) => response.json())
1111
.then((json) => {
12-
diagram.import(JSON.stringify(json));
12+
diagram?.import(JSON.stringify(json));
1313
})
1414
.catch(() => {
1515
throw new Error('Data Loading Error');

‎apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default function App() {
2424
const [currentEmployee, setCurrentEmployee] = useState<Partial<EmployeeType>>({});
2525
const [popupVisible, setPopupVisible] = useState(false);
2626

27-
const showInfo = useCallback((employee) => {
27+
const showInfo = useCallback((employee: EmployeeType) => {
2828
setCurrentEmployee(employee);
2929
setPopupVisible(true);
3030
}, [setCurrentEmployee, setPopupVisible]);

‎apps/demos/Demos/Diagram/CustomShapesWithTemplates/React/CustomShapeTemplate.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
2+
import type { Employee } from './data.ts';
23

3-
export default function CustomShapeTemplate(employee, showInfo) {
4+
export default function CustomShapeTemplate(employee: Employee, showInfo: () => void) {
45
return (
56
<svg className="template">
67
<text className="template-name" x="50%" y="20%">{employee.Full_Name}</text>

‎apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,20 @@ import CustomShapeTemplate from './CustomShapeTemplate.tsx';
1919
import CustomShapeToolboxTemplate from './CustomShapeToolboxTemplate.tsx';
2020
import service from './data.ts';
2121
import type { Employee } from './data.ts';
22+
import type { ValueChangedEvent } from 'devextreme/ui/text_box';
23+
24+
interface PopupContentFuncProps {
25+
currentEmployee: Partial<Employee>;
26+
handleNameChange: (e: ValueChangedEvent) => void;
27+
handleTitleChange: (e: ValueChangedEvent) => void;
28+
handleCityChange: (e: ValueChangedEvent) => void;
29+
handleStateChange: (e: ValueChangedEvent) => void;
30+
handleEmailChange: (e: ValueChangedEvent) => void;
31+
handleSkypeChange: (e: ValueChangedEvent) => void;
32+
handlePhoneChange: (e: ValueChangedEvent) => void;
33+
updateEmployeeClick: () => void;
34+
cancelEditEmployeeClick: () => void;
35+
}
2236

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

@@ -36,7 +50,7 @@ const employees = service.getEmployees();
3650
const dataSource = new ArrayStore({
3751
key: 'ID',
3852
data: employees,
39-
onInserting(values, key) {
53+
onInserting(values: Employee, key: string) {
4054
this.update(key, {
4155
ID: values.ID || (generatedID += 1),
4256
Full_Name: values.Full_Name || "Employee's Name",
@@ -139,31 +153,31 @@ export default function App() {
139153
}));
140154
}, [setCurrentEmployee]);
141155

142-
const handleNameChange = useCallback((e: { value: any; }) => {
156+
const handleNameChange = useCallback((e: ValueChangedEvent) => {
143157
handleChange('Full_Name', e.value);
144158
}, [handleChange]);
145159

146-
const handleTitleChange = useCallback((e: { value: any; }) => {
160+
const handleTitleChange = useCallback((e: ValueChangedEvent) => {
147161
handleChange('Title', e.value);
148162
}, [handleChange]);
149163

150-
const handleCityChange = useCallback((e: { value: any; }) => {
164+
const handleCityChange = useCallback((e: ValueChangedEvent) => {
151165
handleChange('City', e.value);
152166
}, [handleChange]);
153167

154-
const handleStateChange = useCallback((e: { value: any; }) => {
168+
const handleStateChange = useCallback((e: ValueChangedEvent) => {
155169
handleChange('State', e.value);
156170
}, [handleChange]);
157171

158-
const handleEmailChange = useCallback((e: { value: any; }) => {
172+
const handleEmailChange = useCallback((e: ValueChangedEvent) => {
159173
handleChange('Email', e.value);
160174
}, [handleChange]);
161175

162-
const handleSkypeChange = useCallback((e: { value: any; }) => {
176+
const handleSkypeChange = useCallback((e: ValueChangedEvent) => {
163177
handleChange('Skype', e.value);
164178
}, [handleChange]);
165179

166-
const handlePhoneChange = useCallback((e: { value: any; }) => {
180+
const handlePhoneChange = useCallback((e: ValueChangedEvent) => {
167181
handleChange('Mobile_Phone', e.value);
168182
}, [handleChange]);
169183

@@ -249,7 +263,7 @@ export default function App() {
249263
);
250264
}
251265

252-
function PopupContentFunc(props) {
266+
function PopupContentFunc(props: PopupContentFuncProps) {
253267
return (
254268
<>
255269
<div className="dx-fieldset">

‎apps/demos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/CustomShapeTemplate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import type { Employee } from './data';
33

4-
export default function CustomShapeTemplate(employee: Employee, editEmployee, deleteEmployee) {
4+
export default function CustomShapeTemplate(employee: Employee, editEmployee: () => void, deleteEmployee: () => void) {
55
const employeeName = employee ? employee.Full_Name : 'Employee\'s Name';
66
const employeeTitle = employee ? employee.Title : 'Employee\'s Title';
77
return (

‎apps/demos/Demos/Diagram/CustomShapesWithTexts/React/App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ import 'whatwg-fetch';
77
const employees = service.getEmployees();
88

99
export default function App() {
10-
const diagramRef = useRef<DiagramRef>();
10+
const diagramRef = useRef<DiagramRef>(null);
1111

1212
useEffect(() => {
13-
const diagram = diagramRef.current.instance();
13+
const diagram = diagramRef?.current?.instance();
1414
fetch('../../../../data/diagram-employees.json')
1515
.then((response) => response.json())
1616
.then((json) => {
17-
diagram.import(JSON.stringify(json));
17+
diagram?.import(JSON.stringify(json));
1818
})
1919
.catch(() => {
2020
throw new Error('Data Loading Error');

0 commit comments

Comments
 (0)