Skip to content

Commit e3b36e8

Browse files
MarielaTihovaMarielaTihova
authored
refactor: State Persistence samples update for 19 (#782)
1 parent b7a5c48 commit e3b36e8

File tree

8 files changed

+211
-199
lines changed

8 files changed

+211
-199
lines changed

‎samples/grids/grid/state-persistence-about/src/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33

4-
import { ButtonVariant, IgrButton } from 'igniteui-react';
4+
import { IgrButton } from 'igniteui-react';
55
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
66
import './index.css';
77

@@ -17,8 +17,8 @@ export default function App() {
1717
<br />
1818
<span>By default navigating to the previous page, components will reinitialize as per their initial configuration, therefore the IgrGrid will lose its state.</span>
1919
<br />
20-
<span>What our App Component does is reading the state from the window.localStorage object and applying the corresponding state in the `useEffect`` hook.</span><br />
21-
<IgrButton onClick={onBackClicked} variant={ButtonVariant.Contained}><span>Go Back</span></IgrButton>
20+
<span>What our App Component does is reading the state from the window.localStorage object and applying the corresponding state in the `useEffect` hook.</span><br />
21+
<IgrButton onClick={onBackClicked} variant="contained"><span>Go Back</span></IgrButton>
2222
</div>
2323
</div>
2424
</div>

‎samples/grids/grid/state-persistence-main/src/index.tsx

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,26 @@ import React, { useEffect, useRef, useState } from 'react';
22
import ReactDOM from 'react-dom/client';
33

44
import {
5-
FilterMode,
65
IgrActionStrip,
76
IgrGrid,
87
IgrColumn,
9-
IgrGridModule,
108
IgrGridPinningActions,
119
IgrGridToolbar,
1210
IgrGridToolbarActions,
1311
IgrGridToolbarHiding,
1412
IgrGridToolbarPinning,
1513
IgrPaginator,
1614
IgrGridState,
17-
IgrGridStateOptions,
18-
GridSelectionMode
15+
IgrGridStateOptions
1916
} from 'igniteui-react-grids';
20-
import { IgrButton, IgrCheckbox, IgrCheckboxModule, IgrCheckboxChangeEventArgs, IgrIcon, IgrIconModule } from 'igniteui-react';
17+
import { IgrButton, IgrCheckbox, IgrCheckboxChangeEventArgs, IgrIcon } from 'igniteui-react';
2118
import { registerIconFromText } from 'igniteui-webcomponents';
2219
import { CustomersData } from './CustomersData';
2320

2421
import 'igniteui-react-grids/grids/combined';
2522
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
2623
import './index.css';
2724

28-
const mods: any[] = [
29-
IgrGridModule,
30-
IgrIconModule,
31-
IgrCheckboxModule
32-
];
33-
mods.forEach((m) => m.register());
3425

3526
const restoreIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z"/></svg>';
3627
const saveIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM6 6h9v4H6z"/></svg>';
@@ -41,6 +32,8 @@ const refreshIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox
4132

4233
export default function App() {
4334
const gridData = new CustomersData();
35+
const stateKey = "grid-state";
36+
4437
const [allOptions, setAllOptions] = useState(true);
4538
const [options, setOption] = useState<IgrGridStateOptions>({
4639
cellSelection: true,
@@ -55,14 +48,15 @@ export default function App() {
5548
rowPinning: true,
5649
columnSelection: true
5750
});
51+
const [page, setPage] = useState<number>(0);
52+
const [perPage, setPerPage] = useState<number>(15);
53+
const [totalRecords, setTotalRecords] = useState<number>(gridData.length);
5854

5955
let grid: IgrGrid;
60-
function gridRef(ref: IgrGrid) {
56+
const gridRef = (ref: IgrGrid) => {
6157
grid = ref;
62-
}
63-
let paginatorRef = useRef<IgrPaginator>(null);
64-
const stateKey = "grid-state";
65-
let gridStateRef = useRef<IgrGridState>(null);
58+
};
59+
const gridStateRef = useRef<IgrGridState>(null);
6660

6761
useEffect(() => {
6862
registerIconFromText("restore", restoreIcon, "material");
@@ -79,65 +73,69 @@ export default function App() {
7973
};
8074
}, []);
8175

82-
function saveGridState() {
76+
const saveGridState = () => {
8377
const state = gridStateRef.current.getStateAsString([]);
8478
window.localStorage.setItem(stateKey, state);
8579
}
8680

87-
function restoreGridState() {
81+
const restoreGridState = () => {
8882
const state = window.localStorage.getItem(stateKey);
8983
if (state) {
9084
gridStateRef.current.applyStateFromString(state, []);
9185
}
9286
}
9387

94-
function resetGridState() {
95-
paginatorRef.current.page = 0;
96-
paginatorRef.current.perPage = 15;
97-
paginatorRef.current.totalRecords = gridData.length;
98-
grid.clearFilter(null);
88+
const resetGridState = () => {
89+
setPage(0);
90+
setPerPage(15);
91+
setTotalRecords(gridData.length);
92+
93+
grid.clearFilter();
9994
grid.sortingExpressions = [];
10095
grid.groupingExpressions = [];
10196
grid.deselectAllColumns();
10297
grid.deselectAllRows();
10398
grid.clearCellSelection();
10499
}
105100

106-
function onChange(e: IgrCheckboxChangeEventArgs) {
101+
const onChange = (e: IgrCheckboxChangeEventArgs) => {
107102
const s = e.target as IgrCheckbox;
103+
108104
if (s.name === 'allFeatures') {
109-
const bEnabled = e.detail.checked;
105+
const isChecked = e.detail.checked;
106+
107+
setAllOptions(isChecked);
108+
110109
setOption({
111-
cellSelection: bEnabled,
112-
rowSelection: bEnabled,
113-
filtering: bEnabled,
114-
advancedFiltering: bEnabled,
115-
paging: bEnabled,
116-
sorting: bEnabled,
117-
groupBy: bEnabled,
118-
columns: bEnabled,
119-
expansion: bEnabled,
120-
rowPinning: bEnabled,
121-
columnSelection: bEnabled
110+
cellSelection: isChecked,
111+
rowSelection: isChecked,
112+
filtering: isChecked,
113+
advancedFiltering: isChecked,
114+
paging: isChecked,
115+
sorting: isChecked,
116+
groupBy: isChecked,
117+
columns: isChecked,
118+
expansion: isChecked,
119+
rowPinning: isChecked,
120+
columnSelection: isChecked
122121
});
123-
for (const key of Object.keys(options)) {
124-
gridStateRef.current.options[key] = bEnabled;
125-
}
126122
} else {
127-
gridStateRef.current.options[s.name] = e.detail.checked;
123+
const newOptions = { ...options };
124+
newOptions[s.name as keyof typeof newOptions] = e.detail.checked;
125+
setOption(newOptions);
128126
}
129127
}
130128

131-
function leavePage() {
129+
const leavePage = () => {
132130
saveGridState();
133131
window.location.replace("./grids/grid/state-persistence-about");
134132
}
135133

136-
function clearStorage() {
134+
const clearStorage = () => {
137135
window.localStorage.removeItem(stateKey);
138136
}
139137

140-
function reloadPage() {
138+
const reloadPage = () => {
141139
window.location.reload();
142140
}
143141

@@ -191,7 +189,7 @@ export default function App() {
191189
<IgrCheckbox name="groupBy" onChange={onChange} checked={options.groupBy}><span>Group By</span></IgrCheckbox>
192190
</div>
193191
<IgrGrid ref={gridRef} data={gridData} primaryKey="ID" width="95%" height="500px" autoGenerate={false} moving={true} allowFiltering={true}
194-
allowAdvancedFiltering={true} filterMode={FilterMode.ExcelStyleFilter} columnSelection={GridSelectionMode.Multiple} rowSelection={GridSelectionMode.Multiple}>
192+
allowAdvancedFiltering={true} filterMode="excelStyleFilter" columnSelection="multiple" rowSelection="multiple">
195193
<IgrGridState ref={gridStateRef}></IgrGridState>
196194
<IgrGridToolbar>
197195
<IgrGridToolbarActions>
@@ -202,7 +200,13 @@ export default function App() {
202200
<IgrActionStrip>
203201
<IgrGridPinningActions></IgrGridPinningActions>
204202
</IgrActionStrip>
205-
<IgrPaginator ref={paginatorRef}></IgrPaginator>
203+
<IgrPaginator
204+
page={page}
205+
perPage={perPage}
206+
totalRecords={totalRecords}
207+
onPageChange={(ev) => setPage(ev.detail)}
208+
onPerPageChange={(ev) => setPerPage(ev.detail)}>
209+
</IgrPaginator>
206210

207211
<IgrColumn field="ID" width="100px" sortable={true} filterable={true} pinned={true}></IgrColumn>
208212
<IgrColumn field="ContactName" header="Contact Name" minWidth="200px" sortable={true} filterable={true} pinned={true}></IgrColumn>

‎samples/grids/hierarchical-grid/state-persistence-about/src/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33

4-
import { ButtonVariant, IgrButton } from 'igniteui-react';
4+
import { IgrButton } from 'igniteui-react';
55
import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
66
import './index.css';
77

@@ -17,8 +17,8 @@ export default function App() {
1717
<br />
1818
<span>By default navigating to the previous page, components will reinitialize as per their initial configuration, therefore the IgrHierarchicalGrid will lose its state.</span>
1919
<br />
20-
<span>What our App Component does is reading the state from the window.localStorage object and applying the corresponding state in the `useEffect`` hook.</span><br />
21-
<IgrButton onClick={onBackClicked} variant={ButtonVariant.Contained}><span>Go Back</span></IgrButton>
20+
<span>What our App Component does is reading the state from the window.localStorage object and applying the corresponding state in the `useEffect` hook.</span><br />
21+
<IgrButton onClick={onBackClicked} variant="contained"><span>Go Back</span></IgrButton>
2222
</div>
2323
</div>
2424
</div>

0 commit comments

Comments
 (0)