Skip to content

Commit f185333

Browse files
anna-shakhovaanna-shakhova
authored
CardView, FilterBuilder, Sortable, TreeList: fix ts issues in react demos (#31959)
1 parent 5db7ed0 commit f185333

78 files changed

Lines changed: 733 additions & 496 deletions

File tree

Some content is hidden

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

‎apps/demos/Demos/CardView/CardTemplate/React/App.tsx‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import React, { useCallback, useState } from 'react';
2+
23
import CardView, { Column, HeaderFilter, SearchPanel, Paging } from 'devextreme-react/card-view';
4+
import type { CardViewTypes } from 'devextreme-react/card-view';
35
import Popup, { Position } from 'devextreme-react/popup';
4-
import { Vehicle, vehicles } from './data.ts';
5-
import VehicleCard from './VehicleCard.tsx';
6+
7+
import { vehicles } from './data.ts';
8+
import type { Vehicle } from './types.ts';
69
import LicenseInfo from './LicenseInfo.tsx';
10+
import VehicleCard from './VehicleCard.tsx';
711

8-
const getFormattedPrice = (card: any): string => {
9-
const priceText = card.fields.find((f) => f?.column?.dataField === 'Price');
12+
const getFormattedPrice = (card: CardViewTypes.CardInfo): string => {
13+
const priceText = card.fields?.find((f: CardViewTypes.FieldInfo) => f?.column?.dataField === 'Price');
1014
return priceText?.text ?? '';
1115
};
1216

@@ -23,27 +27,33 @@ const App = () => {
2327
setPopupVisible(false);
2428
}, []);
2529

30+
const cardRender = useCallback((model: CardViewTypes.CardTemplateData) => {
31+
const vehicle = model.card.data as Vehicle;
32+
return <VehicleCard
33+
vehicle={vehicle}
34+
id={vehicle.ID}
35+
model={`${vehicle.TrademarkName} ${vehicle.Name}`}
36+
price={getFormattedPrice(model.card)}
37+
categoryName={vehicle.CategoryName}
38+
modification={vehicle.Modification}
39+
bodyStyleName={vehicle.BodyStyleName}
40+
horsepower={vehicle.Horsepower}
41+
onShowInfo={showInfo}
42+
/>;
43+
}, [showInfo]);
44+
45+
const contentRender = useCallback(() => (
46+
currentVehicle ? <LicenseInfo vehicle={currentVehicle} /> : null
47+
), [currentVehicle]);
48+
2649
return (
27-
<React.Fragment>
50+
<>
2851
<CardView
2952
dataSource={vehicles}
3053
height={1120}
3154
cardsPerRow="auto"
3255
cardMinWidth={240}
33-
cardRender={(model) => {
34-
const vehicle = model.card.data;
35-
return <VehicleCard
36-
vehicle={vehicle}
37-
id={vehicle.ID}
38-
model={`${vehicle.TrademarkName} ${vehicle.Name}`}
39-
price={getFormattedPrice(model.card)}
40-
categoryName={vehicle.CategoryName}
41-
modification={vehicle.Modification}
42-
bodyStyleName={vehicle.BodyStyleName}
43-
horsepower={vehicle.Horsepower}
44-
onShowInfo={showInfo}
45-
/>;
46-
}}
56+
cardRender={cardRender}
4757
>
4858
<HeaderFilter visible={true} />
4959
<SearchPanel visible={true} />
@@ -83,13 +93,11 @@ const App = () => {
8393
hideOnOutsideClick={true}
8494
title="Image Info"
8595
onHiding={hideInfo}
86-
contentRender={() =>
87-
currentVehicle ? <LicenseInfo vehicle={currentVehicle} /> : null
88-
}
96+
contentRender={contentRender}
8997
>
9098
<Position at="center" my="center" collision="fit" />
9199
</Popup>
92-
</React.Fragment>
100+
</>
93101
);
94102
};
95103

‎apps/demos/Demos/CardView/CardTemplate/React/LicenseInfo.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { VehicleImageLicenseProps } from './types';
21
import React from 'react';
32

3+
import type { VehicleImageLicenseProps } from './types.ts';
4+
45
const LicenseInfo = ({
56
vehicle: {
67
LicenseName,
@@ -10,6 +11,7 @@ const LicenseInfo = ({
1011
},
1112
}: VehicleImageLicenseProps) => {
1213
const vehicleLink = `https://${Source}`;
14+
1315
return (
1416
<div>
1517
<p><b>Image licensed under: </b> <span>{LicenseName}</span></p>

‎apps/demos/Demos/CardView/CardTemplate/React/VehicleCard.tsx‎

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import React from 'react';
1+
import React, { useCallback } from 'react';
2+
23
import Button from 'devextreme-react/button';
3-
import { VehicleCardProps } from './types';
4+
5+
import type { VehicleCardProps } from './types.ts';
46

57
const VehicleCard = ({
68
vehicle,
@@ -12,47 +14,53 @@ const VehicleCard = ({
1214
bodyStyleName,
1315
horsepower,
1416
onShowInfo,
15-
}: VehicleCardProps) => (
16-
<div className="vehicle__card">
17-
<div className="vehicle__img-wrapper">
18-
<img className="vehicle__img"
19-
src={`../../../../images/vehicles/image_${id}.png`}
20-
alt={model}
21-
/>
22-
</div>
23-
<div className="vehicle__info">
24-
<div className="vehicle__name" title={model}>
25-
{model}
26-
</div>
27-
<div className="vehicle__price">
28-
{price}
17+
}: VehicleCardProps) => {
18+
const showVehicleInfo = useCallback(() => {
19+
onShowInfo(vehicle);
20+
}, [onShowInfo, vehicle]);
21+
22+
return (
23+
<div className="vehicle__card">
24+
<div className="vehicle__img-wrapper">
25+
<img className="vehicle__img"
26+
src={`../../../../images/vehicles/image_${id}.png`}
27+
alt={model}
28+
/>
2929
</div>
30-
<div className="vehicle__type-container">
31-
<div className="vehicle__type">
32-
{categoryName}
30+
<div className="vehicle__info">
31+
<div className="vehicle__name" title={model}>
32+
{model}
3333
</div>
34-
</div>
35-
<div className="vehicle__spec-container">
36-
<div className="vehicle__modification">
37-
{modification}
34+
<div className="vehicle__price">
35+
{price}
3836
</div>
39-
<div className="vehicle__modification">
40-
{bodyStyleName}
37+
<div className="vehicle__type-container">
38+
<div className="vehicle__type">
39+
{categoryName}
40+
</div>
4141
</div>
42-
<div className="vehicle__modification">
43-
{horsepower} h.p.
42+
<div className="vehicle__spec-container">
43+
<div className="vehicle__modification">
44+
{modification}
45+
</div>
46+
<div className="vehicle__modification">
47+
{bodyStyleName}
48+
</div>
49+
<div className="vehicle__modification">
50+
{horsepower} h.p.
51+
</div>
52+
</div>
53+
<div className="vehicle__footer-container">
54+
<Button
55+
text="Image Info"
56+
type="default"
57+
width="100%"
58+
onClick={showVehicleInfo}
59+
/>
4460
</div>
45-
</div>
46-
<div className="vehicle__footer-container">
47-
<Button
48-
text="Image Info"
49-
type="default"
50-
width="100%"
51-
onClick={() => onShowInfo(vehicle)}
52-
/>
5361
</div>
5462
</div>
55-
</div>
56-
);
63+
);
64+
};
5765

5866
export default VehicleCard;

‎apps/demos/Demos/CardView/CardTemplate/React/data.ts‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,4 @@
1-
export interface Vehicle {
2-
ID: number;
3-
TrademarkName: string;
4-
TrademarkID: number;
5-
Name: string;
6-
Modification: string;
7-
CategoryID: number;
8-
CategoryName: string;
9-
Price: number;
10-
MPGCity: number;
11-
MPGHighway: number;
12-
Doors: number;
13-
BodyStyleID: number;
14-
BodyStyleName: string;
15-
Cylinders: number;
16-
Horsepower: string;
17-
Torque: string;
18-
TransmissionSpeeds: number;
19-
TransmissionType: number;
20-
Description: string;
21-
DeliveryDate: boolean;
22-
InStock: boolean;
23-
Edits: string;
24-
LicenseName: string;
25-
Author: string;
26-
Source: string;
27-
}
1+
import type { Vehicle } from './types';
282

293
export const vehicles: Vehicle[] = [
304
{

‎apps/demos/Demos/CardView/CardTemplate/React/types.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,30 @@
1-
import { Vehicle } from './data';
1+
export interface Vehicle {
2+
ID: number;
3+
TrademarkName: string;
4+
TrademarkID: number;
5+
Name: string;
6+
Modification: string;
7+
CategoryID: number;
8+
CategoryName: string;
9+
Price: number;
10+
MPGCity: number;
11+
MPGHighway: number;
12+
Doors: number;
13+
BodyStyleID: number;
14+
BodyStyleName: string;
15+
Cylinders: number;
16+
Horsepower: string;
17+
Torque: string;
18+
TransmissionSpeeds: number;
19+
TransmissionType: number;
20+
Description: string;
21+
DeliveryDate: boolean;
22+
InStock: boolean;
23+
Edits: string;
24+
LicenseName: string;
25+
Author: string;
26+
Source: string;
27+
}
228

329
export interface VehicleImageLicenseProps {
430
vehicle: Vehicle;

‎apps/demos/Demos/CardView/CardTemplate/ReactJs/App.js‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import CardView, {
44
} from 'devextreme-react/card-view';
55
import Popup, { Position } from 'devextreme-react/popup';
66
import { vehicles } from './data.js';
7-
import VehicleCard from './VehicleCard.js';
87
import LicenseInfo from './LicenseInfo.js';
8+
import VehicleCard from './VehicleCard.js';
99

1010
const getFormattedPrice = (card) => {
11-
const priceText = card.fields.find((f) => f?.column?.dataField === 'Price');
11+
const priceText = card.fields?.find((f) => f?.column?.dataField === 'Price');
1212
return priceText?.text ?? '';
1313
};
1414
const App = () => {
@@ -21,29 +21,37 @@ const App = () => {
2121
const hideInfo = useCallback(() => {
2222
setPopupVisible(false);
2323
}, []);
24+
const cardRender = useCallback(
25+
(model) => {
26+
const vehicle = model.card.data;
27+
return (
28+
<VehicleCard
29+
vehicle={vehicle}
30+
id={vehicle.ID}
31+
model={`${vehicle.TrademarkName} ${vehicle.Name}`}
32+
price={getFormattedPrice(model.card)}
33+
categoryName={vehicle.CategoryName}
34+
modification={vehicle.Modification}
35+
bodyStyleName={vehicle.BodyStyleName}
36+
horsepower={vehicle.Horsepower}
37+
onShowInfo={showInfo}
38+
/>
39+
);
40+
},
41+
[showInfo],
42+
);
43+
const contentRender = useCallback(
44+
() => (currentVehicle ? <LicenseInfo vehicle={currentVehicle} /> : null),
45+
[currentVehicle],
46+
);
2447
return (
25-
<React.Fragment>
48+
<>
2649
<CardView
2750
dataSource={vehicles}
2851
height={1120}
2952
cardsPerRow="auto"
3053
cardMinWidth={240}
31-
cardRender={(model) => {
32-
const vehicle = model.card.data;
33-
return (
34-
<VehicleCard
35-
vehicle={vehicle}
36-
id={vehicle.ID}
37-
model={`${vehicle.TrademarkName} ${vehicle.Name}`}
38-
price={getFormattedPrice(model.card)}
39-
categoryName={vehicle.CategoryName}
40-
modification={vehicle.Modification}
41-
bodyStyleName={vehicle.BodyStyleName}
42-
horsepower={vehicle.Horsepower}
43-
onShowInfo={showInfo}
44-
/>
45-
);
46-
}}
54+
cardRender={cardRender}
4755
>
4856
<HeaderFilter visible={true} />
4957
<SearchPanel visible={true} />
@@ -83,15 +91,15 @@ const App = () => {
8391
hideOnOutsideClick={true}
8492
title="Image Info"
8593
onHiding={hideInfo}
86-
contentRender={() => (currentVehicle ? <LicenseInfo vehicle={currentVehicle} /> : null)}
94+
contentRender={contentRender}
8795
>
8896
<Position
8997
at="center"
9098
my="center"
9199
collision="fit"
92100
/>
93101
</Popup>
94-
</React.Fragment>
102+
</>
95103
);
96104
};
97105
export default App;

0 commit comments

Comments
 (0)