Skip to content

Commit ec8eb14

Browse files
anna-shakhovapharret31
anna-shakhova
and
pharret31
authored
Fix TS problems and make TS improvements in demos (Editors) - part 3 (#32051)
Co-authored-by: Andrei Kharitonov <pharret31@gmail.com>
1 parent f0a946c commit ec8eb14

File tree

38 files changed

+299
-223
lines changed

38 files changed

+299
-223
lines changed

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React, { useCallback, useState } from 'react';
2-
import Switch, { type SwitchTypes } from 'devextreme-react/switch';
2+
import Switch from 'devextreme-react/switch';
3+
import type { SwitchTypes } from 'devextreme-react/switch';
34

45
function App() {
5-
const [value, setValue] = useState(false);
6+
const [value, setValue] = useState<boolean>(false);
67

7-
const valueChanged = useCallback((e: SwitchTypes.ValueChangedEvent) => {
8-
setValue(e.value);
8+
const valueChanged = useCallback(({ value }: SwitchTypes.ValueChangedEvent): void => {
9+
setValue(value);
910
}, []);
1011

1112
return (

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import Switch from 'devextreme-react/switch';
33

44
function App() {
55
const [value, setValue] = useState(false);
6-
const valueChanged = useCallback((e) => {
7-
setValue(e.value);
6+
const valueChanged = useCallback(({ value }) => {
7+
setValue(value);
88
}, []);
99
return (
1010
<div>

‎apps/demos/Demos/TagBox/Grouping/React/App.tsx‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,32 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import { TagBox } from 'devextreme-react/tag-box';
33
import { DataSource } from 'devextreme-react/common/data';
4-
import Group from './Group.tsx';
54

6-
import productsData from './data.ts';
5+
import Group from './Group.tsx';
6+
import { products } from './data.ts';
77

88
const defaultValues = {
99
grouped: [17, 19],
1010
search: [17, 19],
1111
template: [18],
12-
};
12+
} satisfies Record<string, number[]>;
1313

1414
const productLabel = { 'aria-label': 'Product' };
1515

1616
function App() {
17-
const [products] = useState(
18-
new DataSource({
19-
store: productsData,
20-
key: 'ID',
21-
group: 'Category',
22-
}),
23-
);
17+
const productStore = new DataSource({
18+
store: products,
19+
key: 'ID',
20+
group: 'Category',
21+
});
2422

2523
return (
2624
<div className="dx-fieldset">
2725
<div className="dx-field">
2826
<div className="dx-field-label">Grouped items</div>
2927
<div className="dx-field-value">
3028
<TagBox
31-
dataSource={products}
29+
dataSource={productStore}
3230
inputAttr={productLabel}
3331
valueExpr="ID"
3432
defaultValue={defaultValues.grouped}
@@ -42,7 +40,7 @@ function App() {
4240
<div className="dx-field-label">Grouped items with search enabled</div>
4341
<div className="dx-field-value">
4442
<TagBox
45-
dataSource={products}
43+
dataSource={productStore}
4644
valueExpr="ID"
4745
inputAttr={productLabel}
4846
defaultValue={defaultValues.search}
@@ -57,7 +55,7 @@ function App() {
5755
<div className="dx-field-label">Grouped items with a custom group template</div>
5856
<div className="dx-field-value">
5957
<TagBox
60-
dataSource={products}
58+
dataSource={productStore}
6159
valueExpr="ID"
6260
inputAttr={productLabel}
6361
defaultValue={defaultValues.template}

‎apps/demos/Demos/TagBox/Grouping/React/Group.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React from 'react';
22

3-
export default function Group({ key }) {
3+
interface GroupProps {
4+
key: string;
5+
}
6+
7+
export default function Group({ key }: GroupProps) {
48
return (
59
<div className="custom-icon">
610
<span className="dx-icon-box icon"></span> {key}

‎apps/demos/Demos/TagBox/Grouping/React/data.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
export default [{
1+
import type { Product } from './types.ts';
2+
3+
export const products: Product[] = [{
24
ID: 1,
35
Name: 'HD Video Player',
46
Category: 'Video Players',

‎apps/demos/Demos/TagBox/Grouping/React/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export type Product = {
2+
ID: number;
3+
Name: string;
4+
Category: string;
5+
};

‎apps/demos/Demos/TagBox/Grouping/ReactJs/App.js‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22
import { TagBox } from 'devextreme-react/tag-box';
33
import { DataSource } from 'devextreme-react/common/data';
44
import Group from './Group.js';
5-
import productsData from './data.js';
5+
import { products } from './data.js';
66

77
const defaultValues = {
88
grouped: [17, 19],
@@ -11,20 +11,18 @@ const defaultValues = {
1111
};
1212
const productLabel = { 'aria-label': 'Product' };
1313
function App() {
14-
const [products] = useState(
15-
new DataSource({
16-
store: productsData,
17-
key: 'ID',
18-
group: 'Category',
19-
}),
20-
);
14+
const productStore = new DataSource({
15+
store: products,
16+
key: 'ID',
17+
group: 'Category',
18+
});
2119
return (
2220
<div className="dx-fieldset">
2321
<div className="dx-field">
2422
<div className="dx-field-label">Grouped items</div>
2523
<div className="dx-field-value">
2624
<TagBox
27-
dataSource={products}
25+
dataSource={productStore}
2826
inputAttr={productLabel}
2927
valueExpr="ID"
3028
defaultValue={defaultValues.grouped}
@@ -38,7 +36,7 @@ function App() {
3836
<div className="dx-field-label">Grouped items with search enabled</div>
3937
<div className="dx-field-value">
4038
<TagBox
41-
dataSource={products}
39+
dataSource={productStore}
4240
valueExpr="ID"
4341
inputAttr={productLabel}
4442
defaultValue={defaultValues.search}
@@ -53,7 +51,7 @@ function App() {
5351
<div className="dx-field-label">Grouped items with a custom group template</div>
5452
<div className="dx-field-value">
5553
<TagBox
56-
dataSource={products}
54+
dataSource={productStore}
5755
valueExpr="ID"
5856
inputAttr={productLabel}
5957
defaultValue={defaultValues.template}

‎apps/demos/Demos/TagBox/Grouping/ReactJs/data.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default [
1+
export const products = [
22
{
33
ID: 1,
44
Name: 'HD Video Player',

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

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,25 @@ import { ArrayStore } from 'devextreme-react/common/data';
66

77
import Item from './Item.tsx';
88
import Tag from './Tag.tsx';
9-
import {
10-
simpleProducts, products, productLabel, Product,
11-
} from './data.ts';
9+
import { simpleProducts, products, productLabel } from './data.ts';
10+
import type { Product } from './types.ts';
1211

13-
const disabledValue = [simpleProducts[0]];
14-
const value = [1, 2];
12+
const disabledValue: string[] = [simpleProducts[0]];
13+
const value: number[] = [1, 2];
1514
const dataSource = new ArrayStore({
1615
data: products,
1716
key: 'Id',
1817
});
1918

2019
function App() {
21-
const [editableProducts, setEditableProducts] = useState([...simpleProducts]);
22-
const [target, setTarget] = useState(null);
23-
const [product, setProduct] = useState<Product>({});
20+
const [editableProducts, setEditableProducts] = useState<string[]>([...simpleProducts]);
21+
const [target, setTarget] = useState<HTMLElement | null>(null);
22+
const [product, setProduct] = useState<Product | null>(null);
2423

2524
const onCustomItemCreating = useCallback(
26-
(args: TagBoxTypes.CustomItemCreatingEvent) => {
25+
(args: TagBoxTypes.CustomItemCreatingEvent): void => {
2726
const newValue = args.text;
28-
const isItemInDataSource = editableProducts.some((item) => item === newValue);
27+
const isItemInDataSource = editableProducts.some((item: string): boolean => item === newValue);
2928
if (!isItemInDataSource) {
3029
setEditableProducts([newValue, ...editableProducts]);
3130
}
@@ -34,15 +33,15 @@ function App() {
3433
[editableProducts],
3534
);
3635

37-
const onMouseEnter = useCallback((e: { currentTarget: any }, newProduct) => {
36+
const onMouseEnter = useCallback((e: React.MouseEvent<HTMLElement>, newProduct: Product): void => {
3837
setTarget(e.currentTarget);
3938
setProduct(newProduct);
4039
}, []);
4140

42-
const getAltText = useCallback((text: String) => `${text}. Picture`, []);
41+
const getAltText = useCallback((text: string): string => `${text}. Picture`, []);
4342

4443
return (
45-
<React.Fragment>
44+
<>
4645
<div className="dx-fieldset">
4746
<div className="dx-field">
4847
<div className="dx-field-label">Default mode</div>
@@ -168,25 +167,25 @@ function App() {
168167
>
169168
<p>
170169
<b>Name: </b>
171-
<span>{product.Name}</span>
170+
<span>{product?.Name}</span>
172171
</p>
173172
<p>
174173
<b>Price: </b>
175-
<span>{product.Price}</span>
174+
<span>{product?.Price}</span>
176175
</p>
177176
<p>
178177
<b>In-stock: </b>
179-
<span>{product.Current_Inventory}</span>
178+
<span>{product?.Current_Inventory}</span>
180179
</p>
181180
<p>
182181
<b>Category: </b>
183-
<span>{product.Category}</span>
182+
<span>{product?.Category}</span>
184183
</p>
185184
</Popover>
186185
</div>
187186
</div>
188187
</div>
189-
</React.Fragment>
188+
</>
190189
);
191190
}
192191

‎apps/demos/Demos/TagBox/Overview/React/Item.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react';
2+
import type { Product } from './types.ts';
23

34
interface ItemProps {
4-
data: any;
5-
getAltText: any;
5+
data: Product;
6+
getAltText: (text: string) => string;
67
}
78

89
export default function Item({ data, getAltText }: ItemProps) {

0 commit comments

Comments
 (0)