Skip to content

Commit e631438

Browse files
silviyabotevasilviyaboteva
authored
Merge pull request #3145 from telerik/dependabot/npm_and_yarn/examples/coffee-warehouse-nextjs/kendo-dependencies-c59db55c34
chore: bump the kendo-dependencies group across 1 directory with 20 updates
2 parents f003c4b + c95d5aa commit e631438

File tree

5 files changed

+74
-157
lines changed

5 files changed

+74
-157
lines changed

‎examples/coffee-warehouse-nextjs/app/components/Grid.jsx‎

Lines changed: 44 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ import {
1212
import { Button } from "@progress/kendo-react-buttons";
1313
import { GridPDFExport } from "@progress/kendo-react-pdf";
1414
import { ExcelExport } from "@progress/kendo-react-excel-export";
15-
import { process } from "@progress/kendo-data-query";
1615
import { Input } from "@progress/kendo-react-inputs";
1716
import { useLocalization } from "@progress/kendo-react-intl";
1817
import { filePdfIcon, fileExcelIcon } from "@progress/kendo-svg-icons";
18+
import { filterBy } from '@progress/kendo-data-query';
1919
const noMessage = "message not defined";
2020

2121
export const Column = GridColumn;
@@ -30,40 +30,17 @@ export const ColumnMenu = (props) => {
3030
};
3131

3232
export const Grid = (props) => {
33-
const { data, onDataChange, ...others } = props;
33+
const { data, onDataChange, defaultFilter, ...others } = props;
3434

3535
const excelExportRef = React.useRef(null);
3636
const pdfExportRef = React.useRef(null);
3737

3838
const [isPdfExporting, setIsPdfExporting] = React.useState(false);
39-
const [take, setTake] = React.useState(10);
40-
const [skip, setSkip] = React.useState(0);
41-
const [sort, setSort] = React.useState([]);
42-
const [group, setGroup] = React.useState([]);
43-
const [filter, setFilter] = React.useState(null);
44-
const lastSelectedIndexRef = React.useRef(0);
45-
const [allColumnFilter, setAllColumnFilter] = React.useState("");
39+
const [filter, setFilter] = React.useState(defaultFilter);
40+
const filteredData = filterBy(data, filter);
41+
const [select, setSelect] = React.useState({});
4642
const localizationService = useLocalization();
4743

48-
const dataState = {
49-
take,
50-
skip,
51-
sort,
52-
group,
53-
filter,
54-
};
55-
56-
const onDataStateChange = React.useCallback(
57-
(event) => {
58-
setTake(event.dataState.take);
59-
setSkip(event.dataState.skip);
60-
setSort(event.dataState.sort);
61-
setGroup(event.dataState.group);
62-
setFilter(event.dataState.filter);
63-
},
64-
[setTake, setSkip, setSort, setGroup]
65-
);
66-
6744
const onExcelExport = React.useCallback(() => {
6845
if (excelExportRef.current) {
6946
excelExportRef.current.save();
@@ -74,116 +51,64 @@ export const Grid = (props) => {
7451
setIsPdfExporting(false);
7552
}, []);
7653

77-
const onAllColumnFilterChange = React.useCallback(
78-
(event) => {
79-
setAllColumnFilter(event.value);
80-
},
81-
[setAllColumnFilter]
82-
);
83-
84-
const onSelectionChange = React.useCallback(
85-
(event) => {
86-
let last = lastSelectedIndexRef.current;
87-
const updatedData = data.map((dataItem) => {
88-
return { ...dataItem };
89-
});
90-
const current = data.findIndex((dataItem) => dataItem === event.dataItem);
91-
92-
if (!event.nativeEvent.shiftKey) {
93-
lastSelectedIndexRef.current = last = current;
94-
}
95-
96-
if (!event.nativeEvent.ctrlKey) {
97-
updatedData.forEach((item) => (item.selected = false));
98-
}
99-
const select = !event.dataItem.selected;
100-
for (let i = Math.min(last, current); i <= Math.max(last, current); i++) {
101-
updatedData[i].selected = select;
102-
}
103-
104-
onDataChange(updatedData);
105-
},
106-
[data, onDataChange]
107-
);
54+
const onPdfExport = React.useCallback(() => {
55+
if (pdfExportRef.current) {
56+
setIsPdfExporting(true);
57+
pdfExportRef.current.save(data, onPdfExportDone);
58+
}
59+
}, [data, onPdfExportDone]);
10860

109-
const onHeaderSelectionChange = React.useCallback(
61+
const handleFilterChange = React.useCallback(
11062
(event) => {
111-
const checked = event.syntheticEvent.target.checked;
112-
const updatedData = data.map((item) => {
113-
return {
114-
...item,
115-
selected: checked,
63+
let filter = {
64+
logic: 'or',
65+
filters: [
66+
{ field: 'contactName', operator: 'contains', value: event.value },
67+
{ field: 'jobTitle', operator: 'contains', value: event.value },
68+
{ field: 'budget', operator: 'contains', value: event.value },
69+
{ field: 'phone', operator: 'contains', value: event.value },
70+
{ field: 'address', operator: 'contains', value: event.value }
71+
]
11672
};
117-
});
118-
119-
onDataChange(updatedData);
73+
setFilter(filter);
12074
},
121-
[data, onDataChange]
75+
[setFilter]
12276
);
12377

124-
const textColumns = props.children
125-
.map((col) => {
126-
if (col.props.children) {
127-
return col.props.children.map((child) => {
128-
if (!child.props.filter || child.props.filter === "text") {
129-
return child.props.field;
130-
}
131-
return null;
132-
});
133-
} else if (col.props.field) {
134-
if (!col.props.filter || col.props.filter === "text") {
135-
return col.props.field;
136-
}
137-
}
138-
return null;
139-
})
140-
.flat()
141-
.filter((field) => field);
142-
143-
const allColumnsFilters = textColumns.map((column) => ({
144-
field: column,
145-
operator: "contains",
146-
value: allColumnFilter,
147-
}));
148-
149-
const allColumnFilteredData = allColumnFilter
150-
? process(data, { filter: { logic: "or", filters: allColumnsFilters } })
151-
.data
152-
: data;
153-
154-
const processedData = process(allColumnFilteredData, dataState);
155-
156-
React.useEffect(() => {
157-
if (!processedData.data.length) {
158-
setSkip(0);
159-
}
160-
}, [processedData]);
78+
const onSelectionChange = React.useCallback((event) => {
79+
setSelect(event.select);
80+
}, []);
16181

162-
const onPdfExport = React.useCallback(() => {
163-
if (pdfExportRef.current) {
164-
setIsPdfExporting(true);
165-
pdfExportRef.current.save(processedData.data, onPdfExportDone);
166-
}
167-
}, [processedData, onPdfExportDone]);
82+
const onHeaderSelectionChange = React.useCallback((event) => {
83+
setSelect(event.select);
84+
}, []);
16885

16986
const GridElement = (
17087
<KendoGrid
171-
{...dataState}
17288
{...others}
17389
rowHeight={40}
17490
pageable={true}
91+
defaultSkip={0}
92+
defaultTake={10}
17593
sortable={true}
17694
groupable={true}
177-
selectedField={"selected"}
178-
data={processedData}
179-
onDataStateChange={onDataStateChange}
95+
filter={filter}
96+
data={filteredData}
97+
dataItemKey={'id'}
98+
autoProcessData={true}
99+
selectable={{
100+
enabled: true,
101+
drag: false,
102+
cell: false,
103+
mode: 'single'
104+
}}
105+
select={select}
180106
onSelectionChange={onSelectionChange}
181107
onHeaderSelectionChange={onHeaderSelectionChange}
182108
>
183109
<GridToolbar>
184110
<Input
185-
value={allColumnFilter}
186-
onChange={onAllColumnFilterChange}
111+
onChange={handleFilterChange}
187112
placeholder={localizationService.toLanguageString(
188113
"custom.gridSearch",
189114
noMessage
@@ -203,14 +128,7 @@ export const Grid = (props) => {
203128
{localizationService.toLanguageString("custom.exportPdf", noMessage)}
204129
</Button>
205130
</GridToolbar>
206-
<Column
207-
field={"selected"}
208-
width={50}
209-
title={" "}
210-
headerSelectionValue={
211-
data.findIndex((dataItem) => dataItem.selected === false) === -1
212-
}
213-
/>
131+
<Column columnType="checkbox" />
214132
{props.children}
215133
</KendoGrid>
216134
);

‎examples/coffee-warehouse-nextjs/app/styles/_common.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ a {
9393
}
9494

9595
.card-ranges {
96-
text-align: right;
96+
justify-self: flex-end;
9797
grid-column: 2 / 3;
9898
grid-row: 1;
9999
}
@@ -122,7 +122,7 @@ a {
122122
}
123123

124124
.card-ranges {
125-
text-align: right;
125+
justify-self: flex-end;
126126
grid-column: 3 / 4;
127127
}
128128

‎examples/coffee-warehouse-nextjs/app/warehouse/dashboard/dashboard-page.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ export default function DashBoard(props) {
165165
)}
166166
columnMenu={ColumnMenu}
167167
width={230}
168-
cell={FullNameCell}
168+
cells={{ data: FullNameCell }}
169169
/>
170170
<Column
171171
field={"jobTitle"}
@@ -184,7 +184,7 @@ export default function DashBoard(props) {
184184
)}
185185
columnMenu={ColumnMenu}
186186
width={100}
187-
cell={FlagCell}
187+
cells={{ data: FlagCell }}
188188
/>
189189
<Column
190190
field={"isOnline"}
@@ -194,7 +194,7 @@ export default function DashBoard(props) {
194194
)}
195195
columnMenu={ColumnMenu}
196196
width={100}
197-
cell={OnlineCell}
197+
cells={{ data: OnlineCell }}
198198
filter={"boolean"}
199199
/>
200200
</Column>
@@ -213,7 +213,7 @@ export default function DashBoard(props) {
213213
)}
214214
columnMenu={ColumnMenu}
215215
width={110}
216-
cell={RatingCell}
216+
cells={{ data: RatingCell }}
217217
filter={"numeric"}
218218
/>
219219
<Column
@@ -224,7 +224,7 @@ export default function DashBoard(props) {
224224
)}
225225
columnMenu={ColumnMenu}
226226
width={200}
227-
cell={EngagementCell}
227+
cells={{ data: EngagementCell }}
228228
filter={"numeric"}
229229
/>
230230
<Column
@@ -235,7 +235,7 @@ export default function DashBoard(props) {
235235
)}
236236
columnMenu={ColumnMenu}
237237
width={100}
238-
cell={CurrencyCell}
238+
cells={{ data: CurrencyCell }}
239239
filter={"numeric"}
240240
/>
241241
</Column>

‎examples/coffee-warehouse-nextjs/package.json‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,30 @@
1212
"follow-redirects": ">=1.15.4"
1313
},
1414
"dependencies": {
15-
"@progress/kendo-data-query": "^1.7.0",
15+
"@progress/kendo-data-query": "^1.7.1",
1616
"@progress/kendo-date-math": "^1.5.14",
1717
"@progress/kendo-drawing": "^1.21.2",
18-
"@progress/kendo-licensing": "^1.5.1",
19-
"@progress/kendo-react-buttons": "^10.0.0",
20-
"@progress/kendo-react-charts": "^10.0.0",
21-
"@progress/kendo-react-data-tools": "^10.0.0",
22-
"@progress/kendo-react-dateinputs": "^10.0.0",
23-
"@progress/kendo-react-dialogs": "^10.0.0",
24-
"@progress/kendo-react-dropdowns": "^10.0.0",
25-
"@progress/kendo-react-editor": "^10.0.0",
26-
"@progress/kendo-react-excel-export": "^10.0.0",
27-
"@progress/kendo-react-form": "^10.0.0",
28-
"@progress/kendo-react-grid": "^10.0.0",
29-
"@progress/kendo-react-indicators": "^10.0.0",
30-
"@progress/kendo-react-inputs": "^10.0.0",
31-
"@progress/kendo-react-intl": "^10.0.0",
32-
"@progress/kendo-react-layout": "^10.0.0",
33-
"@progress/kendo-react-pdf": "^10.0.0",
34-
"@progress/kendo-react-progressbars": "^10.0.0",
35-
"@progress/kendo-react-scheduler": "^10.0.0",
36-
"@progress/kendo-react-treeview": "^10.0.0",
37-
"@progress/kendo-react-upload": "^10.0.0",
38-
"@progress/kendo-theme-default": "^10.3.1",
18+
"@progress/kendo-licensing": "^1.6.0",
19+
"@progress/kendo-react-buttons": "^11.0.0",
20+
"@progress/kendo-react-charts": "^11.0.0",
21+
"@progress/kendo-react-data-tools": "^11.0.0",
22+
"@progress/kendo-react-dateinputs": "^11.0.0",
23+
"@progress/kendo-react-dialogs": "^11.0.0",
24+
"@progress/kendo-react-dropdowns": "^11.0.0",
25+
"@progress/kendo-react-editor": "^11.0.0",
26+
"@progress/kendo-react-excel-export": "^11.0.0",
27+
"@progress/kendo-react-form": "^11.0.0",
28+
"@progress/kendo-react-grid": "^11.0.0",
29+
"@progress/kendo-react-indicators": "^11.0.0",
30+
"@progress/kendo-react-inputs": "^11.0.0",
31+
"@progress/kendo-react-intl": "^11.0.0",
32+
"@progress/kendo-react-layout": "^11.0.0",
33+
"@progress/kendo-react-pdf": "^11.0.0",
34+
"@progress/kendo-react-progressbars": "^11.0.0",
35+
"@progress/kendo-react-scheduler": "^11.0.0",
36+
"@progress/kendo-react-treeview": "^11.0.0",
37+
"@progress/kendo-react-upload": "^11.0.0",
38+
"@progress/kendo-theme-default": "^11.0.2",
3939
"cldr-core": "44.0.1",
4040
"cldr-dates-full": "44.0.1",
4141
"cldr-numbers-full": "44.0.1",

‎examples/react-coffee-warehouse/src/components/Grid.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ export const Grid = (props) => {
3434
const [select, setSelect] = React.useState({});
3535
const localizationService = useLocalization();
3636

37-
3837
const onExcelExport = React.useCallback(
3938
() => {
4039
if (excelExportRef.current) {

0 commit comments

Comments
 (0)