Skip to content

Commit 7cd4b78

Browse files
dmlvrdmlvr
authored
Navigation: Fix TS problems and make TS improvements in demos (#32152)
1 parent 95abd55 commit 7cd4b78

File tree

50 files changed

+527
-163
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+527
-163
lines changed

‎apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,46 +2,47 @@ import React, { useCallback, useRef, useState } from 'react';
22
import config from 'devextreme/core/config';
33
import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button';
44
import DataGrid, {
5-
Column, Editing, Lookup, Texts, Selection, type DataGridTypes,
5+
Column, Editing, Lookup, Texts, Selection,
66
} from 'devextreme-react/data-grid';
77
import { SpeedDialAction } from 'devextreme-react/speed-dial-action';
8-
import { SelectBox, type SelectBoxTypes } from 'devextreme-react/select-box';
8+
import { SelectBox } from 'devextreme-react/select-box';
9+
import type { SelectBoxTypes } from 'devextreme-react/select-box';
10+
import type { DataGridTypes, DataGridRef } from 'devextreme-react/data-grid';
911
import {
10-
employees, states, directions, directionLabel,
12+
employees, states, directions, optionDirections, directionLabel,
1113
} from './data.ts';
12-
13-
const optionDirections = ['auto', 'up', 'down'];
14+
import type { DirectionKey } from './data.ts';
1415

1516
const App = () => {
1617
const [selectedRowIndex, setSelectedRowIndex] = useState(-1);
17-
const gridRef = useRef(null);
18+
const gridRef = useRef<DataGridRef>(null);
1819

1920
const selectedChanged = useCallback((e: DataGridTypes.SelectionChangedEvent) => {
2021
setSelectedRowIndex(e.component.getRowIndexByKey(e.selectedRowKeys[0]));
21-
}, [setSelectedRowIndex]);
22+
}, []);
2223

2324
const directionChanged = useCallback((e: SelectBoxTypes.SelectionChangedEvent) => {
2425
config({
25-
floatingActionButtonConfig: directions[e.selectedItem],
26+
floatingActionButtonConfig: directions[e.selectedItem as DirectionKey],
2627
});
2728

2829
repaintFloatingActionButton();
2930
}, []);
3031

3132
const editRow = useCallback(() => {
32-
gridRef.current.instance().editRow(selectedRowIndex);
33-
gridRef.current.instance().deselectAll();
34-
}, [gridRef, selectedRowIndex]);
33+
gridRef.current?.instance()?.editRow(selectedRowIndex);
34+
gridRef.current?.instance()?.deselectAll();
35+
}, [selectedRowIndex]);
3536

3637
const deleteRow = useCallback(() => {
37-
gridRef.current.instance().deleteRow(selectedRowIndex);
38-
gridRef.current.instance().deselectAll();
39-
}, [gridRef, selectedRowIndex]);
38+
gridRef.current?.instance()?.deleteRow(selectedRowIndex);
39+
gridRef.current?.instance()?.deselectAll();
40+
}, [selectedRowIndex]);
4041

4142
const addRow = useCallback(() => {
42-
gridRef.current.instance().addRow();
43-
gridRef.current.instance().deselectAll();
44-
}, [gridRef]);
43+
gridRef.current?.instance()?.addRow();
44+
gridRef.current?.instance()?.deselectAll();
45+
}, []);
4546

4647
return (
4748
<div>

‎apps/demos/Demos/FloatingActionButton/Overview/React/data.ts‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,22 @@
1-
export const directions = {
1+
import type { FloatingActionButtonDirection, PositionAlignment } from 'devextreme-react/common';
2+
3+
type DirectionValue = {
4+
icon: string;
5+
shading: boolean;
6+
direction?: FloatingActionButtonDirection;
7+
position: {
8+
of: string;
9+
my: PositionAlignment;
10+
at: PositionAlignment;
11+
offset: string;
12+
};
13+
};
14+
15+
export const optionDirections = ['auto', 'up', 'down'] as const;
16+
17+
export type DirectionKey = typeof optionDirections[number];
18+
19+
export const directions: Record<DirectionKey, DirectionValue> = {
220
auto: {
321
icon: 'rowfield',
422
shading: true,

‎apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,33 @@ import DataGrid, {
77
import { SpeedDialAction } from 'devextreme-react/speed-dial-action';
88
import { SelectBox } from 'devextreme-react/select-box';
99
import {
10-
employees, states, directions, directionLabel,
10+
employees, states, directions, optionDirections, directionLabel,
1111
} from './data.js';
1212

13-
const optionDirections = ['auto', 'up', 'down'];
1413
const App = () => {
1514
const [selectedRowIndex, setSelectedRowIndex] = useState(-1);
1615
const gridRef = useRef(null);
17-
const selectedChanged = useCallback(
18-
(e) => {
19-
setSelectedRowIndex(e.component.getRowIndexByKey(e.selectedRowKeys[0]));
20-
},
21-
[setSelectedRowIndex],
22-
);
16+
const selectedChanged = useCallback((e) => {
17+
setSelectedRowIndex(e.component.getRowIndexByKey(e.selectedRowKeys[0]));
18+
}, []);
2319
const directionChanged = useCallback((e) => {
2420
config({
2521
floatingActionButtonConfig: directions[e.selectedItem],
2622
});
2723
repaintFloatingActionButton();
2824
}, []);
2925
const editRow = useCallback(() => {
30-
gridRef.current.instance().editRow(selectedRowIndex);
31-
gridRef.current.instance().deselectAll();
32-
}, [gridRef, selectedRowIndex]);
26+
gridRef.current?.instance()?.editRow(selectedRowIndex);
27+
gridRef.current?.instance()?.deselectAll();
28+
}, [selectedRowIndex]);
3329
const deleteRow = useCallback(() => {
34-
gridRef.current.instance().deleteRow(selectedRowIndex);
35-
gridRef.current.instance().deselectAll();
36-
}, [gridRef, selectedRowIndex]);
30+
gridRef.current?.instance()?.deleteRow(selectedRowIndex);
31+
gridRef.current?.instance()?.deselectAll();
32+
}, [selectedRowIndex]);
3733
const addRow = useCallback(() => {
38-
gridRef.current.instance().addRow();
39-
gridRef.current.instance().deselectAll();
40-
}, [gridRef]);
34+
gridRef.current?.instance()?.addRow();
35+
gridRef.current?.instance()?.deselectAll();
36+
}, []);
4137
return (
4238
<div>
4339
<DataGrid

‎apps/demos/Demos/FloatingActionButton/Overview/ReactJs/data.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export const optionDirections = ['auto', 'up', 'down'];
12
export const directions = {
23
auto: {
34
icon: 'rowfield',

‎apps/demos/Demos/Localization/UsingGlobalize/React/global.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
declare module '*.json' {
2+
const value: any;
3+
export default value;
4+
}
5+
6+
declare module 'globalize' {
7+
const Globalize: any;
8+
export default Globalize;
9+
}

‎apps/demos/Demos/Localization/UsingIntl/React/global.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '*.json' {
2+
const value: any;
3+
export default value;
4+
}

‎apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import VectorMap, {
66
Source,
77
Tooltip,
88
} from 'devextreme-react/vector-map';
9-
import type { ITooltipProps } from 'devextreme-react/vector-map';
9+
import type { ILegendProps, ITooltipProps, VectorMapTypes } from 'devextreme-react/vector-map';
1010
import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
1111
import { markers } from './data.ts';
1212

@@ -18,12 +18,12 @@ const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => {
1818
if (arg.layer.type === 'marker') {
1919
return { text: arg.attribute('tooltip') };
2020
}
21-
return null;
21+
return {};
2222
};
2323

24-
const customizeText = (arg: { index: string | number; }) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index];
24+
const customizeText: ILegendProps['customizeText'] = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index];
2525

26-
const customizeItems = (items: any[]) => items.reverse();
26+
const customizeItems = (items: VectorMapTypes.LegendItem[]) => items.reverse();
2727

2828
export default function App() {
2929
return (

‎apps/demos/Demos/VectorMap/BubbleMarkers/React/devextreme-vectormap-data.d.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
declare module 'devextreme-dist/js/vectormap-data/world.js' {
2+
type Position = number[];
3+
type Geometry =
4+
| { type: 'Point'; coordinates: Position }
5+
| { type: 'MultiPoint'; coordinates: Position[] }
6+
| { type: 'LineString'; coordinates: Position[] }
7+
| { type: 'MultiLineString'; coordinates: Position[][] }
8+
| { type: 'Polygon'; coordinates: Position[][] }
9+
| { type: 'MultiPolygon'; coordinates: Position[][][] };
10+
11+
interface Feature {
12+
type: 'Feature';
13+
geometry: Geometry;
14+
properties: Record<string, unknown>;
15+
}
16+
17+
interface FeatureCollection {
18+
type: 'FeatureCollection';
19+
features: Feature[];
20+
// eslint-disable-next-line spellcheck/spell-checker
21+
bbox?: number[];
22+
}
23+
24+
const world: FeatureCollection;
25+
export { world };
26+
export default world;
27+
}

‎apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const customizeTooltip = (arg) => {
1111
if (arg.layer.type === 'marker') {
1212
return { text: arg.attribute('tooltip') };
1313
}
14-
return null;
14+
return {};
1515
};
1616
const customizeText = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index];
1717
const customizeItems = (items) => items.reverse();

‎apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,19 @@ import VectorMap, {
66
Border,
77
Font,
88
} from 'devextreme-react/vector-map';
9-
import type { ILayerProps, ITooltipProps } from 'devextreme-react/vector-map';
9+
import type { ILayerProps, ITooltipProps, VectorMapTypes } from 'devextreme-react/vector-map';
1010

1111
import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js';
1212
import { countries } from './data.ts';
1313

14+
type CountriesKey = keyof typeof countries;
15+
1416
const bounds = [-180, 85, 180, -60];
1517

1618
const customizeLayer: ILayerProps['customize'] = (elements) => {
1719
elements.forEach((element) => {
18-
const country = countries[element.attribute('name')];
20+
const name = element.attribute('name') as CountriesKey;
21+
const country = countries[name];
1922
if (country) {
2023
element.applySettings({
2124
color: country.color,
@@ -26,22 +29,23 @@ const customizeLayer: ILayerProps['customize'] = (elements) => {
2629
});
2730
};
2831

29-
const clickHandler = ({ target }) => {
30-
if (target && countries[target.attribute('name')]) {
32+
const clickHandler = ({ target }: VectorMapTypes.ClickEvent) => {
33+
const name = target?.attribute('name') as CountriesKey;
34+
if (target && countries[name]) {
3135
target.selected(!target.selected());
3236
}
3337
};
3438

3539
const customizeTooltip: ITooltipProps['customizeTooltip'] = ({ attribute }) => {
36-
const name = attribute('name');
40+
const name = attribute('name') as CountriesKey;
3741
const country = countries[name];
3842
if (country) {
3943
return {
4044
text: `${name}: ${country.totalArea}M km&#178`,
4145
color: country.color,
4246
};
4347
}
44-
return null;
48+
return {};
4549
};
4650

4751
export default function App() {

0 commit comments

Comments
 (0)