Skip to content

Commit 87d0dac

Browse files
filipKovachevfilipKovachev
committed
fix build errors
1 parent 786df31 commit 87d0dac

File tree

19 files changed

+277
-264
lines changed

19 files changed

+277
-264
lines changed

‎examples/kendo-react-e-commerce-astro-app/src/assets/1111.jfif‎

-50.6 KB
Binary file not shown.

‎examples/kendo-react-e-commerce-astro-app/src/components/AdminView.tsx‎

Lines changed: 34 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import * as React from 'react';
2-
import { getter } from '@progress/kendo-react-common';
1+
import * as React from "react";
2+
import { getter } from "@progress/kendo-react-common";
33
import {
44
Grid,
55
GridColumn,
@@ -9,19 +9,20 @@ import {
99
GridKeyDownEvent,
1010
getSelectedStateFromKeyDown,
1111
GridSortChangeEvent,
12-
} from '@progress/kendo-react-grid';
12+
GridPageChangeEvent,
13+
} from "@progress/kendo-react-grid";
1314
import {
1415
ChartWizard,
16+
ChartWizardDataRow,
1517
getWizardDataFromGridSelection,
16-
} from '@progress/kendo-react-chart-wizard';
17-
import { Button } from '@progress/kendo-react-buttons';
18-
import { orderBy, groupBy } from '@progress/kendo-data-query';
19-
import { chartAreaStackedIcon } from '@progress/kendo-svg-icons';
20-
import { sampleData, SampleDataItem } from '../data/shared-gd-sampleChartData';
21-
import { Pager, PageChangeEvent } from '@progress/kendo-react-data-tools';
22-
23-
const DATA_ITEM_KEY = 'ID';
24-
const SELECTED_FIELD = 'selected';
18+
} from "@progress/kendo-react-chart-wizard";
19+
import { Button } from "@progress/kendo-react-buttons";
20+
import { orderBy } from "@progress/kendo-data-query";
21+
import { chartAreaStackedIcon } from "@progress/kendo-svg-icons";
22+
import { sampleData } from "../data/shared-gd-sampleChartData";
23+
24+
const DATA_ITEM_KEY = "ID";
25+
const SELECTED_FIELD = "selected";
2526
const idGetter = getter(DATA_ITEM_KEY);
2627

2728
interface SelectedState {
@@ -36,17 +37,20 @@ interface PageState {
3637
const AdminView: React.FC = () => {
3738
const gridRef = React.useRef<GridHandle>(null);
3839
const [selectedState, setSelectedState] = React.useState<SelectedState>({});
39-
const [sort, setSort] = React.useState<{ field: string; dir: 'asc' | 'desc' }[]>([
40-
{ field: 'Sales', dir: 'desc' },
40+
const [sort, setSort] = React.useState<{ field: string; dir: "asc" | "desc" }[]>([
41+
{ field: "Sales", dir: "desc" },
4142
]);
4243
const [showChartWizard, setShowChartWizard] = React.useState<boolean>(false);
43-
const [chartData, setChartData] = React.useState<SampleDataItem[]>([]);
44-
const [top3SalesData, setTop3SalesData] = React.useState<SampleDataItem[]>([]);
44+
const [chartData, setChartData] = React.useState<ChartWizardDataRow[]>([]);
45+
const [top3SalesData, setTop3SalesData] = React.useState<ChartWizardDataRow[]>([]);
4546
const [top3Visible, setTop3Visible] = React.useState<boolean>(false);
4647
const [page, setPage] = React.useState<PageState>({ skip: 0, take: 4 });
4748

48-
const pageChange = (event: PageChangeEvent) => {
49-
setPage(event.page);
49+
const pageChange = (event: GridPageChangeEvent) => {
50+
setPage({
51+
skip: event.page.skip,
52+
take: event.page.take,
53+
});
5054
};
5155

5256
const data = sampleData.map((item) => ({
@@ -88,7 +92,7 @@ const AdminView: React.FC = () => {
8892
setChartData(chartWizardData);
8993
setShowChartWizard(true);
9094
} else {
91-
console.error('Grid reference is not available.');
95+
console.error("Grid reference is not available.");
9296
}
9397
}, [selectedState]);
9498

@@ -103,60 +107,32 @@ const AdminView: React.FC = () => {
103107
const sortedTop3Sales = selectedData
104108
.sort(
105109
(a, b) =>
106-
b.find((field) => field.field === 'Total Sales').value -
107-
a.find((field) => field.field === 'Total Sales').value
110+
b.find((field) => field.field === "Total Sales")?.value -
111+
a.find((field) => field.field === "Total Sales")?.value
108112
)
109113
.slice(0, 3);
110114

111115
setTop3SalesData(sortedTop3Sales);
112116
setTop3Visible(true);
113117
}, [selectedState]);
114118

115-
const URLImageCell: React.FC<{ dataItem: SampleDataItem; field?: string }> = ({
116-
dataItem,
117-
field,
118-
}) => {
119-
const imageUrl = dataItem[field || 'URL'];
119+
const URLImageCell: React.FC<{ dataItem: any; field?: string }> = ({ dataItem, field }) => {
120+
const imageUrl = dataItem[field || "URL"];
120121
return (
121122
<td>
122-
<img src={imageUrl} alt="Product" style={{ width: '100px', height: 'auto' }} />
123+
<img src={imageUrl} alt="Product" style={{ width: "100px", height: "auto" }} />
123124
</td>
124125
);
125126
};
126127

127-
const MyPager: React.FC<{
128-
skip: number;
129-
take: number;
130-
total: number;
131-
onPageChange: (event: PageChangeEvent) => void;
132-
}> = (props) => {
133-
return (
134-
<div style={{ overflow: 'hidden', padding: '10px' }}>
135-
<Pager
136-
responsive={true}
137-
skip={props.skip}
138-
take={props.take}
139-
total={props.total}
140-
onPageChange={props.onPageChange}
141-
buttonCount={5}
142-
info={true}
143-
previousNext={true}
144-
type="numeric"
145-
pageSizes={[4, 10, 15, 20]}
146-
pageSizeValue={props.take}
147-
/>
148-
</div>
149-
);
150-
};
151-
152128
return (
153129
<>
154-
<div style={{ marginBottom: '10px' }}>
130+
<div style={{ marginBottom: "10px" }}>
155131
<Button
156132
svgIcon={chartAreaStackedIcon}
157133
onClick={handleSelectedChart}
158134
disabled={disabled}
159-
style={{ marginRight: '10px' }}
135+
style={{ marginRight: "10px" }}
160136
>
161137
Chart of Selected Data
162138
</Button>
@@ -166,7 +142,7 @@ const AdminView: React.FC = () => {
166142
</div>
167143
<Grid
168144
ref={gridRef}
169-
style={{ height: '500px' }}
145+
style={{ height: "500px" }}
170146
data={pagedData}
171147
dataItemKey={DATA_ITEM_KEY}
172148
selectedField={SELECTED_FIELD}
@@ -175,19 +151,18 @@ const AdminView: React.FC = () => {
175151
total={data.length}
176152
pageable={true}
177153
onPageChange={pageChange}
178-
pager={(pagerProps) => <MyPager {...pagerProps} />}
179154
selectable={{
180155
enabled: true,
181156
drag: true,
182-
mode: 'multiple',
157+
mode: "multiple",
183158
}}
184159
navigatable={true}
185160
onSelectionChange={onSelectionChange}
186161
onKeyDown={onKeyDown}
187162
sortable={true}
188163
sort={sort}
189164
onSortChange={(e: GridSortChangeEvent) => {
190-
setSort(e.sort);
165+
setSort(e.sort as { field: string; dir: "asc" | "desc" }[]);
191166
}}
192167
>
193168
<GridColumn field="URL" title="Product" cell={URLImageCell} />
@@ -202,30 +177,18 @@ const AdminView: React.FC = () => {
202177
{showChartWizard && (
203178
<ChartWizard
204179
data={chartData}
205-
series={[
206-
{
207-
field: 'value',
208-
categoryField: 'category',
209-
},
210-
]}
211180
onClose={() => setShowChartWizard(false)}
212181
/>
213182
)}
214183

215184
{top3Visible && (
216185
<ChartWizard
217186
data={top3SalesData}
218-
series={[
219-
{
220-
field: 1,
221-
categoryField: 0,
222-
},
223-
]}
224187
onClose={() => setTop3Visible(false)}
225188
/>
226189
)}
227190
</>
228191
);
229192
};
230193

231-
export default AdminView;
194+
export default AdminView;

‎examples/kendo-react-e-commerce-astro-app/src/components/CardHolder.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from 'react';
2-
31
import { TextBox } from '@progress/kendo-react-inputs';
42

53
const CardNumber = () => {

‎examples/kendo-react-e-commerce-astro-app/src/components/CardNumber.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from 'react';
2-
31
import { MaskedTextBox } from '@progress/kendo-react-inputs';
42

53
const CardNumber = () => {

‎examples/kendo-react-e-commerce-astro-app/src/components/Contacts.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import React from 'react';
22
import { Layout } from '../components/Layout';
3-
import CardNumber from '../components/CardNumber';
4-
import ExpiryDate from '../components/ExpiryDate';
5-
import PasswordInput from '../components/PasswordInput';
63
import EmailInput from '../components/EmailInput';
74
import CardHolder from '../components/CardHolder';
85
import CityInput from '../components/CityInput';

‎examples/kendo-react-e-commerce-astro-app/src/components/DetailedCategory.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
// src/components/ShoppingCartList.tsx
21
import * as React from "react";
32
import {
43
chevronLeftIcon,
54
trashIcon,
6-
walletSolidIcon,
7-
heartIcon,
8-
percentIcon,
95
} from "@progress/kendo-svg-icons";
106
import {
117
Form,
@@ -18,15 +14,12 @@ import { Error } from "@progress/kendo-react-labels";
1814
import { Input, NumericTextBox } from "@progress/kendo-react-inputs";
1915
import { Button } from "@progress/kendo-react-buttons";
2016
import { Layout } from "./Layout";
21-
import { Avatar } from "@progress/kendo-react-layout";
22-
import { SvgIcon } from "@progress/kendo-react-common";
2317

24-
// Temporary hardcoded cart data with image paths from the public folder
2518
const cart = [
2619
{
2720
product: {
2821
id: 1,
29-
img: "/sample-item1.png", // Images from public folder
22+
img: "/sample-item1.png",
3023
title: "Silver Bracelet with Onyx",
3124
newPrice: 49.99,
3225
},
@@ -89,7 +82,7 @@ const ShoppingCartList: React.FC = () => {
8982
>
9083
<img
9184
className="k-rounded-lg"
92-
src={item.product.img} // Directly reference images in the public folder
85+
src={item.product.img}
9386
alt={item.product.title}
9487
style={{ maxHeight: "120px" }}
9588
/>
@@ -173,7 +166,7 @@ const ShoppingCartList: React.FC = () => {
173166
</div>
174167
<div className="k-col-span-9 k-rounded-lg">
175168
<img
176-
src="/shoppingCartImg.png" // Reference public folder image directly
169+
src="/shoppingCartImg.png"
177170
alt="Shopping Cart Background"
178171
style={{ width: "630px", height: "455px" }}
179172
/>

‎examples/kendo-react-e-commerce-astro-app/src/components/EmailInput.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import * as React from 'react';
2-
import { Input, InputChangeEvent } from '@progress/kendo-react-inputs';
3-
import { Button } from '@progress/kendo-react-buttons';
4-
import { eyeIcon, eyeSlashIcon } from '@progress/kendo-svg-icons';
2+
import { Input } from '@progress/kendo-react-inputs';
53

64
const EmailInput: React.FC = () => {
75

‎examples/kendo-react-e-commerce-astro-app/src/components/ExpiryDate.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import * as React from 'react';
2-
31
import { DateInput } from "@progress/kendo-react-dateinputs";
42

53
const ExpiryDate = () => {

0 commit comments

Comments
 (0)