Skip to content

Commit b3239c6

Browse files
didimmovadidimmova
committed
refactor(grid-lite): update grid-lite samples
1 parent 14d0050 commit b3239c6

File tree

6 files changed

+33
-95
lines changed

6 files changed

+33
-95
lines changed

‎samples/grids/grid-lite/styling-config-themes/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@
2626
"devDependencies": {
2727
"@types/jest": "^29.2.0",
2828
"@types/node": "^24.7.1",
29-
"@types/react": "^18.0.24",
29+
"@types/react": "^18.3.28",
3030
"@types/react-dom": "^18.0.8",
3131
"@vitejs/plugin-react": "^5.0.4",
3232
"@vitest/browser": "^3.2.4",
3333
"eslint": "^8.33.0",
34-
"sass": "^1.83.0",
3534
"eslint-config-react": "^1.1.7",
3635
"eslint-plugin-react": "^7.20.0",
36+
"sass": "^1.83.0",
3737
"typescript": "^4.8.4",
3838
"vite": "^7.1.9",
3939
"vitest": "^3.2.4",

‎samples/grids/grid-lite/styling-config-themes/src/GridLiteDataService.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,7 @@ export class GridLiteDataService {
3838
private priorities: ('Low' | 'Standard' | 'High')[] = ['Low', 'Standard', 'High'];
3939

4040
private randomInt(min: number, max: number): number {
41-
const array = new Uint32Array(1);
42-
window.crypto.getRandomValues(array);
43-
const random01 = array[0] / 2 ** 32;
44-
return Math.floor(random01 * (max - min + 1)) + min;
41+
return Math.floor(Math.random() * (max - min + 1)) + min;
4542
}
4643

4744
private randomFloat(min: number, max: number, precision = 2): number {

‎samples/grids/grid-lite/styling-config-themes/src/index.tsx‎

Lines changed: 28 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,29 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import { GridLiteDataService, ProductInfo } from './GridLiteDataService';
4-
5-
// Import the web component
64
import { IgcGridLite } from 'igniteui-grid-lite';
7-
import {
5+
import {
86
defineComponents,
97
IgcRatingComponent,
108
IgcSelectComponent
119
} from 'igniteui-webcomponents';
10+
import { html } from 'lit-html';
1211

1312
import "igniteui-webcomponents/themes/light/bootstrap.css";
1413
import "./index.scss";
1514

16-
// Add custom elements to JSX namespace for TypeScript
1715
declare global {
1816
namespace JSX {
1917
interface IntrinsicElements {
2018
'igc-select': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
21-
'igc-select-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
19+
'igc-select-item': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & { value?: string; selected?: boolean }, HTMLElement>;
2220
'igc-grid-lite': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
21+
'igc-grid-lite-column': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & { field?: string; header?: string; sortable?: boolean; filterable?: boolean; 'data-type'?: string; cellTemplate?: any }, HTMLElement>;
2322
'igc-rating': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
2423
}
2524
}
2625
}
2726

28-
// Register components
2927
IgcGridLite.register();
3028
defineComponents(IgcRatingComponent, IgcSelectComponent);
3129

@@ -49,63 +47,15 @@ export default class Sample extends React.Component<any, any> {
4947
componentDidMount() {
5048
if (this.gridRef.current) {
5149
const data: ProductInfo[] = this.dataService.generateProducts(50);
52-
53-
const columns = [
54-
{
55-
key: 'name',
56-
headerText: 'Product',
57-
sort: true,
58-
filter: true
59-
},
60-
{
61-
key: 'price',
62-
headerText: 'Price',
63-
sort: true,
64-
filter: true,
65-
type: 'number'
66-
},
67-
{
68-
key: 'sold',
69-
headerText: 'Sold',
70-
sort: true,
71-
filter: true,
72-
type: 'number'
73-
},
74-
{
75-
key: 'total',
76-
headerText: 'Total',
77-
sort: true,
78-
filter: true,
79-
type: 'number'
80-
},
81-
{
82-
key: 'rating',
83-
headerText: 'Rating',
84-
type: 'number',
85-
sort: true,
86-
filter: true,
87-
cellTemplate: (params: any) => {
88-
const rating = document.createElement('igc-rating');
89-
rating.setAttribute('readonly', '');
90-
rating.setAttribute('value', params.value.toString());
91-
return rating;
92-
}
93-
}
94-
];
95-
96-
this.gridRef.current.columns = columns;
9750
this.gridRef.current.data = data;
9851
}
9952

100-
// Set up theme select listener
10153
if (this.selectRef.current) {
10254
this.selectRef.current.addEventListener('igcChange', (event: any) => {
103-
const selectedValue = event.detail.value;
104-
this.changeTheme(selectedValue);
55+
this.changeTheme(event.detail.value);
10556
});
10657
}
10758

108-
// Apply initial theme
10959
this.changeTheme(this.state.currentTheme);
11060
}
11161

@@ -114,11 +64,6 @@ export default class Sample extends React.Component<any, any> {
11464
if (this.wrapperRef.current) {
11565
this.wrapperRef.current.setAttribute('data-theme', theme);
11666
}
117-
// Force grid refresh by reassigning data
118-
if (this.gridRef.current) {
119-
const currentData = this.gridRef.current.data;
120-
this.gridRef.current.data = [...currentData];
121-
}
12267
}
12368

12469
public render(): JSX.Element {
@@ -127,35 +72,32 @@ export default class Sample extends React.Component<any, any> {
12772
<div className="options">
12873
<label className="options-label">Theme:</label>
12974
<igc-select ref={this.selectRef} id="theme-select">
130-
<igc-select-item value="bootstrap-light" selected>
131-
Light Bootstrap
132-
</igc-select-item>
133-
<igc-select-item value="material-light">
134-
Light Material
135-
</igc-select-item>
136-
<igc-select-item value="fluent-light">
137-
Light Fluent
138-
</igc-select-item>
139-
<igc-select-item value="indigo-light">
140-
Light Indigo
141-
</igc-select-item>
142-
<igc-select-item value="bootstrap-dark">
143-
Dark Bootstrap
144-
</igc-select-item>
145-
<igc-select-item value="material-dark">
146-
Dark Material
147-
</igc-select-item>
148-
<igc-select-item value="fluent-dark">
149-
Dark Fluent
150-
</igc-select-item>
151-
<igc-select-item value="indigo-dark">
152-
Dark Indigo
153-
</igc-select-item>
75+
<igc-select-item value="bootstrap-light" selected>Light Bootstrap</igc-select-item>
76+
<igc-select-item value="material-light">Light Material</igc-select-item>
77+
<igc-select-item value="fluent-light">Light Fluent</igc-select-item>
78+
<igc-select-item value="indigo-light">Light Indigo</igc-select-item>
79+
<igc-select-item value="bootstrap-dark">Dark Bootstrap</igc-select-item>
80+
<igc-select-item value="material-dark">Dark Material</igc-select-item>
81+
<igc-select-item value="fluent-dark">Dark Fluent</igc-select-item>
82+
<igc-select-item value="indigo-dark">Dark Indigo</igc-select-item>
15483
</igc-select>
15584
</div>
156-
85+
15786
<div className="grid-lite-wrapper" ref={this.wrapperRef}>
158-
<igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
87+
<igc-grid-lite ref={this.gridRef} id="grid-lite">
88+
<igc-grid-lite-column field="name" header="Product" sortable filterable></igc-grid-lite-column>
89+
<igc-grid-lite-column field="price" header="Price" sortable filterable data-type="number"></igc-grid-lite-column>
90+
<igc-grid-lite-column field="sold" header="Sold" sortable filterable data-type="number"></igc-grid-lite-column>
91+
<igc-grid-lite-column field="total" header="Total" sortable filterable data-type="number"></igc-grid-lite-column>
92+
<igc-grid-lite-column
93+
field="rating"
94+
header="Rating"
95+
data-type="number"
96+
sortable
97+
filterable
98+
cellTemplate={(params: any) => html`<igc-rating readonly value=${params.value}></igc-rating>`}
99+
></igc-grid-lite-column>
100+
</igc-grid-lite>
159101
</div>
160102
</div>
161103
);

‎samples/grids/grid-lite/styling-custom-theme/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"devDependencies": {
2727
"@types/jest": "^29.2.0",
2828
"@types/node": "^24.7.1",
29-
"@types/react": "^18.0.24",
29+
"@types/react": "^18.3.28",
3030
"@types/react-dom": "^18.0.8",
3131
"@vitejs/plugin-react": "^5.0.4",
3232
"@vitest/browser": "^3.2.4",

‎samples/grids/grid-lite/styling-custom-theme/src/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use 'igniteui-theming' as *;
2-
@import 'igniteui-theming/sass/typography/presets';
2+
@use 'igniteui-theming/sass/typography/presets' as *;
33

44
$custom-light-palette: palette(
55
$primary: #ddd020,

‎samples/grids/grid-lite/styling-custom-theme/src/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import ReactDOM from "react-dom/client";
33
import { GridLiteDataService, ProductInfo } from "./GridLiteDataService";
4-
54
import { IgrSwitch, IgrRating } from "igniteui-react";
65
import {
76
IgrGridLite,

0 commit comments

Comments
 (0)