Skip to content

Commit d0ff53e

Browse files
committed
bump components and theme versions, fix build errors
1 parent 983b16a commit d0ff53e

File tree

6 files changed

+47
-52
lines changed

6 files changed

+47
-52
lines changed

examples/ecommerce-jewellery-store/package.json

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,26 @@
1313
"@progress/kendo-data-query": "^1.7.0",
1414
"@progress/kendo-drawing": "^1.21.1",
1515
"@progress/kendo-licensing": "^1.3.5",
16-
"@progress/kendo-react-animation": "^8.5.0",
17-
"@progress/kendo-react-buttons": "^8.5.0",
18-
"@progress/kendo-react-chart-wizard": "^8.5.0",
19-
"@progress/kendo-react-common": "^8.5.0",
20-
"@progress/kendo-react-data-tools": "^8.5.0",
21-
"@progress/kendo-react-dateinputs": "^8.5.0",
22-
"@progress/kendo-react-dropdowns": "^8.5.0",
23-
"@progress/kendo-react-form": "^8.5.0",
24-
"@progress/kendo-react-grid": "^8.5.0",
25-
"@progress/kendo-react-indicators": "^8.5.0",
26-
"@progress/kendo-react-inputs": "^8.5.0",
27-
"@progress/kendo-react-intl": "^8.5.0",
28-
"@progress/kendo-react-layout": "^8.5.0",
29-
"@progress/kendo-react-notification": "^8.5.0",
30-
"@progress/kendo-react-popup": "^8.5.0",
31-
"@progress/kendo-react-progressbars": "^8.5.0",
32-
"@progress/kendo-react-treeview": "^8.5.0",
33-
"@progress/kendo-svg-icons": "^3.3.0",
34-
"@progress/kendo-theme-default": "^9.1.0",
35-
"@progress/kendo-theme-utils": "^9.1.0",
16+
"@progress/kendo-react-animation": "^9.0.0",
17+
"@progress/kendo-react-buttons": "^9.0.0",
18+
"@progress/kendo-react-chart-wizard": "^9.0.0",
19+
"@progress/kendo-react-common": "^9.0.0",
20+
"@progress/kendo-react-data-tools": "^9.0.0",
21+
"@progress/kendo-react-dateinputs": "^9.0.0",
22+
"@progress/kendo-react-dropdowns": "^9.0.0",
23+
"@progress/kendo-react-form": "^9.0.0",
24+
"@progress/kendo-react-grid": "^9.0.0",
25+
"@progress/kendo-react-indicators": "^9.0.0",
26+
"@progress/kendo-react-inputs": "^9.0.0",
27+
"@progress/kendo-react-intl": "^9.0.0",
28+
"@progress/kendo-react-layout": "^9.0.0",
29+
"@progress/kendo-react-notification": "^9.0.0",
30+
"@progress/kendo-react-popup": "^9.0.0",
31+
"@progress/kendo-react-progressbars": "^9.0.0",
32+
"@progress/kendo-react-treeview": "^9.0.0",
33+
"@progress/kendo-svg-icons": "^4.0.0",
34+
"@progress/kendo-theme-default": "^10.0.1",
35+
"@progress/kendo-theme-utils": "^10.0.1",
3636
"react": "^18.3.1",
3737
"react-dom": "^18.3.1",
3838
"react-router-dom": "^6.27.0"

examples/ecommerce-jewellery-store/src/components/AdminView.tsx

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import {
66
GridSelectionChangeEvent,
77
GridHandle,
88
getSelectedState,
9-
GridPageChangeEvent,
109
GridKeyDownEvent,
1110
getSelectedStateFromKeyDown,
1211
GridSortChangeEvent,
12+
GridPageChangeEvent,
1313
} from '@progress/kendo-react-grid';
1414
import {
1515
ChartWizard,
@@ -20,7 +20,6 @@ import { Button } from '@progress/kendo-react-buttons';
2020
import { orderBy } from '@progress/kendo-data-query';
2121
import { chartAreaStackedIcon } from '@progress/kendo-svg-icons';
2222
import { sampleData } from '../data/shared-gd-sampleChartData';
23-
import {PagerTargetEvent } from '@progress/kendo-react-data-tools';
2423

2524
interface SampleDataItem {
2625
ID: string;
@@ -34,7 +33,6 @@ interface SampleDataItem {
3433
URL: string;
3534
}
3635

37-
3836
const DATA_ITEM_KEY = 'ID';
3937
const SELECTED_FIELD = 'selected';
4038
const idGetter = getter(DATA_ITEM_KEY);
@@ -43,11 +41,6 @@ interface SelectedState {
4341
[id: string]: boolean | number[];
4442
}
4543

46-
interface PageState {
47-
skip: number;
48-
take: number;
49-
}
50-
5144
const AdminView: React.FC = () => {
5245
const gridRef = React.useRef<GridHandle>(null);
5346
const [selectedState, setSelectedState] = React.useState<SelectedState>({});
@@ -58,11 +51,7 @@ const AdminView: React.FC = () => {
5851
const [chartData, setChartData] = React.useState<ChartWizardDataRow[]>([]);
5952
const [top3SalesData, setTop3SalesData] = React.useState<ChartWizardDataRow[]>([]);
6053
const [top3Visible, setTop3Visible] = React.useState<boolean>(false);
61-
const [page, setPage] = React.useState<number | string | undefined>({ skip: 0, take: 4 });
62-
63-
const pageChange = (event: GridPageChangeEvent) => {
64-
65-
};
54+
const [page, setPage] = React.useState<{ skip: number; take: number }>({ skip: 0, take: 4 });
6655

6756
const data = sampleData.map((item) => ({
6857
...item,
@@ -89,6 +78,10 @@ const AdminView: React.FC = () => {
8978
setSelectedState(newSelectedState);
9079
};
9180

81+
const onPageChange = (event: GridPageChangeEvent) => {
82+
setPage({ skip: event.page.skip, take: event.page.take });
83+
};
84+
9285
const disabled = Object.keys(selectedState).length === 0;
9386

9487
const handleSelectedChart = React.useCallback(() => {
@@ -131,7 +124,7 @@ const AdminView: React.FC = () => {
131124
dataItem,
132125
field,
133126
}) => {
134-
const imageUrl = dataItem[field || 'URL'];
127+
const imageUrl = field && field in dataItem ? (dataItem as Record<string, any>)[field] : dataItem.URL;
135128
return (
136129
<td>
137130
<img src={imageUrl} alt="Product" style={{ width: '100px', height: 'auto' }} />
@@ -164,7 +157,7 @@ const AdminView: React.FC = () => {
164157
take={page.take}
165158
total={data.length}
166159
pageable={true}
167-
onPageChange={pageChange}
160+
onPageChange={onPageChange}
168161
selectable={{
169162
enabled: true,
170163
drag: true,
@@ -176,7 +169,7 @@ const AdminView: React.FC = () => {
176169
sortable={true}
177170
sort={sort}
178171
onSortChange={(e: GridSortChangeEvent) => {
179-
setSort(e.sort);
172+
setSort(e.sort as { field: string; dir: 'asc' | 'desc' }[]);
180173
}}
181174
>
182175
<GridColumn field="URL" title="Product" cell={URLImageCell} />

examples/ecommerce-jewellery-store/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/ecommerce-jewellery-store/src/components/FilterComponent.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
22
import { MultiSelect, DropDownList } from "@progress/kendo-react-dropdowns";
33
import { SvgIcon } from "@progress/kendo-react-common";
44
import { filterIcon, sortAscIcon } from "@progress/kendo-svg-icons";
5-
import { FilterDescriptor, State } from "@progress/kendo-data-query";
5+
import { FilterDescriptor, SortDescriptor, State } from "@progress/kendo-data-query";
66
import { useCategoriesContext } from "../helpers/CategoriesContext";
77

88
const chips = ["Bracelets", "Rings", "Earrings", "Watches", "Necklaces"];
@@ -21,10 +21,10 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
2121

2222
useEffect(() => {
2323
if (selectedCategory) {
24-
setCategoryValue([selectedCategory]);
24+
setCategoryValue([selectedCategory]);
2525
applyCategoryFilter([selectedCategory]);
2626
} else {
27-
setCategoryValue([]);
27+
setCategoryValue([]);
2828
applyCategoryFilter([]);
2929
}
3030
}, [selectedCategory]);
@@ -50,14 +50,13 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
5050
const onCategoryChange = (e: any) => {
5151
setCategoryValue(e.value);
5252
applyCategoryFilter(e.value);
53-
5453
setSelectedCategory(e.value.length > 0 ? e.value[0] : null);
5554
};
5655

5756
const onStatusChange = (e: any) => {
5857
setStatusValue(e.value);
5958

60-
const newSorts = [
59+
const newSorts: SortDescriptor[] = [
6160
{
6261
field: "status",
6362
dir: "desc",
@@ -99,8 +98,8 @@ export const FilterComponent: React.FC<FilterComponentProps> = ({ updateUI }) =>
9998
setCategoryValue([]);
10099
setStatusValue("Recommended");
101100
setMaterialValue("Material");
102-
setSelectedCategory(null); // Clear context filter
103-
updateUI({ filter: undefined, sort: undefined }); // Clear all filters
101+
setSelectedCategory(null);
102+
updateUI({ filter: undefined, sort: undefined });
104103
};
105104

106105
return (

examples/ecommerce-jewellery-store/src/components/Header.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import items from "../data/items";
1010
import languageItems from "../data/language-items";
1111
import { AppBar, AppBarSection } from "@progress/kendo-react-layout";
1212
import { useAdminContext } from "../helpers/AdminContext";
13-
import { useCategoriesContext } from "../helpers/CategoriesContext"; // Import CategoriesContext
13+
import { useCategoriesContext } from "../helpers/CategoriesContext";
1414

1515
const Header: React.FC = () => {
1616
const navigate = useNavigate();
17-
const { isAdmin, toggleRole } = useAdminContext();
17+
const { toggleRole } = useAdminContext();
1818
const { setSelectedCategory } = useCategoriesContext();
1919

2020
const handleCartClick = () => {
@@ -27,22 +27,21 @@ const Header: React.FC = () => {
2727

2828
const handleMenuSelect = (event: MenuSelectEvent) => {
2929
const selectedItem = event.item;
30-
30+
3131
if (selectedItem.url) {
3232
navigate(selectedItem.url);
3333
return;
3434
}
35-
35+
3636
const selectedCategory = selectedItem.text;
3737
if (selectedCategory === "All") {
3838
setSelectedCategory(null);
3939
} else {
40-
setSelectedCategory(selectedCategory);
40+
setSelectedCategory(selectedCategory ?? null);
4141
navigate("/category");
4242
}
4343
};
4444

45-
4645
return (
4746
<>
4847
<AppBar themeColor="inherit">

examples/ecommerce-jewellery-store/src/styles.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,10 @@ html, body {
1717

1818
.kr-mw-1280{
1919
max-width: 1280px;
20+
}
21+
22+
.k-menu-popup {
23+
position: fixed !important;
24+
top: auto !important;
25+
z-index: 1000;
2026
}

0 commit comments

Comments
 (0)